• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Androidレイアウトのスタンダードアプローチ
 

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

on

  • 10,700 views

 

Statistics

Views

Total Views
10,700
Views on SlideShare
10,691
Embed Views
9

Actions

Likes
8
Downloads
18
Comments
0

3 Embeds 9

https://twitter.com 7
http://us-w1.rockmelt.com 1
http://paper.li 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • 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 : @cattaka_net● 株式会社ブリリアントサービス所属 (2012/01/01〜)
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 何やってる人● 工作機系のWindowsアプリ作ってました● 業務系Webシステム作ってました● Androidアプリ作ってます
    • 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アプリ開発を取り巻く問題● まだベストプラクティスが確立されてない● 従来のベストプラクティス ● Web → Struts, Ruby on Rails ● アプリ → .NET, MFC, Qt ● クラウド → Slim3, Hadoop● プログラマさんもデザイナさんも 従来の手法でアプリを作ってしまう →だから一緒に考えましょ♪
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net ややこしくする要因● 様々な文化の人が関わる ● 組み込み屋さん ● Web屋さん ● 携帯アプリ屋さん ● 業務アプリ屋さん● スマートフォンのアプリはいろんな文化が混ざる
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net やりがちなこと● プログラマさんが ● ピクセル決め打ちのレイアウト ● マウス前提の画面仕様 ● 画面サイズを考慮してない ● etc● デザイナさんがやりがちなこと(?) ● Web系の手法がそのまま持ち込まれる ● Bitmapがデーンと貼られる ● etc
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net やりがちなことが何故問題か?● Androidはいろんな文化が混ざり込んでいる● その中で生まれた文化がある● Android固有の問題がある● レイアウトについての文化 ● 画像サイズにまつわる問題 ● 画面サイズによる問題
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net画像サイズにまつわる問題
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net サイズと言っても2種類ある● ファイルサイズ ● APKが大きくなる →端末の容量を圧迫する →最近はSDカードに保存できるのでOK● 展開されたときのサイズ ● JPGやPNGは圧縮が効くけど、展開すると問題になるこ ともある →展開時にOOMになる
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net サイズを小さくするためには● Bitmapは必要最小限にする ● xmlで描画させる ● Nine-patchを使う ap X Nine ml Bitm -pat ch
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net xmlで描画させる● Shape Drawable● Layer List● Etc ● Bitmap+xmlでタイリングする ● Clip Drawable
    • 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" 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>
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net Layer List● ShapeやBitmapをまとめて 1つのDrawableとして扱える● 例:BitmapとShapeを重ねた場合
    • 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>
    • 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を使おう● メリット ● 多言語化もしやすくなる ● 言語ごとに画像ファイルを作っていたのが不要になる ● 画像数が減るのでAPKが小さくなる ● メモリにやさしくなる● デメリット ● デコられた文字のボタンは作れない – 対応策に出こられたフォントを使うという手はある ● 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はそれぞれ理想的なサイズを持つ● 意図的なサイズ指定をしない限り理想的なサイズを 維持する● 意図的に指定する方法 ● layout_width/layout_heightに値を指定する <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Button1" /> 文字列の包含が 理想的な幅
    • 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>
    • 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 マージン
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net レイアウトの種類● LinearLayout ● 横/縦に並べる● TableLayout ● グリッド状に並べる● RelativeLayout ● それぞれのViewを組み合わせて並べる● FrameLayout ● 単に重ねる
    • 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>
    • 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>
    • 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>
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net TableLayout● グリッド状に並べる● 各セルの縦横の幅は一番大きい物に合わせる● セルの結合が出来る(横方向のみ)
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net RelativeLayout(1)● 各Viewを組み合わせて並べる● 考え方は上下左右を「何に合わせるか」というもの RelativeLayout 上端をどこに合わせる? 左端をどこに合わせる? View 右端をどこに合わせる? 下端をどこに合わせる?
    • 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 → 親の右端に合わせる
    • 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の右 端に合わせる 端に合わせる
    • 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の部分が伸び縮みして、 画面サイズの違いを吸収してくれる 1 2 3
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 個々の画面サイズによる問題の対策● 画面の違いを想定する ● 方向の違い ● アスペクト比の違い ● サイズの違い● 見せたいものが画面に収まるように レイアウトを工夫する
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net まとめ● 画像サイズにまつわる問題 ● ファイルサイズだけじゃなくメモリもご注意 ● Apkサイズは小さくする ● 画像の実サイズも加減する ● XMLを使う● 個々の画面サイズによる問題 ● 画面の違いを考慮して作る ● 見せたいものが画面に収まるように工夫する
    • 2012/02/18 Global Android Dev Camp Kyoto @cattaka_net 最後に● ベストプラクティスを覚えて サクッと作りましょう● ハッカソンもサクッと作りましょう● Android未経験のデザイナさんと お仕事するときは文化の違いを話しましょう
    • 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で縦横両対応● SurfaceViewにUI部品を被せる