OESF公認 Android UIデザイン入門 公式トレーニングテキスト Contributed by: 【作成】株式会社リーディング・エッジ社 　　　　 【ご注意】 本テキストは、Creative Commons License BY-NC-SA 4.0のもとで提供されます。OESF会員またはコンソーシアムメンバーでない場合、本編の改変の有無にかかわらず、いかなる形態でも商用目的での利用は禁止されています。

1. UIデザイントレーニング

2. Ⅶ - 2
トレーニングの目的
! トレーニングの目的
! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを
習得します
! UI単体のカスタマイズ
• Viewのどんな要素を変更すればよいか
• Androidはどんな仕組みでリッチなUI実現させるのか、そのために必要な
技術、知識はなにか
! 統一されたデザインの作成方法
• アプリケーションで扱うUIの一括管理
• ボタンのデザイン、フォント、カラーの統一
! デザイン手法、デザイン工学などのようなデザインガイダンスではありません
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

3. Ⅶ - 3
トレーニングの目的
! トレーニングの目的
! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを
習得します
! UI単体のカスタマイズ
• Button、ImageView、Dialogに独自の装飾を加える方法
• Androidはどんな仕組みでリッチなUI実現させるのか、そのために必要な
技術、知識はなにか
! Dialogのカスタマイズ
! 統一されたデザインの作成方法
• アプリケーションで扱うUIの一括管理
• ボタンのデザイン、フォント、カラーの統一
! デザイン手法、デザイン工学などのようなデザインガイダンスではありません
! ソースコードの修正は殆ど無いため、デザイナ職の方でも気軽に受講すること
ができます
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

4. Ⅶ - 4
トレーニングスケジュール
! 目次
! Viewプロパティ
! Buttonのカスタマイズ
! Style, Theme
! Dialogのカスタマイズ
! Animation
! 実習
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

5. Ⅶ - 5
開発環境
! 開発環境の説明
! 本トレーニングでは下記の開発ツールを用いる
! トレーニング用マシンは既に開発環境は構築済みです
ソフトウェア
バージョン
Eclipse
Eclipse IDE with built-in ADT
Java SDK
JDK 1.6
Android Platform SDK
Android 2.3.3(API 10)
Android Plug-in
Android Development Tools (ADT) Ver.21.X.X
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

6. Ⅶ - 6
開発環境
! 開発環境の説明
! ディレクトリ構成
! トレーニングに必要なファイルは全てandroid_traing_uiに用意してあります。
! 以下はandroid_traing_uiのディレクトリ構成になります
パス（c:¥android_trainig_ui以下）
内容
adt-bundle-windows-x86-[日付]¥sdk
AndroidSDK
adt-bundle-windows-x86-[日付]¥eclipse
eclipse
workspace
eclipseのworkspace
answer_docs/html
実習の解答ドキュメント
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

7. Viewプロパティ

8. Ⅶ - 8
概要
! アプリケーション開発手順
! 画面デザインの作成
! View
! Viewプロパティについて
! 代表的なプロパティ
! ImageView
! ImageViewのプロパティ
! ViewGroup
! ViewGroupの代表的なプロパティ
! 実習
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

9. Ⅶ - 9
アプリケーション開発の手順
! 開発手順
! Eclipseでプロジェクト作成
! 画面デザインの作成
• Button、CheckBoxなどのパーツの配置
! ソースコードを書く
• 例）ボタンクリック時の処理など
! ビルド
! Androidアプリが出来上がる（apk）
! エミュレータ、実機に転送
! アプリケーションの起動
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

10. Ⅶ - 10
プロジェクト構成
! 画面デザインの作成
! Androidはソースコードとリソースファイルを管理するディレクトリが別れており
、それぞれ独立して作業を行うことができる
! 画面デザインの作成は専用のエディタを使いドラッグ＆ドロップなどで直感
的な画面作成ができる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
UIパーツ一覧
画面プレビュー

11. Ⅶ - 11
View
! Viewとは
! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです
! 複数のViewをまとめる機能を持つViewをViewGroupといいます
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
View
ImageButton
ImageView
TextView
Button
ViewGroup
FrameLayout

12. Ⅶ - 12
Viewの描画領域(1)
! Viewの描画領域
! コンテンツエリア
! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup
はそれらの領域をすべて含んだ領域を持っています
! 一つのViewGroupの子である複数のViewは同じ領域を重複して含んでいてかま
いません
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
ViewGroup
ImageView
子Viewは重なっていても良い
TextView
Button
Button
Buttonの場合は
テキストの表示部
分がコンテツエリ
アになる
ViewGroup
ViewGroupのコンテツ
エリアは子Viewの領域
TextView
Button

13. Ⅶ - 13
Viewの描画領域(2)
! Viewの描画領域
! バックグラウンドエリア
! 背景として利用する描画領域の設定をします。
! 描画領域を利用するリソース（画像、XML等）を指定するか、色を指定します
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
Button
Buttonの場合は
テキスト以外が
バックグラウンド
エリアになる
ViewGroup
ViewGroupでは子View
の領域意外がバックグ
ラウンドエリアになる
TextView
Button

14. Ⅶ - 14
Viewプロパティ
! Viewのプロパティ
! Viewをどのように表示するかを決定する
! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画
像や色、余白をどのくらい使うかなどの情報をプロパティとして設定する
! どんなプロパティが使えるかはViewによって様々だが、共通するプロパティも存
在する
! プロパティはレイアウトリソースのxmlの属性で指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

