【第4回】デザイナーがコードから読み解く、androidアプリのデザインの幅を広げるコツとtips...
DESCRIPTION
レイアウト編 - よく使うレイアウト -TRANSCRIPT
ハッシュタグ
##aaaaddeessiiggnnssデザイナーが
コードから読み解く、
AAnnddrrooiiddアプリの
デザインの幅を広げるコツと
TTiippss
第44回：レイアウト編@@GGMMOO YYoouurrss
22001122..1100..2255
ハッシュタグ
##aaaaddeessiiggnnss
0
10
20
30
40
50
60
70
Web アプリ
デザイン 開発
aassaammiieeeeee77 ttoommmmmmmmyy aaddaammrroocckkeerr
ハッシュタグ
##aaaaddeessiiggnnss
がんばって作ったデザインが、
実装後に残念な結果にならないために
ハッシュタグ
##aaaaddeessiiggnnss
秋葉ちひろ
•･ @@ttoommmmmmmmyy•･ デザイナー／アートディレクター•･ WWeebb系・アプリ系•･ BBaaiidduuでSSiimmeejjiiの開発のフロントエンドの一部
http://y-anz-m.blogspot.jp/2012/10/androidseekbar.html
レイアウト編
今日のアジェンダ
11.. よく使うレイアウト
22.. 単位と余白
33.. PPSSやFFWWでデザイン案を作るときの33箇条
デザイナー向�け
レイアウト入�門
11.. よく使うレイアウト
レイアウト編
wwrraapp__ccoonntteenntt
ffiillll__ppaarreenntt//mmaattcchh__ppaarreenntt
4488ddpp
インライン要素っぽい
ブロック要素っぽい
android:layout_width="fill_parent"
android:layout_height="wrap_content"
TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww
<TextView /> <TextView /> <TextView /> <TextView />
<ImageView /><ImageView />
<TextView />
LLiinneeaarrLLaayyoouutt
11.. よく使うレイアウト
TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww
<TextView /> <TextView /> <TextView /> <TextView />
<ImageView /><ImageView />
<TextView />
TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww
<TextView /> <TextView /> <TextView /> <TextView />
<ImageView /><ImageView />
<TextView />
<LinearLayout>
</LinearLayout>
<TextView /> <TextView /> <TextView /> <TextView />
<ImageView /><ImageView />
<TextView />
<LinearLayout>
</LinearLayout>
IImmaaggeeVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww
たてにならべー！
<TextView /> <TextView /> <TextView /> <TextView />
<ImageView /><ImageView />
<TextView />
<LinearLayout>
</LinearLayout>
IImmaaggeeVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
TTeexxttVViieeww
IImmaaggeeVViieeww
TTeexxttVViieeww
よこにならべー！
<TextView /> <TextView /> <TextView /> <TextView />
<ImageView /><ImageView />
<TextView />
<LinearLayout>
</LinearLayout>
IImmaaggeeVViieewwTTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww IImmaaggeeVViieeww
よこにならべー！
（入�り切らない）
imgname id time
text
imgname id time
text
よこにならべー！
imgname id time
text
よこにならべー！ たてにならべー！
imgname id time
text
よこにならべー！ たてにならべー！
よこにならべー！
<LinearLayout>
</LinearLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
<LinearLayout></LinearLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
<LinearLayout>
</LinearLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
<LinearLayout>
</LinearLayout>
<TextView />
<LinearLayout>
</LinearLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
<LinearLayout>
</LinearLayout>
<TextView />
<LinearLayout>
<TextView /><TextView /><TextView />
</LinearLayout>
LLiinneeaarrLLaayyoouuttの難点!
構造が複雑で、階層が深い
↓
数が多いと、重い原因となる
name id time
よこにならべー！
name id time
よこにならべー！
android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content"
actionbarたてにならべー！
android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="0dp"
toolbar
OKcancel
よこにならべー！
android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content"
11 11
OKcancel
よこにならべー！
layout_weight11 22
LLiinneeaarrLLaayyoouuttの得意なこと
•･ 等分割や、割合を指定した分割が得意•･ 使わないスペースを最大限に伸ばすことが得意
RReellaattiivveeLLaayyoouutt
11.. よく使うレイアウト
imgname id time
text
imgname id time
text
ぼく親だよー
imgname id time
text
ぼく親だよー ぼく親の右どなりAAのだよー
imgname id time
text
ぼく親だよー ぼく親の右どなりAAのだよー
ぼくAAの右どなりのBBだよー
imgname id time
text
ぼく親だよー
ぼくAAの下でAAと左端が同じなCCだよー
ぼく親の右どなりAAのだよー
ぼくAAの右どなりのBBだよー
imgname id time
text
ぼく親だよー
ぼくCCの上でCCと右端が同じなDDだよー
ぼく親の右どなりAAのだよー
ぼくAAの右どなりのBBだよー
ぼくAAの下でAAと左端が同じなCCだよー
ぼくCCの上でCCと右端が同じなDDだよー
ぼく親だよー
ぼく親の右どなりAAのだよー
ぼくAAの下でAAと左端が同じなCCだよー
ぼくAAの右どなりのBBだよー
android:id="@+id/Oya"
android:layout_toRightOf="@id/Oya"
android:layout_toRightOf="@id/A"
android:layout_below="@id/A"android:layout_alignLeft="@id/A"
android:layout_above="@id/C"android:layout_alignRight="@id/C"
imgname id time
text
RReellaattiivveeLLaayyoouutt
imgname id
RReellaattiivveeLLaayyoouutt
<ImageView />
<TextView /> <TextView /> <TextView /> <TextView />
<RelativeLayout>
</RelativeLayout>
<ImageView />
<LinearLayout>
</LinearLayout>
<LinearLayout>
</LinearLayout>
<TextView />
<LinearLayout>
<TextView /><TextView /><TextView />
</LinearLayout>
RReellaattiivveeLLaayyoouuttの得意なこと
•･ LLiinneeaarrLLaayyoouuttだと階層が深くなってしまうところを、軽々と11階層で表現できる！
FFrraammeeLLaayyoouutt
11.. よく使うレイアウト
重ねるときに使おう
IImmaaggeeVViieeww
TTeexxttVViieeww
android:layout_width="fill_parent"
android:layout_height="fill_parent"
sshhaappee
ssttaarrttCCoolloorr ##88000000
eennddCCoolloorr ##00000000
<ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" ></ScrollView>
<ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" >
</ScrollView>
要素はひとつだけ
<HorizontalScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" ></HorizontalScrollView>
22.. 単位と余白
レイアウト編
AAnnddrrooiiddアプリの
レイアウトで使う単位
ddpp ssppDDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
ddppについて
22.. 単位と余白
332200ppxx
448800ppxx
448800ppxx
880000ppxx
224400ddppii 11..55116600ddppii 11
332200ppxx
448800ppxx
448800ppxx
880000ppxx
224400ddppii 11..55116600ddppii 11
332200ddpp 332200ddpp
hhddppii
224400ddppii
xxhhddppii
332200ddppii
11..55 22
11..55ppxx
11ddpp
22ppxx
11ddpp
mmddppii
116600ddppii
11
11ppxx
11ddpp
hhddppii
224400ddppii
xxhhddppii
332200ddppii
11..55 22
11..55ppxx
11ddpp
22ppxx
11ddpp
ssppについて
22.. 単位と余白
http://y-anz-m.blogspot.jp/2012/02/androidtextview-settextsize-sp.html
22
11..77
22..00
22..3322..66
hhddppii
224400ddppii
xxhhddppii
332200ddppii
11..55 22
11..55ppxx
11sspp
22ppxx
11sspp
mmddppii
116600ddppii
11
11ppxx
11sspp
hhddppii
224400ddppii
xxhhddppii
332200ddppii
11..55 22
11..55ppxx
11sspp
22ppxx
11sspp
2222sspp
1188sspp
1144sspp
ddpp//ssppを意識すること
ddpp ssppDDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss
http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
重要なのは…�
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/design/style/typography.html
実際にどう作るか
考えてみる
22.. 単位と余白
http://developer.android.com/design/style/metrics-grids.html
http://developer.android.com/design/style/metrics-grids.html
332200ddpp
553333ddpp
336600ddpp
664400ddpp
11..55ppxx11ddpp
hhddppii
22ppxx11ddpp
xxhhddppii
http://developer.android.com/design/downloads/index.html
336600ppxx
xxhhddppii4488ddpp
4488ddpp
336600ddpp772200ppxx
9966ppxx
xxhhddppii
1122ddpp
1122ddpp
1122ddpp1166ddpp
88ddpp
3322ppxx
2244ppxx
1166ppxx
xxhhddppii
1122sspp
1188sspp
1144sspp
2244ppxx
3322ppxx
2288ppxx
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginLeft="16dp"
android:layout_marginRight="16dp"
android:paddingTop="12dp"
android:paddingBottom="12dp"> <ImageView android:layout_width="48dp" android:layout_height="48dp"
android:layout_marginRight="12dp" android:src="@drawable/photo" android:id="@+id/photoarea" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textSize="18sp" android:textColor="#fff" android:layout_toRightOf="@id/photoarea" android:text="Adamrocker" android:id="@+id/titlearea" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content"
android:textSize="14sp" android:textColor="#bbbbbb" android:layout_below="@id/titlearea" android:layout_alignLeft="@id/titlearea" android:text="Simeji5.3だぽーん。録音とかできるの？ マジ？てかAAパネェ！" /></RelativeLayout>
PPhhoottoosshhoopp GGaallaaxxyy NNeexxuuss で実装
GGaallaaxxyy NNeexxuuss で実装 HHTTCC DDeessiirree で実装
336600ddpp 332200ddpp
PPSSやFFWWでデザインを作る
ときの33箇条
レイアウト編：まとめ
サイズは（ほぼ）22種類！ddppやssppを意識する
伸縮できるところを意識する
1.
332200ddpp
553333ddpp
336600ddpp
664400ddpp
11..55ppxx11ddpp
hhddppii
22ppxx11ddpp
xxhhddppii
xxhhddppiiの余白は44の倍数の
ddppだとベスト！hhddppiiになっても整数になる
2.
hhddppii
224400ddppii
xxhhddppii
332200ddppii
11..55 22
11..55 22： ＝ xxddppiiの余白：
xxhhddppiiの余白
11..55 22： ＝ ：xxhhddppiiの余白
＝ xxhhddppiiの余白 ×
22
11..55
44
33
xxddppiiの余白
xxddppiiの余白
44の倍数
作ったあとは、実機で確認
（要ものさし）何mmmmになるのかを実際にチェック
3.
http://code.google.com/p/android-ui-utils/
AAnnddrrooiidd DDeessiiggnn PPrreevviieeww
デザイナーにも広めたい
と思ってはじめた勉強会
GGoooodd LLuucckk!!
ありがとうございました！
•･ @@ttoommmmmmmmyy•･ ffaacceebbooookk :: 秋葉ちひろ•･ 次回は1111//88（木）総集編@@GGooooggllee
hhttttpp::////ggoooo..ggll//iiLLBBppoo