デザイナーが実際にAndroidアプリのレイアウトを       組んでみた       秋葉ちひろ
楽しかった!
そも そも デザイナーがなんでXMLを?
デザイナーとしてハッカソンに参加     第3回 SHARPハッカソン@東広島が7月23日(土)・24日(日)
動かなかった…
デザイナー主体のハッカソンを始めた   Designers Hack
もう一歩踏み出したい!
10月17日        12月14日17:00∼22:00      15日赤井さんに          自分で レクチャー        やってみたしていただく
今回コーディングしたアプリ
今回コーディングしたアプリ     • 自分のアカウントを持ち、      自分の猫の写真をひたすら      アップできる親バカアプリ     • 友達ならぬ友猫でつなが      れる
ホーム
ホーム• 自分の猫の写真一覧
ホーム• 自分の猫の写真一覧• アクションバーには検索と 設定
ホーム• 自分の猫の写真一覧• アクションバーには検索と 設定• ショートカットボタンが3つ
友猫一覧
友猫一覧• 友猫の写真一覧
友猫一覧• 友猫の写真一覧
友猫一覧• 友猫の写真一覧• ★マークでお気に入りに追加
友猫の検索結果• 友猫を探すときの検索結果• 写真と、名前や種類、プロ フィールが出てくる
まず、最低限のレイアウトで 作ってみた
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout            android:orientation="horizontal"            android:layout_width="fill_parent"            android...
<LinearLayout            android:orientation="horizontal"            android:layout_width="fill_parent"            android...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout            android:orientation="horizontal"            android:layout_width="fill_parent"            android...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<LinearLayout  android:orientation="horizontal"  android:layout_width="fill_parent"  android:layout_height="wrap_content" ...
<RelativeLayout  android:layout_width="fill_parent"  android:layout_height="wrap_content"  ></RelativeLayout>
21           3    4       5   6
RelativeLayoutはわりとなんでもできそう
• ボックスにborderとい う概念がない!• box-shadowはない• paddingなどのショー トハンドはない• text-shadowは再現で きそう
<TextView   android:textColor="#FFF"   android:background="#5e4a1a"   android:shadowDx="-1"   android:shadowDy="-1"   andr...
<TextView   android:textColor="#FFF"   android:background="#5e4a1a"   android:shadowDx="-1"   android:shadowDy="-1"   andr...
<TextView   android:textColor="#FFF"   android:background="#5e4a1a"   android:shadowDx="-1"   android:shadowDy="-1"   andr...
背景をつけたい! <bitmap>
res      drawable       bg_tile.xml      drawable-hdpi       img_bg_tile.png
bg_tile.xml<bitmap  android:src=        "@drawable/img_bg_tile"  android:antialias="true"  android:dither="false"  android...
bg_tile.xml<bitmap  android:src=        "@drawable/img_bg_tile"  android:antialias="true"  android:dither="false"  android...
bg_tile.xml<bitmap  android:src=        "@drawable/img_bg_tile"  android:antialias="true"  android:dither="false"  android...
main.xml<LinearLayout  android:background=           "@drawable/bg_tile">              bg_tile.xml
グラーデーション   境界線    角丸  <shape>
res      drawable       bg_tile.xml      drawable-hdpi       img_bg_tile.png
res      drawable       bg_tile.xml       bg_kind.xml      drawable-hdpi       img_bg_tile.png
bg_kind.xml<shape android:shape="rectangle"> <gradient  android:startColor="#856f2e"  android:endColor="#b0a278"  android:...
bg_kind.xml<shape android:shape="rectangle"> <gradient  android:startColor="#856f2e"  android:endColor="#b0a278"  android:...
bg_kind.xml<shape android:shape="rectangle"> <gradient  android:startColor="#856f2e"  android:endColor="#b0a278"  android:...
bg_kind.xml<shape android:shape="rectangle"> <gradient  android:startColor="#856f2e"  android:endColor="#b0a278"  android:...
main.xml<LinearLayout  android:background=           "@drawable/bg_kind">              bg_kind.xml
10月17日        12月14日17:00∼22:00      15日赤井さんに          自分で レクチャー        やってみたしていただく
とにかくまる1日
アプリとして実機で見れるとさいこーに  気分がいい
CSSコーディングの  知識があれば ぜんぜんよゆう!
ぜひ!
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)
Upcoming SlideShare
Loading in …5
×

デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)

5,498 views

Published on

Published in: Technology, Business
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,498
On SlideShare
0
From Embeds
0
Number of Embeds
236
Actions
Shares
0
Downloads
41
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