15. Ⅶ - 15
Viewプロパティ
! 代表的なビューのプロパティ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
プロパティ
設定値
説明
layout_width
・wrap_content
・match_parent
ビューの幅を指定します
layout_height
・wrap_content
・match_parent
ビューの高さを指定します
android:gravity
・top ・bottom ・left ・right
・center_vertical ・center_horizontal
・center ・start ・end
レイアウト内に配置した全てのViewに、指定した方向に
配列させる
android:layout_gravity
・top ・bottom ・left ・right
・center_vertical ・center_horizontal
・center ・start ・end
レイアウトに配置した個々のViewに、指定した方向に配
列させる
※ layout_gravityで指定したのが優先される
layout_weight
※親ViewがLinerLayoutの時のみ
数値
余白を埋めるために、ウィジェットのサイズをそれぞれ引
き延ばす割合
android:weightSum
数値
ViewGroupにweightSum属性を指定すると、余白部分を
含めたLayoutの合計値を指定できる
android:layout_margin
px , dp, sp, in, mm
数値+単位 （例）20dp
ウィジェットの外側の余白の設定をおこなう。単位は主に
dpで指定する
android:padding
px , dp, sp, in, mm
数値+単位 （例）20dp
ウィジェットの内側の余白の設定をおこなう。単位は主に
dpで指定する ※ウィジェット間の余白スペースを広げる
android:enabled
true, false
ビューの有効、無効を設定する
visiblity
・visible ・gone ・invisible
ビューの表示、非表示を設定します

16. Ⅶ - 16
layout_width、 layout_height
! layout_widthとlayout_height
! Viewの幅、高さを設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
layout_width：wrap_content
layout_height：wrap_content
layout_width：wrap_content
layout_height：match_parent
layout_width：match_parent
layout_height：wrap_content

17. Ⅶ - 17
gravity、 layout_gravity
! gravityとlayout_gravity
! Viewの配置する方向を設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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:gravity="right"
android:orientation="vertical" >
<!-- 位置指定：無し -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="無し" />
<!-- 位置指定：左 -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="左" />
<!-- 位置指定：中央 -->
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="中央" />
</LinearLayout>

18. Ⅶ - 18
layout_weight
! layout_weight
! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合
! 設定例(weightなし)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button2"
android:layout_width="wrap_content "
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

19. Ⅶ - 19
layout_weight
! layout_weight
! 設定例(weightあり)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_weight="1" />
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_weight="1" />
</LinearLayout>
ボタンの幅が画面
の横幅いっぱいの
等分に広がってい
る

20. Ⅶ - 20
weightSum
! weightSum
! 余白部分を含めたLayoutの合計値を指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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:orientation="vertical"
android:weightSum="5" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="Button2" />
</LinearLayout>
1
2
2(5-1-2)
全体割合
＝5

21. Ⅶ - 21
layout_margin、 padding
! layout_marginとpadding
! layout_magin：外側の余白の設定する
! padding : 内側の余白の設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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:orientation="vertical" >
<!-- デフォルト -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<!-- margin -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="50dp"
android:text="Button" />
<!-- padding -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Button" />
ボタンの周囲の
余白が50dps
テキストの周囲
の余白が50dps

22. Ⅶ - 22
enabled
! enabled
! ビューの有効、無効を設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout >
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="true"
android:text="true" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="false" />
</LinearLayout>

23. Ⅶ - 23
visibility
! visibility
! ビューの表示、非表示を設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<TextView android:text="visible" />
<Button
android:text="Button"
android:visibility="visible" />
<TextView android:text="invisible" />
<Button
android:text="Button"
android:visibility="invisible" />
<TextView android:text="gone" />
<Button
android:text="Button"
android:visibility="gone" />
<TextView android:text="↑goneは幅高さが無効化され、存在し
ないものとして扱われる" />
幅と高さを維持する
幅と高さを維持しないため、
前後のViewが詰め込まれる

24. Ⅶ - 24
ImageView
! ImageViewとは
! 画像を表示する際に使用するViewクラス
! 配置したImageViewにdrawableから画像を読み込んで表示を行う
! srcプロパティで表示する画像を指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
ImageViewに画
像が設定される
読み込ませたい画
像を設定すると

25. Ⅶ - 25
ImageViewプロパティ
! 代表的なImageViewプロパティ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
プロパティ
設定値
説明
android:minHeight
px , dp, sp, in, mm
数値+単位
例）20dp
Viewの高さの最小値を指定
※ImageViewではなくViewのプロパティ
android:minWidth
px , dp, sp, in, mm
数値+単位
例）20dp
Viewの幅の最小値を指定
※ImageViewではなくViewのプロパティ
android:maxHeight
px , dp, sp, in, mm
数値+単位
例）20dp
ImageViewの高さの最大値を指定
android:maxWidth
px , dp, sp, in, mm
数値+単位
例）20dp
ImageViewの幅の最大値を指定
android:scaleType
Matrix,fit_xy,
fix_start,fix_center,fix_end,
center,center_crop,center_inside
画像がImageViewのサイズに応じてどのよう
にリサイズされるかを指定
android:src
リソース指定
ImageViewに表示する内容を指定
android:adjustViewBounds
true, false
画像の縦横比を維持するかどうかを指定。
falseだと、端末のサイズに縦横比が合わさ
れる。
デフォルトはfalse。

26. Ⅶ - 26
minHeight、minWidth
! minHeightとminWidth
! Viewの高さ、幅の最小値を指定
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<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:orientation="vertical" >
<!--minWidth・minHeight使用-->
<ImageView
android:id="@+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:minHeight="100dp"
android:src="@drawable/android" />
<!--デフォルト-->
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>
実際の画像サイズはもっと小
さいが、minWidth/minHeight
がそれより大きいため、その
サイズで表示される
※ImageViewではなくViewのプロパティ

27. Ⅶ - 27
<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:orientation="vertical" >
<!--maxWidth・maxHeight使用-->
<ImageView
android:id="@+id/ImageView“
android:adjustViewBounds= "true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:minHeight="100dp"
android:src="@drawable/android" />
<!--デフォルト-->
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android" />
</LinearLayout>
maxHeight、maxWidth
! maxHeightとmaxWidth
! ImageViewの高さの最大値を指定
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
実際の画像サイ
ズもっと大きいが、
maxWidth/
maxHeightがそれ
より小さいため、
そのサイズで表
示される

