Androidの画面デザイン３　レイアウトタグの使い方から各レイアウト調整用のタグまで解説

1. Now Loading. Please Wait ...
Twitter @yokmama
Androidの画面デザイン③
夜子まま塾 講義９（レイアウトの基本 レイアウト編）
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

2. 自己紹介
氏名 ：寺園聖文（てらぞの まさふみ）
肩書 ：株式会社Re:Kayo-System 代表取締役社長
活動拠点 ：神戸近郊∼日本→海外行きたい
著書 ：「１０日でおぼえるAndroidアプリ開発入門教室」著（翔泳社）
「HTML5によるAndroidアプリ開発入門」監修（日経BP）
アプリ ：「JUST PLAYER」「Skip Memo」「ふりがなオートマチック」等
好きなもの：アニメ、決して萌えじゃない、見てるけど、あくまで研究の一環
嫌いなもの：とくになし
最近のテーマ：電子工作、運動すること、英語
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

3. レイアウトタグ
画面デザインをする際、それぞれのボタンや
テキスト等の位置を決定するためにはレイア
ウトを使う必要があります。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

4. レイアウトの必要性
隙間を少し開けたい
Button
このように画面にボタンを置く場
合、
Button Buttonを画面の中心に置くのか？
それとも右上におくのか？
隙間はどれぐらい？といったこと
を設定する必要がある。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

5. マルチデバイス対応
部品の配置について考える場合。もっとも重
要なのはちゃんと意図した通りに表示される
ことです。
Android端末は複数のデバイスタイプが存在
するためそれは容易なことではありません。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

6. 固定の配置だと
70ピクセル
70ピクセル
50ピクセル
50ピクセル Button
Button
左から５０ピクセル
上から７０ピクセルでちょうど真ん中に 真ん中ではなくなる
なった。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

7. 例えば中心の場合
Button
どれに対して中心にするのか？
画面全体なのか、左上の領域な
Button のか？
ということを決めるだけでよい
はず。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

8. レイアウトを使う
LinearLayoutの android:gravity属性に
center を設定すると、LinearLayoutの子タグ
（ここではButton）が中心に配置される。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

9. レイアウトタグとは
このようにレイアウトタグは、
内包する子タグの配置を設定す
るためのタグです。
レイアウトタグには５つの種類
があり、それぞれを駆使して画
面デザインを行います。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

10. LinearLayoutタグ
リニアレイアウト タグは縦または横に内包す
るタグを並べます。また他に右寄せ、左寄
せ、中央といった配置指定ができます。
top ←上
<?xml version="1.0" encoding="utf-8"?>
bottom ←下
<LinearLayout xmlns:android="http://
schemas.android.com/apk/res/android" left ←左
android:layout_width="fill_parent" right ←右
android:layout_height="fill_parent"
android:gravity="center" 等
android:orientation="vertical" >
</LinearLayout>
vertical:縦
horizontal:横
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

11. <
LinearLayout具体例
<LinearLayout
<LinearLayout
android:layout_width="fill_parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_height="fill_parent"
android:gravity="center"
android:orientation="vertical" >
android:orientation="vertical" >
<LinearLayout
<LinearLayout
android:layout_width="fill_parent"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_height="fill_parent"
android:gravity="right"
android:orientation="horizontal" >
android:orientation="vertical" >
Re:Kayo-System Co.,Ltd.
<LinearLayout
2012年2月29日水曜日
android:layout_width="fill_parent"

12. RelatveLayoutタグ
レラティブレイアウト タグはレラティブレイ
アウトとの相対関係、あるいは子タグ同士の
相対関係をもって位置を設定できます。
<RelativeLayout
android:id="@+id/relativeLayout1" このように内包する子タグをどう
android:layout_width="fill_parent" する、ではなくタグそれぞれに相
android:layout_height="fill_parent" >
<Button
対設定を設定する。
android:id="@+id/button1" この例では親である
android:layout_width="wrap_content"
RelativeLayoutの中心に表示する
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="Button" />
</RelativeLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

