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.
2012/02/18 Global Android Dev Camp Kyoto @cattaka_netAndroidレイアウトのスタンダードアプローチ              住友 孝郎            @cattaka_net
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net       自己紹介●   住友 孝郎(すみとも たかお)●   HN : Cattaka(キャットタカ)●   twitter : @...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net           何やってる人●   工作機系のWindowsアプリ作ってました●   業務系Webシステム作ってました●   And...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_netgdgdいろいろ作ってます
2012/02/18 Global Android Dev Camp Kyoto @cattaka_netロボットアーム作ってます                AndroidからADKで制御
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net          今回のターゲット●   Android向けのレイアウトXMLを作る人●   プログラマ〜デザイナの辺り
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net    Androidアプリ開発を取り巻く問題●   まだベストプラクティスが確立されてない●   従来のベストプラクティス    ●  ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net             ややこしくする要因●   様々な文化の人が関わる    ●   組み込み屋さん    ●   Web屋さん   ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net               やりがちなこと●   プログラマさんが    ●   ピクセル決め打ちのレイアウト    ●   マウス前提...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net    やりがちなことが何故問題か?●   Androidはいろんな文化が混ざり込んでいる●   その中で生まれた文化がある●   And...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net画像サイズにまつわる問題
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net         サイズと言っても2種類ある●   ファイルサイズ    ●   APKが大きくなる        →端末の容量を圧迫する...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                サイズを小さくするためには●   Bitmapは必要最小限にする    ●   xmlで描画させる    ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                 xmlで描画させる●   Shape Drawable●   Layer List●   Etc    ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net            Shape Drawable●   XMLでボタンや背景用の画像が生成できる    ●   四角や丸が描ける   ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_netAPIDemoのサンプル(1)            ●   四角            ●   丸            ●   丸四角
2012/02/18 Global Android Dev Camp Kyoto @cattaka_netAPIDemoのサンプル(2)            ●   境界が点線            ●   グラデーション
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                                            実例<?xml version="1.0" enc...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net              Layer List●   ShapeやBitmapをまとめて    1つのDrawableとして扱える●  ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net実践:xmlだけで二重グラデーション<?xml version="1.0" encoding="utf-8"?><layer-list x...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net         Nine-Patch(1)●   伸び縮みする画像で汎用的に使える           横に引き伸ばす         ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net            Nine-Patch(2)●   Android SDK同封のdraw9patchで作れます
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net            サイズにまつわる問題の対策●   xmlとNine-patchを使おう●   メリット    ●   多言語化もし...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net個々の画面サイズによる問題
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net        画面サイズの違いは問題山積み●   Webサイトと同じようにしたら大変なことに・・・    ●   小さいボタンが密集する...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                 何故問題か●   一般にPCは画面が十分に大きい    ●   多少レイアウトが悪くても広さで誤魔化せる...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net       それらを解決するために●   フレキシブルなレイアウトを作りましょう●   各Viewの特性やレイアウトを理解して組み合わせ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net               Viewのサイズ(1)●   各Viewはそれぞれ理想的なサイズを持つ●   意図的なサイズ指定をしない限り...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                       Viewのサイズ(2)●   layout_width/heightの値          ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                    マージンとパディング●   実際の幅 = コンテンツの幅 + パディング●   マージンはView...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                レイアウトの種類●   LinearLayout    ●   横/縦に並べる●   TableLayou...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                                           LinearLayout(1) ●     縦/横に...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                LinearLayout(2)●   layout_weightの意味     ●   余った領域を割り振...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                LinearLayoutの小技●   幅を均等に割り振る手法     ●   layout_width=”...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net           TableLayout●   グリッド状に並べる●   各セルの縦横の幅は一番大きい物に合わせる●   セルの結合が...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net         RelativeLayout(1)●   各Viewを組み合わせて並べる●   考え方は上下左右を「何に合わせるか」とい...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                      RelativeLayout(2)●   上下左右の各端が合わせ方    1.理想的なサイズ ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                    RelativeLayout(3)                                ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net              FrameLayout●   重ねるレイアウト●   他の部品と組み合わせて使う●   例    ●   予め...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net        レイアウトの使い分け例想定している画面                                  入力欄だけ拡大縮...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net    例(1)
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                 例(2)●   1→2→3の順にレイアウトを置く●   すると、3の部分が伸び縮みして、    画面サイ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net    個々の画面サイズによる問題の対策●   画面の違いを想定する    ●   方向の違い    ●   アスペクト比の違い    ●...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net                    まとめ●   画像サイズにまつわる問題    ●   ファイルサイズだけじゃなくメモリもご注意  ...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net               最後に●   ベストプラクティスを覚えて    サクッと作りましょう●   ハッカソンもサクッと作りましょう...
2012/02/18 Global Android Dev Camp Kyoto @cattaka_netご清聴ありがとうございました              住友 孝郎            @cattaka_net
2012/02/18 Global Android Dev Camp Kyoto @cattaka_net          The Bad Know-how●   多段LinearLayout●   一個のXMLで縦横両対応●   Surfa...
Upcoming SlideShare
Loading in …5
×