28. Ⅶ - 28
scaleType
! scaleType
! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?xml
version="1.0"
encoding="utf-­‐8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TextView"
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:adjustViewBounds="true"
android:scaleType="matrix"
android:background="#aaaaaa"
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:src="@drawable/big_droid"
android:layout_height="wrap_content"></ImageView>
<TextView
android:text=""
android:background="#0000ff"
android:layout_width="match_parent"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
このプロパティの値を変更する
ImageViewの背景色を#aaaaaaに設定している
(縮小などがわかりやすくするため)

29. Ⅶ - 29
scaleType
! scaleType
! 設定例(adjustViewBounds=false)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
scaleType=“matrix”
scaleType=“fitCenter”
scaleType=“cetner”
scaleType=“fitXY”
ImageViewの領域は、画像の幅/高さと画面サイ
ズのうちそれぞれ小さい方が使用される
画像のサイズはそのまま
で表示されるが、画面幅
より画像が大きいので右
側が見切れている
高さ・幅が画面内に収まるよ
うそれぞれ別の比率で縮小
される(今回高さは縮小され
ていない)
画像サイズはそのままで、
画像の中心がImageView
の中心に合うよう配置さ
れる。
画像の幅が画面幅に合うよう、
高さも同率で縮小され、
ImageView領域の中心に配置
されるため、ImageViewの背景
色が見えている

30. Ⅶ - 30
scaleType
! scaleType
! 設定例(adjustViewBounds=true)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
scaleType=“matrix”
scaleType=“fitCenter”
scaleType=“cetner”
scaleType=“fitXY”
ImageViewの領域は、false時と同じように求めた
後、画像のアスペクト比(縦横比)に調整される
＝ImageViewの領域は画像より大きくならない
画像のサイズはそのまま
だが、画面幅に応じたア
スペクト比で高さが制限さ
れる
高さ・幅がどちらも画面内に
収まるよう、元のアスペクト
比を維持したまま縮小され
る
画像サイズはそのままで、
画像の中心がImageView
の中心に合うよう配置さ
れる
画像の幅が画面幅に合うよう
縮小され、高さはその幅に対し
てアスペクト比を維持したまま
縮小される

31. Ⅶ - 31
ViewGroup
! ViewGroupとは
! 複数のビューをまとめる機能を持つビューである
! ビューグループを使用する事により、複雑なレイアウトを作成することが可
能になる
! ViewGroupの例:LinearLayout
! Viewを縦方向または横方向に配置します
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

32. Ⅶ - 32
ViewGroupの種類
! 代表的なビューグループ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
名前
説明
RelativeLayout
View（親）の位置を決め、その位置を元に
View（子）の位置を相対的（Relative）に指定する
LinearLayout
Viewを垂直または水平に配置
FrameLayout
FrameLayoutは一つのViewを配置することを目的
としたViewGroup
複数配置した場合は重って表示される
ListView
縦方向に行を並べたリストを表示
GridLayout
グリッド表示に特化したレイアウト。セルの列方向、
または行方向への結合ができる(GridViewでは出
来ない)。
※Android4.0以降で利用可能

33. Ⅶ - 33
RelativeLayout
! RelativeLayout
! View（親）の位置を決め、その位置を元にView（子）の位置を相対的に指定
する構成
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
テキスト
プロパティ
説明
中
android:layout_centerInParent="true"
指定したViewを画面の中心に
配置する
上
android:layout_above="@+id/center"
基準となるViewの上に表示します
android:layout_alignLeft="@+id/center"
指定したViewの左側の境界に合わせ
て整列します
下
android:layout_below="@+id/center"
基準となるViewの下に表示します
android:layout_alignRight="@+id/center"
指定したViewの右側の境界に合わせ
て整列します
左
android:layout_toLeftOf="@+id/center"
基準となるViewの左側に表示します
android:layout_alignBottom="@+id/center"
指定したViewの下側の境界に合わせ
て整列します
右
android:layout_toRightOf="@+id/center"
基準となるViewの右側に表示します
android:layout_alignTop="@+id/center"
指定したViewの上側の境界に合わせ
て整列します

34. Ⅶ - 34
RelativeLayout
! RelativeLayout
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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"
>
<Button
android:id="@+id/center"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="20dp"
android:text="中"
/>
<Button
android:id="@+id/right"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignTop="@+id/center"
android:layout_toRightOf="@+id/center"
android:text="右"/>

35. Ⅶ - 35
RelativeLayout
! RelativeLayout
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<Button
android:id="@+id/below"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignRight="@+id/center"
android:layout_below="@+id/center"
android:text="下"
/>
<Button
android:id="@+id/above"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_above="@+id/center"
android:layout_alignLeft="@+id/center"
android:text="上"
/>
<Button
android:id="@+id/left"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="@+id/center"
android:layout_toLeftOf="@+id/center"
android:text="左"
/>
</RelativeLayout>

36. Ⅶ - 36
LinearLayout
! LinearLayout
! Viewを垂直または水平に配置する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<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:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
tools:context=".MainActivity" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_android" />
</LinearLayout>
horizontalまたは
verticalを指定する

37. Ⅶ - 37
ViewGroupの種類
! 配置方向の設定
! orientationでLinearLayoutの内部のViewを配置する方向を決定する
! vertical：垂直方向に配置
! horizontal：水平方向に配置
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
verticalの場合
「垂直方向」
horizontalの場合
「水平方向」

38. Ⅶ - 38
FrameLayout
! FrameLayout
! FrameLayoutは一つのViewを配置することを目的としたViewGroup
! 複数配置した場合は重って表示される
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<FrameLayout xmlns:android="http://schemas.android.com/apk/
res/android"
xmlns:tools="http://schemas.android.com/tools"
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:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
android:textColor="#FF0000"
tools:context=".MainActivity" />
</FrameLayout>
ImageViewとTextViewが
重なっている

