Androidのlayout.xmlを学ぶ

14年3月27日木曜日

その１layout作りの雰囲気をつかむ

14年3月27日木曜日

っていうかこの前からコイツデザインやらdbという単位やらについて話して

今回はレイアウト？全くプログラムの話しないじゃん

14年3月27日木曜日

そう思われたならごめんなさいしかし、侮る無かれレイアウト

無茶振りレイアウトの依頼があれば工数のほとんどはレイアウトの作成に持っていかれます

14年3月27日木曜日

実際によくあるやりとり

この機能追加どれぐらいでできる？

デザインによります

デザインによります

14年3月27日木曜日

というわけでlayout.xmlの話をします

14年3月27日木曜日

layout.xmlとは？

xmlファイルで定義されviewを組み合わせて作るAndroidの見た目を定義するためのものそれはもうあらゆるものに適用されます

14年3月27日木曜日

layout.xmlの作り方

• IDEのlayout.xml編集機能で作る(GUI)

• 普通にxmlを書く

• そもそもlayout.xmlを作らず、ソースコードで書く

14年3月27日木曜日

• Activity(画面みたいなもの)

• Fragment(Activityに紐づけるサブの画面みたいな)

• Dialog

• ListViewのrow

• Toast

layout.xmlが使われる場面例

14年3月27日木曜日

layout.xmlが作れるだけでアプリが完成した気分になれます

14年3月27日木曜日

• ViewGroup

• View

Viewは大きく分けて二種類

14年3月27日木曜日

ViewGroup

• 複数のViewを含むことができる

• 複数のViewGroupを含むことができる

14年3月27日木曜日

View

• 具体的なUIパーツ

• 子ビューを持つことができない

14年3月27日木曜日

代表的なViewGroup

• LinearLayout

• FrameLayout

• RelativeLayout

• TableLayout

• GridLayout

14年3月27日木曜日

代表的なView

• TextView

• ImageView

• WebView

• EditText

• ListView

• GridView14年3月27日木曜日

代表的なView

• RadioButton

• CheckBox

• Button

• ProgressBar

• RatingBar

• ToggleButton14年3月27日木曜日

ViewGroupとViewを組み合わせて

ViewGroup

Button

TextView

ListView

ImageView＋

14年3月27日木曜日

Layoutを作る

Button

TextView

ListView

ImageView

14年3月27日木曜日

めっちゃ良く使うViewGroupとその特徴

14年3月27日木曜日

LinearLayout

• 最もよくお世話になる

• 縦or横にViewを並べることができる

• 等分割や割合を指定した分割が得意

• 階層が深くなりやすい

14年3月27日木曜日

LinearLayout

View View View

横並びモード

14年3月27日木曜日

LinearLayout

View

View

View

縦並びモード

14年3月27日木曜日

突然ですがここで問題

14年3月27日木曜日

View

View View

View

View

こんな感じのレイアウトはどうするでしょう？

14年3月27日木曜日

アプリでよく出てくる形

14年3月27日木曜日

View

View View

View

View

横並び縦並び

横並び

横並びLinearLayoutの中に縦並びのLinearLayoutを入れ

さらにその中に横並びのLinearLayoutを入れる

14年3月27日木曜日

実はViewGroupもViewの一種なので中にViewGroupを入れられる

14年3月27日木曜日

FrameLayout

• けっこうお世話になる

• Viewを重ねることができる

14年3月27日木曜日

ViewView

画像の上に文字やボタンを乗せたりできる

FrameLayout

14年3月27日木曜日

RelativeLayout

• 最強のレイアウト

• たまにお世話になる

• 相対的な位置関係を指定してViewを配置できる

• 無闇に使うとLayoutの構造が見えにくくなり、メンテしにくい

14年3月27日木曜日

RelativeLayout

View1

View2 View4

View3

View1の右隣

View2の下

View3の上で右端

View5一番右下

14年3月27日木曜日

LinearLayoutでは数階層になっていたものが１階層で実現できる

14年3月27日木曜日

まさしく最強！

14年3月27日木曜日

RelativeLayoutの多様でどのように困るかはまた次のお話

14年3月27日木曜日

次回予告

• 実際にxmlで見るレイアウト

• layoutのマルチデバイス対応

14年3月27日木曜日

ご清聴ありがとうございました

14年3月27日木曜日