Your SlideShare is downloading. ×
0
【第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
【第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
【第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
【第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
【第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
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

27,801

Published on

より凝ったグラフィック編 …

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

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

No Downloads
Views
Total Views
27,801
On Slideshare
0
From Embeds
0
Number of Embeds
23
Actions
Shares
0
Downloads
113
Comments
0
Likes
37
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. ハッシュタグデザイナーが ##aaaaddeessiiggnnssコードから読み解く、AAnnddrrooiiddアプリのデザインの幅を広げるコツとTTiippss 第22回:より凝ったグラフィック @@GGMMOO yyoouurrss 22001122..99..2200
  • 2. ハッシュタグ##aaaaddeessiiggnnss
  • 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..デザインが 組み込まれる仕組み •・ 仕組みを知れば、いろいろと応用 がきく(かもしれない)
  • 10. bbuuttttoonn__bbgg..ppnngg
  • 11. bbuuttttoonn__bbgg ..99 ..ppnngg
  • 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. resdrawable-xhdpidrawable-hdpidrawable-mdpi iimmggdrawable-ldpilayouts JJAAVVAAmain.xml hhttmmll 構造valuesstrings.xml ccssss 飾�り
  • 25. resdrawable xxmmlldrawable-xhdpidrawable-hdpidrawable-mdpi iimmggdrawable-ldpi JJAAVVAAlayoutsmain.xml hhttmmll 構造valuesstrings.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長方形 角丸長方形
  • 33. rreeccttaannggllee<shape android:shape="rectangle"></shape> 長方形 角丸長方形
  • 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>
  • 38. rreeccttaannggllee<shape android:shape="rectangle"></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>
  • 41. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#000" android:endColor="#fff" /></shape> 長方形 角丸長方形
  • 42. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /></shape> 長方形 角丸長方形
  • 43. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /></shape> 長方形 角丸長方形
  • 44. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /></shape>
  • 45. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="50" /></shape>
  • 46. rreeccttaannggllee<shape android:shape="rectangle"> <gradient android:startColor="#fff" android:endColor="#000" /> android:type="radial" /> android:gradientRadial 長方形 角丸長方形 ="33" /></shape>
  • 47. ポイント!<<sshhaappee>>タグでできること
  • 48. <size> 大きさ <solid> 塗り <stroke> 線� <corners> 角丸<gradient> グラデーション <padding> 内側の余白
  • 49. <size> 大きさ wwiiddtthh,, hheeiigghhttsolid> 塗り bbaacckkggrroouunndd--ccoolloorrtroke> 線� bboorrddeerrrners> 角丸 bboorrddeerr--rraaddiiuussdient> グラデーション ggrraaddiieennttdding> 内側の余白 ppaaddddiinngg
  • 50. ssttrrookkee ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr
  • 51. ssttrrookkee ssttaarrttCCoolloorr cceenntteerrCCoolloorr eennddCCoolloorr ×
  • 52. ssttrrookkee ssttaarrttCCoolloorr eennddCCoolloorr ×
  • 53. rraaddiiaall ssttaarrttCCoolloorr eennddCCoolloorr
  • 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. ssttrrookkee ×
  • 56. 実は不便<<sshhaappee>>タグでできないこと •・ 上下左右、個別の<<ssttrrookkee>> •・ ドロップシャドウ的なもの
  • 57. TTIIPP SSカラーコードについて ##dd6655ee9944##cccccc ##88bbcc11ee22 ##000000 ##ffffaabb7755
  • 58. TTIIPP SS ##cccccc ##33cccccc ##000000 ##55000000##dd6655ee9944 ##2255dd6655ee9944##88bbcc11ee22 ##660088bbcc11ee22##ffffaabb7755 ##5555ffffaabb7755
  • 59. Q. こういう表現なら どうする?
  • 60. ccaassee..11 99--ppaattcchh •・ グラデーション込みで99--ppaattcchhに してしまう
  • 61. ん〜やっぱりやだ
  • 62. ccaassee..22 重ねる •・ <<bbiittmmaapp>> <<sshhaappee>> は重ねられる
  • 63. bbiittmmaappsshhaappee
  • 64. bbiittmmaappsshhaappee
  • 65. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> sshhaappee </item> <item> bbiittmmaapp </item></layer-list>
  • 66. bbiittmmaappsshhaappee
  • 67. bbiittmmaappbbiittmmaappsshhaappee
  • 68. bbiittmmaappsshhaappee
  • 69. bbiittmmaappsshhaappee
  • 70. nniinnee--ppaattcchh sshhaappee
  • 71. nniinnee--ppaattcchh sshhaappee
  • 72. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> sshhaappee </item> <item> nniinnee--ppaattcchh </item></layer-list>
  • 73. nniinnee--ppaattcchh bbiittmmaapp
  • 74. <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> <item> bbiittmmaapp </item> <item> nniinnee--ppaattcchh </item></layer-list>
  • 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. <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. 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. http://www.techdoctranslator.com/android/guide/resources/available-resources/drawable-resource
  • 79. ##55000000 bbiittmmaapp sshhaappee ##00000000tteexxttuurree__bbgg..ppnngg
  • 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. 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. まとめ•・ コードでかけるものは、コードで表現•・ 重ね技 <<sshhaappee>> <<bbiittmmaapp>> <<nniinnee--ppaattcchh>>•・ 位置調整も可能
  • 83. ありがとうございました!GGoooodd LLuucckk!!•・ @@ttoommmmmmmmyy•・ ffaacceebbooookk :: 秋葉ちひろ•・ 次回は1100//44(木)@CCAAさん (カスタムUUIIについて)

×