39. Ⅶ - 39
ListView
! ListView
! 縦方向に行を並べたリストを表示する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
※行要素は、別途行用のレイアウトリソースを用意し、プログラムで設定することもできる
<?xml
version="1.0"
encoding="utf-­‐8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/list_datas"
>
</ListView>
</FrameLayout>

40. Ⅶ - 40
ListView
! ListView
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?xml
version="1.0"
encoding="utf-­‐8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/list_datas"
>
</ListView>
</FrameLayout>
strings.xml

41. Ⅶ - 41
GridLayout
! GridLayout
! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合
ができる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?xml
version="1.0"
encoding="utf-­‐8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:rowCount="4"
android:useDefaultMargins="true"
>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center“
android:layout_column="0"
android:layout_row="0"
android:background="#eee"
android:text="Item
1"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1"
android:layout_row="0"
android:background="#ddd"
android:text="Item
2"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
セルを列方向
に結合
セルを行方向
に結合

42. Ⅶ - 42
GridLayout
! GridLayout（つづき 1)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="0"
android:background="#eee"
android:text="Item
3"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="0"
android:layout_row="1"
android:layout_rowSpan="2"
android:background="#ddd"
android:text="Item
4"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1“
android:layout_row="1“
android:layout_columnSpan="2“

43. Ⅶ - 43
GridLayout
! GridLayout(つづき 2)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
android:background="#eee"
android:text="Item
5"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1"
android:layout_row="2"
android:background="#ccc"
android:text="Item
6"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="2"
android:background="#ddd"
android:text="Item
7"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</GridLayout>

44. Ⅶ - 44
レイアウトの作成
! 実習 1
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
周囲の余白『10dp』
を設定

45. Ⅶ - 45
レイアウトの作成
! プロジェクト概要
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
項目
設定値
Project name
UISample
Build Target
※ トレーニングで指定したバージョン
Application name
UISample
Package name
jp.oesf.uisample
Create Activity
MainActivity

46. Ⅶ - 46
レイアウトの作成
! 手順
! res/drawble-hdpi/に「android.png」の画像を追加する
! 画像は解答ドキュメントより取得する
! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパティを設定し
レイアウトを完成させる
! 実習で使用するViewGroupとプロパティは各自で考えること
! 検索ボタンのリソースは、@android:drawable/ic_menu_searchを使用する。
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
View
EditText
ImageButton
ImageView
Button
Button

47. Ⅶ - 47
レイアウトの作成
! 確認
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
nexus one
nexus7

48. Ⅶ - 48
レイアウトの作成 -解答-
! 解答例
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<EditText
android:id="@+id/editText1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
</EditText>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_search" />
</LinearLayout>

49. Ⅶ - 49
レイアウトの作成 -解答-
! 解答例（続き）
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@drawable/android" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>

50. Ⅶ - 50
レイアウトの作成 [補足実習]
! 実習[補足]
! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する
! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存
在する。他にどんな実装方法があるかを考え組み立てる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

51. Viewプロパティ

52. Ⅶ - 52
概要
! アプリケーション開発手順
! 画面デザインの作成
! View
! Viewプロパティについて
! 代表的なプロパティ
! ImageView
! ImageViewのプロパティ
! ViewGroup
! ViewGroupの代表的なプロパティ
! 実習
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

53. Ⅶ - 53
アプリケーション開発の手順
! 開発手順
! Eclipseでプロジェクト作成
! 画面デザインの作成
• Button、CheckBoxなどのパーツの配置
! ソースコードを書く
• 例）ボタンクリック時の処理など
! ビルド
! Androidアプリが出来上がる（apk）
! エミュレータ、実機に転送
! アプリケーションの起動
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

54. Ⅶ - 54
プロジェクト構成
! 画面デザインの作成
! Androidはソースコードとリソースファイルを管理するディレクトリが別れており
、それぞれ独立して作業を行うことができる
! 画面デザインの作成は専用のエディタを使いドラッグ＆ドロップなどで直感
的な画面作成ができる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
UIパーツ一覧
画面プレビュー

55. Ⅶ - 55
View
! Viewとは
! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです
! 複数のViewをまとめる機能を持つViewをViewGroupといいます
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
View
ImageButton
ImageView
TextView
Button
ViewGroup
FrameLayout

56. Ⅶ - 56
Viewの描画領域(1)
! Viewの描画領域
! コンテンツエリア
! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup
はそれらの領域をすべて含んだ領域を持っています
! 一つのViewGroupの子である複数のViewは同じ領域を重複して含んでいてかま
いません
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
ViewGroup
ImageView
子Viewは重なっていても良い
TextView
Button
Button
Buttonの場合は
テキストの表示部
分がコンテツエリ
アになる
ViewGroup
ViewGroupのコンテツ
エリアは子Viewの領域
TextView
Button

57. Ⅶ - 57
Viewの描画領域(2)
! Viewの描画領域
! バックグラウンドエリア
! 背景として利用する描画領域の設定をします。
! 描画領域を利用するリソース（画像、XML等）を指定するか、色を指定します
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
Button
Buttonの場合は
テキスト以外が
バックグラウンド
エリアになる
ViewGroup
ViewGroupでは子View
の領域意外がバックグ
ラウンドエリアになる
TextView
Button

58. Ⅶ - 58
Viewプロパティ
! Viewのプロパティ
! Viewをどのように表示するかを決定する
! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画
像や色、余白をどのくらい使うかなどの情報をプロパティとして設定する
! どんなプロパティが使えるかはViewによって様々だが、共通するプロパティも存
在する
! プロパティはレイアウトリソースのxmlの属性で指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

