Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
ハッシュタグデザイナーが             ##aaaaddeessiiggnnssコードから読み解く、AAnnddrrooiiddアプリのデザインの幅を広げるコツとTTiippss                 第44回:レイアウト編...
ハッシュタグ                   ##aaaaddeessiiggnnss           デザイン   開発70605040302010 0     Web           アプリ
ハッシュタグ                                       ##aaaaddeessiiggnnssaassaammiieeeeee77   ttoommmmmmmmyy   aaddaammrroocckkeerr
ハッシュタグ            ##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               ...
android:layout_width="fill_parent"android:layout_height="wrap_content"
TTeexxttVViieewwIImmaaggeeVViieewwTTeexxttVViieeww
<TextView   /><TextView   />   TTeexxttVViieeww<TextView   /><TextView   />                 IImmaaggeeVViieeww<ImageView /...
11..  よく使うレイアウトLLiinneeaarrLLaayyoouutt
<TextView   /><TextView   />   TTeexxttVViieeww<TextView   /><TextView   />                 IImmaaggeeVViieeww<ImageView /...
<LinearLayout>  <TextView   />  <TextView   />   TTeexxttVViieeww  <TextView   />  <TextView   />                   IImmaa...
<LinearLayout>     たてにならべー!  <TextView   />                       TTeexxttVViieeww  <TextView   />                       T...
<LinearLayout>     よこにならべー!  <TextView   />                       TTeexxttVViieeww  <TextView   />                       T...
<LinearLayout>                             よこにならべー!      <TextView                />      <TextView                />     ...
name   id          timeimg                  text
よこにならべー!      name   id          timeimg                  text
よこにならべー!          たてにならべー!      name   id              timeimg                   text
よこにならべー!          たてにならべー!      name   id              timeimg                    text                  よこにならべー!
<LinearLayout></LinearLayout>
<LinearLayout>   <ImageView />   <LinearLayout>   </LinearLayout></LinearLayout>
<LinearLayout>   <ImageView />   <LinearLayout>   </LinearLayout></LinearLayout>
<LinearLayout>   <ImageView />   <LinearLayout>       <LinearLayout>       </LinearLayout>        <TextView />   </LinearL...
<LinearLayout>   <ImageView />   <LinearLayout>       <LinearLayout>           <TextView />           <TextView />        ...
!   LLiinneeaarrLLaayyoouuttの    難点 構造が複雑で、階層が深い       ↓数が多いと、重い原因となる
よこにならべー!name     id       time
よこにならべー!name      id                    timeandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap...
たてにならべー!                    actionbar                     toolbarandroid:layout_weight="1"android:layout_width="fill_paren...
よこにならべー!    cancel                OK       11                  11android:layout_weight="1"android:layout_width="0dp"androi...
よこにならべー!cancel                   OK  11     layout_weight   22
LLiinneeaarrLLaayyoouuttの     得意なこと•・ 等分割や、割合を指定した分割が得意•・ 使わないスペースを最大限に伸ばすこ とが得意
11..  よく使うレイアウトRReellaattiivveeLLaayyoouutt
name   id          timeimg                  text
ぼく親だよー      name   id          timeimg                  text
ぼく親だよー       ぼく親の右どなりAAのだよー      name   id               timeimg                   text
ぼく親だよー       ぼく親の右どなりAAのだよー                  ぼくAAの右どなりのBBだよー      name   id                     timeimg                   ...
ぼく親だよー        ぼく親の右どなりAAのだよー                   ぼくAAの右どなりのBBだよー       name   id                     time img               ...
ぼく親だよー        ぼく親の右どなりAAのだよー                   ぼくAAの右どなりのBBだよー       name   id                     time img               ...
ぼく親だよー      android:id="@+id/Oya"ぼく親の右どなりAAのだよー     android:layout_toRightOf="@id/     Oya"ぼくAAの右どなりのBBだよー     android:lay...
RReellaattiivveeLLaayyoouutt              name      id            timeimg                               text
<RelativeLayout>                    RReellaattiivveeLLaayyoouutt  <ImageView />                                  name     ...
<LinearLayout>   <ImageView />   <LinearLayout>        <LinearLayout>            <TextView />            <TextView />     ...
RReellaattiivveeLLaayyoouuttの         得意なこと•・ LLiinneeaarrLLaayyoouuttだと階層が深くなって しまうところを、軽々と11階層で表現 できる!
11..  よく使うレイアウトFFrraammeeLLaayyoouutt 重ねるときに使おう
TTeexxttVViieeww           sshhaappeeIImmaaggeeVViieeww                        android:layout_width=                      ...
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                                                       ss...
22..  単位と余白ddppについて
116600ddppii   11   224400ddppii   11..55 332200ppxx         448800ppxx448800ppxx                    880000ppxx
116600ddppii   11   224400ddppii   11..55 332200ppxx         448800ppxx 332200ddpp         332200ddpp448800ppxx           ...
116600ddppii 224400ddppii 332200ddppii  mmddppii     hhddppii     xxhhddppii    11          11..55         22  11ddpp     ...
224400ddppii   332200ddppii  hhddppii      xxhhddppii  11..55           22  11ddpp         11ddpp 11..55ppxx      22ppxx
22..  単位と余白ssppについて
22     11..77     22..00     22..33     22..66         http://y-anz-m.blogspot.jp/2012/02/         androidtextview-settext...
116600ddppii 224400ddppii 332200ddppii  mmddppii     hhddppii     xxhhddppii    11          11..55         22  11sspp     ...
224400ddppii   332200ddppii  hhddppii      xxhhddppii  11..55           22  11sspp         11sspp 11..55ppxx      22ppxx
2222sspp1144sspp1188sspp
重要なのは…�   ddpp//ssppを意識すること                  ddpp                                                       ssppDDeennssiittyy...
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       336600ddpp    553333ddpp                      664400ddpp     hhddppii             xxhhddppii11ddpp   11.....
http://developer.android.com/design/downloads/index.html                                                           336600p...
xxhhddppii   772200ppxx   336600ddpp   4488ddpp                                       4488ddpp                            ...
xxhhddppii               1122ddpp 2244ppxx                                      88ddpp 1166ppxx1166ddpp 3322ppxx      1122...
xxhhddppii             2244ppxx             1122sspp             1188sspp             3322ppxx             1144sspp       ...
<RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content"    android:layout_marginLeft="16dp...
PPhhoottoosshhoopp   GGaallaaxxyy  NNeexxuuss  で実装
336600ddpp                  332200ddppGGaallaaxxyy  NNeexxuuss  で実装   HHTTCC  DDeessiirree  で実装
レイアウト編:まとめPPSSやFFWWでデザインを作る       ときの33箇条
1.サイズは(ほぼ)22種類!ddppやssppを意識する伸縮できるところを意識する
332200ddpp       336600ddpp    553333ddpp                      664400ddpp     hhddppii             xxhhddppii11ddpp   11.....
2.xxhhddppiiの余白は44の倍数のddppだとベスト!hhddppiiになっても整数になる
224400ddppii   332200ddppii  hhddppii      xxhhddppii  11..55           22
xxddppii       xxhhddppii11..55 : 22   =   の余白        :   の余白
xxddppii       xxhhddppii11..55 : 22        =          の余白        :   の余白                                         11..5533...
3.作ったあとは、実機で確認(要ものさし)何mmmmになるのかを実際にチェック
AAnnddrrooiidd  DDeessiiggnn  PPrreevviieeww                       http://code.google.com/p/android-ui-utils/
デザイナーにも広めたいと思ってはじめた勉強会
ありがとうございました!GGoooodd  LLuucckk!!•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk  ::  秋葉ちひろ•・ 次回は1111//88(木)総集編  @@GGooooggllee  hht...
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Upcoming SlideShare
Loading in …5
×

