Downloaded 121 times
![[ABC2012S]Android2x/3x/4x対応アプリ開発Tips](https://cdn.slidesharecdn.com/ss_thumbnails/abc2012sandroid234kanbara-120324082804-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
- 1. ハッシュタグ デザイナーが ##aaaaddeessiiggnnss コードから読み解く、 AAnnddrrooiiddアプリの デザインの幅を広げるコツと TTiippss 第44回：レイアウト編 @@GGMMOO YYoouurrss 22001122..1100..2255
- 2. ハッシュタグ ##aaaaddeessiiggnnss デザイン 開発 70 60 50 40 30 20 10 0 Web アプリ
- 3. ハッシュタグ ##aaaaddeessiiggnnss aassaammiieeeeee77 ttoommmmmmmmyy aaddaammrroocckkeerr
- 4. ハッシュタグ ##aaaaddeessiiggnnss がんばって作ったデザインが、 実装後に残念な結果にならないために
- 5. 秋葉ちひろ •･ @@ttoommmmmmmmyy •･ デザイナー／アートディレクター •･WWeebb系・アプリ系 •･ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
- 7.
- 8. 今日のアジェンダ レイアウト編 11.. よく使うレイアウト 22.. 単位と余白 33..PPSSやFFWWでデザイン案を作るとき の33箇条
- 9.
- 10.
- 11. wwrraapp__ccoonntteenntt インライン要素っぽい ffiillll__ppaarreenntt//mmaattcchh__ppaarreenntt ブロック要素っぽい 4488ddpp
- 12.
- 13.
- 14. <TextView /> <TextView /> TTeexxttVViieeww <TextView /> <TextView /> IImmaaggeeVViieeww <ImageView /> <ImageView /> <TextView /> TTeexxttVViieeww
- 15.
- 16. <TextView /> <TextView /> TTeexxttVViieeww <TextView /> <TextView /> IImmaaggeeVViieeww <ImageView /> <ImageView /> <TextView /> TTeexxttVViieeww
- 17. <LinearLayout> <TextView /> <TextView /> TTeexxttVViieeww <TextView /> <TextView /> IImmaaggeeVViieeww <ImageView /> <ImageView /> <TextView /> TTeexxttVViieeww </LinearLayout>
- 18. <LinearLayout> たてにならべー！ <TextView /> TTeexxttVViieeww <TextView /> TTeexxttVViieeww <TextView /> <TextView /> TTeexxttVViieeww TTeexxttVViieeww <ImageView /> IImmaaggeeVViieeww <ImageView /> IImmaaggeeVViieeww TTeexxttVViieeww <TextView /> </LinearLayout>
- 19. <LinearLayout> よこにならべー！ <TextView /> TTeexxttVViieeww <TextView /> TTeexxttVViieeww <TextView /> <TextView /> TTeexxttVViieeww TTeexxttVViieeww <ImageView /> IImmaaggeeVViieeww <ImageView /> IImmaaggeeVViieeww TTeexxttVViieeww <TextView /> </LinearLayout>
- 20. <LinearLayout> よこにならべー！ <TextView /> <TextView /> <TextView /> <TextView /> TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww IImmaaggeeVViieeww <ImageView /> （入�り切らない） <ImageView /> <TextView /> </LinearLayout>
- 22. name id time img text
- 23. よこにならべー！ name id time img text
- 24. よこにならべー！ たてにならべー！ name id time img text
- 25. よこにならべー！ たてにならべー！ name id time img text よこにならべー！
- 26.
- 27. <LinearLayout> <ImageView /> <LinearLayout> </LinearLayout> </LinearLayout>
- 28. <LinearLayout> <ImageView /> <LinearLayout> </LinearLayout> </LinearLayout>
- 29. <LinearLayout> <ImageView /> <LinearLayout> <LinearLayout> </LinearLayout> <TextView /> </LinearLayout> </LinearLayout>
- 30. <LinearLayout> <ImageView /> <LinearLayout> <LinearLayout> <TextView /> <TextView /> <TextView /> </LinearLayout> <TextView /> </LinearLayout> </LinearLayout>
- 31. ! LLiinneeaarrLLaayyoouuttの 難点 構造が複雑で、階層が深い ↓ 数が多いと、重い原因となる
- 32. よこにならべー！ name id time
- 33. よこにならべー！ name id time android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content"
- 34. たてにならべー！ actionbar toolbar android:layout_weight="1" android:layout_width="fill_parent" android:layout_height="0dp"
- 35. よこにならべー！ cancel OK 11 11 android:layout_weight="1" android:layout_width="0dp" android:layout_height="wrap_content"
- 36. よこにならべー！ cancel OK 11 layout_weight 22
- 37. LLiinneeaarrLLaayyoouuttの 得意なこと •･ 等分割や、割合を指定した分割が得意 •･ 使わないスペースを最大限に伸ばすこ とが得意
- 38.
- 39. name id time img text
- 40. ぼく親だよー name id time img text
- 41. ぼく親だよー ぼく親の右どなりAAのだよー name id time img text
- 42. ぼく親だよー ぼく親の右どなりAAのだよー ぼくAAの右どなりのBBだよー name id time img text
- 43. ぼく親だよー ぼく親の右どなりAAのだよー ぼくAAの右どなりのBBだよー name id time img text ぼくAAの下でAAと左端が同じなCCだよー
- 44. ぼく親だよー ぼく親の右どなりAAのだよー ぼくAAの右どなりのBBだよー name id time img text ぼくAAの下でAAと左端が同じなCCだよー ぼくCCの上でCCと右端が同じなDDだよー
- 45. ぼく親だよー android:id="@+id/Oya" ぼく親の右どなりAAのだよー android:layout_toRightOf="@id/ Oya" ぼくAAの右どなりのBBだよー android:layout_toRightOf="@id/A" ぼくAAの下でAAと左端が同じなCCだよー android:layout_below="@id/A" android:layout_alignLeft="@id/A" ぼくCCの上でCCと右端が同じなDDだよー android:layout_above="@id/C" android:layout_alignRight="@id/C"
- 46. RReellaattiivveeLLaayyoouutt name id time img text
- 47. <RelativeLayout> RReellaattiivveeLLaayyoouutt <ImageView /> name id <TextView /> img <TextView /> <TextView /> <TextView /> </RelativeLayout>
- 48. <LinearLayout> <ImageView /> <LinearLayout> <LinearLayout> <TextView /> <TextView /> <TextView /> </LinearLayout> <TextView /> </LinearLayout> </LinearLayout>
- 49. RReellaattiivveeLLaayyoouuttの 得意なこと •･ LLiinneeaarrLLaayyoouuttだと階層が深くなって しまうところを、軽々と11階層で表現 できる！
- 50. 11.. よく使うレイアウト FFrraammeeLLaayyoouutt 重ねるときに使おう
- 55. TTeexxttVViieeww sshhaappee IImmaaggeeVViieeww android:layout_width= "fill_parent" android:layout_height= "fill_parent"
- 56. ssttaarrttCCoolloorr ##88000000 eennddCCoolloorr ##00000000
- 58. <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" > </ScrollView>
- 59. <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" > 要素はひとつだけ </ScrollView>
- 60. <HorizontalScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" > </HorizontalScrollView>
- 61.
- 62. AAnnddrrooiiddアプリの レイアウトで使う単位 ddpp sspp DDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
- 63.
- 64. 116600ddppii 11 224400ddppii 11..55 332200ppxx 448800ppxx 448800ppxx 880000ppxx
- 65. 116600ddppii 11 224400ddppii 11..55 332200ppxx 448800ppxx 332200ddpp 332200ddpp 448800ppxx 880000ppxx
- 66. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 11 11..55 22 11ddpp 11ddpp 11ddpp 11ppxx 11..55ppxx 22ppxx
- 67. 224400ddppii 332200ddppii hhddppii xxhhddppii 11..55 22 11ddpp 11ddpp 11..55ppxx 22ppxx
- 68.
- 70. 22 11..77 22..00 22..33 22..66 http://y-anz-m.blogspot.jp/2012/02/ androidtextview-settextsize-sp.html
- 71. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 11 11..55 22 11sspp 11sspp 11sspp 11ppxx 11..55ppxx 22ppxx
- 72. 224400ddppii 332200ddppii hhddppii xxhhddppii 11..55 22 11sspp 11sspp 11..55ppxx 22ppxx
- 73.
- 74. 重要なのは…� ddpp//ssppを意識すること ddpp sspp DDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
- 75.
- 76.
- 77.
- 78.
- 79. 22.. 単位と余白 実際にどう作るか 考えてみる
- 80.
- 81.
- 82. 332200ddpp 336600ddpp 553333ddpp 664400ddpp hhddppii xxhhddppii 11ddpp 11..55ppxx 11ddpp 22ppxx
- 83.
- 84. xxhhddppii 772200ppxx 336600ddpp 4488ddpp 4488ddpp 9966ppxx
- 85. xxhhddppii 1122ddpp 2244ppxx 88ddpp 1166ppxx 1166ddpp 3322ppxx 1122ddpp 1122ddpp
- 86. xxhhddppii 2244ppxx 1122sspp 1188sspp 3322ppxx 1144sspp 2288ppxx
- 87. <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"
- 88. PPhhoottoosshhoopp GGaallaaxxyy NNeexxuuss で実装
- 89. 336600ddpp 332200ddpp GGaallaaxxyy NNeexxuuss で実装 HHTTCC DDeessiirree で実装
- 92. レイアウト編：まとめ PPSSやFFWWでデザインを作る ときの33箇条
- 93.
- 94. 332200ddpp 336600ddpp 553333ddpp 664400ddpp hhddppii xxhhddppii 11ddpp 11..55ppxx 11ddpp 22ppxx
- 95.
- 96. 224400ddppii 332200ddppii hhddppii xxhhddppii 11..55 22
- 97. xxddppii xxhhddppii 11..55 ： 22 ＝ の余白 ： の余白
- 98. xxddppii xxhhddppii 11..55 ： 22 ＝ の余白 ： の余白 11..5533 xxddppii xxhhddppii の余白 ＝ の余白 × 44の倍数 22 44
- 99.
- 100. AAnnddrrooiidd DDeessiiggnn PPrreevviieeww http://code.google.com/p/android-ui-utils/
- 104.
- 105. ありがとうございました！ GGoooodd LLuucckk!! •･@@ttoommmmmmmmyy •･ ffaacceebbooookk :: 秋葉ちひろ •･ 次回は1111//88（木）総集編 @@GGooooggllee hhttttpp::////ggoooo..ggll//iiLLBBppoo