夜子まま塾講義8（androidの画面デザイン２）

Re:Kayo-System Co.,Ltd.

Twitter @yokmamaNow Loading. Please Wait ...

Androidの画面デザイン②夜子まま塾　講義８（レイアウトの基本　部品編）

2012年2月29日水曜日


自己紹介氏名　　　：寺園聖文（てらぞの　まさふみ）

肩書　　　：株式会社Re:Kayo-System　代表取締役社長

活動拠点　：神戸近郊～日本→海外行きたい

著書　　　：「１０日でおぼえるAndroidアプリ開発入門教室」著（翔泳社）

　　　　　　「HTML5によるAndroidアプリ開発入門」監修（日経BP）

アプリ　　：「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等

好きなもの：アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環

嫌いなもの：とくになし

最近のテーマ：電子工作、運動すること、英語



Androidのタグ

Androidのレイアウトでは利用できるタグがあらかじめ決まっています。

もちろん、カスタマイズタグも作ることができますが、基本的にはそれらを使っ

てデザインします。



Buttonタグ画面にボタンを置くことができます。

<Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />

Form Widgetsの中にあります。



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タグです。

画面に文字列を置くことができます。



EditTextタグ

<EditText android:id="@+id/editText1" android:layout_width="fill_parent" android:layout_height="wrap_content" ></EditText>

Text Filedの中にあります。abcとか色々ありますが、それぞれ初期入力のIMEの設定等が異なる

EditTextです。

画面に入力ボックスを置くことができます。



LinearLayoutタグボタンやテキストなどの配置を設定できます。

Layoutの中にあります。これ単体ではあまり意味はなく、ButtonやTextViewタグ等を子タグにして使います。

<LinearLayout android:id="@+id/linearLayout1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" ></LinearLayout>



ListViewタグ

<ListView android:id="@+id/listView1" android:layout_width="fill_parent" android:layout_height="wrap_content" ></ListView>

スクロール機能付きのリスト表示が出来ます

Compositeの中にあります。一覧表示をしたい場合に使います。

通常データはプログラム内で設定します。2012年2月29日水曜日


ImageViewタグ

<ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_launcher" />

画像を表示することができます。

Image&Mediaの中にあります。自動縮小したり回転したりなど画像を自動加工することができます。



タグを配置する

基本的にタグを全て手入力することは生産性がよくありません。入力方法として簡単な方法が２つあるのでそれぞ

れやってみましょう。



GUIを使って入力①レイアウトファイルを開きGraphicalLayoutでファイルを表示する。

②左のPaletteから配置したい部品を選択しドラッグしてから画面にドロップする。



GUIエディタの注意点• 読込が遅いので非力なパソコンでは表示に時間がかかる。

• 初期のデバイスタイプが2.7QVGAになっていて表示されない場合がある。この場合は一度他のデバイスタイプに変更して開くと治ります。

• 違う種別の同名のファイルを開くとエラーになる。最新のADTの不具合なのか、同名のファイルを開くとエラーになるか、あるいは既にひらいていると言われる。一度閉じてから開くと良い。

• Paletteの表示がデフォルトでShowPreviewになっている。この表示はわかりにくいので、Palette上で右クリックしメニューからShowIconAndText等にすると良い



直接XMLを編集

XMLの編集画面で挿入したい箇所にカーソルを移動 <L のように入力していくと、入力

補完が働くのでダイアログから選択

選択するとタグが自動で入力される



直接入力の注意点• タグ名をある程度覚えておく必要がある

• D&Dで追加した場合と異なりデフォルトで入力される属性がないので、そのあたりは自分で入力していく必要がある。

• タグ名だけでなく属性名も補完できる。

• 属性名の場合、属性に使える値も入力補完できる。

• 間違った属性の値、間違ったタグの使い方をしているとエラーが表示される。



入力エラーの場合このように入力に誤りがあるとエラーあるいは警告がでる。

カーソルをあわせると原因の説明がみれる。この場合は使えない単位を使っているためエ

ラーになっている。また、警告はプログラム上無視できるものもあるので必ずしも修正しなくてはいけないと

いうわけではないです。



実際に使ってみようButtonやCheckBox等を実際にレイアウトエディタを使って配置し、それぞれどのような属性があるのかチェックしてみてください。



レイアウトの方法は？続きは夜子まま塾オンライン（無料）にて毎週水曜日夜１０：３０～１１：００（都合によりない場合もあります）

http://bit.ly/wTjjixGoogleID:101190223376062765723

夜子まま塾

上記アカウントをサークルに追加していると、ハングアウトのお誘いが届きます。

是非ご参加ください。


http://bit.ly/wTjjix

http://bit.ly/wTjjix

夜子まま塾講義8（androidの画面デザイン２）

Documents