Androidレイアウトのスタンダードアプローチ

15,585 views

Published on

Published in: Technology
  • Dating direct: ♥♥♥ http://bit.ly/2ZDZFYj ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Follow the link, new dating source: ❤❤❤ http://bit.ly/2ZDZFYj ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • DOWNLOAD FULL BOOKS, INTO AVAILABLE FORMAT ......................................................................................................................... ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. PDF EBOOK here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. EPUB Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... 1.DOWNLOAD FULL. doc Ebook here { https://tinyurl.com/y8nn3gmc } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Androidレイアウトのスタンダードアプローチ

  1. 1. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_netAndroidレイアウトのスタンダードアプローチ 住友 孝郎 @cattaka_net
  2. 2. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 自己紹介● 住友 孝郎(すみとも たかお)● HN : Cattaka(キャットタカ)● twitter : @cattaka_net● 株式会社ブリリアントサービス所属 (2012/01/01〜)
  3. 3. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 何やってる人● 工作機系のWindowsアプリ作ってました● 業務系Webシステム作ってました● Androidアプリ作ってます
  4. 4. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_netgdgdいろいろ作ってます
  5. 5. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_netロボットアーム作ってます AndroidからADKで制御
  6. 6. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 今回のターゲット● Android向けのレイアウトXMLを作る人● プログラマ〜デザイナの辺り
  7. 7. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Androidアプリ開発を取り巻く問題● まだベストプラクティスが確立されてない● 従来のベストプラクティス ● Web → Struts, Ruby on Rails ● アプリ → .NET, MFC, Qt ● クラウド → Slim3, Hadoop● プログラマさんもデザイナさんも 従来の手法でアプリを作ってしまう →だから一緒に考えましょ♪
  8. 8. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net ややこしくする要因● 様々な文化の人が関わる ● 組み込み屋さん ● Web屋さん ● 携帯アプリ屋さん ● 業務アプリ屋さん● スマートフォンのアプリはいろんな文化が混ざる
  9. 9. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net やりがちなこと● プログラマさんが ● ピクセル決め打ちのレイアウト ● マウス前提の画面仕様 ● 画面サイズを考慮してない ● etc● デザイナさんがやりがちなこと(?) ● Web系の手法がそのまま持ち込まれる ● Bitmapがデーンと貼られる ● etc
  10. 10. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net やりがちなことが何故問題か?● Androidはいろんな文化が混ざり込んでいる● その中で生まれた文化がある● Android固有の問題がある● レイアウトについての文化 ● 画像サイズにまつわる問題 ● 画面サイズによる問題
  11. 11. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net画像サイズにまつわる問題
  12. 12. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net サイズと言っても2種類ある● ファイルサイズ ● APKが大きくなる →端末の容量を圧迫する →最近はSDカードに保存できるのでOK● 展開されたときのサイズ ● JPGやPNGは圧縮が効くけど、展開すると問題になるこ ともある →展開時にOOMになる
  13. 13. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net サイズを小さくするためには● Bitmapは必要最小限にする ● xmlで描画させる ● Nine-patchを使う ap X Nine ml Bitm -pat ch
  14. 14. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net xmlで描画させる● Shape Drawable● Layer List● Etc ● Bitmap+xmlでタイリングする ● Clip Drawable
  15. 15. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Shape Drawable● XMLでボタンや背景用の画像が生成できる ● 四角や丸が描ける ● 丸四角ができる ● グラデーション ● 枠線も描ける
  16. 16. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_netAPIDemoのサンプル(1) ● 四角 ● 丸 ● 丸四角
  17. 17. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_netAPIDemoのサンプル(2) ● 境界が点線 ● グラデーション
  18. 18. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 実例<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> →角を10dip丸める <corners android:radius="10dp" /> <gradient android:angle="90" android:startColor="#ffd8b2" android:endColor="#ffbf7f" →グラデーション android:type="linear" /> →枠線は2dipで青 <stroke android:width="2dp" android:color="#0184D1"/></shape>
  19. 19. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Layer List● ShapeやBitmapをまとめて 1つのDrawableとして扱える● 例:BitmapとShapeを重ねた場合
  20. 20. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net実践:xmlだけで二重グラデーション<?xml version="1.0" encoding="utf-8"?><layer-list xmlns:android="http://schemas.android.com/apk/res/android" > <item> <shape android:shape="rectangle"> <corners android:radius="10dp" /> <gradient android:angle="90" android:startColor="#ff007fff" android:centerColor="#00007fff" android:endColor="#700f7fff" android:type="linear" android:centerX="0.7" android:centerY="0.3"/> <stroke android:width="2dp" android:color="#0184D1"/> </shape> 重ねる </item> <item> <shape android:shape="rectangle"> <corners android:radius="10dp" /> <gradient android:centerX="0.3" android:centerY="0.3" android:gradientRadius="200" android:startColor="#007f7fff" android:centerColor="#007f7fff" android:endColor="#7f7f7fff" android:type="radial"/> <stroke android:width="2dp" android:color="#0184D1"/> </shape> </item></layer-list>
  21. 21. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Nine-Patch(1)● 伸び縮みする画像で汎用的に使える 横に引き伸ばす 縦に引き伸ばす
  22. 22. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Nine-Patch(2)● Android SDK同封のdraw9patchで作れます
  23. 23. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net サイズにまつわる問題の対策● xmlとNine-patchを使おう● メリット ● 多言語化もしやすくなる ● 言語ごとに画像ファイルを作っていたのが不要になる ● 画像数が減るのでAPKが小さくなる ● メモリにやさしくなる● デメリット ● デコられた文字のボタンは作れない – 対応策に出こられたフォントを使うという手はある ● Nine-patchは拡大縮小されるのでノイズが気になる
  24. 24. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net個々の画面サイズによる問題
  25. 25. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 画面サイズの違いは問題山積み● Webサイトと同じようにしたら大変なことに・・・ ● 小さいボタンが密集すると指じゃ押せない● 方向を変えたら崩壊した ● 縦画面前提で作ったら横にしたら潰れる● スマートフォン用アプリをタブレットで使うと大きす ぎる
  26. 26. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 何故問題か● 一般にPCは画面が十分に大きい ● 多少レイアウトが悪くても広さで誤魔化せる● スマートフォンは画面が小さい ● 全画面が前提 ● その癖にデバイスごとにサイズが違う
  27. 27. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net それらを解決するために● フレキシブルなレイアウトを作りましょう● 各Viewの特性やレイアウトを理解して組み合わせ ましょう
  28. 28. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Viewのサイズ(1)● 各Viewはそれぞれ理想的なサイズを持つ● 意図的なサイズ指定をしない限り理想的なサイズを 維持する● 意図的に指定する方法 ● layout_width/layout_heightに値を指定する <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" /> 文字列の包含が 理想的な幅
  29. 29. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Viewのサイズ(2)● layout_width/heightの値 親の幅 ● wrap_contents(理想的なサイズ) ● match_parent(親の幅に合わせる) ● 数値を決め打ち(指定した大きさ) <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical"> <Button android:id="@+id/button1" android:text="Button1" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:id="@+id/button2" android:text="Button2" android:layout_width="fill_parent" android:layout_height="wrap_content" /> <Button android:id="@+id/button3" android:text="Button3" android:layout_width="200dip" android:layout_height="wrap_content" /> </LinearLayout>
  30. 30. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net マージンとパディング● 実際の幅 = コンテンツの幅 + パディング● マージンはViewの外側● パディングは内側 コンテンツ パディング 1.4cm<Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button" android:padding="30dip" android:layout_margin="20dip"/> 実際の幅 1.39cm マージン
  31. 31. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net レイアウトの種類● LinearLayout ● 横/縦に並べる● TableLayout ● グリッド状に並べる● RelativeLayout ● それぞれのViewを組み合わせて並べる● FrameLayout ● 単に重ねる
  32. 32. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net LinearLayout(1) ● 縦/横に並べる ● 横に並べる場合 ● 縦幅は一番大きいものに合わせる ● 横幅は指定が無い限り各Viewの理想的な幅になる ● 割り当てられた領域はlayout_gravityで指定する<LinearLayout android:id="@+id/linearLayout1" android:layout_width="wrap_content" android:layout_height="wrap_content" > <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ボタン1" android:layout_gravity="top" /> <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:text="ボタン2ボタン2ボタン2" /> <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="ボタン3" android:layout_gravity="bottom" /></LinearLayout>
  33. 33. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net LinearLayout(2)● layout_weightの意味 ● 余った領域を割り振る 余った領域 <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:id="@+id/button1" android:text="Button1" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <Button 0:1:2の割合で android:id="@+id/button2" android:text="Button2" android:layout_width="wrap_content" 割り振る android:layout_height="wrap_content" android:layout_weight="1"/> <Button android:id="@+id/button3" android:text="Button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="2"/> </LinearLayout>
  34. 34. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net LinearLayoutの小技● 幅を均等に割り振る手法 ● layout_width=”0dip”を指定 ● layout_weight=”1”を指定 <LinearLayout 全てが余った領域 android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <Button android:id="@+id/button1" android:text="Button1" android:layout_width="0dip" android:layout_height="wrap_content" 1:1:1の割合で android:layout_weight="1"/> <Button 割り振る android:id="@+id/button2" android:text="Button2" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1"/> <Button android:id="@+id/button3" android:text="Button3" android:layout_width="0dip" android:layout_height="wrap_content" android:layout_weight="1"/> </LinearLayout>
  35. 35. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net TableLayout● グリッド状に並べる● 各セルの縦横の幅は一番大きい物に合わせる● セルの結合が出来る(横方向のみ)
  36. 36. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net RelativeLayout(1)● 各Viewを組み合わせて並べる● 考え方は上下左右を「何に合わせるか」というもの RelativeLayout 上端をどこに合わせる? 左端をどこに合わせる? View 右端をどこに合わせる? 下端をどこに合わせる?
  37. 37. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net RelativeLayout(2)● 上下左右の各端が合わせ方 1.理想的なサイズ 2.親の端に合わせる 3.他のViewの近い方の端 4.他のViewの遠い方の端● 例)右端を揃えるパターン ● 指定なし → 理想的なサイズ RelativeLayout 他のView ● layout_toLeftOf View → 他のViewの左端に合わせる ● layout_alignRight → 他のViewの右端に合わせる ● layout_alignParentRight → 親の右端に合わせる
  38. 38. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net RelativeLayout(3) View● 上端の指定方法 ● 左端の指定方法 ● 指定なし → 理想的なサイズ ● 指定なし → 理想的なサイズ ● layout_alignParentTop → 親の上端 ● layout_alignParentLeft → 親の左端 に合わせる に合わせる ● layout_below → 他のViewの下端に合 ● layout_toRightOf → 他のViewの右端 わせる に合わせる ● layout_alignTop → 他のViewの上端 ● layout_alignLeft → 他のViewの左端 に合わせる に合わせる● 下端の指定方法 ● 右端の指定方法 ● 指定なし → 理想的なサイズ ● 指定なし → 理想的なサイズ ● layout_alignParentBottom → 親の下 ● layout_alignParentRight → 親の右端 端に合わせる に合わせる ● layout_above → 他のViewの上端に合 ● layout_toLeftOf → 他のViewの左端に わせる 合わせる ● layout_alignBottom → 他のViewの下 ● layout_alignRight → 他のViewの右 端に合わせる 端に合わせる
  39. 39. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net FrameLayout● 重ねるレイアウト● 他の部品と組み合わせて使う● 例 ● 予め重ねておいて プログラムから切り替えて使う
  40. 40. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net レイアウトの使い分け例想定している画面 入力欄だけ拡大縮小して欲しい? 氏名 郵便番号 住所 氏名 電話番号 郵便番号 住所 電話番号 氏名郵便番号 氏名 郵便番号 住所 住所電話番号 電話番号全体が拡大縮小して欲しい? 横方向だけ拡大縮小して欲しい?
  41. 41. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 例(1)
  42. 42. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 例(2)● 1→2→3の順にレイアウトを置く● すると、3の部分が伸び縮みして、 画面サイズの違いを吸収してくれる 1 2 3
  43. 43. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 個々の画面サイズによる問題の対策● 画面の違いを想定する ● 方向の違い ● アスペクト比の違い ● サイズの違い● 見せたいものが画面に収まるように レイアウトを工夫する
  44. 44. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net まとめ● 画像サイズにまつわる問題 ● ファイルサイズだけじゃなくメモリもご注意 ● Apkサイズは小さくする ● 画像の実サイズも加減する ● XMLを使う● 個々の画面サイズによる問題 ● 画面の違いを考慮して作る ● 見せたいものが画面に収まるように工夫する
  45. 45. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 最後に● ベストプラクティスを覚えて サクッと作りましょう● ハッカソンもサクッと作りましょう● Android未経験のデザイナさんと お仕事するときは文化の違いを話しましょう
  46. 46. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_netご清聴ありがとうございました 住友 孝郎 @cattaka_net
  47. 47. 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net The Bad Know-how● 多段LinearLayout● 一個のXMLで縦横両対応● SurfaceViewにUI部品を被せる

×