13. RelativeLayoutの具体例
使用例
<Button android:layout_centerInParent=”true” ←中心
android:id="@+id/button3"
android:layout_width="wrap_content" android:layout_toLeftOf=”他のID” ←左上
android:layout_height="wrap_content" android:layout_above=”他のID”
android:layout_above="@+id/button2"
android:layout_alignLeft="@+id/button2" android:layout_above=”他のID” ←上
android:text="Button" />
android:layout_alignLeft=”他のID”
android:layout_above=”他のID” ←右上
<Button android:layout_toRightOf=”他のID”
android:id="@+id/button2"
android:layout_width="wrap_content" android:layout_toLeftOf=”他のID” ←左
android:layout_height="wrap_content"
android:layout_alignTop=”他のID”
android:layout_alignBottom="@+id/button1"
android:layout_toRightOf="@+id/button1"
android:layout_toRightOf=”他のID” ←右
android:text="Button" />
android:layout_alignTop=”他のID”
android:layout_below=”他のID” ←左下
<Button
android:layout_toLeftOf=”他のID”
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_below=”他のID” ←下
android:layout_height="wrap_content"
android:layout_below="@+id/button1" android:layout_alignLeft=”他のID”
android:layout_toLeftOf="@+id/button1"
android:text="Button" /> android:layout_below=”他のID” ←右下
android:layout_toRightOf=”他のID”
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

14. LinearLayoutと
RelativLayoutの使い分け
横 縦
横
LineaLayout RelativeLayout
横と縦を複数組み合わせるようなレイアウトは
RelativeLayoutのほうが構成がシンプルになる
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

15. Tablelayoutタグ
テーブルレイアウト タグは表のように部品を
配置することができるレイアウトです。
<TableLayout
android:id="@+id/tableLayout1"
android:layout_width="wrap_content"
android:layout_height="fill_parent" >
<TableRow
android:id="@+id/tableRow1"
左並びにしたい部品をTableRowに
android:layout_width="wrap_content"
にいれることで表のレイアウトに
android:layout_height="wrap_content" >
<Button することができます。
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</TableRow>
</TableLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

16. TableLayoutの具体例
２つのカラムを使う カラムの位置を指定
<TableRow <TableRow
android:id="@+id/tableRow2" android:id="@+id/tableRow3"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" > android:layout_height="wrap_content" >
<Button <Button
android:id="@+id/button4" android:id="@+id/button6"
android:layout_width="wrap_content" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_height="wrap_content"
android:text="Button" /> android:layout_column="1"
android:text="Button" />
<Button
android:id="@+id/button5" <Button
android:layout_width="wrap_content" android:id="@+id/button7"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_span="2" android:layout_height="wrap_content"
android:text="Button" /> android:text="Button" />
</TableRow> </TableRow>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

17. FrameLayoutタグ
フレームレイアウト タグは部品を重ねあわせ
ることができるレイアウトです。
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<Button
android:id="@+id/button1"
この２つの部品は左上のを起点
android:layout_width="wrap_content"
android:layout_height="wrap_content"
に重ねて並べられる
android:text="Button" />
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</FrameLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

18. FrameLayoutの具体例
上から順に重ねていくため後に定義され
た部品が上にきます。
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<ImageView
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/aaa" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="Button" />
</FrameLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

19. GridLayoutタグ
GridLayoutはTableLayoutと似ていますが
TableRowを必要としない上、縦の結合が
できるレイアウトです。
<GridLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3" >
<Button 直接、行（row)と列（column）
android:id="@+id/button1"
android:layout_column="0" を指定します。
android:layout_row="0"
android:text="Button" />
<Button
android:id="@+id/button2"
android:layout_column="1"
android:layout_row="0" 注）AndroidSDK4.0から利用で
android:text="Button" />
</GridLayout> きるレイアウトです
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

20. GridLayoutの具体例
<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:columnCount="4"
横方向に４つで折り返す
android:orientation="horizontal" >
<Button
android:layout_width="50dip"
android:layout_column="3"
先頭から３番目の位置を指定
android:text="/" />
<Button
android:layout_width="50dip" 幅を指定しないと文字列の幅に影
android:text="1" />
＜省略＞ 響されるので固定値をいれること
<Button
android:layout_gravity="fill"
android:layout_rowSpan="3"
でそれ以降の幅をリードする。
android:text="+" />
<Button
android:layout_columnSpan="2"
android:layout_gravity="fill" 縦を３つ消費する
android:text="0" />
<Button
android:layout_gravity="fill"
android:text="00" /> 横を２つ消費する
<Button
android:layout_columnSpan="3"
android:layout_gravity="fill"
android:text="=" />
</GridLayout>
マス一杯まで高さ幅を設定する。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

