Android multiscreen

Android アプリ開発と
マルチスクリーン対応
（有）ネットプラン松山
上田和章
twitter: @twikaz
Android Play: netplan_jp

アンドロイダー公認デベロッパー

http://goo.gl/fcbqI

クリスマス中止のお知らせ？

Issue 39692

https://code.google.com/p/android/issues/detail?id=39692

普通のカレンダーは
大丈夫みたいです。

マルチスクリーンへの対応

Portions of this page are modifications based on work created and shared by the Android Open Source Project
and used according to terms described in the Creative Commons 2.5 Attribution License.

ちなみに


Content License

http://developer.android.com/license.html

Exact Reproductions

http://code.google.com/policies.html

Portions of this page are reproduced from work created and
shared by the Android Open Source Project and used according to terms described in the
Creative Commons 2.5 Attribution License.

http://creativecommons.org/licenses/by/2.5/

Modified Versions

http://code.google.com/policies.html

Portions of this page are modifications based on work created and
shared by the Android Open Source Project and used according to terms described in the
Creative Commons 2.5 Attribution License.

http://creativecommons.org/licenses/by/2.5/

サイトポリシー

http://code.google.com/intl/ja/policies.html
Google は、 Google のドキュメントを必要に応じて引
用、変更、再利用、再目的化、再編集することを明示的
に奨励する条件の下で、 Google Code 上のドキュメン
トの大半のライセンスを付与します。

このページの内容の一部は、Google が作成、提供しているコンテンツをベースに複製したもので、
クリエイティブ・コモンズの表示 3.0 ライセンスに記載の条件に従って使用しています。

では、あらためまして

今日考えたいこと

● フラグメントによる動的 UI の生成

http://goo.gl/OQWXo （別の機会に ... ）

● マルチスクリーンなデザイン
http://goo.gl/VNYRP

第一章

スクリーンの様々な要素

例えば ...

リスト詳細

例えば ...

リスト詳細更新情報


例えば ...

伸縮


例えば ...

再配置


ちなみに

ラリー・ペイジ (Larry Page)
Google の創業者、最高経営責任者 (CEO)

「ラリー･ペイジ」（ 2012 年 11 月 8 日 ( 木 ) 04:28 UTC の版）『ウィキペディア日本語版』。

http://goo.gl/VHHUR

マティアス・ドゥアルテ (Matias Duarte)
元 Palm 社で、 webOS のヒューマン I/F ディレクター

2010 年 5 月より、 Android の UX （ユーザエクスペリエンス）ディレクター

「 Matias Duarte 」（ 00:03, 31 October 2012 UTC の版）『ウィキペディア英語版』。

http://en.wikipedia.org/wiki/Matias_Duarte

まず、スクリーンに関する
主な要素について整理

スクリーン対応の要素

1. スクリーンサイズ
2. スクリーン密度
3. オリエンテーション
4. 解像度
5. 密度に依存しないピクセル

http://developer.android.com/intl/ja/guide/practices/screens_support.html

1. スクリーンサイズ

スクリーンの物理的な大きさ、対角線

small 2 ～ 4inch ぐらい、最小： 320x426dp

normal 3 ～ 5inch ぐらい、最小： 320x470dp

large 4 ～ 7inch ぐらい、最小： 480x640dp

extra large 7inch ～、最小： 720x960dp

2. スクリーン密度 (dpi)

単位面積あたりのピクセル数
low 120dpi ぐらい
normal 160dpi ぐらい
high 240dpi ぐらい
extra high 320dpi ぐらい、 API level 8 ～

3. オリエンテーション

画面の向き
● Landscape
ランドスケープ、横長
● Portrait
ポートレイト、縦長

4. 画面解像度

画面全体のピクセル数

● QVGA(Quarter VGA)

320x240 ピクセル、従来の携帯電話

● HVGA(Half VGA)

480x320 ピクセル、初期のスマートフォン

● VGA(Video Graphics Array)

640x480 ピクセル、 DOS/V の基本サイズ

● WVGA(Wide VGA)

800x480 ピクセル、ハイエンド携帯・スマホ

4. 画面解像度（の続き）

● FWVGA(Full Wide VGA)

854x480 ピクセル、 16:9 、スマホ
● QHD(Quarter HD)

960×540 ピクセル、フル HD の 1/4 （面積）
● HD(High Definition)

1,280x720 ピクセル、走査線 720 本の HDTV
● FHD(Full HD)

1,920x1080 ピクセル、走査線 1080 本の HDTV

4. 画面解像度（の比較）

HD
1280x720
WVGA
800x480
HVGA
QVGA 480x320
320x240

5. 密度に依存しないピクセル

dp Density-independent pixel
● 160dpi の 1 ピクセル
● px = dp * (dpi / 160)
● 例） 240dpi のスクリーンで 1dp の大きさ
1 * (240 / 160) = 1.5 ピクセル
画面密度が違っても同じ大きさを表現できる