59. Ⅶ - 59
Viewプロパティ
! 代表的なビューのプロパティ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
プロパティ
設定値
説明
layout_width
・wrap_content
・match_parent
ビューの幅を指定します
layout_height
・wrap_content
・match_parent
ビューの高さを指定します
android:gravity
・top ・bottom ・left ・right
・center_vertical ・center_horizontal
・center ・start ・end
レイアウト内に配置した全てのViewに、指定した方向に
配列させる
android:layout_gravity
・top ・bottom ・left ・right
・center_vertical ・center_horizontal
・center ・start ・end
レイアウトに配置した個々のViewに、指定した方向に配
列させる
※ layout_gravityで指定したのが優先される
layout_weight
※親ViewがLinerLayoutの時のみ
数値
余白を埋めるために、ウィジェットのサイズをそれぞれ引
き延ばす割合
android:weightSum
数値
ViewGroupにweightSum属性を指定すると、余白部分を
含めたLayoutの合計値を指定できる
android:layout_margin
px , dp, sp, in, mm
数値+単位 （例）20dp
ウィジェットの外側の余白の設定をおこなう。単位は主に
dpで指定する
android:padding
px , dp, sp, in, mm
数値+単位 （例）20dp
ウィジェットの内側の余白の設定をおこなう。単位は主に
dpで指定する ※ウィジェット間の余白スペースを広げる
android:enabled
true, false
ビューの有効、無効を設定する
visiblity
・visible ・gone ・invisible
ビューの表示、非表示を設定します

60. Ⅶ - 60
layout_width、 layout_height
! layout_widthとlayout_height
! Viewの幅、高さを設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
layout_width：wrap_content
layout_height：wrap_content
layout_width：wrap_content
layout_height：match_parent
layout_width：match_parent
layout_height：wrap_content

61. Ⅶ - 61
gravity、 layout_gravity
! gravityとlayout_gravity
! Viewの配置する方向を設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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:gravity="right"
android:orientation="vertical" >
<!-- 位置指定：無し -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="無し" />
<!-- 位置指定：左 -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left"
android:text="左" />
<!-- 位置指定：中央 -->
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="中央" />
</LinearLayout>

62. Ⅶ - 62
layout_weight
! layout_weight
! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合
! 設定例(weightなし)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button2"
android:layout_width="wrap_content "
android:layout_height="wrap_content"
android:text="Button" />
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
</LinearLayout>

63. Ⅶ - 63
layout_weight
! layout_weight
! 設定例(weightあり)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<Button
android:id="@+id/button2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_weight="1" />
<Button
android:id="@+id/button1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="Button"
android:layout_weight="1" />
</LinearLayout>
ボタンの幅が画面
の横幅いっぱいの
等分に広がってい
る

64. Ⅶ - 64
weightSum
! weightSum
! 余白部分を含めたLayoutの合計値を指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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:orientation="vertical"
android:weightSum="5" >
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button1" />
<Button
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="2"
android:text="Button2" />
</LinearLayout>
1
2
2(5-1-2)
全体割合
＝5

65. Ⅶ - 65
layout_margin、 padding
! layout_marginとpadding
! layout_magin：外側の余白の設定する
! padding : 内側の余白の設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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:orientation="vertical" >
<!-- デフォルト -->
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button" />
<!-- margin -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="50dp"
android:text="Button" />
<!-- padding -->
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="50dp"
android:text="Button" />
ボタンの周囲の
余白が50dps
テキストの周囲
の余白が50dps

66. Ⅶ - 66
enabled
! enabled
! ビューの有効、無効を設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout >
<Button
android:id="@+id/button1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="true"
android:text="true" />
<Button
android:id="@+id/button2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:enabled="false"
android:text="false" />
</LinearLayout>

67. Ⅶ - 67
visibility
! visibility
! ビューの表示、非表示を設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<TextView android:text="visible" />
<Button
android:text="Button"
android:visibility="visible" />
<TextView android:text="invisible" />
<Button
android:text="Button"
android:visibility="invisible" />
<TextView android:text="gone" />
<Button
android:text="Button"
android:visibility="gone" />
<TextView android:text="↑goneは幅高さが無効化され、存在し
ないものとして扱われる" />
幅と高さを維持する
幅と高さを維持しないため、
前後のViewが詰め込まれる

68. Ⅶ - 68
ImageView
! ImageViewとは
! 画像を表示する際に使用するViewクラス
! 配置したImageViewにdrawableから画像を読み込んで表示を行う
! srcプロパティで表示する画像を指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
ImageViewに画
像が設定される
読み込ませたい画
像を設定すると

69. Ⅶ - 69
ImageViewプロパティ
! 代表的なImageViewプロパティ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
プロパティ
設定値
説明
android:minHeight
px , dp, sp, in, mm
数値+単位
例）20dp
Viewの高さの最小値を指定
※ImageViewではなくViewのプロパティ
android:minWidth
px , dp, sp, in, mm
数値+単位
例）20dp
Viewの幅の最小値を指定
※ImageViewではなくViewのプロパティ
android:maxHeight
px , dp, sp, in, mm
数値+単位
例）20dp
ImageViewの高さの最大値を指定
android:maxWidth
px , dp, sp, in, mm
数値+単位
例）20dp
ImageViewの幅の最大値を指定
android:scaleType
Matrix,fit_xy,
fix_start,fix_center,fix_end,
center,center_crop,center_inside
画像がImageViewのサイズに応じてどのよう
にリサイズされるかを指定
android:src
リソース指定
ImageViewに表示する内容を指定
android:adjustViewBounds
true, false
画像の縦横比を維持するかどうかを指定。
falseだと、端末のサイズに縦横比が合わさ
れる。
デフォルトはfalse。

70. Ⅶ - 70
minHeight、minWidth
! minHeightとminWidth
! Viewの高さ、幅の最小値を指定
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<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:orientation="vertical" >
<!--minWidth・minHeight使用-->
<ImageView
android:id="@+id/ImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:minHeight="100dp"
android:src="@drawable/android" />
<!--デフォルト-->
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_launcher" />
</LinearLayout>
実際の画像サイズはもっと小
さいが、minWidth/minHeight
がそれより大きいため、その
サイズで表示される
※ImageViewではなくViewのプロパティ