21. よく使う属性
下記の属性はレイアウトの際に
よく使う属性です。
•android:id
•android:layout_width、android:layout_height
•android:layout_weight
•android:gravity、android:layout_gravity
•android:layout_marginとandroid:padding
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

22. android:id
<IDの値>/<IDの名前>
android:idはタグにIDを設定する属性です。IDをを設
定することで、他のタグから指定したり、プログラム
からタグのインスタンスを取得する際に使います。
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
＠+idは自動で採番するという意味です。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

23. idの参照例
RelativeLayoutから Javaプログラムからの
の使用例 使用例
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" Button button1 = (Button)findViewById(R.id.button1);
android:layout_centerInParent="true"
android:text="Button" />
<Button R.idはリソースのIDの名前を指
android:id="@+id/button2"
android:layout_width="wrap_content" している。
android:layout_height="wrap_content"
android:layout_alignBottom="@+id/button1" これはbutton1のインスタンス
android:layout_toRightOf="@+id/button1"
android:text="Button" /> を取得するという意味
@+id/button1を指している。
これはbutton1の右下に配置す
るという意味
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

24. android:layout_width
android: layout_height
layout_width,layout_heightはそれぞれ幅、高さを指
定する属性です。
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="Button" />
wrap_content ←必要な大きさを自動計算する
mach_parent←使用できる大きさを全て使う
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

25. wrap_contentと
match_parent
wrap_content
あいうえお 余白があっても、文字の大きさ
に合わせた大きさになる。
match_parent
あいうえお 余白を全て使った大きさになる
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

26. 使用できる単位
幅や高さに直接値を指定する場合は次のど
れかの単位を使わなければなりません。
•dp(dip: density-independent pixel)
解像度に依存しないように単位ピクセルと解像度から単位辺りのピクセル算
出した単位。
例）hdpiの場合 240/160 = 1.5px = 1dp
•sp(scaled pixel)
解像度に依存しない文字の大きさを指定する際に使用する単位
•px(pixel)
ピクセル数。解像度に左右されレイアウトが崩れるおそれがあるのであまり
使用するべきではないです。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

27. android:layout_weight
layout_weight属性は余白の使い方を指
定する属性です。
<Button
android:id="@+id/button1"
android:layout_weight="1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<Button buttn1とbuttn2で余白を１：１
android:id="@+id/button2"
android:layout_weight="1" の割合で分け合う
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

28. 余白指定のポイント
layout_weight属性は余白を分配する仕組みになっています。
ここで失敗しやすいのは、幅を自動的に領域にあわせて計算する仕
組みではないので少し工夫をしないといけない点です。
上段 <Button
android:layout_width="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="ABCDEFGHIJ" />
<Button
android:layout_width="wrap_content"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="ABC" />
下段 <Button
android:layout_width="0dip"
android:layout_height="wrap_content"
android:layout_weight="1"
１：１なのに android:text="ABCDEFGHIJ" /> わざと幅を０にして、余
<Button
均等ではない android:layout_width="0dip" 白を全幅にしている。
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="ABC" />
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

29. android:gravityと
android:layout_gravity
gravity、layout_gravityは領域に対してどこ
に配置するのかを指定する属性です。
•top •clip_vertical
top •bottom •clip_horizontal
•left •start
•right •end
•center_vertical
•fill_vertical
left center right •center_horizontal
•fill_horizontal
•center
•fill 複数指定する場合は ¦ を使います。
bottom 例）left¦center_vertical
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

30. android:gravityは内包する
部品に対して設定する
android:gravityは部品を内包できるタグに設定できる属性です。
例えばレイアウトタグ等、ただし例外としてTextViewにも設定でき
る。TextViewの場合中身のTextの文字列に対して指定される。
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical" >
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content" 内包するbutton1,button2
android:text="Button" />
<Button が中心に配置される。
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

