Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

夜子まま塾講義7(androidの画面デザイン1)

1,679 views

Published on

Androidの画面デザイン パート1
デザインのあらましから、XMLの編集までを解説

Published in: Technology
  • Be the first to comment

  • Be the first to like this

夜子まま塾講義7(androidの画面デザイン1)

  1. 1. Now Loading. Please Wait ... Twitter @yokmama Androidの画面デザイン① 夜子まま塾 講義7(レイアウトの基本 XML編) Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  2. 2. 自己紹介 氏名   :寺園聖文(てらぞの まさふみ) 肩書   :株式会社Re:Kayo-System 代表取締役社長 活動拠点 :神戸近郊∼日本→海外行きたい 著書   :「10日でおぼえるAndroidアプリ開発入門教室」著(翔泳社)       「HTML5によるAndroidアプリ開発入門」監修(日経BP) アプリ  :「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等 好きなもの:アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環 嫌いなもの:とくになし 最近のテーマ:電子工作、運動すること、英語 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  3. 3. 画面デザイン Androidの画面デザインはWebデザインに似 ています。 記述する言語はHTMLではなくXMLです。 XMLはHTMLに非常に似ているのでWebデザ インをしたことがある人には分かりやすいとお もいます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  4. 4. ハローワールドをもう一度 自動生成されたHelloWorldの レイアウトXMLファイル Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  5. 5. レイアウトXMLファイル レイアウトXMLファイルは部品の配置情報を記述し たファイルです。XMLで記述します。 ファイルは  res/layout-<種別> の下に置く必要があります。 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  6. 6. レイアウトエディタ レイアウトXMLファイルは、レイアウ トエディタを使うと実際に表示される 画面を確認しながら編集できます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  7. 7. タグを使って配置する <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/ android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> TextViewタグ 画面に文字を表示する Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  8. 8. 画像ファイル 画像ファイルは各DPI毎に準備する ことができます。ファイルは drawable-<種別> の下におく必要があります。 フォルダ名 意味 drawable 推奨されない。これを使うならnodpiを使うべき drawable-ldpi 低DPIの画像を格納 drawable-mdpi 中DPIの画像を格納 drawable-hdpi 高DPIの画像を格納 drawable-nodpi DPIに依存しない画像を格納 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  9. 9. DPIとは DPIはdot per inchの略 1インチを何個の点の集まりとして表現するかを意味 する値。もともとプリンターやスキャナーの性能を表す 際に使用されている単位です。 1インチ 例)73dpiの場合一辺に72個の ピクセルがあります。 1 イ ン チ Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  10. 10. 文字列ファイル 文字列ファイルは文字列を定義する ファイルです。 ファイルは values-<種別> の下におく必要があります。 <?xml version="1.0" encoding="utf-8"?> <resources> <string name="hello">Hello World, HelloWorldActivity!</string> <string name="app_name">HelloWorld</string> </resources> Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  11. 11. 国際化対応 文字列は各言語毎に準備することができます。 values-<言語コード>-r<地域コード> 言語コード:ISO 639-1(半角英字2文字) 地域コード:ISO 3166-1-alpha-2(半角英字2文字) values-en-rUS, values-fr-rFR, values-es-rES, values-ja-rJPなど。 あるいは、values-en, values-fr, values-es, values-jaなど。 指定がない場合はvaluesの下のリソースがデフォルトとなります。 例) res/values-ja/strings.xml ←日本語の文字列 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  12. 12. XMLに慣れる Androidのリソースファイルは画像や音な どといったリソースを除いてすべてXML ファイルで定義します。 あまり馴染みがないので難しく感じるかも しれませんが、XMLはそれほど難しいも のではありません。まずは準備運動程度に XMLを使ってみましょう。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  13. 13. XMLとは 拡張可能なマーク付け言語 eXtensible Markup Language の略です。 SGML 元祖 XML HTML データの形式としての Webサイト 標準的な位置付け Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  14. 14. XMLの書き方 親方、空から女の子が降ってきた! <名詞>親方</名詞> <副詞>空から</副詞> <主語>女の子が</主語> <述語>降ってきた!</述語> このようにデータ(文字列)にマーキングをして意味を持たせ ることができる言語をマークアップ言語といいます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  15. 15. 開始タグと終了タグ 主語というタグ 終わりを終了タグとも言う <名詞>親方</名詞> </タグ名>で囲む <副詞>空から</副詞> <主語>女の子が</主語> <述語>降ってきた!</述語> 主語というタグ はじまりを開始タグとも言う <タグ名>で囲む Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  16. 16. 親タグと子タグ <タグ名1> タグ2の親タグ <タグ名2> タグ名1 <タグ名3> タグ1の子タグ </タグ名3> タグ名2 </タグ名2> タグ2の子タグ </タグ名1> タグ名3 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  17. 17. 属性とテキストノード <タグ1 name= ほげ > ふが タグには属性を設定できる。 属性名= 値 </タグ1> この例ではnameという属性名に ほげ という値を設定している。 開始タグと終了タグの間には子タグのほかに、 文字列をおくことができる。これはテキストノードとよばれる。 しかし、テキストノードには使えない文字(禁則文字)がある。 たとえば < や >等、これらはXMLのタグ名と混同してしまうからです。 &lt; や &gt; などのようなエスケープ文字に置き換える必要があります。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  18. 18. 実際のXML XMLの宣言行です。 文字コードや準拠するXMLのバージョ <?xml version="1.0" encoding="utf-8"?> ンを記述します。 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_width属性に android:orientation="vertical" > fill_parentという値を設定しています <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> TextViewというタグです。 色々な属性が設定されていますが、子タグはありません。 子タグやテキストノードがない場合は、このようにはタグの一番最後に / を付けることで終了タグを省略できます。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  19. 19. 実際に編集してみよう Ctrl+Shift+Rでリソースダイアログを 開き main.xmlと入力してください。 TextViewの部分をコピーしてペーストしてみよう ペースト ペーストしたらどんな画面になるのか確認。 その他にも属性の値を変えてみてください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  20. 20. 中級者向け プログラムからXMLを使う インポートするプロジェクト:Ykmjuku004 このサンプルはXMLを読込み、一部のタグの情報を抜き 出して画面に表示しています。 sample.xml <poem> 実行画面 <pno>8</pno> <mkana>熟田津尓 船乗世武登 月待者 潮毛可奈比沼 今者許藝乞菜</mkana> <poet>額田王(ぬかたのおおきみ)</poet> <yomi> 熟田津(にきたつ)に、船(ふな)乗りせむと、月待てば、潮もかなひぬ、今は漕(こ)ぎ出(い)でな </yomi> <image>image/m0008.jpg</image> <mean>熟田津(にきたつ)で、船を出そうと月を待っていると、いよいよ潮の流れも良くなってきた。 さあ、いまこそ船出するのです。 </mean> </poem> サンプルは 「『たのしいXML』サンプルファイル集」http://www.sotechsha.co.jp/xml/ からダウンロードしました。 http://bit.ly/xlw9wR Re:Kayo-System Co.,Ltd.2012年2月29日水曜日
  21. 21. レイアウトの方法は? 続きは夜子まま塾オンライン(無料)にて 毎週水曜日夜10:30∼11:00 (都合によりない場合もあります) 夜子まま塾 http://bit.ly/wTjjix GoogleID:101190223376062765723 上記アカウントをサークルに追加していると、 ハングアウトのお誘いが届きます。 是非ご参加ください。 Re:Kayo-System Co.,Ltd.2012年2月29日水曜日

×