71. Ⅶ - 71
<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:orientation="vertical" >
<!--maxWidth・maxHeight使用-->
<ImageView
android:id="@+id/ImageView“
android:adjustViewBounds= "true"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="100dp"
android:minHeight="100dp"
android:src="@drawable/android" />
<!--デフォルト-->
<ImageView
android:id="@+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/android" />
</LinearLayout>
maxHeight、maxWidth
! maxHeightとmaxWidth
! ImageViewの高さの最大値を指定
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
実際の画像サイ
ズもっと大きいが、
maxWidth/
maxHeightがそれ
より小さいため、
そのサイズで表
示される

72. Ⅶ - 72
scaleType
! scaleType
! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?xml
version="1.0"
encoding="utf-­‐8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="TextView"
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"></TextView>
<ImageView
android:adjustViewBounds="true"
android:scaleType="matrix"
android:background="#aaaaaa"
android:id="@+id/imageView1"
android:layout_width="wrap_content"
android:src="@drawable/big_droid"
android:layout_height="wrap_content"></ImageView>
<TextView
android:text=""
android:background="#0000ff"
android:layout_width="match_parent"
android:layout_height="wrap_content"></TextView>
</LinearLayout>
このプロパティの値を変更する
ImageViewの背景色を#aaaaaaに設定している
(縮小などがわかりやすくするため)

73. Ⅶ - 73
scaleType
! scaleType
! 設定例(adjustViewBounds=false)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
scaleType=“matrix”
scaleType=“fitCenter”
scaleType=“cetner”
scaleType=“fitXY”
ImageViewの領域は、画像の幅/高さと画面サイ
ズのうちそれぞれ小さい方が使用される
画像のサイズはそのまま
で表示されるが、画面幅
より画像が大きいので右
側が見切れている
高さ・幅が画面内に収まるよ
うそれぞれ別の比率で縮小
される(今回高さは縮小され
ていない)
画像サイズはそのままで、
画像の中心がImageView
の中心に合うよう配置さ
れる。
画像の幅が画面幅に合うよう、
高さも同率で縮小され、
ImageView領域の中心に配置
されるため、ImageViewの背景
色が見えている

74. Ⅶ - 74
scaleType
! scaleType
! 設定例(adjustViewBounds=true)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
scaleType=“matrix”
scaleType=“fitCenter”
scaleType=“cetner”
scaleType=“fitXY”
ImageViewの領域は、false時と同じように求めた
後、画像のアスペクト比(縦横比)に調整される
＝ImageViewの領域は画像より大きくならない
画像のサイズはそのまま
だが、画面幅に応じたア
スペクト比で高さが制限さ
れる
高さ・幅がどちらも画面内に
収まるよう、元のアスペクト
比を維持したまま縮小され
る
画像サイズはそのままで、
画像の中心がImageView
の中心に合うよう配置さ
れる
画像の幅が画面幅に合うよう
縮小され、高さはその幅に対し
てアスペクト比を維持したまま
縮小される

75. Ⅶ - 75
ViewGroup
! ViewGroupとは
! 複数のビューをまとめる機能を持つビューである
! ビューグループを使用する事により、複雑なレイアウトを作成することが可
能になる
! ViewGroupの例:LinearLayout
! Viewを縦方向または横方向に配置します
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

76. Ⅶ - 76
ViewGroupの種類
! 代表的なビューグループ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
名前
説明
RelativeLayout
View（親）の位置を決め、その位置を元に
View（子）の位置を相対的（Relative）に指定する
LinearLayout
Viewを垂直または水平に配置
FrameLayout
FrameLayoutは一つのViewを配置することを目的
としたViewGroup
複数配置した場合は重って表示される
ListView
縦方向に行を並べたリストを表示
GridLayout
グリッド表示に特化したレイアウト。セルの列方向、
または行方向への結合ができる(GridViewでは出
来ない)。
※Android4.0以降で利用可能

77. Ⅶ - 77
RelativeLayout
! RelativeLayout
! View（親）の位置を決め、その位置を元にView（子）の位置を相対的に指定
する構成
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
テキスト
プロパティ
説明
中
android:layout_centerInParent="true"
指定したViewを画面の中心に
配置する
上
android:layout_above="@+id/center"
基準となるViewの上に表示します
android:layout_alignLeft="@+id/center"
指定したViewの左側の境界に合わせ
て整列します
下
android:layout_below="@+id/center"
基準となるViewの下に表示します
android:layout_alignRight="@+id/center"
指定したViewの右側の境界に合わせ
て整列します
左
android:layout_toLeftOf="@+id/center"
基準となるViewの左側に表示します
android:layout_alignBottom="@+id/center"
指定したViewの下側の境界に合わせ
て整列します
右
android:layout_toRightOf="@+id/center"
基準となるViewの右側に表示します
android:layout_alignTop="@+id/center"
指定したViewの上側の境界に合わせ
て整列します

78. Ⅶ - 78
RelativeLayout
! RelativeLayout
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?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"
>
<Button
android:id="@+id/center"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:padding="20dp"
android:text="中"
/>
<Button
android:id="@+id/right"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignTop="@+id/center"
android:layout_toRightOf="@+id/center"
android:text="右"/>

79. Ⅶ - 79
RelativeLayout
! RelativeLayout
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<Button
android:id="@+id/below"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignRight="@+id/center"
android:layout_below="@+id/center"
android:text="下"
/>
<Button
android:id="@+id/above"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_above="@+id/center"
android:layout_alignLeft="@+id/center"
android:text="上"
/>
<Button
android:id="@+id/left"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_alignBottom="@+id/center"
android:layout_toLeftOf="@+id/center"
android:text="左"
/>
</RelativeLayout>

80. Ⅶ - 80
LinearLayout
! LinearLayout
! Viewを垂直または水平に配置する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<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:orientation="horizontal" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
tools:context=".MainActivity" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_android" />
</LinearLayout>
horizontalまたは
verticalを指定する

