Más contenido relacionado
Similar a 夜子まま塾講義8(androidの画面デザイン2) (20)
Más de Masafumi Terazono (20)
夜子まま塾講義8(androidの画面デザイン2)
- 1. Now Loading. Please Wait ...
Twitter @yokmama
Androidの画面デザイン②
夜子まま塾 講義8(レイアウトの基本 部品編)
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日
- 2. 自己紹介
氏名 :寺園聖文(てらぞの まさふみ)
肩書 :株式会社Re:Kayo-System 代表取締役社長
活動拠点 :神戸近郊∼日本→海外行きたい
著書 :「10日でおぼえる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. タグを配置する
基本的にタグを全て手入力することは
生産性がよくありません。入力方法と
して簡単な方法が2つあるのでそれぞ
れやってみましょう。
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. レイアウトの方法は?
続きは夜子まま塾オンライン(無料)にて
毎週水曜日夜10:30∼11:00
(都合によりない場合もあります)
夜子まま塾
http://bit.ly/wTjjix
GoogleID:101190223376062765723
上記アカウントをサークルに追加していると、
ハングアウトのお誘いが届きます。
是非ご参加ください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日