Androidの画面デザイン２　部品の配置から各属性の編集まで

1. Now Loading. Please Wait ...
Twitter @yokmama
Androidの画面デザイン②
夜子まま塾 講義８（レイアウトの基本 部品編）
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のタグ
Androidのレイアウトでは利用できるタ
グがあらかじめ決まっています。
もちろん、カスタマイズタグも作ること
ができますが、基本的にはそれらを使っ
てデザインします。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

4. Buttonタグ
画面にボタンを置くことができます。
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
Form Widgetsの中にあります。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

5. TextViewタグ
画面に文字列を置くことができます。
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView" />
Form Widgetsの中にあります。
TextViewの他にLarge、Medium、
SmallもTextViewタグです。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

6. EditTextタグ
画面に入力ボックスを置くことができます。
<EditText
android:id="@+id/editText1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</EditText>
Text Filedの中にあります。
abcとか色々ありますが、それぞれ初
期入力のIMEの設定等が異なる
EditTextです。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

7. LinearLayoutタグ
ボタンやテキストなどの配置を設定できます。
<LinearLayout
android:id="@+id/linearLayout1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
</LinearLayout>
Layoutの中にあります。
これ単体ではあまり意味はなく、Buttonや
TextViewタグ等を子タグにして使います。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

8. ListViewタグ
スクロール機能付きのリスト表示が出来ます
<ListView
android:id="@+id/listView1"
android:layout_width="fill_parent"
android:layout_height="wrap_content" >
</ListView>
Compositeの中にあります。
一覧表示をしたい場合に使います。
通常データはプログラム内で設定します。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

9. ImageViewタグ
画像を表示することができます。
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
Image&Mediaの中にあります。
自動縮小したり回転したりなど画像を
自動加工することができます。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

10. タグを配置する
基本的にタグを全て手入力することは
生産性がよくありません。入力方法と
して簡単な方法が２つあるのでそれぞ
れやってみましょう。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

11. GUIを使って入力
①レイアウトファイルを開き
GraphicalLayoutでファイルを表示する。
②左のPaletteから配置したい部品を選択し
ドラッグしてから画面にドロップする。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

12. GUIエディタの注意点
• 読込が遅いので非力なパソコンでは表示に時間がかかる。
• 初期のデバイスタイプが2.7QVGAになっていて表示されない場合が
ある。この場合は一度他のデバイスタイプに変更して開くと治りま
す。
• 違う種別の同名のファイルを開くとエラーになる。最新のADTの不具
合なのか、同名のファイルを開くとエラーになるか、あるいは既にひ
らいていると言われる。一度閉じてから開くと良い。
• Paletteの表示がデフォルトでShowPreviewになっている。この表示
はわかりにくいので、Palette上で右クリックしメニューから
ShowIconAndText等にすると良い
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

13. 直接XMLを編集
XMLの編集画面で挿入したい
箇所にカーソルを移動 <L のように入力していくと、入力
補完が働くのでダイアログから選択
選択するとタグが自動で入力される
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

14. 直接入力の注意点
• タグ名をある程度覚えておく必要がある
• D&Dで追加した場合と異なりデフォルトで入力される属性がないの
で、そのあたりは自分で入力していく必要がある。
• タグ名だけでなく属性名も補完できる。
• 属性名の場合、属性に使える値も入力補完できる。
• 間違った属性の値、間違ったタグの使い方をしているとエラーが表示
される。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

15. 入力エラーの場合
このように入力に誤りがあるとエ
ラーあるいは警告がでる。
カーソルをあわせると原因の説明がみれる。
この場合は使えない単位を使っているためエ
ラーになっている。
また、警告はプログラム上無視できるものも
あるので必ずしも修正しなくてはいけないと
いうわけではないです。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

16. 実際に使ってみよう
ButtonやCheckBox等を実際にレイアウトエ
ディタを使って配置し、それぞれどのような属
性があるのかチェックしてみてください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

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