【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

26,115 views

Published on

レイアウト編
- よく使うレイアウト
-

Published in: Design

【第4回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips

  1. 1. ハッシュタグデザイナーが ##aaaaddeessiiggnnssコードから読み解く、AAnnddrrooiiddアプリのデザインの幅を広げるコツとTTiippss 第44回:レイアウト編 @@GGMMOO YYoouurrss 22001122..1100..2255
  2. 2. ハッシュタグ ##aaaaddeessiiggnnss デザイン 開発70605040302010 0 Web アプリ
  3. 3. ハッシュタグ ##aaaaddeessiiggnnssaassaammiieeeeee77 ttoommmmmmmmyy aaddaammrroocckkeerr
  4. 4. ハッシュタグ ##aaaaddeessiiggnnss がんばって作ったデザインが、実装後に残念な結果にならないために
  5. 5. 秋葉ちひろ•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
  6. 6. http://y-anz-m.blogspot.jp/2012/10/androidseekbar.html
  7. 7. 今日のアジェンダレイアウト編11.. よく使うレイアウト22.. 単位と余白33.. PPSSやFFWWでデザイン案を作るとき の33箇条
  8. 8. デザイナー向�けレイアウト入�門
  9. 9. レイアウト編11.. よく使うレイアウト
  10. 10. wwrraapp__ccoonntteenntt インライン要素っぽいffiillll__ppaarreenntt//mmaattcchh__ppaarreenntt ブロック要素っぽい4488ddpp
  11. 11. android:layout_width="fill_parent"android:layout_height="wrap_content"
  12. 12. TTeexxttVViieewwIImmaaggeeVViieewwTTeexxttVViieeww
  13. 13. <TextView /><TextView /> TTeexxttVViieeww<TextView /><TextView /> IImmaaggeeVViieeww<ImageView /><ImageView /><TextView /> TTeexxttVViieeww
  14. 14. 11.. よく使うレイアウトLLiinneeaarrLLaayyoouutt
  15. 15. <TextView /><TextView /> TTeexxttVViieeww<TextView /><TextView /> IImmaaggeeVViieeww<ImageView /><ImageView /><TextView /> TTeexxttVViieeww
  16. 16. <LinearLayout> <TextView /> <TextView /> TTeexxttVViieeww <TextView /> <TextView /> IImmaaggeeVViieeww <ImageView /> <ImageView /> <TextView /> TTeexxttVViieeww</LinearLayout>
  17. 17. <LinearLayout> たてにならべー! <TextView /> TTeexxttVViieeww <TextView /> TTeexxttVViieeww <TextView /> <TextView /> TTeexxttVViieeww TTeexxttVViieeww <ImageView /> IImmaaggeeVViieeww <ImageView /> IImmaaggeeVViieeww TTeexxttVViieeww <TextView /></LinearLayout>
  18. 18. <LinearLayout> よこにならべー! <TextView /> TTeexxttVViieeww <TextView /> TTeexxttVViieeww <TextView /> <TextView /> TTeexxttVViieeww TTeexxttVViieeww <ImageView /> IImmaaggeeVViieeww <ImageView /> IImmaaggeeVViieeww TTeexxttVViieeww <TextView /></LinearLayout>
  19. 19. <LinearLayout> よこにならべー! <TextView /> <TextView /> <TextView /> <TextView />TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww TTeexxttVViieeww IImmaaggeeVViieeww <ImageView /> (入�り切らない) <ImageView /> <TextView /></LinearLayout>
  20. 20. name id timeimg text
  21. 21. よこにならべー! name id timeimg text
  22. 22. よこにならべー! たてにならべー! name id timeimg text
  23. 23. よこにならべー! たてにならべー! name id timeimg text よこにならべー!
  24. 24. <LinearLayout></LinearLayout>
  25. 25. <LinearLayout> <ImageView /> <LinearLayout> </LinearLayout></LinearLayout>
  26. 26. <LinearLayout> <ImageView /> <LinearLayout> </LinearLayout></LinearLayout>
  27. 27. <LinearLayout> <ImageView /> <LinearLayout> <LinearLayout> </LinearLayout> <TextView /> </LinearLayout></LinearLayout>
  28. 28. <LinearLayout> <ImageView /> <LinearLayout> <LinearLayout> <TextView /> <TextView /> <TextView /> </LinearLayout> <TextView /> </LinearLayout></LinearLayout>
  29. 29. ! LLiinneeaarrLLaayyoouuttの 難点 構造が複雑で、階層が深い ↓数が多いと、重い原因となる
  30. 30. よこにならべー!name id time
  31. 31. よこにならべー!name id timeandroid:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"
  32. 32. たてにならべー! actionbar toolbarandroid:layout_weight="1"android:layout_width="fill_parent"android:layout_height="0dp"
  33. 33. よこにならべー! cancel OK 11 11android:layout_weight="1"android:layout_width="0dp"android:layout_height="wrap_content"
  34. 34. よこにならべー!cancel OK 11 layout_weight 22
  35. 35. LLiinneeaarrLLaayyoouuttの 得意なこと•・ 等分割や、割合を指定した分割が得意•・ 使わないスペースを最大限に伸ばすこ とが得意
  36. 36. 11.. よく使うレイアウトRReellaattiivveeLLaayyoouutt
  37. 37. name id timeimg text
  38. 38. ぼく親だよー name id timeimg text
  39. 39. ぼく親だよー ぼく親の右どなりAAのだよー name id timeimg text
  40. 40. ぼく親だよー ぼく親の右どなりAAのだよー ぼくAAの右どなりのBBだよー name id timeimg text
  41. 41. ぼく親だよー ぼく親の右どなりAAのだよー ぼくAAの右どなりのBBだよー name id time img textぼくAAの下でAAと左端が同じなCCだよー
  42. 42. ぼく親だよー ぼく親の右どなりAAのだよー ぼくAAの右どなりのBBだよー name id time img textぼくAAの下でAAと左端が同じなCCだよー ぼくCCの上でCCと右端が同じなDDだよー
  43. 43. ぼく親だよー 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"
  44. 44. RReellaattiivveeLLaayyoouutt name id timeimg text
  45. 45. <RelativeLayout> RReellaattiivveeLLaayyoouutt <ImageView /> name id <TextView /> img <TextView /> <TextView /> <TextView /></RelativeLayout>
  46. 46. <LinearLayout> <ImageView /> <LinearLayout> <LinearLayout> <TextView /> <TextView /> <TextView /> </LinearLayout> <TextView /> </LinearLayout></LinearLayout>
  47. 47. RReellaattiivveeLLaayyoouuttの 得意なこと•・ LLiinneeaarrLLaayyoouuttだと階層が深くなって しまうところを、軽々と11階層で表現 できる!
  48. 48. 11.. よく使うレイアウトFFrraammeeLLaayyoouutt 重ねるときに使おう
  49. 49. TTeexxttVViieeww sshhaappeeIImmaaggeeVViieeww android:layout_width= "fill_parent" android:layout_height= "fill_parent"
  50. 50. ssttaarrttCCoolloorr ##88000000 eennddCCoolloorr ##00000000
  51. 51. <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" ></ScrollView>
  52. 52. <ScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" > 要素はひとつだけ</ScrollView>
  53. 53. <HorizontalScrollView android:layout_width="fill_parent" android:layout_height="fill_parent" ></HorizontalScrollView>
  54. 54. レイアウト編22.. 単位と余白
  55. 55. AAnnddrrooiiddアプリの レイアウトで使う単位 ddpp ssppDDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
  56. 56. 22.. 単位と余白ddppについて
  57. 57. 116600ddppii 11 224400ddppii 11..55 332200ppxx 448800ppxx448800ppxx 880000ppxx
  58. 58. 116600ddppii 11 224400ddppii 11..55 332200ppxx 448800ppxx 332200ddpp 332200ddpp448800ppxx 880000ppxx
  59. 59. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 11 11..55 22 11ddpp 11ddpp 11ddpp 11ppxx 11..55ppxx 22ppxx
  60. 60. 224400ddppii 332200ddppii hhddppii xxhhddppii 11..55 22 11ddpp 11ddpp 11..55ppxx 22ppxx
  61. 61. 22.. 単位と余白ssppについて
  62. 62. 22 11..77 22..00 22..33 22..66 http://y-anz-m.blogspot.jp/2012/02/ androidtextview-settextsize-sp.html
  63. 63. 116600ddppii 224400ddppii 332200ddppii mmddppii hhddppii xxhhddppii 11 11..55 22 11sspp 11sspp 11sspp 11ppxx 11..55ppxx 22ppxx
  64. 64. 224400ddppii 332200ddppii hhddppii xxhhddppii 11..55 22 11sspp 11sspp 11..55ppxx 22ppxx
  65. 65. 2222sspp1144sspp1188sspp
  66. 66. 重要なのは…� ddpp//ssppを意識すること ddpp ssppDDeennssiittyy--iinnddeeppeennddeenntt PPiixxeellss SSccaallee--iinnddeeppeennddeenntt PPiixxeellss http://developer.android.com/guide/topics/resources/more-resources.html#Dimension
  67. 67. http://developer.android.com/design/style/metrics-grids.html
  68. 68. http://developer.android.com/design/style/metrics-grids.html
  69. 69. http://developer.android.com/design/style/metrics-grids.html
  70. 70. http://developer.android.com/design/style/typography.html
  71. 71. 22.. 単位と余白実際にどう作るか 考えてみる
  72. 72. http://developer.android.com/design/style/metrics-grids.html
  73. 73. http://developer.android.com/design/style/metrics-grids.html
  74. 74. 332200ddpp 336600ddpp 553333ddpp 664400ddpp hhddppii xxhhddppii11ddpp 11..55ppxx 11ddpp 22ppxx
  75. 75. http://developer.android.com/design/downloads/index.html 336600ppxx
  76. 76. xxhhddppii 772200ppxx 336600ddpp 4488ddpp 4488ddpp 9966ppxx
  77. 77. xxhhddppii 1122ddpp 2244ppxx 88ddpp 1166ppxx1166ddpp 3322ppxx 1122ddpp 1122ddpp
  78. 78. xxhhddppii 2244ppxx 1122sspp 1188sspp 3322ppxx 1144sspp 2288ppxx
  79. 79. <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"
  80. 80. PPhhoottoosshhoopp GGaallaaxxyy NNeexxuuss で実装
  81. 81. 336600ddpp 332200ddppGGaallaaxxyy NNeexxuuss で実装 HHTTCC DDeessiirree で実装
  82. 82. レイアウト編:まとめPPSSやFFWWでデザインを作る ときの33箇条
  83. 83. 1.サイズは(ほぼ)22種類!ddppやssppを意識する伸縮できるところを意識する
  84. 84. 332200ddpp 336600ddpp 553333ddpp 664400ddpp hhddppii xxhhddppii11ddpp 11..55ppxx 11ddpp 22ppxx
  85. 85. 2.xxhhddppiiの余白は44の倍数のddppだとベスト!hhddppiiになっても整数になる
  86. 86. 224400ddppii 332200ddppii hhddppii xxhhddppii 11..55 22
  87. 87. xxddppii xxhhddppii11..55 : 22 = の余白 : の余白
  88. 88. xxddppii xxhhddppii11..55 : 22 = の余白 : の余白 11..5533 xxddppii xxhhddppii の余白 = の余白 × 44の倍数 22 44
  89. 89. 3.作ったあとは、実機で確認(要ものさし)何mmmmになるのかを実際にチェック
  90. 90. AAnnddrrooiidd DDeessiiggnn PPrreevviieeww http://code.google.com/p/android-ui-utils/
  91. 91. デザイナーにも広めたいと思ってはじめた勉強会
  92. 92. ありがとうございました!GGoooodd LLuucckk!!•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1111//88(木)総集編 @@GGooooggllee hhttttpp::////ggoooo..ggll//iiLLBBppoo

×