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

Description
1. ハッシュタグデザイナーが ##aaaaddeessiiggnnssコードから読み解く、AAnnddrrooiiddアプリのデザインの幅を広げるコツとTTiippss…

Please download to get full document.

View again

of 105
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Design

Publish on:

Views: 70 | Pages: 105

Extension: PDF | Download: 0

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

    Thanks to everyone for your continued support.

    No, Thanks