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      第22回:より凝ったグラフィック      ...
ハッシュタグ##aaaaddeessiiggnnss
ハッシュタグ                  ##aaaaddeessiiggnnss  がんばって作ったデザインが、実装後に残念な結果にならないために      なぜ残念になるか?
秋葉ちひろ•・ @@ttoommmmmmmmyy•・ デザイナー/アートディレクター•・ WWeebb系・アプリ系•・ BBaaiidduuでSSiimmeejjiiの開発のフロント   エンドの一部
http://itpro.nikkeibp.co.jp/article/COLUMN/20120113/378483/
前回     変態99--ppaattcchh
今回のテーマより凝ったグラフィック         前回は9-patchをした。         これはビットマップ(画像)を使っていた         が、今回はできるだけ画像を使わずに、ど         れだけこった表現ができるかを調べて...
WebでいうところのCSSと                同じと考えるとよい。11..コードのみで                グラデーション、影など                CSS3で新たに加わった 可能な表現  •・ 画像を使わな...
22..デザインが 組み込まれる仕組み  •・ 仕組みを知れば、いろいろと応用  がきく(かもしれない)
bbuuttttoonn__bbgg..ppnngg
bbuuttttoonn__bbgg ..99 ..ppnngg
main.xml<Button  android:layout_width="wrap_content"	 android:layout_height="wrap_content"	 android:background="@drawable/...
テキストや画像を 表示したい場合
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                撮影する	 android:...
main.xml<ImageView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"	 android:src="@drawable/phot...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                撮影する	 android:...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                撮影する	 android:...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                撮影する	 android:...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                 撮影する	 android...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                 撮影する	 android...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"                 撮影する	 android...
main.xml<TextView  android:layout_width="wrap_content"	 android:layout_height="wrap_content"	 android:text="撮影する"	 android...
main.xml<TextView  android:layout_width="wrap_content"    <shape android:shape="rectangle" >	 android:layout_height="wrap_...
resdrawable-xhdpidrawable-hdpidrawable-mdpi                 iimmggdrawable-ldpilayouts                            JJAAVVAA...
resdrawable                  xxmmlldrawable-xhdpidrawable-hdpidrawable-mdpi                 iimmggdrawable-ldpi           ...
重要!      <<sshhaappee>> コードでグラフィックを  表現するためのタグ
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android"  android:shape="xx...
rreeccttaannggllee長方形           角丸長方形
oovvaall   円
lliinnee  線�
rriinnggリング
rreeccttaannggllee長方形           角丸長方形
rreeccttaannggllee<shape android:shape="rectangle"></shape>     長方形                角丸長方形
rreeccttaannggllee<shape android:shape="rectangle">  <size android:width="100dp"         android:height="50dp" /></shape> ...
rreeccttaannggllee<shape android:shape="rectangle">  <size android:width="100dp"        android:height="50dp" />  <solid a...
rreeccttaannggllee<shape android:shape="rectangle">  <size android:width="100dp"        android:height="50dp" />  <solid a...
rreeccttaannggllee<shape android:shape="rectangle">  <size android:width="100dp"        android:height="50dp" />  <solid a...
rreeccttaannggllee<shape android:shape="rectangle"></shape>     長方形                角丸長方形
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000"           android:endColor="#fff" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000"           android:endColor="#fff" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000"           android:endColor="#fff" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff"           android:endColor="#000" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff"           android:endColor="#000" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff"           android:endColor="#000" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff"           android:endColor="#000" ...
rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff"           android:endColor="#000" ...
ポイント!<<sshhaappee>>タグでできること
<size> 大きさ   <solid> 塗り  <stroke> 線� <corners> 角丸<gradient> グラデーション <padding> 内側の余白
<size> 大きさ wwiiddtthh,,  hheeiigghhttsolid> 塗り bbaacckkggrroouunndd--ccoolloorrtroke> 線� bboorrddeerrrners> 角丸 bboorrddeer...
ssttrrookkee                ssttaarrttCCoolloorr               cceenntteerrCCoolloorr                 eennddCCoolloorr
ssttrrookkee                ssttaarrttCCoolloorr               cceenntteerrCCoolloorr                 eennddCCoolloorr    ...
ssttrrookkee               ssttaarrttCCoolloorr                eennddCCoolloorr               ×
rraaddiiaall               ssttaarrttCCoolloorr                eennddCCoolloorr
<gradient                 android:startColor="#87d1bc"cceenntteerrXX   android:endColor="#00845d"cceenntteerrYY   android:...
ssttrrookkee  ×
実は不便<<sshhaappee>>タグでできないこと •・ 上下左右、個別の<<ssttrrookkee>> •・ ドロップシャドウ的なもの
TTIIPP                                              SSカラーコードについて                 ##dd6655ee9944##cccccc                   ...
TTIIPP                                            SS  ##cccccc          ##33cccccc ##000000          ##55000000##dd6655ee9...
Q.   こういう表現なら     どうする?
ccaassee..11               99--ppaattcchh   •・ グラデーション込みで99--ppaattcchhに       してしまう
ん〜やっぱりやだ
ccaassee..22               重ねる   •・ <<bbiittmmaapp>>  <<sshhaappee>>  は重ねられる
bbiittmmaappsshhaappee
bbiittmmaappsshhaappee
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>              sshhaappee	 </item>	 <item>  ...
bbiittmmaappsshhaappee
bbiittmmaappbbiittmmaappsshhaappee
bbiittmmaappsshhaappee
bbiittmmaappsshhaappee
nniinnee--ppaattcchh     sshhaappee
nniinnee--ppaattcchh     sshhaappee
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>              sshhaappee	 </item>	 <item>  ...
nniinnee--ppaattcchh     bbiittmmaapp
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>             bbiittmmaapp	 </item>	 <item> ...
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>    <bitmap     android:src="@drawable/text...
<TextView  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:textColor="#fff"  android:sh...
android:shadowColor="#5000"android:shadowDx="0"    XX位置android:shadowDy="-1"         YY位置android:shadowRadius="1"    ぼかしte...
http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
##55000000        bbiittmmaapp           sshhaappee                                      ##00000000tteexxttuurree__bbgg..p...
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">	 <item>    <bitmap     android:src="@drawable/text...
android:src="@drawable/texture_bg"     android:tileMode="repeat" /> </item> <item>    <shape>      <gradient        androi...
まとめ•・ コードでかけるものは、コードで表現•・ 重ね技 <<sshhaappee>>  <<bbiittmmaapp>>  <<nniinnee--ppaattcchh>>•・ 位置調整も可能
ありがとうございました!GGoooodd  LLuucckk!!•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk  ::  秋葉ちひろ•・ 次回は1100//44(木)@CCAAさん (カスタムUUIIについて)
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
【第2回】デザイナーがコードから読み解く、Androidアプリのデザインの幅を広げるコツとTips
Upcoming SlideShare
Loading in …5
×

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

32,262 views

Published on

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

  • Be the first to comment

【第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について)

×