【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
39 likes16,226 views
より凝ったグラフィック編 http://www.ladybeetle-design.com/androidappdesigns/
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
- 1. ハッシュタグ デザイナーが ##aaaaddeessiiggnnss コードから読み解く、 AAnnddrrooiiddアプリの デザインの幅を広げるコツと TTiippss 第22回：より凝ったグラフィック @@GGMMOO yyoouurrss 22001122..99..2200
- 3. ハッシュタグ ##aaaaddeessiiggnnss がんばって作ったデザインが、 実装後に残念な結果にならないために なぜ残念になるか？
- 4. 秋葉ちひろ •･ @@ttoommmmmmmmyy •･ デザイナー／アートディレクター •･ WWeebb系・アプリ系 •･ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
- 5. http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
- 6. 前回 変態99--ppaattcchh
- 7. 今回のテーマ より凝ったグラフィック 前回は9-patchをした。 これはビットマップ（画像）を使っていた が、今回はできるだけ画像を使わずに、ど れだけこった表現ができるかを調べてみ た。
- 8. WebでいうところのCSSと 同じと考えるとよい。 11..コードのみで グラデーション、影など CSS3で新たに加わった 可能な表現 •･ 画像を使わなくてもできる表現を デザイナーが徹底解析！
- 9. 22..デザインが 組み込まれる仕組み •･ 仕組みを知れば、いろいろと応用 がきく（かもしれない）
- 12. main.xml <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
- 13. テキストや画像を 表示したい場合
- 14. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" />
- 15. main.xml <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/photo" /> pphhoottoo..ppnngg
- 16. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" />
- 17. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" />
- 18. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" />
- 19. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background="#ccc" android:padding="10dp" />
- 20. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" android:background= "@drawable/button_bg" android:padding="10dp" />
- 21. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= "@drawable/button_bg" android:padding="10dp" />
- 22. main.xml <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="撮影する" android:textSize="20sp" android:textColor="#fff" android:background= bbuuttttoonn__bbgg..99..ppnngg "@drawable/button_bg" android:padding="10dp" />
- 23. main.xml <TextView android:layout_width="wrap_content" <shape android:shape="rectangle" > android:layout_height="wrap_content" <size android:text="撮影する" android:height="100dp" android:width="100dp" /> <solid android:color="#cc2f2f2f" /> android:textSize="20sp" </shape> android:textColor="#fff" button_bg.xml android:background= "@drawable/button_bg" android:padding="10dp" />
- 24. res drawable-xhdpi drawable-hdpi drawable-mdpi iimmgg drawable-ldpi layouts JJAAVVAA main.xml hhttmmll 構造 values strings.xml ccssss 飾�り
- 25. res drawable xxmmll drawable-xhdpi drawable-hdpi drawable-mdpi iimmgg drawable-ldpi JJAAVVAA layouts main.xml hhttmmll 構造 values strings.xml ccssss 飾�り
- 26. 重要！ <<sshhaappee>> コードでグラフィックを 表現するためのタグ
- 27. <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="xxxxxx" > ここにいろいろ書くよ </shape>
- 28. rreeccttaannggllee 長方形 角丸長方形
- 29. oovvaall 円
- 30. lliinnee 線�
- 31. rriinngg リング
- 32. rreeccttaannggllee 長方形 角丸長方形
- 34. rreeccttaannggllee <shape android:shape="rectangle"> <size android:width="100dp" android:height="50dp" /> </shape> 長方形 角丸長方形
- 35. rreeccttaannggllee <shape android:shape="rectangle"> <size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /> </shape> 長方形 角丸長方形
- 36. rreeccttaannggllee <shape android:shape="rectangle"> <size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /> 長方形 角丸長方形 <stroke android:width="2dp" android:color="#000" /> </shape>
- 37. rreeccttaannggllee <shape android:shape="rectangle"> <size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /> 長方形 角丸長方形 <stroke android:width="2dp" android:color="#000" /> <corners android:radius="10dp" /> </shape>
- 39. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> </shape> 長方形 角丸長方形
- 40. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> android:angle="90" /> 長方形 角丸長方形 </shape>
- 42. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" /> </shape> 長方形 角丸長方形
- 43. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> </shape> 長方形 角丸長方形
- 44. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> </shape> 長方形 角丸長方形
- 45. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /> </shape>
- 47. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /> </shape>
- 48. rreeccttaannggllee <shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="33" /> </shape>
- 51. <size> 大きさ <solid> 塗り <stroke> 線� <corners> 角丸 <gradient> グラデーション <padding> 内側の余白
- 52. <size> 大きさ wwiiddtthh,, hheeiigghhtt solid> 塗り bbaacckkggrroouunndd--ccoolloorr troke> 線� bboorrddeerr rners> 角丸 bboorrddeerr--rraaddiiuuss dient> グラデーション ggrraaddiieenntt dding> 内側の余白 ppaaddddiinngg
- 54. ssttrrookkee ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr
- 56. ssttrrookkee ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr ×
- 58. ssttrrookkee ssttaarrttCCoolloorr eennddCCoolloorr ×
- 59. rraaddiiaall ssttaarrttCCoolloorr eennddCCoolloorr
- 60. <gradient android:startColor="#87d1bc" cceenntteerrXX android:endColor="#00845d" cceenntteerrYY android:type="radial" android:gradientRadius="300" android:centerX="0.2" android:centerY="0.5" />
- 62. ssttrrookkee ×
- 63. 実は不便 <<sshhaappee>>タグでできないこと •･ 上下左右、個別の<<ssttrrookkee>> •･ ドロップシャドウ的なもの
- 64. TTIIPP SS カラーコードについて ##dd6655ee9944 ##cccccc ##88bbcc11ee22 ##000000 ##ffffaabb7755
- 65. TTIIPP SS ##cccccc ##33cccccc ##000000 ##55000000 ##dd6655ee9944 ##2255dd6655ee9944 ##88bbcc11ee22 ##660088bbcc11ee22 ##ffffaabb7755 ##5555ffffaabb7755
- 66. Q. こういう表現なら どうする？
- 68. ccaassee..11 99--ppaattcchh •･ グラデーション込みで99--ppaattcchhに してしまう
- 77. ん〜 やっぱりやだ
- 78. ccaassee..22 重ねる •･ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる
- 81. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> sshhaappee </item> <item> bbiittmmaapp </item> </layer-list>
- 87. nniinnee--ppaattcchh sshhaappee
- 88. nniinnee--ppaattcchh sshhaappee
- 89. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> sshhaappee </item> <item> nniinnee--ppaattcchh </item> </layer-list>
- 91. nniinnee--ppaattcchh bbiittmmaapp
- 92. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> bbiittmmaapp </item> <item> nniinnee--ppaattcchh </item> </layer-list>
- 93. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <nine-patch android:src="@drawable/border" /> </item> </layer-list>
- 96. <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="#fff" android:shadowColor="#5000" android:shadowDx="0" android:shadowDy="-1" android:shadowRadius="1" android:text="11:20" />
- 97. android:shadowColor="#5000" android:shadowDx="0" XX位置 android:shadowDy="-1" YY位置 android:shadowRadius="1" ぼかし text-shadow: 0 -1px 1px rgba(0,0,0,0.5); XX位置 ぼかし YY位置
- 101. ##55000000 bbiittmmaapp sshhaappee ##00000000 tteexxttuurree__bbgg..ppnngg
- 103. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> <bitmap android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <shape> <gradient android:startColor="#0000" android:endColor="#5000"
- 104. android:src="@drawable/texture_bg" android:tileMode="repeat" /> </item> <item> <shape> <gradient android:startColor="#0000" android:endColor="#5000" android:type="radial" android:gradientRadius="300" /> </shape> </item> </layer-list>
- 106. まとめ •･ コードでかけるものは、コードで表現 •･ 重ね技 <<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>> •･ 位置調整も可能
- 107. ありがとうございました！ GGoooodd LLuucckk!! •･ @@ttoommmmmmmmyy •･ ffaacceebbooookk :: 秋葉ちひろ •･ 次回は1100//44（木）＠CCAAさん （カスタムUUIIについて）