夜子まま塾講義9（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」「ふりがなオートマチック」等

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

嫌いなもの：とくになし

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



レイアウトタグ

画面デザインをする際、それぞれのボタンやテキスト等の位置を決定するためにはレイア

ウトを使う必要があります。



レイアウトの必要性

Button

このように画面にボタンを置く場合、

Buttonを画面の中心に置くのか？それとも右上におくのか？

隙間はどれぐらい？といったことを設定する必要がある。

Button隙間を少し開けたい



マルチデバイス対応

部品の配置について考える場合。もっとも重要なのはちゃんと意図した通りに表示される

ことです。Android端末は複数のデバイスタイプが存在するためそれは容易なことではありません。



固定の配置だと

Button

左から５０ピクセル上から７０ピクセルでちょうど真ん中に

なった。

70ピクセル

50ピクセル Button

70ピクセル

50ピクセル

真ん中ではなくなる



例えば中心の場合

Button

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>

LinearLayoutの android:gravity属性に　center を設定すると、LinearLayoutの子タグ（ここではButton）が中心に配置される。



レイアウトタグとはこのようにレイアウトタグは、内包する子タグの配置を設定す

るためのタグです。レイアウトタグには５つの種類があり、それぞれを駆使して画面デザインを行います。



LinearLayoutタグ”リニアレイアウト”タグは縦または横に内包するタグを並べます。また他に右寄せ、左寄せ、中央といった配置指定ができます。

<?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" ></LinearLayout>

vertical:縦horizontal:横

top　　←上bottom ←下left 　　←左right　　←右等



LinearLayout具体例<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="horizontal" >

<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="right" android:orientation="vertical" >

<LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:gravity="center" android:orientation="vertical" >





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" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button" /></RelativeLayout>

このように内包する子タグをどうする、ではなくタグそれぞれに相

対設定を設定する。この例では親である

RelativeLayoutの中心に表示する



RelativeLayoutの具体例

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

<Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/button2" android:layout_alignLeft="@+id/button2" android:text="Button" />

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

android:layout_centerInParent=”true”　←中心

android:layout_toLeftOf=”他のID”　←左上android:layout_above=”他のID”

android:layout_above=”他のID”　←上android:layout_alignLeft=”他のID”

android:layout_above=”他のID”　←右上android:layout_toRightOf=”他のID”

android:layout_toLeftOf=”他のID”　←左android:layout_alignTop=”他のID”

android:layout_toRightOf=”他のID”　←右android:layout_alignTop=”他のID”

android:layout_below=”他のID”　←左下android:layout_toLeftOf=”他のID”

android:layout_below=”他のID”　←下android:layout_alignLeft=”他のID”

android:layout_below=”他のID”　←右下android:layout_toRightOf=”他のID”

使用例



LinearLayoutとRelativLayoutの使い分け

横縦

LineaLayout RelativeLayout横と縦を複数組み合わせるようなレイアウトはRelativeLayoutのほうが構成がシンプルになる

横



Tablelayoutタグ”テーブルレイアウト”タグは表のように部品を配置することができるレイアウトです。

左並びにしたい部品をTableRowににいれることで表のレイアウトに

することができます。

<TableLayout android:id="@+id/tableLayout1" android:layout_width="wrap_content" android:layout_height="fill_parent" > <TableRow android:id="@+id/tableRow1" 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>



TableLayoutの具体例

<TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" >

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

<Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_span="2" android:text="Button" />

</TableRow>

<TableRow android:id="@+id/tableRow3" android:layout_width="wrap_content" android:layout_height="wrap_content" >

<Button android:id="@+id/button6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_column="1" android:text="Button" />


</TableRow>

２つのカラムを使うカラムの位置を指定



FrameLayoutタグ”フレームレイアウト”タグは部品を重ねあわせ

ることができるレイアウトです。<FrameLayout 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/ic_launcher" />

</FrameLayout>

この２つの部品は左上のを起点に重ねて並べられる



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>

上から順に重ねていくため後に定義された部品が上にきます。



GridLayoutタグGridLayoutはTableLayoutと似ていますがTableRowを必要としない上、縦の結合が

できるレイアウトです。

注）AndroidSDK4.0から利用できるレイアウトです

<GridLayout android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="3" >

<Button 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" android:text="Button" /></GridLayout>

直接、行（row)と列（column）を指定します。



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>

横方向に４つで折り返す

先頭から３番目の位置を指定

マス一杯まで高さ幅を設定する。

幅を指定しないと文字列の幅に影響されるので固定値をいれることでそれ以降の幅をリードする。

縦を３つ消費する

横を２つ消費する



よく使う属性

•android:id•android:layout_width、android:layout_height•android:layout_weight•android:gravity、android:layout_gravity•android:layout_marginとandroid:padding