31. android:layout_gravityは親のタグの
領域において自分の位置を指定する
親のタグの領域に対して位置を指定するため、もともとwrap_contentsのよう
な値で最少の大きさが設定されている場合は効果がないので注意してください。
上段 下段
<LinearLayout <LinearLayout
android:layout_width="wrap_content" android:layout_width="match_parent"
android:layout_height="wrap_content"> android:layout_height="match_parent">
<Button <Button
android:layout_gravity="right" android:layout_gravity="right"
android:text="Button1" /> android:text="Button3" />
<Button <Button
android:layout_gravity="right" android:layout_gravity="right"
android:text="Button2" /> android:text="Button4" />
</LinearLayout> </LinearLayout>
親の領域が広いのでlayout_gravity
の効果がでている。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

32. android:layout_marginと
android:padding
layout_marginとpaddingは隙
間を設定する属性です。
Text Text
margin属性によって余白を作る padding属性によって内側に余白を作る
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

33. margin属性
margin属性は全方向に設定したり、１方
向にだけ設定することができます。
上段
<Button
android:id="@+id/button1"
android:layout_margin="10dip" •android:layout_margin
android:layout_width="wrap_content"
android:layout_height="wrap_content"
•android:layout_marginTop
android:text="Button" /> •android:layout_marginBottom
下段 •android:layout_marginLeft
<Button •android:layout_marginRight
android:id="@+id/button2"
android:layout_marginLeft="20dip"
•android:layout_marginStart
android:layout_width="wrap_content" •android:layout_marginEnd
android:layout_height="wrap_content"
android:text="Button" />
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

34. padding属性
paddingは自身の中の部品あるいは文字
列などとの距離を設定する属性です。
上段
<Button
android:id="@+id/button1"
android:padding="50dip"
•android:padding
android:layout_width="wrap_content"
android:layout_height="wrap_content" •android:paddingTop
android:text="Button" />
•android:paddingBottom
下段 •android:paddingLeft
<LinearLayout
android:id="@+id/linearLayout1"
•android:paddingRight
android:paddingLeft="50dip"
android:layout_width="match_parent"
•android:paddingStart
android:layout_height="wrap_content" >
<Button •android:paddingEnd
android:id="@+id/button4"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

35. marginとpaddingの違い
marginは自身と他の部品あるいは親との距離を設
定する属性であるため、内包するべき親に依存して
います。
一方paddingはそれ自身に設定するため親は不要で
すが、背景や外観のある部品は形状が変形するので
注意が必要です。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

36. marginとpaddingの
使用例
上段
<TextView
android:id="@+id/textView1"
android:background="@drawable/round_shape"
android:textColor="@android:color/black"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="TextView" />
全体にマージンを設定することで、
下段
<TextView ボタン同士の間隔を広げた
android:id="@+id/textView2"
android:background="@drawable/round_shape"
android:textColor="@android:color/black"
android:paddingLeft="10dip"
android:paddingRight="10dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dip"
android:text="TextView" />
左と右にpaddingに設定することで
背景とテキストの間に余白を作った。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

37. 実際に使ってみる
ここまでで紹介したレイアウトタグや、各
設定属性を実際に使ってみてください。
ここまで紹介したレイアウトのサンプルは
Ykmjuku005でみることができます。
http://bit.ly/w1dJr1
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

38. 中級者向け
電卓アプリ（再）
以前作成した電卓アプリを改造し、
もっと立派な電卓に仕上げてみましょう。
電卓（再）のサンプルは
ykmjuku006でみることができます。
http://bit.ly/wrjJxv
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日

39. イベント処理は？
続きは夜子まま塾オンライン（無料）にて
毎週水曜日夜１０：３０∼１１：００
（都合によりない場合もあります）
夜子まま塾
http://bit.ly/wTjjix
GoogleID:101190223376062765723
上記アカウントをサークルに追加していると、
ハングアウトのお誘いが届きます。
是非ご参加ください。
Re:Kayo-System Co.,Ltd.
2012年2月29日水曜日