デザイナーが実際にAndroidアプリのレイアウトを 組んでみた(秋葉ちひろ)

  1. 1. デザイナーが実際にAndroidアプリのレイアウトを 組んでみた 秋葉ちひろ
  2. 2. 楽しかった!
  3. 3. そも そも デザイナーがなんでXMLを?
  4. 4. デザイナーとしてハッカソンに参加 第3回 SHARPハッカソン@東広島が7月23日(土)・24日(日)
  5. 5. 動かなかった…
  6. 6. デザイナー主体のハッカソンを始めた Designers Hack
  7. 7. もう一歩踏み出したい!
  8. 8. 10月17日 12月14日17:00∼22:00 15日赤井さんに 自分で レクチャー やってみたしていただく
  9. 9. 今回コーディングしたアプリ
  10. 10. 今回コーディングしたアプリ • 自分のアカウントを持ち、 自分の猫の写真をひたすら アップできる親バカアプリ • 友達ならぬ友猫でつなが れる
  11. 11. ホーム
  12. 12. ホーム• 自分の猫の写真一覧
  13. 13. ホーム• 自分の猫の写真一覧• アクションバーには検索と 設定
  14. 14. ホーム• 自分の猫の写真一覧• アクションバーには検索と 設定• ショートカットボタンが3つ
  15. 15. 友猫一覧
  16. 16. 友猫一覧• 友猫の写真一覧
  17. 17. 友猫一覧• 友猫の写真一覧
  18. 18. 友猫一覧• 友猫の写真一覧• ★マークでお気に入りに追加
  19. 19. 友猫の検索結果• 友猫を探すときの検索結果• 写真と、名前や種類、プロ フィールが出てくる
  20. 20. まず、最低限のレイアウトで 作ってみた
  21. 21. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ></LinearLayout>
  22. 22. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ></LinearLayout>
  23. 23. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ></LinearLayout>
  24. 24. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ></LinearLayout>
  25. 25. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ></LinearLayout>
  26. 26. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ><ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView> </LinearLayout>
  27. 27. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" ><ImageView icon_search.png android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView> </LinearLayout>
  28. 28. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView></LinearLayout>
  29. 29. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search"<EditText android:padding="10dp" ></ImageView> android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus></EditText> </LinearLayout>
  30. 30. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText></LinearLayout>
  31. 31. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText></LinearLayout>
  32. 32. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_search" android:padding="10dp" ></ImageView> <EditText android:id="@+id/editText1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1"> <requestFocus></requestFocus> </EditText> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/icon_roope" android:padding="10dp" ></ImageView></LinearLayout>
  33. 33. <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" ></RelativeLayout>
  34. 34. 21 3 4 5 6
  35. 35. RelativeLayoutはわりとなんでもできそう
  36. 36. • ボックスにborderとい う概念がない!• box-shadowはない• paddingなどのショー トハンドはない• text-shadowは再現で きそう
  37. 37. <TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000"/>
  38. 38. <TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000"/>
  39. 39. <TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000"/>
  40. 40. 背景をつけたい! <bitmap>
  41. 41. res drawable bg_tile.xml drawable-hdpi img_bg_tile.png
  42. 42. bg_tile.xml<bitmap android:src= "@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat"></bitmap>
  43. 43. bg_tile.xml<bitmap android:src= "@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat"></bitmap> img_bg_tile.png
  44. 44. bg_tile.xml<bitmap android:src= "@drawable/img_bg_tile" android:antialias="true" android:dither="false" android:filter="false" android:gravity="fill" android:tileMode="repeat"></bitmap> img_bg_tile.png
  45. 45. main.xml<LinearLayout android:background= "@drawable/bg_tile"> bg_tile.xml
  46. 46. グラーデーション 境界線 角丸 <shape>
  47. 47. res drawable bg_tile.xml drawable-hdpi img_bg_tile.png
  48. 48. res drawable bg_tile.xml bg_kind.xml drawable-hdpi img_bg_tile.png
  49. 49. bg_kind.xml<shape android:shape="rectangle"> <gradient android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /></shape>
  50. 50. bg_kind.xml<shape android:shape="rectangle"> <gradient android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /></shape>
  51. 51. bg_kind.xml<shape android:shape="rectangle"> <gradient android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /></shape>
  52. 52. bg_kind.xml<shape android:shape="rectangle"> <gradient android:startColor="#856f2e" android:endColor="#b0a278" android:angle="270" ></gradient> <stroke android:width="1dp" android:color="#856f2e" /> <corners android:radius="10dp" /></shape>
  53. 53. main.xml<LinearLayout android:background= "@drawable/bg_kind"> bg_kind.xml
  54. 54. 10月17日 12月14日17:00∼22:00 15日赤井さんに 自分で レクチャー やってみたしていただく
  55. 55. とにかくまる1日
  56. 56. アプリとして実機で見れるとさいこーに 気分がいい
  57. 57. CSSコーディングの 知識があれば ぜんぜんよゆう!
  58. 58. ぜひ!

×