練習してみます。

スクリーンの 5 つの要素をふまえて
サイズ指定の単位 (dp, sp, px) を変えると
解像度の異なる端末でどうなるか。

TextView
TextView(20sp)
TextView(20px)
Button
Button(width: 200dp)
Button(width: 200px)

48dp Rhythm


Why 48dp?

48dp は物理サイズで約 9mm
タッチスクリーンで
安心して操作できる大きさ


Mind gaps

それぞれの UI の間隔を 8dp に。


配置例


第一章のまとめ

● 物理的なサイズ指定

端末のスクリーン密度で変化する

レイアウトのバランスが変わる

● 密度に依存しないサイズ指定

端末のスクリーン密度で変化しない

レイアウトのバランスが保てる

● 何が問題？

UI の大きさが変わると操作しにくい

デザイン性

第二章

代替リソース

Providing Alternative Resources

替わりとなるリソースの提供

例えば
・複数の解像度に対応するビットマップ
・複数の言語に対応する文字列
※http://goo.gl/tBBoS

Alternative Resources

Android は端末の構成を元にして、
アプリに適切なリソースを読み込みます。

res - リソースフォルダ

● animator/ ・・・アニメーションの設定

● anim/ ・・・アニメーション (tween) の設定

● color/ ・・・ビューオブジェクトの状態による色指定

● drawable/ ・・・ビットマップファイル、 9patch に対応

● layout/ ・・・ユーザインターフェース (UI) レイアウト

● menu/ ・・・メニューの設定

● raw/ ・・・任意の RAW ファイル

● values/ ・・・文字、数値、色の設定

● xml/ ・・・任意の XML ファイル

res - リソースフォルダ





●
全部見ていくのは大変なので（汗
layout/
・・・ユーザインターフェース (UI) レイアウト





res - リソース名





● layout/ ・・・ユーザインターフェース (UI) レイアウトまずここに
注目します




リソースを切り替えるための

config_qualifier

（ qualifier: 識別子）

リソース名と識別子

● 言語と地域 (language and region)

-ja, -en-rUS, -en-rGB, -fr-rCA, fr-rFR
● スクリーンサイズ (screen size)

-small, -normal, -large, -xlarge
● 画面の向き (orientation)

-port, -land

などなど ...
http://developer.android.com/intl/ja/guide/topics/resources/providing-resources.html

res/drawable

● drawable
● drawable-ldpi ※ 低密度用
● drawable-mdpi ※ 中密度用
● drawable-hdpi ※ 高密度用
● drawable-xhdpi ※ 超高密度用

res/drawable

それぞれのスクリーン密度に対応した
ビットマップファイルを用意したい

すべての解像度を
用意しなくてもよい

Providing Alternative Resources

At runtime, Android detects the current device
configuration and loads the appropriate resources
for your application.

http://goo.gl/xlZhz

実行時に、 Android はデバイスの設定によって
適切なリソースを読み込みます。


res/drawable

● drawable 160dpi(1 倍 )
● drawable-ldpi 120dpi(3/4 倍 )
● drawable-mdpi 160dpi(1 倍 )
● drawable-hdpi 240dpi(1.5 倍 )
● drawable-xhdpi 320dpi(2 倍 )

bitmap の例 (9patch)

button_pressed.9.png


練習してみます。

button_grad.png

9patch 画像の作成

android-sdktools フォルダにツールがあります。

レイアウトに追加

<Button
android:id="@+id/ButtonGrad"
android:layout_height="48dp"
android:layout_width="200dp"
android:layout_centerHorizontal="true"
android:layout_below="@id/ButtonPX"
android:layout_marginTop="20dp"
android:background="@drawable/button_grad" />

res/drawable-ldpi/button_grad.9.png

9patch による伸縮

ldpi xhdpi

実行してみます

ldpi xhdpi

ボタン部分を拡大

ldpi xhdpi

ldpi 用に作成した 9patch のボタンを xhdpi で表示させてみました。

一応の形は保てますが、これぐらい拡大されると
角丸のなめらかさやグラデーションの品質が落ちます。

res/drawable のまとめ

● 端末に応じて適切なリソースを読み込み

端末の設定を参照して自動的にリソースを切り替え
● drawable （ 1 個）でも対応可能

ただし、拡大・縮小によってぼやけたり ...
● 解像度毎にビットマップ

品質が良くなります。
● 解像度毎に 9patch

品質が良くなります。

第三章

values リソースによる
レイアウトの切り替え

res - リソース名





● layout/ ・・・ユーザインターフェース (UI) レイアウト

● menu/ ・・・メニューの設定次はこの辺に
● raw/ ・・・任意の RAW ファイル注目します


(Sample) NewsReader

Training: Designing multi screens

Eclipse に取り込めました

ソースを覗いてみます

