夜子まま塾@鹿児島

1,251 views

Published on

鹿児島で行われた夜子まま塾の資料

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

No Downloads
Views
Total views
1,251
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

夜子まま塾@鹿児島

  1. 1. 夜子まま塾@鹿児島 日本Androidの会神戸支部 夜子まま 13年8月27日火曜日
  2. 2. アジェンダ アジェンダ 自己紹介 本プレゼンの趣旨説明 初心者向け講義 実践レイアウト 13年8月27日火曜日
  3. 3. 自己紹介 名前 寺園 聖文 肩書 株式会社Re:Kayo-System 代表取締役社長 他  日本Androidの会神戸支部、NFCLab関西支部、    京都GDG、神戸GDG、瀬戸内デベロッパー部 マイブーム バスケ 13年8月27日火曜日
  4. 4. 想定する対象者 Androidアプリ開発初心者 アプリの画面デザインをやっているけどAndoridははじめ て Androidならなんでも知りたいというAndroidおたく 夜子ままさんの勉強会に興味のある人 13年8月27日火曜日
  5. 5. 13年8月27日火曜日
  6. 6. スマホ用の画面デザインを 作ってほしいと頼まれ このアプリの画面作 ってくれる? いやぁ 私やったことないけ ど、おもしろそう! 13年8月27日火曜日
  7. 7. とりあえずPhotoshopで 画面のレイアウトを作ってみたけど うぐぐ、、 13年8月27日火曜日
  8. 8. 今度は Androidアプリ用に画像を切り出して ほしいと言われた これじゃ使えないの でアプリ用に切り出 してくれる? うーん 13年8月27日火曜日
  9. 9. そこでネットで調べて Androidの開発環境を入れてみたが・・・ 分からない事だらけ で、問題は山積み 13年8月27日火曜日
  10. 10. 最初にネタバレすると 13年8月27日火曜日
  11. 11. 提出すると喜ばれる リソース一式 色(color.xml) フォントスタイル(TextStyle.xml) シェイプ(Drawable Shape ファイル) 画像(各解像度毎のPNG, 9パッチ) アニメーション(animation ファイル) テーマ(スタイル ファイル) 文字列(strings.xml) 数値定義(dimension.xml) レイアウト(Layoutファイル) 13年8月27日火曜日
  12. 12. 環境構築 13年8月27日火曜日
  13. 13. ADT Bundleをインストール 以上 13年8月27日火曜日
  14. 14. ブラウザで 下記URLを開き http://developer.android.com/sdk/index.html クリック 13年8月27日火曜日
  15. 15. ダウンロードしたファイルをインストール ZIPなら、解凍して任意のフォルダへ EXEなら実行してダイアログに従う 13年8月27日火曜日
  16. 16. 画面作成 13年8月27日火曜日
  17. 17. 画面作成までの手順 画面作成用のプロジェクトを作成 レイアウトファイル(画面ファイル)を編集する 実行して画面を確認 13年8月27日火曜日
  18. 18. プロジェクトの作成 ①Eclipseを起動 ② ワークスペースの選択 ③ Eclipse 13年8月27日火曜日
  19. 19. プロジェクトの作成 ④メニューから File→New→Android Application Projectを選択 13年8月27日火曜日
  20. 20. プロジェクトの作成 アプリ名 プロジェクト名 パッケージ名 ⑤ひと通り入力したらNextをクリック アプリ名を入れると、自動的 に他が補完される。まずはこ の初期値でも問題ない。 13年8月27日火曜日
  21. 21. プロジェクトの作成 ⑥Next→Next→Next→Finish 13年8月27日火曜日
  22. 22. 気になる人は 10日でおぼえる Androidアプリ開発入 門教室 第2版 大型本: 424ページ 出版社: 翔泳社; 第2版 (2012/10/19) ISBN-10: 4798126306 ISBN-13: 978-4798126302 発売日: 2012/10/19 価格: ¥2,940 13年8月27日火曜日
  23. 23. プロジェクト作成完了 13年8月27日火曜日
  24. 24. レイアウトファイルを閉じる ①タブの☓ボタンをクリック 13年8月27日火曜日
  25. 25. レイアウトファイルを開く ① 開きたいレイアウトファイルをダブルクリック 右クリックでエディタの種類を選択できます。 Android Common XML Editorが デフォルトです。 13年8月27日火曜日
  26. 26. レイアウトを編集(GUI) ①配置したいWidgetをクリック ②配置したい場所にドロップ ③プロパティーを編集 13年8月27日火曜日
  27. 27. レイアウトを編集(XML) ①XML編集タブを選択 ②XML属性により直接編集 属性にどのようなものがあるかは憶えておかない といけない。 しかし、簡単な編集は格段にこちらが速いい。 13年8月27日火曜日
  28. 28. 画面の確認(省略) 実機の場合は実機をUSB接続し実行 エミュレーターの場合は、事前にエミュレーターを作成 しておき、実行でエミュレーターを選択 13年8月27日火曜日
  29. 29. 実行画面 詳しくは書籍・ネット等の情報 を参照してください。 13年8月27日火曜日
  30. 30. レイアウト 13年8月27日火曜日
  31. 31. 最初の難関 13年8月27日火曜日
  32. 32. レイアウト編集 思うようにウィジェットを配置できない レイアウトって何? 5つのレイアウトの使い分けがわからない レイアウトの使い方でアプリのスピードが変わる 解像度、サイズの異なる端末でも崩れないレイアウト 13年8月27日火曜日
  33. 33. 思うように配置できない理由 ViewGroup View View View ViewGroup ・・・ Layout,ScrollView,ListView,,, View ・・・ Button,TextView,ImageView,,, 13年8月27日火曜日
  34. 34. レイアウトのルールに従う 例えばLinearLayout(Vertical)だと View View View View どこに置いても 縦に連続で配置される。 13年8月27日火曜日
  35. 35. え? それじゃ単純な画面しか 作れないじゃない? 13年8月27日火曜日
  36. 36. 組み合わせて実現する ViewGroup View View ViewGroup View View レイアウトは入れ子に することができる。 13年8月27日火曜日
  37. 37. レイアウトの種類 LinearLayout ・・・縦か横へ連続配置するレイアウト RelativeLayout ・・・相対的な配置をするレイアウト FrameLayout ・・・重ねるように配置するレイアウト TableLayout ・・・テーブルで配置するレイアウト GridLayout ・・・TableLayoutみたいなLinearLayout 13年8月27日火曜日
  38. 38. Linear Layout(Horizontal) <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" /> </LinearLayout> 13年8月27日火曜日
  39. 39. Linear Layout(Vertical) <LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="HelloWorld" /> </LinearLayout> 13年8月27日火曜日
  40. 40. RelativeLayout(Child) 愛 BaseLine toRightOftoLeftOf above below alignTop alignBottom alignLeft alignRight 13年8月27日火曜日
  41. 41. RelativeLayout(Root) alignParentRight alignParentTopcenterInParent alignParentLeft centerHorizontal centerVertical alignParentBottom 13年8月27日火曜日
  42. 42. RelativeLayout(例) <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_centerVertical="true" android:text="TextView" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/textView1" android:layout_toRightOf="@+id/textView1" android:text="TextView" /> <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textView1" android:layout_alignLeft="@+id/textView2" android:text="TextView" /> </RelativeLayout> 13年8月27日火曜日
  43. 43. FrameLayout <FrameLayout android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/a" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/b" /> <ImageView android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/c" /> </FrameLayout> 13年8月27日火曜日
  44. 44. <TableLayout android:layout_width="match_parent" android:layout_height="match_parent" > <TableRow android:id="@+id/tableRow1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abc" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abc" /> </TableRow> <TableRow android:id="@+id/tableRow2" android:layout_width="wrap_content" android:layout_height="wrap_content" > <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abcdefg" /> <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="abc" /> </TableRow> </TableLayout> TableLayout 13年8月27日火曜日
  45. 45. GridLayout <GridLayout android:layout_width="match_parent" android:layout_height="match_parent" android:columnCount="6" > <Button android:id="@+id/button1" android:layout_column="0" android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button2" android:layout_column="2" android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button3" android:layout_column="3" android:layout_row="0" android:text="Button" /> <Button android:id="@+id/button4" android:layout_column="0" android:layout_row="1" android:text="Button" /> <Button android:id="@+id/button6" android:layout_column="2" android:layout_columnSpan="2" android:layout_row="1" android:layout_gravity="fill_horizontal" android:text="Button" /> </GridLayout> 13年8月27日火曜日
  46. 46. GridLayout (1,1) (0,0)(1,0)(2,0)(3,0) (0,1) (0,2) (0,3) (0,4) (1,2) (1,3) (1,4) (2,1) (2,2) (2,3) (2,4) (3,1) (3,2) (3,3) (3,4) (column, row)位置の指定 範囲の指定 column_span row_span row_span = 2 column_span = 2 13年8月27日火曜日
  47. 47. GridLayout (column=2, row=1, column_span=2) (column=2, row=2, column_span=2, layout_gravity=fill_horizontal) 13年8月27日火曜日
  48. 48. API16から追加されたため、それ以前はSupportLibrary を使用する必要がある。パッケージが違うので注意。 (android.support.v7.widget.GridLayout) ColumnやRowは数値を飛ばすと自動で詰められる特性が ある。元LinearLayoutであることを考慮すればイメージ しやすい。 GridLayout(注意点) 13年8月27日火曜日
  49. 49. 画像 13年8月27日火曜日
  50. 50. 高DPI端末での劣化 Original 120dpi 320dpi 13年8月27日火曜日
  51. 51. DPIとは dpi ( Dot Per Inch) 1インチあたりのピクセル数 1inch=2.54cm 1inch 1inch ピクセル ピクセル数が多いほど精細 な画像表示が可能になる。 13年8月27日火曜日
  52. 52. 高DPIの問題 50x50ピクセルの 画像 300x300のピクセル領域 足りない部分は補完されるので劣化する 13年8月27日火曜日
  53. 53. どうすればよい? 300x300ピクセル の画像 300x300のピクセル領域 画素数の高い画像なので劣化しない。 13年8月27日火曜日
  54. 54. 全て高解像度にすれば良い? Original 120dpi 320dpi 300x300ピクセル の画像 低DPI端末では縮小処理が行われる。 そのため、無駄に高解像度はオーバースペック。 50x50 の領域 300x300 の領域 13年8月27日火曜日
  55. 55. 正解:DPI毎に画像を準備 DPI 端末例 シェア率 ldpi xperia10 mini, Huawei Ideos, PcketWifiS 10.3% mdpi KindleFile,iPhone3,iPad1,iPad mini 23.2% tvdpi Nexus7(Jerry Bean) 1.1% hdpi Nexus7, Galaxy S, Galaxy SII, Xperia Arc 35.2% xhdpi Galaxy Nexus, iPhone4,iPhone5, iPad3,iPad4 24.5% xxhdpi XperiaZ, Arrows X Optimus G, Medias W、2012年冬以降の端末 5.7% 13年8月27日火曜日
  56. 56. DPI毎のフォルダ名 res/drawable-<dpi名> dpi毎にフォルダを作成し、 同一ファイル名のファイルを 配置する。 13年8月27日火曜日
  57. 57. SHAPE DRAWABLE 単純な線、丸、四角等の画像もDPI毎 に置くことを考えると手間がかかる。 このような場合は、Shape Drawableを 使うことで手間を削減できる。 13年8月27日火曜日
  58. 58. SHAPE DRAWABLEとは Shape DrwableはXMLによって定義す る画像です。 <shape android:shape="oval" > <solid android:color="#666666" /> <size android:height="120dp" android:width="120dp" /> </shape> 13年8月27日火曜日
  59. 59. SHAPE DRAWABLEの配置 <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" /> 画像ファイルと区別なく使える 解像度に依存しないのでどこでも よいが、画像と同等に扱われるの 配置には注意すること 13年8月27日火曜日
  60. 60. SHAPE DRAWABLEの使用 <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" | "radial" | "sweep"] android:usesLevel=["true" | "false"] /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> </shape> android:shape キーワード。 シェイプのタイプを定義します。有効な値は以下です。 "rectangle" 含んでいるビューを長方形で埋めます。これがデフォルトのシェイプです。 "oval" 含んでいるビューのディメンションを楕円形にフィットさせます。 "line" 含んでいるビューの幅で水平方向の線が広がります。このシェイプは線の幅の指定に は <stroke> 要素が必要となります。 "ring" 同心円のシェイプです。 <solid> 外形を塗りつぶす無地の色です。 android:color カラー。シェイプに適用するカラーで、16 進数の値またはカラーリソースを指定し ます。 <stroke> シェイプの点線の指定です。 android:width ディメンション。線の厚みで、ディメンション値または ディメンションリソース を指 定します。 android:color カラー。線のカラーで、16 進数の値またはカラーリソースを指定します。 android:dashGap ディメンション。点線間の間隔で、ディメンション値または ディメンションリソー ス を指定します。android:dashWidth が設定されている場合のみ有効。 android:dashWidth ディメンション。点線のサイズで、ディメンション値または ディメンションリソー ス を指定します。android:dashGap が設定されている場合のみ有効。 13年8月27日火曜日
  61. 61. 9パッチ このような吹き出しの画像を作る場合、 文字の長さにあわせて伸縮したい。 あいう あいうえおかき しかし、そのまま伸縮すると形状 が変形する 13年8月27日火曜日
  62. 62. DRAW9PATCH <Adt Bundle>/sdk/tools/draw9patch 13年8月27日火曜日
  63. 63. 伸縮位置の設定 横方向に伸縮する位置 縦方向に伸縮する位置 縦方向に文字列または子Viewを 表示する位置 横方向に文字列または子Viewを 表示する位置 13年8月27日火曜日
  64. 64. 9PATCHの例 あいうえおかきくけこ さしすせとたちつてと 13年8月27日火曜日
  65. 65. 実践 13年8月27日火曜日
  66. 66. L I N E 13年8月27日火曜日
  67. 67. みんな大好きLINEアプリの 画面をパクってみる。 というハンズオン 13年8月27日火曜日
  68. 68. 素材 実際のLINEの画面をキャプチャしたものを利用。 13年8月27日火曜日
  69. 69. 機能の分割 タイトルバー タブバー 検索バー 友達リスト 13年8月27日火曜日
  70. 70. タイトルバーの作成 ボタン ボタン ラベル 縦区切り線 縦区切り線 横区切り線 13年8月27日火曜日
  71. 71. PHOTO SHOP 13年8月27日火曜日
  72. 72. タイトルバー画像切り出し Click時 ボタン タイトル背景 縦区切り線 9patch 9patch 13年8月27日火曜日
  73. 73. ボタン画像の定義 <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_focused="true" android:state_pressed="false"> <color android:color="@color/titlebar_selected_color" /> </item> <item android:state_focused="true" android:state_pressed="true"> <color android:color="@color/titlebar_selected_color" /> </item> <item android:state_focused="false" android:state_pressed="true"> <color android:color="@color/titlebar_selected_color" /> </item> <item> <color android:color="@android:color/transparent" /> </item> </selector> ステートリストファイル 画像ファイルとして、res/drawableの下に配置 13年8月27日火曜日
  74. 74. ステートリストファイル <?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android" android:constantSize=["true" | "false"] android:dither=["true" | "false"] android:variablePadding=["true" | "false"] > <item android:drawable="@[package:]drawable/drawable_resource" android:state_pressed=["true" | "false"] android:state_focused=["true" | "false"] android:state_selected=["true" | "false"] android:state_active=["true" | "false"] android:state_checkable=["true" | "false"] android:state_checked=["true" | "false"] android:state_enabled=["true" | "false"] android:state_window_focused=["true" | "false"] /> </selector> android:state_pressed ・・・ 押されている状態 android:state_focused ・・・ フォーカスがある状態 android:state_selected ・・・ 選択している状態 android:state_active ・・・ アクティブな状態 android:state_checkable ・・・ チェック可能な状態 android:state_enabled ・・・ 有効な状態 android:state_checked ・・・ チェックされた状態 13年8月27日火曜日
  75. 75. タイトルのレイアウト作成 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@drawable/title" android:orientation="horizontal" > <Button android:id="@+id/button1" style="@style/titlebar_button_text" android:layout_width="64dip" android:layout_height="match_parent" android:background="@drawable/title_button_background" android:gravity="center" android:text="編集" /> <View android:layout_width="3px" android:layout_height="match_parent" android:background="@drawable/title_separator" /> <TextView android:id="@+id/textView2" style="@style/titlebar_title_text" android:layout_width="0dip" android:layout_height="match_parent" android:layout_weight="1" android:gravity="center" android:text="友達(5人)" /> <View android:layout_width="3px" android:layout_height="match_parent" android:background="@drawable/title_separator" /> <ImageButton android:id="@+id/button2" style="@style/titlebar_button_text" android:layout_width="64dip" android:layout_height="match_parent" android:background="@drawable/title_button_background" android:src="@drawable/add_friend" /> </LinearLayout> 13年8月27日火曜日
  76. 76. タブバーの作成 ボタン 横区切り線 新着ラベル 13年8月27日火曜日
  77. 77. タブバー画像切り出し ボタン 新着ラベル 13年8月27日火曜日
  78. 78. 新着の表示 FrameLayout ImageButton TextView 新着 新着なし ImageButton 13年8月27日火曜日
  79. 79. タブバーのレイアウト作成 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/tabbar_background_color" android:orientation="horizontal" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/friend_button" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/talk_button" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/timeline_unselected" /> <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/other_unselected" /> </LinearLayout> 13年8月27日火曜日
  80. 80. 検索バーの作成 テキストボックス 13年8月27日火曜日
  81. 81. 検索バー画像切り出し テキストボックス 13年8月27日火曜日
  82. 82. 検索バーのレイアウト作成 <?xml version="1.0" encoding="utf-8"?> <EditText xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/editText1" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@drawable/searchbox" android:ems="10" android:hint="検索" > <requestFocus /> </EditText> 13年8月27日火曜日
  83. 83. 友達リストの作成 マイプロフィールヘッダ グループヘッダ 友達ヘッダ マイプロフィールボディー グループボディー 友達ボディー 13年8月27日火曜日
  84. 84. マイプロフィールヘッダのレイアウト作成 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/RelativeLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" > <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:text="マイプロフィール" /> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:src="@drawable/friend_list_expand" /> <View android:layout_width="match_parent" android:layout_height="1px" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:background="@color/list_separator_color" /> </RelativeLayout> 13年8月27日火曜日
  85. 85. マイプロフィールボディのレイアウト作成 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_centerVertical="true" android:src="@drawable/profile" /> <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:background="@drawable/now_message" android:gravity="center_vertical" android:text="蓮華" /> <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_toRightOf="@+id/imageView1" android:text="てらぷに" /> <include android:layout_width="match_parent" android:layout_height="1px" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" layout="@layout/list_separator" /> </RelativeLayout> 13年8月27日火曜日
  86. 86. 以下同 似たよう感じなので割愛します。 13年8月27日火曜日
  87. 87. レイアウトを合体 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/LinearLayout1" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/list_background_color" android:orientation="vertical" tools:context=".MainActivity" > <include android:layout_width="match_parent" android:layout_height="64dip" layout="@layout/taitlebar" /> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/tabbar" /> <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/searchbox" /> <ScrollView android:id="@+id/scrollView1" android:layout_width="match_parent" android:layout_height="wrap_content" > <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/friendlist" /> </ScrollView> </LinearLayout> 13年8月27日火曜日
  88. 88. INCLUDE <include android:layout_width="match_parent" android:layout_height="wrap_content" layout="@layout/B" /> A B ほっておくとレイアウトは肥大化するので機能 別に作成し、必要な箇所でIncludeすると良い。 13年8月27日火曜日
  89. 89. 残念な見た目 13年8月27日火曜日
  90. 90. 自分で自分に駄目だし 窮屈 フォントが大きすぎ 右に寄り過ぎ フォントのスタイルが違う 画像が大きすぎる 太すぎる 13年8月27日火曜日
  91. 91. 微調整テク(大きさの指定) layout_width layout_height <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" /> much_parent - 親Viewのサイズと同じ wrap_content - 素材のサイズと同じ 予約文字指定 数値指定(単位) fill_parent - much_parentと同じ 設定できる値は、 dp(dip)/sp/px/pt/mm/in 13年8月27日火曜日
  92. 92. 単位について dp (dip) - Density-independent Pixels 画面の物理的な密度に基づいた抽象的な単位。 この単位は 160 dpi の画面と対応していて、160 dpi の画面で 1 dp = 1 px になる。なので、dp-pixel 比は画面密度(解像度)に応じて変化する が、必ずしも正比例するわけではない。コンパイラは "dip"、"dp" のいずれも理解できるが、"dp" という記述のほうが "sp" との対応関係がよりわ かりやすい。 sp - Scale-independent Pixels dp に似た単位だが、ユーザーが設定したフォントサイズによって自動でスケールされる。フォントサイズを指定する場合には、この単位を使うこと を推奨している。よって、sp で指定したサイズは、画面密度(解像度)とユーザーが設定したフォントサイズに依存する。 pt - Points スクリーンの物理的サイズに基づいた 1/72 インチ。 px - Pixels ピクセル、画面の実際のピクセル数 デバイスによって、1インチ当たり異なるピクセル数を持つ可能性があり、実際に表示されるサイズが変わってくるため、この単位で測ることは推奨 しない。 mm - ミリメートル 画面の物理的サイズに基づく。 in - インチ 画面の物理的サイズに基づく。 13年8月27日火曜日
  93. 93. 微調整テク(余白の指定) <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginLeft="5dip" android:layout_marginRight="5dip" android:layout_marginTop="5dip" android:layout_marginBottom="5dip" android:src="@drawable/circle" /> layout_marginLeft layout_marginRight layout_marginTop layout_marginBottom layout_marginLeft - 左の余白 layout_marginRight - 右の余白 layout_marginTop - 上の余白 layout_marginBottom - 下の余白 layout_margin - デフォルトの余白 設定できる値は、 dp(dip)/sp/px/pt/mm/in 数値指定(単位) 13年8月27日火曜日
  94. 94. 微調整テク(パディングの指定) <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:paddingBottom="5dip" android:paddingLeft="5dip" android:paddingRight="5dip" android:paddingStart="5dip" android:paddingEnd="5dip" android:paddingTop="5dip" > <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" /> </LinearLayout> paddingLeft/paddingStart paddingRight/paddingEnd paddingTop paddingBottom paddingLeft - 子の左に余白 paddingRight - 子の右に余白 paddingTop - 子の上に余白 paddingBottom - 子の下に余白 padding - デフォルトで子に余白 paddingStart - paddingLeftとほぼ同じ動 きをするが優先順位は上。レイアウト内の向 きに応じて右と左が逆転する。 paddingEnd - paddingRightとほぼ同じ動 きをするが優先順位は上。レイアウト内の向 きに応じて右と左が逆転する。 13年8月27日火曜日
  95. 95. 微調整テク(重みの指定) top - コンテナの上部に配置し、サイズ変更は行いません。 bottom - コンテナの下部に配置し、サイズ変更は行いません。 left - コンテナの左側に配置し、サイズ変更は行いません。 right - コンテナの右側に配置し、サイズ変更は行いません。 center_vertical - 上下中央に配置し、サイズ変更は行いません。 fill_vertical - オブジェクトの高さを、コンテナのサイズに合わせます。 center_horizontal - 左右中央に配置し、サイズ変更は行いません。 fill_horizontal - オブジェクトの幅を、コンテナのサイズに合わせます。 center - 上下左右中央に配置し、サイズ変更は行いません。 fill - オブジェクトの高さ・幅を、コンテナのサイズに合わせます。 clip_vertical - top/bottomの追加オプションとして、オブジェクトの上 部/下部の境界をコンテナの境界に合わせます。 clip_horizontal - left/rightの追加オプションとして、オブジェクトの左 側/右側の境界をコンテナの境界に合わせます。 gravity - 内包する子に対して指定 layout_gravity - 自分自身に対して指定 <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" android:gravity="top"> <ImageView android:id="@+id/imageView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/circle" /> </LinearLayout> 13年8月27日火曜日
  96. 96. 微調整したレイアウト 13年8月27日火曜日
  97. 97. 修正前VS修正後 13年8月27日火曜日
  98. 98. ソースコード https://docs.google.com/file/d/0B2nCbQ0YSzbDN09TRkRKUVNCYVU/edit?usp=sharing http://goo.gl/FYLMU4 FULLURL 短縮URL ファイル名 LineImageSample.zip 13年8月27日火曜日
  99. 99. 参考資料 Y.A.M の 雑記帳  http://y-anz-m.blogspot.jp/2010/05/androiddimension.html Android API Reference  http://developer.android.com/reference/packages.html Android Wiki  http://wikiwiki.jp/android/ ソフトウェア技術ドキュメントを勝手に翻訳  https://sites.google.com/a/techdoctranslator.com/jp/ 13年8月27日火曜日
  100. 100. 告知 13年8月27日火曜日
  101. 101. Android NFCプログラミング完全ガイド Android NFCプログラミング完全ガイド [大型本] 株式会社 Re:Kayo-System (著) 大型本: 264ページ 出版社: 翔泳社 (2013/9/13) 言語 日本語 ISBN-10: 4798131709 ISBN-13: 978-4798131702 発売日: 2013/9/13 13年8月27日火曜日
  102. 102. Effective Android 第2版 EffectiveAndroid 第2版 発売日 8月29日(β版) 価格は1900円です 新規書下ろし内容(あくまで予定ですので変更する可能性もあります) @checkela AOSPを17倍楽しむ方法 @chun_ryo Android 4.3 プライバシーポリシー AppOps を解剖する @cat_kaotaro 最新 NDK r9 の新機能を解説する @miroc007 エンジニアのためのデザイン講座 よくあるUIのカラーバランスと簡単カラー理論 @keis UIのグラフィックを考える上でのコンセプトメーキングを学ぶ @shige0501 LoaderでSQLiteDBやContentProviderを読み込む @muo_jp Android 4.3 DRM の仕組みと運用(仮・テーマ変わるかも) @mhidaka Volleyで学ぶネットワークプログラミング @l_b__ Android.mkのレシピ @bols_blue Jenkinsを使ったUIテストで落とし穴に落ちない冴えたやり方 @nkzn Geofencing、location APIで位置情報を活用する @95kugo Android 4.3 Automated UI testing(仮・テーマ変わるかも) @shigepon7 理系のためのなぜなにgit @tao_gaku (未定) 薄くない薄い本! 13年8月27日火曜日

×