デザイナーが実際にAndroidアプリのレイアウトを 組んでみた（秋葉ちひろ）
- 1. デザイナーが実際に Androidアプリのレイアウトを 組んでみた 秋葉ちひろ
- 2. 楽しかった！
- 4. デザイナーとして ハッカソンに参加 第3回 SHARPハッカソン＠東広島が7月23日(土)・24日(日)
- 6. 動かなかった…
- 7. デザイナー主体の ハッカソンを始めた Designers Hack
- 8. もう一歩 踏み出したい！
- 9. 10月17日 12月14日 17:00∼22:00 15日 赤井さんに 自分で レクチャー やってみた していただく
- 10. 今回コーディングしたアプリ
- 11. 今回コーディングしたアプリ • 自分のアカウントを持ち、 自分の猫の写真をひたすら アップできる親バカアプリ • 友達ならぬ友猫でつなが れる
- 12. ホーム
- 13. ホーム • 自分の猫の写真一覧
- 15. ホーム • 自分の猫の写真一覧 • アクションバーには検索と 設定 • ショートカットボタンが3つ
- 16. 友猫一覧
- 17. 友猫一覧 • 友猫の写真一覧
- 18. 友猫一覧 • 友猫の写真一覧
- 20. 友猫の検索結果 • 友猫を探すときの検索結果 • 写真と、名前や種類、プロ フィールが出てくる
- 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. <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. <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. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
- 27. <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content" android:paddingTop="10dp" android:paddingBottom="5dp" android:background="#fcf9f0" > </LinearLayout>
- 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. <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>
- 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> </LinearLayout>
- 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" <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>
- 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> </LinearLayout>
- 33. <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>
- 34. <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>
- 36. <RelativeLayout android:layout_width="fill_parent" android:layout_height="wrap_content" > </RelativeLayout>
- 37. 2 1 3 4 5 6
- 40. • ボックスにborderとい う概念がない！ • box-shadowはない • paddingなどのショー トハンドはない • text-shadowは再現で きそう
- 41. <TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000" />
- 42. <TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000" />
- 43. <TextView android:textColor="#FFF" android:background="#5e4a1a" android:shadowDx="-1" android:shadowDy="-1" android:shadowRadius="1" android:shadowColor="#6000" />
- 46. res drawable bg_tile.xml drawable-hdpi img_bg_tile.png
- 47. 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>
- 48. 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
- 49. 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
- 50. main.xml <LinearLayout android:background= "@drawable/bg_tile" > bg_tile.xml
- 51. グラーデーション 境界線 角丸 <shape>
- 52. res drawable bg_tile.xml drawable-hdpi img_bg_tile.png
- 53. res drawable bg_tile.xml bg_kind.xml drawable-hdpi img_bg_tile.png
- 54. 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>
- 55. 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>
- 56. 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>
- 57. 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>
- 58. main.xml <LinearLayout android:background= "@drawable/bg_kind" > bg_kind.xml
- 61. 10月17日 12月14日 17:00∼22:00 15日 赤井さんに 自分で レクチャー やってみた していただく
- 62. とにかくまる1日
- 64. CSSコーディングの 知識があれば ぜんぜんよゆう！
- 65. ぜひ！