// Determine whether we are in single-pane or
// dual-pane mode by testing the visibility
// of the article view.
View articleView = findViewById(R.id.article);
mIsDualPane = articleView != null &&
articleView.getVisibility() == View.VISIBLE;

articleView ：記事本文の表示領域
mIsDualPane ：タイトルと本文の表示領域があるかないか


mIsDualPane

レイアウトに　R.id.article　が
存在するか、存在しないか

values の違い

画面の大きさや解像度により
適切な values が読み込まれる

values( デフォルト ) のレイアウト

<resources>

<item name="main_layout" type="layout">@layout/onepane_with_bar</item>

<bool name="has_two_panes">false</bool>

</resources>

values/layouts.xml
・ layout リソースの指定
・表示領域が 2 つあるかどうか

レイアウト： onepane_with_bar

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout android:layout_width="match_parent"
android:id="@+id/linearLayout1"
android:gravity="center"
android:layout_height="50dp">
<ImageView android:id="@+id/imageView1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/logo"
android:paddingRight="30dp"
android:layout_gravity="left"
android:layout_weight="0"
android:contentDescription="TODO"/>
<View android:layout_height="wrap_content"
android:id="@+id/view1"
android:layout_width="wrap_content"
android:layout_weight="1" />
<Button android:id="@+id/categorybutton"
android:background="@drawable/button_bg"
android:layout_height="match_parent"
android:layout_weight="0"
style="@style/CategoryButtonStyle"/>
</LinearLayout>

<fragment android:id="@+id/headlines"

表示領域 (pane) が 1 個
android:layout_height="fill_parent"
android:name="com.example.android.newsreader.HeadlinesFragment"

アクションバーを実装
android:layout_width="match_parent" />
</LinearLayout>


values-sw600dp-land

<resources>

<item name="main_layout" type="layout">@layout/twopanes</item>

<bool name="has_two_panes">true</bool>

</resources>

values-sw600dp-land/layouts.xml
・ layout リソースの指定
・ 2 つの表示領域あり

レイアウト： twopanes

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:orientation="horizontal">

<fragment
android:id="@+id/headlines"
android:name="com.example.android.newsreader.HeadlinesFragment"
android:layout_marginRight="10dp" />

<fragment android:id="@+id/article"

android:name="com.example.android.newsreader.ArticleFragment"
android:layout_width="fill_parent" />

表示領域 (pane) が 2 個
</LinearLayout>

アクションバーは自動

NewsReader のレイアウト

valules の識別子でリソースを切り替えます。
● values ● values-v11

onepane_with_bar onepane
● values-sw600dp-land ● values-xlarge-land

twopanes twopanes
● values-sw600dp-port ● values-xlarge-port

onepane twopanes-narrow

layout の種類

onepane twopanes
_with_bar -narrow

onepane twopanes

layout に関するリソース

layout values (A), 1 面

(A)onepane_with_bar values-sw600dp-land (D), 2 面

(B)onepane values-sw600dp-port (C), 2 面

(C)twopanes_narrow values-v11 (B), 1 面

(D)twopanes values-xlarge-land (D), 2 面

values-xlarge-port (C), 2 面

ArticleActivity.java
　 // （省略）

// If we are in two-pane layout mode, this activity is no longer
necessary

if (getResources().getBoolean(R.bool.has_two_panes)) {

finish();
Twopane なレイアウトは
return;
Fragment で処理済み。
}

// Place an ArticleFragment as our content pane
Onepane なレイアウトは
ArticleFragment f = new ArticleFragment(); ここで Article を表示。

　 // （省略）


第三章のまとめ

● layout に複数のレイアウトを用意
1 ヶ所にまとめる
見通しが良くなる
● values リソース切り替え
解像度によって values が切り替わる
パラメータの定義だけなのでシンプル

第4章

Eclipse でレイアウトを作成

サンプルプロジェクト

ランチャーアイコン設定

デフォルトのアイコン選択

アクティビティを作る

アクティビティ作成の確認

プロジェクトができた

layout-xlarge

タブレット用のレイアウト

xlarge
追加してみます。

画面サイズを切り替えます

レイアウトが追加されました

オリエンテーションの切り替え

タブレットのレイアウト

● http://developer.android.com/guide/practices/screens_support.html#DeclaringTabletLayouts

● タブレット最初の世代
Android 3.0
● xlarge のレイアウトを追加
res/layout-xlarge/

新しいレイアウト手法

これまで Large や xlarge でグループ化

これからレイアウトに必要なサイズを指定

グループ化が良くない例

● 7 インチのタブレット

レイアウト： large

ー＞ 5 インチのハンドセットと同じグループ
● 7 インチと 5 インチのスペースの違い

ー＞同一のレイアウトにすべきではない

ご清聴ありがとうございます。
m(. .)m

Android multiscreen

More Related Content

Viewers also liked (6)

Similar to Android multiscreen (20)

More from Kazuaki Ueda (10)

Android multiscreen