Download - Androidのlayout.xmlについて
![Page 1: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/1.jpg)
Androidのlayout.xmlを学ぶ
14年3月27日木曜日
![Page 2: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/2.jpg)
その1layout作りの雰囲気をつかむ
14年3月27日木曜日
![Page 3: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/3.jpg)
っていうかこの前からコイツデザインやらdbという単位やらについて話して
今回はレイアウト?全くプログラムの話しないじゃん
14年3月27日木曜日
![Page 4: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/4.jpg)
そう思われたならごめんなさいしかし、侮る無かれレイアウト
無茶振りレイアウトの依頼があれば工数のほとんどはレイアウトの作成に持っていかれます
14年3月27日木曜日
![Page 5: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/5.jpg)
実際によくあるやりとり
この機能追加どれぐらいでできる?
デザインによります
デザインによります
14年3月27日木曜日
![Page 6: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/6.jpg)
というわけでlayout.xmlの話をします
14年3月27日木曜日
![Page 7: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/7.jpg)
layout.xmlとは?
xmlファイルで定義されviewを組み合わせて作るAndroidの見た目を定義するためのものそれはもうあらゆるものに適用されます
14年3月27日木曜日
![Page 8: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/8.jpg)
layout.xmlの作り方
• IDEのlayout.xml編集機能で作る(GUI)
• 普通にxmlを書く
• そもそもlayout.xmlを作らず、ソースコードで書く
14年3月27日木曜日
![Page 9: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/9.jpg)
• Activity(画面みたいなもの)
• Fragment(Activityに紐づけるサブの画面みたいな)
• Dialog
• ListViewのrow
• Toast
layout.xmlが使われる場面例
14年3月27日木曜日
![Page 10: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/10.jpg)
layout.xmlが作れるだけでアプリが完成した気分になれます
14年3月27日木曜日
![Page 11: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/11.jpg)
• ViewGroup
• View
Viewは大きく分けて二種類
14年3月27日木曜日
![Page 12: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/12.jpg)
ViewGroup
• 複数のViewを含むことができる
• 複数のViewGroupを含むことができる
14年3月27日木曜日
![Page 13: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/13.jpg)
View
• 具体的なUIパーツ
• 子ビューを持つことができない
14年3月27日木曜日
![Page 14: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/14.jpg)
代表的なViewGroup
• LinearLayout
• FrameLayout
• RelativeLayout
• TableLayout
• GridLayout
14年3月27日木曜日
![Page 15: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/15.jpg)
代表的なView
• TextView
• ImageView
• WebView
• EditText
• ListView
• GridView14年3月27日木曜日
![Page 16: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/16.jpg)
代表的なView
• RadioButton
• CheckBox
• Button
• ProgressBar
• RatingBar
• ToggleButton14年3月27日木曜日
![Page 17: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/17.jpg)
ViewGroupとViewを組み合わせて
ViewGroup
Button
TextView
ListView
ImageView+
14年3月27日木曜日
![Page 18: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/18.jpg)
Layoutを作る
Button
TextView
ListView
ImageView
14年3月27日木曜日
![Page 19: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/19.jpg)
めっちゃ良く使うViewGroupとその特徴
14年3月27日木曜日
![Page 20: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/20.jpg)
LinearLayout
• 最もよくお世話になる
• 縦or横にViewを並べることができる
• 等分割や割合を指定した分割が得意
• 階層が深くなりやすい
14年3月27日木曜日
![Page 21: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/21.jpg)
LinearLayout
View View View
横並びモード
14年3月27日木曜日
![Page 22: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/22.jpg)
LinearLayout
View
View
View
縦並びモード
14年3月27日木曜日
![Page 23: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/23.jpg)
突然ですがここで問題
14年3月27日木曜日
![Page 24: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/24.jpg)
View
View View
View
View
こんな感じのレイアウトはどうするでしょう?
14年3月27日木曜日
![Page 25: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/25.jpg)
アプリでよく出てくる形
14年3月27日木曜日
![Page 26: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/26.jpg)
View
View View
View
View
横並び縦並び
横並び
横並びLinearLayoutの中に縦並びのLinearLayoutを入れ
さらにその中に横並びのLinearLayoutを入れる
14年3月27日木曜日
![Page 27: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/27.jpg)
実はViewGroupもViewの一種なので中にViewGroupを入れられる
14年3月27日木曜日
![Page 28: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/28.jpg)
FrameLayout
• けっこうお世話になる
• Viewを重ねることができる
14年3月27日木曜日
![Page 29: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/29.jpg)
ViewView
画像の上に文字やボタンを乗せたりできる
FrameLayout
14年3月27日木曜日
![Page 30: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/30.jpg)
RelativeLayout
• 最強のレイアウト
• たまにお世話になる
• 相対的な位置関係を指定してViewを配置できる
• 無闇に使うとLayoutの構造が見えにくくなり、メンテしにくい
14年3月27日木曜日
![Page 31: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/31.jpg)
RelativeLayout
View1
View2 View4
View3
View1の右隣
View2の下
View3の上で右端
View5一番右下
14年3月27日木曜日
![Page 32: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/32.jpg)
LinearLayoutでは数階層になっていたものが1階層で実現できる
14年3月27日木曜日
![Page 33: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/33.jpg)
まさしく最強!
14年3月27日木曜日
![Page 34: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/34.jpg)
RelativeLayoutの多様でどのように困るかはまた次のお話
14年3月27日木曜日
![Page 35: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/35.jpg)
次回予告
• 実際にxmlで見るレイアウト
• layoutのマルチデバイス対応
14年3月27日木曜日
![Page 36: Androidのlayout.xmlについて](https://reader034.vdocuments.pub/reader034/viewer/2022050808/558e2bb81a28ab2c048b470d/html5/thumbnails/36.jpg)
ご清聴ありがとうございました
14年3月27日木曜日