下記の属性はレイアウトの際によく使う属性です。



android:idandroid:idはタグにIDを設定する属性です。IDをを設定することで、他のタグから指定したり、プログラムからタグのインスタンスを取得する際に使います。


<IDの値>/<IDの名前>

＠+idは自動で採番するという意味です。



idの参照例

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

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

RelativeLayoutからの使用例

@+id/button1を指している。これはbutton1の右下に配置す

るという意味

Button button1 = (Button)findViewById(R.id.button1);

Javaプログラムからの使用例

R.idはリソースのIDの名前を指している。

これはbutton1のインスタンスを取得するという意味



android:layout_widthandroid: 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←使用できる大きさを全て使う



wrap_contentとmatch_parent

あいうえお

wrap_content

あいうえお

match_parent

余白があっても、文字の大きさに合わせた大きさになる。

余白を全て使った大きさになる



使用できる単位幅や高さに直接値を指定する場合は次のどれかの単位を使わなければなりません。

•dp(dip: density-independent pixel)解像度に依存しないように単位ピクセルと解像度から単位辺りのピクセル算出した単位。例）hdpiの場合 240/160 = 1.5px = 1dp•sp(scaled pixel)解像度に依存しない文字の大きさを指定する際に使用する単位•px(pixel)ピクセル数。解像度に左右されレイアウトが崩れるおそれがあるのであまり使用するべきではないです。



android:layout_weightlayout_weight属性は余白の使い方を指

定する属性です。

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

buttn1とbuttn2で余白を１：１の割合で分け合う



余白指定のポイント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" />

下段

わざと幅を０にして、余白を全幅にしている。

１：１なのに均等ではない



android:gravityとandroid:layout_gravitygravity、layout_gravityは領域に対してどこに配置するのかを指定する属性です。

top

bottom

center rightleft

•top•bottom•left•right•center_vertical•fill_vertical•center_horizontal•fill_horizontal•center•fill

•clip_vertical•clip_horizontal•start•end

複数指定する場合は | を使います。例）left|center_vertical



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" android:text="Button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /></LinearLayout>

内包するbutton1,button2が中心に配置される。



android:layout_gravityは親のタグの領域において自分の位置を指定する

親のタグの領域に対して位置を指定するため、もともとwrap_contentsのような値で最少の大きさが設定されている場合は効果がないので注意してください。

<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <Button android:layout_gravity="right" android:text="Button1" /> <Button android:layout_gravity="right" android:text="Button2" /></LinearLayout>

上段<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent"> <Button android:layout_gravity="right" android:text="Button3" /> <Button android:layout_gravity="right" android:text="Button4" /></LinearLayout>

下段

親の領域が広いのでlayout_gravityの効果がでている。



android:layout_marginとandroid:padding

layout_marginとpaddingは隙間を設定する属性です。

Text

margin属性によって余白を作る padding属性によって内側に余白を作る

Text



margin属性margin属性は全方向に設定したり、１方向にだけ設定することができます。

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

<Button android:id="@+id/button2" android:layout_marginLeft="20dip" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" />

上段

下段

•android:layout_margin•android:layout_marginTop•android:layout_marginBottom•android:layout_marginLeft•android:layout_marginRight•android:layout_marginStart•android:layout_marginEnd



padding属性

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

<LinearLayout android:id="@+id/linearLayout1" android:paddingLeft="50dip" android:layout_width="match_parent" android:layout_height="wrap_content" > <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" /> </LinearLayout>

上段

下段

•android:padding•android:paddingTop•android:paddingBottom•android:paddingLeft•android:paddingRight•android:paddingStart•android:paddingEnd

paddingは自身の中の部品あるいは文字列などとの距離を設定する属性です。



marginとpaddingの違いmarginは自身と他の部品あるいは親との距離を設定する属性であるため、内包するべき親に依存して

います。一方paddingはそれ自身に設定するため親は不要ですが、背景や外観のある部品は形状が変形するので

注意が必要です。



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に設定することで背景とテキストの間に余白を作った。

全体にマージンを設定することで、ボタン同士の間隔を広げた



実際に使ってみるここまでで紹介したレイアウトタグや、各設定属性を実際に使ってみてください。

http://bit.ly/w1dJr1

ここまで紹介したレイアウトのサンプルはYkmjuku005でみることができます。





中級者向け電卓アプリ（再）

以前作成した電卓アプリを改造し、もっと立派な電卓に仕上げてみましょう。

電卓（再）のサンプルはykmjuku006でみることができます。

http://bit.ly/wrjJxv





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

http://bit.ly/wTjjixGoogleID:101190223376062765723

夜子まま塾

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

是非ご参加ください。


http://bit.ly/wTjjix

http://bit.ly/wTjjix

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

Technology