Androidのlayout.xmlを学ぶ

14年3月27日木曜日

その2layout.xmlのファイルを見る

14年3月27日木曜日

ViewGroupとViewを組み合わせて

ViewGroup

Button

TextView

ListView

ImageView＋

14年3月27日木曜日

Layoutを作る

Button

TextView

ListView

ImageView

14年3月27日木曜日

LinearLayout

• 最もよくお世話になる

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

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

• 階層が深くなりやすい

• 重くなる原因になるかも

14年3月27日木曜日

LinearLayout

View View View

横並びモード

14年3月27日木曜日

これを実際のlayout.xmlで見ると…14年3月27日木曜日

14年3月27日木曜日

LinearLayout

View

View

View

縦並びモード

14年3月27日木曜日

14年3月27日木曜日

14年3月27日木曜日

GUIで簡単に設定できる

14年3月27日木曜日

LinearLayout

• 最もよくお世話になる

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

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

• 階層が深くなりやすい

• 重くなる原因になるかも

14年3月27日木曜日

LinearLayout+layout_weight

均等割付

14年3月27日木曜日

layout_weight

余っている領域を指定した割合で分け合う

14年3月27日木曜日

ボタンの均等割付１：１：１

14年3月27日木曜日

14年3月27日木曜日

横画面にしても、解像度がかわっても大丈夫

14年3月27日木曜日

ボタンの均等割付１：2：１

14年3月27日木曜日

14年3月27日木曜日

FrameLayout

• けっこうお世話になる

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

14年3月27日木曜日

View

FrameLayout

View

画像の上に文字を乗せたりできる

14年3月27日木曜日

14年3月27日木曜日

14年3月27日木曜日

RelativeLayout

• 最強のレイアウト

• たまにお世話になる

• 相対的に配置する

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

14年3月27日木曜日

RelativeLayout

View1

View2 View4

View3

View1の右隣

View2の下

View3の上で右端

View一番右下

14年3月27日木曜日

前ページのレイアウトはめんどくさかったのでこんな感じで許してください

14年3月27日木曜日

14年3月27日木曜日

RelativeLayoutを使いすぎるとなぜメンテしにくくなるか

14年3月27日木曜日

例えば以下のようなレイアウトheader

footer

main

14年3月27日木曜日

LinearLayoutで作ると

14年3月27日木曜日

14年3月27日木曜日

上から順にheader,main,footerときれいな階層構造で見やすい

14年3月27日木曜日

RelativeLayoutで作ると

14年3月27日木曜日

RelativeLayoutで作ると

14年3月27日木曜日

14年3月27日木曜日

何も問題ない？

14年3月27日木曜日

android-apt-compiler: [Sample] /Users/masahide/src/Sample/res/layout/main.xml:11: error: Error: No resource found that matches the given name (at

'layout_above' with value '@id/footer').

エラーが出ます

footerのidが見つからないと申しております

14年3月27日木曜日

footerのidがまだ定義されていない14年3月27日木曜日

じゃあどうするか？

14年3月27日木曜日

footerのレイアウトを上に持っていけば解決

14年3月27日木曜日

それと同時にレイアウト崩壊の始まり

14年3月27日木曜日

14年3月27日木曜日

footerがmainの上にあって気持ち悪い

14年3月27日木曜日

さらにViewを追加することを考えてみる

14年3月27日木曜日

headerの下にviewを追加してみる

14年3月27日木曜日

LinearLayoutの場合

14年3月27日木曜日

headerとmainの間に差し込むだけで良い

14年3月27日木曜日

RelativeLayoutの場合

14年3月27日木曜日

headerと被ってダメ

14年3月27日木曜日

各Viewとの関係性も調整しないといけない

14年3月27日木曜日

• 現在mainはheaderの下、footerの上にある

• 新たに追加するheader2はheaderの下、mainの上に来るようにする

• するとmainの位置がおかしくなるから、mainはheader2の下、footerの上に来るように調整する

こんな風に考えないといけない

14年3月27日木曜日

14年3月27日木曜日

メンテナンスが大変もっと関係性が複雑になると死ねる

14年3月27日木曜日

RelativeLayoutは便利だけど使い所が難しい

14年3月27日木曜日

• LinearLayoutとFrameLayoutで実現できない場合

• 階層が深くなりすぎる場合

• RelativeLayout使う場合でもViewの構造は上から順を保つ

個人的にRelativeLayoutを使う所

14年3月27日木曜日

今日のまとめ• LinearLayoutとlayout_weightは超便利

• Viewの構造は綺麗に保つ(基本上から順になるように)のが良い

• メンテナンス性を意識する

• RelativeLayoutは難しい

14年3月27日木曜日

次回予告

• Layoutのマルチデバイス対応とか?

• そろそろHello Worldしてみるとか？

14年3月27日木曜日

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

14年3月27日木曜日