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

1. Now Loading. Please Wait ...
Twitter @yokmama
Androidの画面デザイン①
夜子まま塾 講義７（レイアウトの基本 XML編）
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

2. 自己紹介
氏名 ：寺園聖文（てらぞの まさふみ）
肩書 ：株式会社Re:Kayo-System 代表取締役社長
活動拠点 ：神戸近郊∼日本→海外行きたい
著書 ：「１０日でおぼえるAndroidアプリ開発入門教室」著（翔泳社）
「HTML5によるAndroidアプリ開発入門」監修（日経BP）
アプリ ：「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等
好きなもの：アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環
嫌いなもの：とくになし
最近のテーマ：電子工作、運動すること、英語
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

3. 画面デザイン
Androidの画面デザインはWebデザインに似
ています。
記述する言語はHTMLではなくXMLです。
XMLはHTMLに非常に似ているのでWebデザ
インをしたことがある人には分かりやすいとお
もいます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

4. ハローワールドをもう一度
自動生成されたHelloWorldの
レイアウトXMLファイル
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

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. レイアウトエディタ
レイアウトXMLファイルは、レイアウ
トエディタを使うと実際に表示される
画面を確認しながら編集できます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

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. 画像ファイル
画像ファイルは各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. DPIとは
DPIはdot per inchの略
1インチを何個の点の集まりとして表現するかを意味
する値。もともとプリンターやスキャナーの性能を表す
際に使用されている単位です。
１インチ 例）73dpiの場合一辺に72個の
ピクセルがあります。
１
イ
ン
チ
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

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. 国際化対応
文字列は各言語毎に準備することができます。
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. XMLに慣れる
Androidのリソースファイルは画像や音な
どといったリソースを除いてすべてXML
ファイルで定義します。
あまり馴染みがないので難しく感じるかも
しれませんが、XMLはそれほど難しいも
のではありません。まずは準備運動程度に
XMLを使ってみましょう。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

13. XMLとは
拡張可能なマーク付け言語
eXtensible Markup Language
の略です。
SGML
元祖
XML
HTML データの形式としての
Webサイト 標準的な位置付け
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

14. XMLの書き方
親方、空から女の子が降ってきた！
<名詞>親方</名詞>
<副詞>空から</副詞>
<主語>女の子が</主語>
<述語>降ってきた！</述語>
このようにデータ（文字列）にマーキングをして意味を持たせ
ることができる言語をマークアップ言語といいます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

15. 開始タグと終了タグ
主語というタグ
終わりを終了タグとも言う
<名詞>親方</名詞> ＜/タグ名＞で囲む
<副詞>空から</副詞>
<主語>女の子が</主語>
<述語>降ってきた！</述語>
主語というタグ
はじまりを開始タグとも言う
＜タグ名＞で囲む
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

16. 親タグと子タグ
<タグ名１＞ タグ２の親タグ
<タグ名2> タグ名１
<タグ名３> タグ１の子タグ
</タグ名３> タグ名2
</タグ名2> タグ２の子タグ
＜／タグ名1> タグ名3
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

17. 属性とテキストノード
<タグ１ name= ほげ >
ふが タグには属性を設定できる。
属性名= 値
</タグ１> この例ではnameという属性名に
ほげ という値を設定している。
開始タグと終了タグの間には子タグのほかに、
文字列をおくことができる。これはテキストノードとよばれる。
しかし、テキストノードには使えない文字（禁則文字）がある。
たとえば ＜ や ＞等、これらはXMLのタグ名と混同してしまうからです。
&lt; や &gt; などのようなエスケープ文字に置き換える必要があります。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

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. 実際に編集してみよう
Ctrl+Shift+Rでリソースダイアログを
開き main.xmlと入力してください。
TextViewの部分をコピーしてペーストしてみよう
ペースト
ペーストしたらどんな画面になるのか確認。
その他にも属性の値を変えてみてください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

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. レイアウトの方法は？
続きは夜子まま塾オンライン（無料）にて
毎週水曜日夜１０：３０∼１１：００
（都合によりない場合もあります）
夜子まま塾
http://bit.ly/wTjjix
GoogleID:101190223376062765723
上記アカウントをサークルに追加していると、
ハングアウトのお誘いが届きます。
是非ご参加ください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日