81. Ⅶ - 81
ViewGroupの種類
! 配置方向の設定
! orientationでLinearLayoutの内部のViewを配置する方向を決定する
! vertical：垂直方向に配置
! horizontal：水平方向に配置
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
verticalの場合
「垂直方向」
horizontalの場合
「水平方向」

82. Ⅶ - 82
FrameLayout
! FrameLayout
! FrameLayoutは一つのViewを配置することを目的としたViewGroup
! 複数配置した場合は重って表示される
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<FrameLayout xmlns:android="http://schemas.android.com/apk/
res/android"
xmlns:tools="http://schemas.android.com/tools"
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:src="@drawable/ic_launcher" />
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
android:textColor="#FF0000"
tools:context=".MainActivity" />
</FrameLayout>
ImageViewとTextViewが
重なっている

83. Ⅶ - 83
ListView
! ListView
! 縦方向に行を並べたリストを表示する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
※行要素は、別途行用のレイアウトリソースを用意し、プログラムで設定することもできる
<?xml
version="1.0"
encoding="utf-­‐8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/list_datas"
>
</ListView>
</FrameLayout>

84. Ⅶ - 84
ListView
! ListView
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?xml
version="1.0"
encoding="utf-­‐8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<ListView
android:id="@+id/listView1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:entries="@array/list_datas"
>
</ListView>
</FrameLayout>
strings.xml

85. Ⅶ - 85
GridLayout
! GridLayout
! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合
ができる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<?xml
version="1.0"
encoding="utf-­‐8"?>
<GridLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:columnCount="3"
android:rowCount="4"
android:useDefaultMargins="true"
>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center“
android:layout_column="0"
android:layout_row="0"
android:background="#eee"
android:text="Item
1"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1"
android:layout_row="0"
android:background="#ddd"
android:text="Item
2"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
セルを列方向
に結合
セルを行方向
に結合

86. Ⅶ - 86
GridLayout
! GridLayout（つづき 1)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="0"
android:background="#eee"
android:text="Item
3"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="0"
android:layout_row="1"
android:layout_rowSpan="2"
android:background="#ddd"
android:text="Item
4"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1“
android:layout_row="1“
android:layout_columnSpan="2“

87. Ⅶ - 87
GridLayout
! GridLayout(つづき 2)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
android:background="#eee"
android:text="Item
5"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1"
android:layout_row="2"
android:background="#ccc"
android:text="Item
6"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="2"
android:background="#ddd"
android:text="Item
7"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</GridLayout>

88. Ⅶ - 88
レイアウトの作成
! 実習 1
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
周囲の余白『10dp』
を設定

89. Ⅶ - 89
レイアウトの作成
! プロジェクト概要
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
項目
設定値
Project name
UISample
Build Target
※ トレーニングで指定したバージョン
Application name
UISample
Package name
jp.oesf.uisample
Create Activity
MainActivity

90. Ⅶ - 90
レイアウトの作成
! 手順
! res/drawble-hdpi/に「android.png」の画像を追加する
! 画像は解答ドキュメントより取得する
! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパティを設定し
レイアウトを完成させる
! 実習で使用するViewGroupとプロパティは各自で考えること
! 検索ボタンのリソースは、@android:drawable/ic_menu_searchを使用する。
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
View
EditText
ImageButton
ImageView
Button
Button

91. Ⅶ - 91
レイアウトの作成
! 確認
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
nexus one
nexus7

92. Ⅶ - 92
レイアウトの作成 -解答-
! 解答例
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<EditText
android:id="@+id/editText1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
</EditText>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_search" />
</LinearLayout>

93. Ⅶ - 93
レイアウトの作成 -解答-
! 解答例（続き）
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@drawable/android" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>

94. Ⅶ - 94
レイアウトの作成 [補足実習]
! 実習[補足]
! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する
! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存
在する。他にどんな実装方法があるかを考え組み立てる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

95. StyleとTheme
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

96. Ⅶ - 96
StyleとTheme
! StyleとTheme
! アプリケーションをデザインする場合に、 UIを統一感をもたせるときにstyleと
Themeを使用します
! StyleとはUIのプロパティを複数持ったリソースです
! Styleは個々のビュー に設定でき、ThemeはActivityやアプリケーション全体
に設定できます。
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

97. Ⅶ - 97
Styleの作成
! Styleの作成方法
! res/values以下にstyles.xmlを作成する
! styles.xmlにUIのプロパティを定義する
! プロパティはViewで定義されているプロパティが設定できる
! android:textSize 、android:textColor など
! Viewのandroid:styleプロパティに作成したStyleを指定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

98. Ⅶ - 98
Styleの作成 (書式)
! Styleリソースの書式
! ルートノードに<resources>を指定する
! 子ノードに<style>を指定する
! styleのプロパティに、Style名、親Style名（Styleを継承する場合）を指定する
! ※親StyleはAndroid標準のUIスタイルを指定すると良い
! <style>の子ノードに<item>を指定する
! itemのプロパティにViewで設定したいプロパティを設定する
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyButton" parent="android:Widget.Button">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#ddaa00</item>
<item name="android:background">@drawable/my_selector</item>
</style>
</resources>
styles.xml
※最初の親StyleはAndroid標準のUIスタイルを指定すると良い。
クリック時の状態対応やテキストの位置などの設定が不要になる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

99. Ⅶ - 99
Styleの作成 (設定例)
! Styleを使用したサンプル
! Styleに文字サイズと、文字カラーを設定し、背景以外も統一したボタンを作
成する
! Sylteの名前を設定する
• styleタグのnameプロパティで設定する
• name=“Styleの名前”
! Viewのプロパティを設定する
• itemタグのname属性でViewのプロパティを指定する
• 文字サイズ：name=“android:textSize”
• 文字カラー：name=“android:textColor”
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="MyButton" parent="android:Widget.Button">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#ddaa00</item>
<item name="android:background">@drawable/my_selector</item>
</style>
</resources>
styles.xml
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

