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

31,537 views

Published on

より凝ったグラフィック編
http://www.ladybeetle-design.com/androidappdesigns/

0 Comments
39 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
31,537
On SlideShare
0
From Embeds
0
Number of Embeds
24,080
Actions
Shares
0
Downloads
115
Comments
0
Likes
39
Embeds 0
No embeds

No notes for slide

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

  1. 1. ハッシュタグデザイナーが ##aaaaddeessiiggnnssコードから読み解く、AAnnddrrooiiddアプリのデザインの幅を広げるコツとTTiippss 第22回:より凝ったグラフィック @@GGMMOO yyoouurrss 22001122..99..2200
  2. 2. ハッシュタグ##aaaaddeessiiggnnss
  3. 3. ハッシュタグ ##aaaaddeessiiggnnss がんばって作ったデザインが、実装後に残念な結果にならないために なぜ残念になるか?
  4. 4. 秋葉ちひろ•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロント エンドの一部
  5. 5. http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
  6. 6. 前回 変態99--ppaattcchh
  7. 7. 今回のテーマより凝ったグラフィック 前回は9-patchをした。 これはビットマップ(画像)を使っていた が、今回はできるだけ画像を使わずに、ど れだけこった表現ができるかを調べてみ た。
  8. 8. WebでいうところのCSSと 同じと考えるとよい。11..コードのみで グラデーション、影など CSS3で新たに加わった 可能な表現 •・ 画像を使わなくてもできる表現を デザイナーが徹底解析!
  9. 9. 22..デザインが 組み込まれる仕組み •・ 仕組みを知れば、いろいろと応用 がきく(かもしれない)
  10. 10. bbuuttttoonn__bbgg..ppnngg
  11. 11. bbuuttttoonn__bbgg ..99 ..ppnngg
  12. 12. main.xml<Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/button_bg" android:text="撮影する" />
  13. 13. テキストや画像を 表示したい場合
  14. 14. main.xml<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" />
  15. 15. main.xml<ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/photo" /> pphhoottoo..ppnngg
  16. 16. main.xml<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" />
  17. 17. main.xml<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" 撮影する android:text="撮影する" android:textSize="20sp" android:textColor="#f00" />
  18. 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. 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. 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. 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. 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. 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. 24. resdrawable-xhdpidrawable-hdpidrawable-mdpi iimmggdrawable-ldpilayouts JJAAVVAAmain.xml hhttmmll 構造valuesstrings.xml ccssss 飾�り
  25. 25. resdrawable xxmmlldrawable-xhdpidrawable-hdpidrawable-mdpi iimmggdrawable-ldpi JJAAVVAAlayoutsmain.xml hhttmmll 構造valuesstrings.xml ccssss 飾�り
  26. 26. 重要! <<sshhaappee>> コードでグラフィックを 表現するためのタグ
  27. 27. <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="xxxxxx" > ここにいろいろ書くよ</shape>
  28. 28. rreeccttaannggllee長方形 角丸長方形
  29. 29. oovvaall 円
  30. 30. lliinnee 線�
  31. 31. rriinnggリング
  32. 32. rreeccttaannggllee長方形 角丸長方形
  33. 33. rreeccttaannggllee<shape android:shape="rectangle"></shape> 長方形 角丸長方形
  34. 34. rreeccttaannggllee<shape android:shape="rectangle"> <size android:width="100dp" android:height="50dp" /></shape> 長方形 角丸長方形
  35. 35. rreeccttaannggllee<shape android:shape="rectangle"> <size android:width="100dp" android:height="50dp" /> <solid android:color="#ff64ae" /></shape> 長方形 角丸長方形
  36. 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. 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>
  38. 38. rreeccttaannggllee<shape android:shape="rectangle"></shape> 長方形 角丸長方形
  39. 39. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /></shape> 長方形 角丸長方形
  40. 40. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" android:centerColor="#f00" /> android:angle="90" /> 長方形 角丸長方形</shape>
  41. 41. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" /></shape> 長方形 角丸長方形
  42. 42. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /></shape> 長方形 角丸長方形
  43. 43. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /></shape> 長方形 角丸長方形
  44. 44. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /></shape>
  45. 45. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /></shape>
  46. 46. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="33" /></shape>
  47. 47. ポイント!<<sshhaappee>>タグでできること
  48. 48. <size> 大きさ <solid> 塗り <stroke> 線� <corners> 角丸<gradient> グラデーション <padding> 内側の余白
  49. 49. <size> 大きさ wwiiddtthh,, hheeiigghhttsolid> 塗り bbaacckkggrroouunndd--ccoolloorrtroke> 線� bboorrddeerrrners> 角丸 bboorrddeerr--rraaddiiuussdient> グラデーション ggrraaddiieennttdding> 内側の余白 ppaaddddiinngg
  50. 50. ssttrrookkee ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr
  51. 51. ssttrrookkee ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr ×
  52. 52. ssttrrookkee ssttaarrttCCoolloorr eennddCCoolloorr ×
  53. 53. rraaddiiaall ssttaarrttCCoolloorr eennddCCoolloorr
  54. 54. <gradient android:startColor="#87d1bc"cceenntteerrXX android:endColor="#00845d"cceenntteerrYY android:type="radial" android:gradientRadius="300" android:centerX="0.2" android:centerY="0.5" />
  55. 55. ssttrrookkee ×
  56. 56. 実は不便<<sshhaappee>>タグでできないこと •・ 上下左右、個別の<<ssttrrookkee>> •・ ドロップシャドウ的なもの
  57. 57. TTIIPP SSカラーコードについて ##dd6655ee9944##cccccc ##88bbcc11ee22 ##000000 ##ffffaabb7755
  58. 58. TTIIPP SS ##cccccc ##33cccccc ##000000 ##55000000##dd6655ee9944 ##2255dd6655ee9944##88bbcc11ee22 ##660088bbcc11ee22##ffffaabb7755 ##5555ffffaabb7755
  59. 59. Q. こういう表現なら どうする?
  60. 60. ccaassee..11 99--ppaattcchh •・ グラデーション込みで99--ppaattcchhに してしまう
  61. 61. ん〜やっぱりやだ
  62. 62. ccaassee..22 重ねる •・ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる
  63. 63. bbiittmmaappsshhaappee
  64. 64. bbiittmmaappsshhaappee
  65. 65. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> sshhaappee </item> <item> bbiittmmaapp </item></layer-list>
  66. 66. bbiittmmaappsshhaappee
  67. 67. bbiittmmaappbbiittmmaappsshhaappee
  68. 68. bbiittmmaappsshhaappee
  69. 69. bbiittmmaappsshhaappee
  70. 70. nniinnee--ppaattcchh sshhaappee
  71. 71. nniinnee--ppaattcchh sshhaappee
  72. 72. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> sshhaappee </item> <item> nniinnee--ppaattcchh </item></layer-list>
  73. 73. nniinnee--ppaattcchh bbiittmmaapp
  74. 74. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> bbiittmmaapp </item> <item> nniinnee--ppaattcchh </item></layer-list>
  75. 75. <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>
  76. 76. <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" />
  77. 77. 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位置
  78. 78. http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
  79. 79. ##55000000 bbiittmmaapp sshhaappee ##00000000tteexxttuurree__bbgg..ppnngg
  80. 80. <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"
  81. 81. 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>
  82. 82. まとめ•・ コードでかけるものは、コードで表現•・ 重ね技 <<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>>•・ 位置調整も可能
  83. 83. ありがとうございました!GGoooodd LLuucckk!!•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1100//44(木)@CCAAさん (カスタムUUIIについて)

×