100. Ⅶ - 100
Styleの作成 (適用)
! ViewにStyleを適用する
! 作成したStyleをViewのstyleプロパティに指定する
<Button
style="@style/MyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button01" >
</Button>
<Button
style="@style/MyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button02" >
</Button>
<ToggleButton
style="@style/MyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton" >
</ToggleButton>
<EditText
style="@style/MyButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EditText" >
</EditText>
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

101. Ⅶ - 101
Styleの作成 (実行結果)
! 実行結果
! Viewの文字サイズが18spで統一
! Viewの文字カラーが#ddaa00で統一
! 背景画像がmy_selectorで統一
※Button以外のViewも同じデザインになっているため
それぞれのViewに特化したStyleを用意するのが一般的
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

102. Ⅶ - 102
Styleの作成(1)
! 実習1
! サンプルで解説したStyleを作成する
! 前回の実習で作成したselectorを使ってStyleを作成する
! 実行結果
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

103. Ⅶ - 103
Styleの作成(2)
! プロジェクト概要
項目
設定値
Project name
MyStyelSample
Build Target
※トレーニングで指定したバージョン
Application name
MyStyleSample
Package name
com.example.mystylesample
Create Activity
MainActivity
※前章で作成した「MySelectorSample」を修正して作業しても良い
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

104. Ⅶ - 104
Styleの作成(3)
! 手順
! リソースファイルの準備
! Styleリソースを作成する
! 画面デザインを変更しViewにStyleを設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

105. Ⅶ - 105
Styleの作成(4)
! リソースファイルの準備
! 前回作成したリソースファイルを追加する
3.2 実習 Themeを作成する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

106. Ⅶ - 106
Styleの作成(5)
! Styleリソースを作成する
! res/values以下のstyles.xmlファイルを修正する
! styles.xmlに以下の設定をする
! style名:MyButton
! parent:Widget.Button
! android:textSize:18sp
! android:textColor:#ddaa00
! android:background:@drawable/my_selector
<?xml version="1.0" encoding="utf-8"?>
<resources>
...略...
<style name="MyButton" parent="android:Widget.Button">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#ddaa00</item>
<item name="android:background">@drawable/my_selector</item>
</style>
</resources>
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

107. Ⅶ - 107
Styleの作成(6)
! 画面デザインを変更する
! レイアウトリソースの内容を以下のように変更する
! 各ViewのstyleにMyButtonを指定する
View
Properties
Button
style="@style/MyButton"
android:text="Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Button
style="@style/MyButton"
android:text="Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ToggleButton
style="@style/MyButton"
android:text="ToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
EditText
style="@style/MyButton"
android:text="EditText"
android:layout_height="wrap_content"
android:layout_width="match_parent"
アウトライン
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

108. Ⅶ - 108
Styleの作成(7)
! 確認
! Viewの文字サイズが統一されていることを確認する
! Viewの文字カラーが統一されていることを確認する
! Viewの背景が統一されていることを確認する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

109. Ⅶ - 109
Theme
! Themeとは
! UIのプロパティを複数持ったリソース
! Styleは個々のビュー に設定するが、ThemeはActivityやDialogやアプリケー
ション全体に設定する
! リソースの書式はStyleと同じ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

110. Ⅶ - 110
Themeの作成方法
! Themeの作成方法
! res/values以下にthemes.xmlを作成する(styles.xmlに追加しても良い)
! themes.xmlにUIのプロパティを定義する
! ActivityまたはApplicationのandroid:theme プロパティに作成したThemeを指定する
! 独自のThemeを最初から作成することはできるが、Androidはデフォルトで複数のThemeが用
意されているので、既存のThemeを継承して必要な部分のデザインを変更する
• ※最新のADTでは標準テーマを継承したAppThemeが定義されている
Theme.Light
Theme.Translucent
Theme.Black
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

111. Ⅶ - 111
Themeの作成方法(書式)
! Themeリソースの書式
! ルートノードに<resources>を指定する
! 子ノードに<style>を指定する
! styleのプロパティに、Style名、親Style名（Styleを継承する場合）を指定する
! <style>の子ノードに<item>を指定する
! itemのプロパティにViewで設定したいプロパティを設定する
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">@drawable/panel_picture_frame_bg_pressed_blue</item>
</style>
</resources>
themes.xml
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

112. Ⅶ - 112
Themeの作成方法(定義)
! Themeを使用したサンプル
! Android標準で用意されているTheme.Lightを継承した独自のCustomTheme
を定義
! android:windowBackground
• 背景画像を「activity_background.png」に設定
! android:buttonStyle
• デフォルトのButtonのStyleを「MyButton」に設定
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="AppTheme">
<item name="android:windowBackground">@drawable/activity_background</item>
<item name="android:buttonStyle">@style/MyButton</item>
</style>
</resources>
themes.xml
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

113. Ⅶ - 113
Themeの作成方法(適用)
! ActivityにThemeを設定する
! AndroidManifestファイルのactivityタグのthemeプロパティに適用させたい
Themeを指定する
<activity android:name=".MyStyleSample" android:theme="@style/CustomTheme"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

114. Ⅶ - 114
Themeの作成方法(実行結果)
! 実行結果
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

115. Ⅶ - 115
Themeを作成する(1)
! 実習2
! 前回作成したプロジェクトにThemeを追加する
※解答ドキュメントでは「MyThemeSample」で提供
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

116. Ⅶ - 116
Themeを作成する(2)
! 手順
1. リソースファイルの準備
2. Themeリソースを作成する
3. activity_main.xmlで設定したstyleプロパティを削除する
4. ActivityにThemeを設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.

117. Ⅶ - 117
Themeを作成する(3)
1. リソースファイルの準備
! 新規に使用するリソースファイルを追加する
• activity_background.png
This material is licensed under the Creative Commons License BY-NC-SA 4.0.