Android UIデザイン入門

UIデザイントレーニング

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

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

Ⅶ - 4
トレーニングスケジュール
! 目次
! Viewプロパティ
! Buttonのカスタマイズ
! Style, Theme
! Animation
! 実習

Ⅶ - 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

Ⅶ - 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
実習の解答ドキュメント

Ⅶ - 8
概要
! アプリケーション開発手順
! 画面デザインの作成
! View
! Viewプロパティについて
! 代表的なプロパティ
! ImageView
! ImageViewのプロパティ
! ViewGroup
! ViewGroupの代表的なプロパティ
! 実習

Ⅶ - 9
アプリケーション開発の手順
! 開発手順
! Eclipseでプロジェクト作成
•  Button、CheckBoxなどのパーツの配置
! ソースコードを書く
•  例）ボタンクリック時の処理など
! ビルド
! Androidアプリが出来上がる（apk）
! エミュレータ、実機に転送
! アプリケーションの起動

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

Ⅶ - 11
View
! Viewとは
! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです
! 複数のViewをまとめる機能を持つViewをViewGroupといいます
View
ImageButton
ImageView
TextView
Button
ViewGroup
FrameLayout

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

Ⅶ - 13
! バックグラウンドエリア
! 背景として利用する描画領域の設定をします。
! 描画領域を利用するリソース（画像、XML等）を指定するか、色を指定します
Button
Buttonの場合は
テキスト以外が
バックグラウンド
エリアになる
ViewGroup
ViewGroupでは子View
の領域意外がバックグ
ラウンドエリアになる
TextView
Button

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

Ⅶ - 15
Viewプロパティ
! 代表的なビューのプロパティ
プロパティ
設定値
説明
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
レイアウトに配置した個々の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 
ウィジェットの内側の余白の設定をおこなう。単位は主に
dpで指定する ※ウィジェット間の余白スペースを広げる
android:enabled
true, false
ビューの有効、無効を設定する
visiblity
・visible ・gone ・invisible
ビューの表示、非表示を設定します

Ⅶ - 16
layout_width、 layout_height
! layout_widthとlayout_height
! Viewの幅、高さを設定する
layout_width：wrap_content
layout_height：wrap_content
layout_height：match_parent
layout_width：match_parent

Ⅶ - 17
gravity、 layout_gravity
! gravityとlayout_gravity
! Viewの配置する方向を設定する
<?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:layout_gravity="left"
android:text="左" />


<Button
android:layout_gravity="center"
android:text="中央" />
</LinearLayout>

Ⅶ - 18
layout_weight
! layout_weight
! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合
! 設定例(weightなし)
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/LinearLayout2"
android:orientation="horizontal" >

<Button
android:layout_width="wrap_content "
android:text="Button" />

<Button

</LinearLayout>

Ⅶ - 19
layout_weight
! layout_weight
! 設定例(weightあり)

<Button
android:layout_width="0dp"
android:text="Button"
android:layout_weight="1" />

<Button

</LinearLayout>
ボタンの幅が画面
の横幅いっぱいの
等分に広がってい
る

Ⅶ - 20
weightSum
! weightSum
! 余白部分を含めたLayoutの合計値を指定する
android:orientation="vertical"
android:weightSum="5" >

<Button
android:layout_height="0dp"
android:layout_weight="1"
android:text="Button1" />

<Button

</LinearLayout>
1
2
2(5-1-2)
全体割合
＝5

Ⅶ - 21
layout_margin、 padding
! layout_marginとpadding
! layout_magin：外側の余白の設定する

! padding : 内側の余白の設定する



<Button

<Button
android:layout_margin="50dp"


<Button
android:padding="50dp"
ボタンの周囲の
余白が50dps
テキストの周囲
の余白が50dps

Ⅶ - 22
enabled
! enabled
! ビューの有効、無効を設定する
<LinearLayout >

<Button
android:enabled="true"
android:text="true" />

<Button
android:enabled="false"
android:text="false" />

</LinearLayout>

Ⅶ - 23
visibility
! visibility
! ビューの表示、非表示を設定する
<TextView android:text="visible" />

<Button
android:visibility="visible" />

<TextView android:text="invisible" />

<Button
android:visibility="invisible" />

<TextView android:text="gone" />

<Button
android:visibility="gone" />

<TextView android:text="↑goneは幅高さが無効化され、存在し
ないものとして扱われる" />
幅と高さを維持する
幅と高さを維持しないため、
前後のViewが詰め込まれる

Ⅶ - 24
ImageView
! ImageViewとは
! 画像を表示する際に使用するViewクラス
! 配置したImageViewにdrawableから画像を読み込んで表示を行う
! srcプロパティで表示する画像を指定する
ImageViewに画
像が設定される
読み込ませたい画
像を設定すると

Ⅶ - 25
ImageViewプロパティ
! 代表的なImageViewプロパティ
プロパティ
設定値
説明
android:minHeight
数値+単位 
例）20dp
Viewの高さの最小値を指定

※ImageViewではなくViewのプロパティ
android:minWidth
数値+単位 
例）20dp
Viewの幅の最小値を指定

android:maxHeight
数値+単位 
例）20dp
ImageViewの高さの最大値を指定
android:maxWidth
数値+単位 
例）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
minHeight、minWidth
! minHeightとminWidth
! Viewの高さ、幅の最小値を指定
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"


<ImageView
android:id="@+id/ImageView"
android:minWidth="100dp"
android:minHeight="100dp"
android:src="@drawable/android" />


<ImageView
android:id="@+id/imageView2"
android:src="@drawable/ic_launcher" />

</LinearLayout>
実際の画像サイズはもっと小
さいが、minWidth/minHeight
がそれより大きいため、その
サイズで表示される

Ⅶ - 27
android"


<ImageView
android:id="@+id/ImageView“
android:adjustViewBounds= "true"

<ImageView
</LinearLayout>
maxHeight、maxWidth
! maxHeightとmaxWidth
! ImageViewの高さの最大値を指定
実際の画像サイ
ズもっと大きいが、
maxWidth/
maxHeightがそれ
より小さいため、
そのサイズで表
示される

Ⅶ - 28
scaleType
! scaleType
! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定
<?xml
version="1.0"
encoding="utf-‐8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"



android:layout_height="match_parent">

<TextView

android:text="TextView"

android:id="@+id/textView1"


android:layout_height="wrap_content"></TextView>

<ImageView

android:adjustViewBounds="true"

android:scaleType="matrix"

android:background="#aaaaaa"



android:src="@drawable/big_droid"

android:layout_height="wrap_content"></ImageView>

<TextView

android:text=""

android:background="#0000ff"



</LinearLayout>
このプロパティの値を変更する
ImageViewの背景色を#aaaaaaに設定している
(縮小などがわかりやすくするため)

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

Ⅶ - 30
scaleType
! scaleType
! 設定例(adjustViewBounds=true)
ImageViewの領域は、false時と同じように求めた
後、画像のアスペクト比(縦横比)に調整される
＝ImageViewの領域は画像より大きくならない
だが、画面幅に応じたア
スペクト比で高さが制限さ
れる
高さ・幅がどちらも画面内に
収まるよう、元のアスペクト
比を維持したまま縮小され
る
れる
画像の幅が画面幅に合うよう
縮小され、高さはその幅に対し
てアスペクト比を維持したまま
縮小される

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

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

Ⅶ - 33
RelativeLayout
! RelativeLayout
! View（親）の位置を決め、その位置を元にView（子）の位置を相対的に指定
する構成
テキスト
プロパティ
説明
中
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
RelativeLayout
! RelativeLayout
<?xml
version="1.0"

<RelativeLayout


>

<Button

android:id="@+id/center"



android:layout_centerHorizontal="true"

android:layout_centerVertical="true"


android:text="中"
/>

<Button

android:id="@+id/right"





android:text="右"/>

Ⅶ - 35
RelativeLayout
! RelativeLayout

<Button

android:id="@+id/below"





android:text="下"
/>

<Button

android:id="@+id/above"





android:text="上"
/>

<Button

android:id="@+id/left"





android:text="左"
/>

</RelativeLayout>

Ⅶ - 36
LinearLayout
! LinearLayout
! Viewを垂直または水平に配置する
android"

<TextView
android:padding="@dimen/padding_medium"
android:text="@string/hello_world"
tools:context=".MainActivity" />

<TextView
android:text="@string/hello_android" />

</LinearLayout>
horizontalまたは
verticalを指定する

Ⅶ - 37
ViewGroupの種類
! 配置方向の設定
! orientationでLinearLayoutの内部のViewを配置する方向を決定する
! vertical：垂直方向に配置
! horizontal：水平方向に配置
verticalの場合
　「垂直方向」
horizontalの場合
　「水平方向」

Ⅶ - 38
FrameLayout
! FrameLayout
! FrameLayoutは一つのViewを配置することを目的としたViewGroup
! 複数配置した場合は重って表示される
<FrameLayout xmlns:android="http://schemas.android.com/apk/
res/android"
android:layout_height="match_parent" >

<ImageView

<TextView
android:textColor="#FF0000"

</FrameLayout>
ImageViewとTextViewが
重なっている

Ⅶ - 39
ListView
! ListView
! 縦方向に行を並べたリストを表示する
※行要素は、別途行用のレイアウトリソースを用意し、プログラムで設定することもできる
<?xml
version="1.0"

<FrameLayout


>

<ListView

android:id="@+id/listView1"



android:entries="@array/list_datas"
>
</ListView>

</FrameLayout>

Ⅶ - 40
ListView
! ListView
<?xml
version="1.0"

<FrameLayout


>

<ListView




>
</ListView>

</FrameLayout>
strings.xml

Ⅶ - 41
GridLayout
! GridLayout
! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合
ができる
<?xml
version="1.0"

<GridLayout



android:columnCount="3"

android:rowCount="4"

android:useDefaultMargins="true"
>

<TextView


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_gravity="center“


　　　　　　　android:layout_row="0"

android:background="#ddd"

android:text="Item
2"

/>
セルを列方向
に結合
セルを行方向
に結合

Ⅶ - 42
GridLayout
! GridLayout（つづき 1)

<TextView



　　　　　　　android:layout_gravity="center"




android:text="Item
3"

/>

<TextView






android:layout_rowSpan="2"


android:text="Item
4"

/>

<TextView



　　　　　　 android:layout_gravity="center“

android:layout_column="1“

　　　　　　　android:layout_row="1“

android:layout_columnSpan="2“

Ⅶ - 43
GridLayout
! GridLayout(つづき 2)


android:text="Item
5"

/>

<TextView






android:background="#ccc"

android:text="Item
6"

/>

<TextView







android:text="Item
7"

/>

</GridLayout>

Ⅶ - 44
レイアウトの作成
! 実習 1
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する
周囲の余白『10dp』
を設定

Ⅶ - 45
! プロジェクト概要
項目
設定値
Project name
UISample
Build Target
※ トレーニングで指定したバージョン
Application name
UISample
Package name
jp.oesf.uisample
Create Activity
MainActivity

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

Ⅶ - 47
! 確認
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する
nexus one
nexus7

Ⅶ - 48
レイアウトの作成 -解答-
! 解答例
android:padding="10dp" >

<LinearLayout
android:gravity="bottom"

<EditText
android:id="@+id/editText1"
android:layout_weight="1" >
</EditText>

<ImageButton
android:id="@+id/imageButton1"
android:src="@android:drawable/ic_menu_search" />
</LinearLayout>

Ⅶ - 49
! 解答例（続き）
<ImageView
android:scaleType="fitCenter"

<LinearLayout

<Button

<Button
</LinearLayout>

</LinearLayout>

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

Ⅶ - 52
概要
! アプリケーション開発手順
! View
! Viewプロパティについて
! 代表的なプロパティ
! ImageView
! ImageViewのプロパティ
! ViewGroup
! ViewGroupの代表的なプロパティ
! 実習

Ⅶ - 53
アプリケーション開発の手順
! 開発手順
! Eclipseでプロジェクト作成
•  Button、CheckBoxなどのパーツの配置
! ソースコードを書く
•  例）ボタンクリック時の処理など
! ビルド
! Androidアプリが出来上がる（apk）
! エミュレータ、実機に転送
! アプリケーションの起動

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

Ⅶ - 55
View
! Viewとは
! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです
! 複数のViewをまとめる機能を持つViewをViewGroupといいます
View
ImageButton
ImageView
TextView
Button
ViewGroup
FrameLayout

Ⅶ - 56
! コンテンツエリア
! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup
はそれらの領域をすべて含んだ領域を持っています
! 一つのViewGroupの子である複数のViewは同じ領域を重複して含んでいてかま
いません
ViewGroup
ImageView
子Viewは重なっていても良い
TextView
Button
Button
Buttonの場合は
テキストの表示部
分がコンテツエリ
アになる
ViewGroup
ViewGroupのコンテツ
エリアは子Viewの領域
TextView
Button

Ⅶ - 57
! バックグラウンドエリア
! 背景として利用する描画領域の設定をします。
! 描画領域を利用するリソース（画像、XML等）を指定するか、色を指定します
Button
Buttonの場合は
テキスト以外が
バックグラウンド
エリアになる
ViewGroup
ViewGroupでは子View
の領域意外がバックグ
ラウンドエリアになる
TextView
Button

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

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

Ⅶ - 60
layout_width、 layout_height
! layout_widthとlayout_height
! Viewの幅、高さを設定する
layout_height：match_parent
layout_width：match_parent

Ⅶ - 61
gravity、 layout_gravity
! gravityとlayout_gravity
! Viewの配置する方向を設定する
android:gravity="right"


<Button
android:text="無し" />


<Button
android:layout_gravity="left"
android:text="左" />


<Button
android:text="中央" />
</LinearLayout>

Ⅶ - 62
layout_weight
! layout_weight
! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合
! 設定例(weightなし)

<Button
android:layout_width="wrap_content "

<Button

</LinearLayout>

Ⅶ - 63
layout_weight
! layout_weight
! 設定例(weightあり)

<Button

<Button

</LinearLayout>
ボタンの幅が画面
の横幅いっぱいの
等分に広がってい
る

Ⅶ - 64
weightSum
! weightSum
! 余白部分を含めたLayoutの合計値を指定する
android:weightSum="5" >

<Button

<Button

</LinearLayout>
1
2
2(5-1-2)
全体割合
＝5

Ⅶ - 65
layout_margin、 padding
! layout_marginとpadding
! layout_magin：外側の余白の設定する

! padding : 内側の余白の設定する



<Button

<Button
android:layout_margin="50dp"


<Button
ボタンの周囲の
余白が50dps
テキストの周囲
の余白が50dps

Ⅶ - 66
enabled
! enabled
! ビューの有効、無効を設定する
<LinearLayout >

<Button
android:enabled="true"
android:text="true" />

<Button
android:enabled="false"
android:text="false" />

</LinearLayout>

Ⅶ - 67
visibility
! visibility
! ビューの表示、非表示を設定する
<TextView android:text="visible" />

<Button
android:visibility="visible" />

<TextView android:text="invisible" />

<Button
android:visibility="invisible" />

<TextView android:text="gone" />

<Button
android:visibility="gone" />

<TextView android:text="↑goneは幅高さが無効化され、存在し
ないものとして扱われる" />
幅と高さを維持する
幅と高さを維持しないため、
前後のViewが詰め込まれる

Ⅶ - 68
ImageView
! ImageViewとは
! 画像を表示する際に使用するViewクラス
! 配置したImageViewにdrawableから画像を読み込んで表示を行う
! srcプロパティで表示する画像を指定する
ImageViewに画
像が設定される
読み込ませたい画
像を設定すると

Ⅶ - 69
ImageViewプロパティ
! 代表的なImageViewプロパティ
プロパティ
設定値
説明
android:minHeight
数値+単位 
例）20dp
Viewの高さの最小値を指定

android:minWidth
数値+単位 
例）20dp
Viewの幅の最小値を指定

android:maxHeight
数値+単位 
例）20dp
ImageViewの高さの最大値を指定
android:maxWidth
数値+単位 
例）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
minHeight、minWidth
! minHeightとminWidth
! Viewの高さ、幅の最小値を指定
android"


<ImageView
android:id="@+id/ImageView"

<ImageView

</LinearLayout>
実際の画像サイズはもっと小
さいが、minWidth/minHeight
がそれより大きいため、その
サイズで表示される

Ⅶ - 71
android"


<ImageView
android:id="@+id/ImageView“
android:adjustViewBounds= "true"

<ImageView
</LinearLayout>
maxHeight、maxWidth
! maxHeightとmaxWidth
! ImageViewの高さの最大値を指定
実際の画像サイ
ズもっと大きいが、
maxWidth/
maxHeightがそれ
より小さいため、
そのサイズで表
示される

Ⅶ - 72
scaleType
! scaleType
! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定
<?xml
version="1.0"

<LinearLayout




android:layout_height="match_parent">

<TextView

android:text="TextView"




<ImageView

android:adjustViewBounds="true"

android:scaleType="matrix"

android:background="#aaaaaa"



android:src="@drawable/big_droid"

android:layout_height="wrap_content"></ImageView>

<TextView

android:text=""

android:background="#0000ff"



</LinearLayout>
このプロパティの値を変更する
ImageViewの背景色を#aaaaaaに設定している
(縮小などがわかりやすくするため)

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

Ⅶ - 74
scaleType
! scaleType
! 設定例(adjustViewBounds=true)
ImageViewの領域は、false時と同じように求めた
後、画像のアスペクト比(縦横比)に調整される
＝ImageViewの領域は画像より大きくならない
だが、画面幅に応じたア
スペクト比で高さが制限さ
れる
高さ・幅がどちらも画面内に
収まるよう、元のアスペクト
比を維持したまま縮小され
る
れる
画像の幅が画面幅に合うよう
縮小され、高さはその幅に対し
てアスペクト比を維持したまま
縮小される

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

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

Ⅶ - 77
RelativeLayout
! RelativeLayout
! View（親）の位置を決め、その位置を元にView（子）の位置を相対的に指定
する構成
テキスト
プロパティ
説明
中
android:layout_centerInParent="true"
指定したViewを画面の中心に
配置する
上
基準となるViewの上に表示します
指定したViewの左側の境界に合わせ
て整列します
下
基準となるViewの下に表示します
指定したViewの右側の境界に合わせ
て整列します
左
基準となるViewの左側に表示します
指定したViewの下側の境界に合わせ
て整列します
右
基準となるViewの右側に表示します
指定したViewの上側の境界に合わせ
て整列します

Ⅶ - 78
RelativeLayout
! RelativeLayout
<?xml
version="1.0"

<RelativeLayout


>

<Button

android:id="@+id/center"



android:layout_centerHorizontal="true"

android:layout_centerVertical="true"


android:text="中"
/>

<Button

android:id="@+id/right"





android:text="右"/>

Ⅶ - 79
RelativeLayout
! RelativeLayout

<Button

android:id="@+id/below"





android:text="下"
/>

<Button

android:id="@+id/above"





android:text="上"
/>

<Button

android:id="@+id/left"





android:text="左"
/>

</RelativeLayout>

Ⅶ - 80
LinearLayout
! LinearLayout
! Viewを垂直または水平に配置する
android"

<TextView

<TextView
android:text="@string/hello_android" />

</LinearLayout>
horizontalまたは
verticalを指定する

Ⅶ - 81
ViewGroupの種類
! 配置方向の設定
! orientationでLinearLayoutの内部のViewを配置する方向を決定する
! vertical：垂直方向に配置
! horizontal：水平方向に配置
verticalの場合
　「垂直方向」
horizontalの場合
　「水平方向」

Ⅶ - 82
FrameLayout
! FrameLayout
! FrameLayoutは一つのViewを配置することを目的としたViewGroup
! 複数配置した場合は重って表示される
<FrameLayout xmlns:android="http://schemas.android.com/apk/
res/android"
android:layout_height="match_parent" >

<ImageView

<TextView
android:textColor="#FF0000"

</FrameLayout>
ImageViewとTextViewが
重なっている

Ⅶ - 83
ListView
! ListView
! 縦方向に行を並べたリストを表示する
※行要素は、別途行用のレイアウトリソースを用意し、プログラムで設定することもできる
<?xml
version="1.0"

<FrameLayout


>

<ListView




>
</ListView>

</FrameLayout>

Ⅶ - 84
ListView
! ListView
<?xml
version="1.0"

<FrameLayout


>

<ListView




>
</ListView>

</FrameLayout>
strings.xml

Ⅶ - 85
GridLayout
! GridLayout
! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合
ができる
<?xml
version="1.0"

<GridLayout



android:columnCount="3"

android:rowCount="4"

android:useDefaultMargins="true"
>

<TextView







android:text="Item
1"

/>

<TextView



　　　　　　android:layout_gravity="center“




android:text="Item
2"

/>
セルを列方向
に結合
セルを行方向
に結合

Ⅶ - 86
GridLayout
! GridLayout（つづき 1)

<TextView







android:text="Item
3"

/>

<TextView






android:layout_rowSpan="2"


android:text="Item
4"

/>

<TextView



　　　　　　 android:layout_gravity="center“

android:layout_column="1“

　　　　　　　android:layout_row="1“

android:layout_columnSpan="2“

Ⅶ - 87
GridLayout
! GridLayout(つづき 2)


android:text="Item
5"

/>

<TextView






android:background="#ccc"

android:text="Item
6"

/>

<TextView







android:text="Item
7"

/>

</GridLayout>

Ⅶ - 88
! 実習 1
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する
周囲の余白『10dp』
を設定

Ⅶ - 89
項目
設定値
Project name
UISample
Build Target
※ トレーニングで指定したバージョン
Application name
UISample
Package name
jp.oesf.uisample
Create Activity
MainActivity

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

Ⅶ - 91
! 確認
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する
nexus one
nexus7

Ⅶ - 92
! 解答例
android:padding="10dp" >

<LinearLayout

<EditText
android:id="@+id/editText1"
android:layout_weight="1" >
</EditText>

<ImageButton
android:id="@+id/imageButton1"
android:src="@android:drawable/ic_menu_search" />
</LinearLayout>

Ⅶ - 93
! 解答例（続き）
<ImageView
android:scaleType="fitCenter"

<LinearLayout

<Button

<Button
</LinearLayout>

</LinearLayout>

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

StyleとTheme

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

Ⅶ - 97
Styleの作成
! Styleの作成方法
! res/values以下にstyles.xmlを作成する
! styles.xmlにUIのプロパティを定義する
! プロパティはViewで定義されているプロパティが設定できる
! android:textSize 、android:textColor など
! Viewのandroid:styleプロパティに作成したStyleを指定する

Ⅶ - 98
Styleの作成 (書式)
! Styleリソースの書式
! ルートノードに<resources>を指定する
! 子ノードに<style>を指定する
! styleのプロパティに、Style名、親Style名（Styleを継承する場合）を指定する
! ※親StyleはAndroid標準のUIスタイルを指定すると良い
! <style>の子ノードに<item>を指定する
! itemのプロパティにViewで設定したいプロパティを設定する

<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スタイルを指定すると良い。
クリック時の状態対応やテキストの位置などの設定が不要になる

Ⅶ - 99
Styleの作成 (設定例)
! Styleを使用したサンプル
! Styleに文字サイズと、文字カラーを設定し、背景以外も統一したボタンを作
成する
! Sylteの名前を設定する
•  styleタグのnameプロパティで設定する
•  name=“Styleの名前”
! Viewのプロパティを設定する
•  itemタグのname属性でViewのプロパティを指定する
•  文字サイズ：name=“android:textSize”
•  文字カラー：name=“android:textColor”
<resources>
</style>
</resources>
styles.xml

Ⅶ - 100
Styleの作成 (適用)
! ViewにStyleを適用する
! 作成したStyleをViewのstyleプロパティに指定する
<Button
style="@style/MyButton"
android:text="Button01" >
</Button>
<Button
</Button>
<ToggleButton
android:text="ToggleButton" >
</ToggleButton>
<EditText
android:text="EditText" >
</EditText>

Ⅶ - 101
Styleの作成 (実行結果)
! 実行結果
! Viewの文字サイズが18spで統一
! Viewの文字カラーが#ddaa00で統一
! 背景画像がmy_selectorで統一

※Button以外のViewも同じデザインになっているため
それぞれのViewに特化したStyleを用意するのが一般的

Ⅶ - 102
Styleの作成(1)
! 実習1
! サンプルで解説したStyleを作成する
! 前回の実習で作成したselectorを使ってStyleを作成する
! 実行結果

Ⅶ - 103
Styleの作成(2)

項目
設定値
Project name
MyStyelSample

Build Target
※トレーニングで指定したバージョン

Application name
MyStyleSample

Package name
com.example.mystylesample

Create Activity
MainActivity

※前章で作成した「MySelectorSample」を修正して作業しても良い

Ⅶ - 104
Styleの作成(3)
! 手順
! リソースファイルの準備
! Styleリソースを作成する
! 画面デザインを変更しViewにStyleを設定する

Ⅶ - 105
Styleの作成(4)
! リソースファイルの準備
! 前回作成したリソースファイルを追加する
3.2 実習 Themeを作成する

Ⅶ - 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
<resources>

...略...

</style>
</resources>

Ⅶ - 107
Styleの作成(6)
! 画面デザインを変更する
! レイアウトリソースの内容を以下のように変更する
! 各ViewのstyleにMyButtonを指定する
View
Properties
Button
android:text="Button01"

Button
android:text="Button02"

ToggleButton
android:text="ToggleButton"

EditText
android:text="EditText"
アウトライン

Ⅶ - 108
Styleの作成(7)
! 確認
! Viewの文字サイズが統一されていることを確認する
! Viewの文字カラーが統一されていることを確認する
! Viewの背景が統一されていることを確認する

Ⅶ - 109
Theme
! Themeとは
! UIのプロパティを複数持ったリソース
! Styleは個々のビューに設定するが、ThemeはActivityやDialogやアプリケー
ション全体に設定する
! リソースの書式はStyleと同じ

Ⅶ - 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

Ⅶ - 111
Themeの作成方法(書式)
! Themeリソースの書式
! ルートノードに<resources>を指定する
! 子ノードに<style>を指定する
! styleのプロパティに、Style名、親Style名（Styleを継承する場合）を指定する
! <style>の子ノードに<item>を指定する
! itemのプロパティにViewで設定したいプロパティを設定する
<resources>
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">@drawable/panel_picture_frame_bg_pressed_blue</item>
　　</style>
</resources>
themes.xml

Ⅶ - 112
Themeの作成方法(定義)
! Themeを使用したサンプル
! Android標準で用意されているTheme.Lightを継承した独自のCustomTheme
を定義
! android:windowBackground
•  背景画像を「activity_background.png」に設定
! android:buttonStyle
•  デフォルトのButtonのStyleを「MyButton」に設定
<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

Ⅶ - 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>

Ⅶ - 114
Themeの作成方法(実行結果)
! 実行結果

Ⅶ - 115
Themeを作成する(1)
! 実習2
! 前回作成したプロジェクトにThemeを追加する
※解答ドキュメントでは「MyThemeSample」で提供

Ⅶ - 116
! 手順
1.  リソースファイルの準備
2.  Themeリソースを作成する
3.  activity_main.xmlで設定したstyleプロパティを削除する
4.  ActivityにThemeを設定する

Ⅶ - 117
1.  リソースファイルの準備
! 新規に使用するリソースファイルを追加する
•  activity_background.png

Ⅶ - 118
2.  Themeリソースを作成する
! /res/values以下に「themes.xml」ファイルを作成する
! themes.xmlに以下の設定をする
•  Theme名：CustomTheme
•  親Theme：AppTheme
•  item
–  android:windowBackground：@drawable/activity_background
–  android:buttonStyle：@style/MyButton
<resources>

<style name="CustomTheme" parent="AppTheme">
<item name="android:windowBackground">@drawable/activity_background</item>
</style>

</resources>

Ⅶ - 119
3.  activity_main.xmlの修正
! 前回の実習で各Viewに設定したstyleプロパティを削除する
<Button
style="@style/MyButton" ※削除する
</Button>

<Button
style="@style/MyButton"　　　 ※削除する
...略...

Ⅶ - 120
4.  ActivityにThemeを設定する
! AndroidManifestファイルのactivityタグにthemeプロパティを追加し、作成した
「 CustomTheme 」を指定する
<activity android:name=".MainActivity" 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>

Ⅶ - 121
! 確認
! 実行結果が以下のようになっていることを確認する

Ⅶ - 123
ダイアログの使い方
! Dialogの使い方
! Androidでは標準で複数のDialogを用意しています
! Dialog
! AlartDialog
! ProgressDialog
! DatePickerDialog
! TimePickerDialog
ProgressDialog
TimePickerDialog
DatePickerDialog

Ⅶ - 124
Dialogのカスタマイズ
! Dialogのデザインをカスタマイズすることができる
1.  Dialogクラスのサブクラスを作成する
2.  Dialogのレイアウトを作成する
public class MyDialog extends Dialog {
public MyDialog(Context context) {
super(context);
　　　　　　　setContentView(R.layout.dialog);
}
}

Ⅶ - 125
Dialogのカスタマイズ(1)
! 実習 1
! カスタムダイアログの作成

Ⅶ - 126

! スケルトンプロジェクトのインポート

! CustomDialogSample_skeleton01をインポートする
項目
設定値
Project Name
CustomDialogSample
Build Target
Application name
CustomDialogSample
Package name
com.example.customdialogsample
Create Activity
MainActivity

Ⅶ - 127
! 手順
1.  Dialogクラスを継承したクラスを作成する＜実装済＞
2.  画面レイアウトの作成＜実装済＞
3.  Dialogレイアウトの作成
4.  Dialogクラスにレイアウトを設定する

Ⅶ - 128
1.  Dialogクラスを継承したクラスを作成する＜実装済＞
! 基底クラスとなるDialogクラスを継承したサブクラスを作成する
! 引数付のコンストラクタを作成する
! MyDialog.java
super(context);
}
}

Ⅶ - 129
2.  画面レイアウトの作成＜実装済＞
! ダイアログ呼び出しActivityのデザインを作成する
! activity_main.xmlの修正
項目
設定値
Button
android:onClick="onClickButton"
アウトライン

Ⅶ - 130
3.  Dialogレイアウトの作成
タイトル部
メッセージ部
ボタン部

Ⅶ - 131
3.  Dialogレイアウトの作成（続き）
! 設定情報（タイトル部）

<TextView
android:layout_marginRight="16dp"
android:drawableLeft="@drawable/ic_dialog"
android:drawablePadding="16dp"
android:ems="8"
android:text="Title"
android:textAppearance="?android:attr/textAppearanceLarge" >
</TextView>

<ImageView
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:background="@drawable/dialog_divider_background" />
タイトル部
メッセージ部
ボタン部

Ⅶ - 132
! 設定情報（メッセージ部）
<FrameLayout
android:layout_marginBottom="8dp" >

<ImageView
android:src="@drawable/dialog_clear_cat" />

<TextView
android:text="My Dialog!!!"
android:textAppearance="?android:attr/textAppearanceMedium" />
</FrameLayout>
メッセージ部
タイトル部
ボタン部

Ⅶ - 133
! 設定情報（ボタン部）
タイトル部
メッセージ部
ボタン部
<LinearLayout
android:layout_height="wrap_content" >

<Button
android:id="@+id/button_ok"
android:text="@android:string/ok" />

<Button
android:id="@+id/button_cancel"
android:layout_marginLeft="4dp"
android:text="@android:string/cancel" />
</LinearLayout>

Ⅶ - 134
4.  Dialogクラスにレイアウトを設定する
1.  タイトルを表示しない
2.  Dialogの画面レイアウトをdialog.xmlに設定する
MyDialog.java
super(context);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.dialog);
}
}
・・・①
・・・②

Ⅶ - 135
! 確認
! 以下のように表示されることを確認する

Ⅶ - 136
! 解答
! 解答ドキュメント参照

Ⅶ - 137
Dialogのテーマ設定
! Dialogのデザインを変更する
! DialogにもThemeを設定することができる
! Themeの設定はプログラムから行う
! コンストラクタの引数にリソースIDを指定する
super(context, R.style.MyDialogTheme);
}
}


Ⅶ - 138
Dialogのテーマ設定(1)
! 実習 2
! 前回の実習で作成したサンプルプログラムにStyle,Themeを設定する

Ⅶ - 139
! 手順
1.  Style, Themeの作成
2.  ActivityとDialogにテーマを設定する

Ⅶ - 140
1.  Style, Themeの作成
! Styleを変更する
! TextView用のStyleを作成
•  名前：MyText
! Themeを作成する
! Dialog用のThemeを作成する
<style name="MyText" parent="android:Widget.TextView">
</style>

styles.xml
<style name="MyDialogTheme" parent="android:Theme.Dialog">
<item name="android:windowBackground">
@drawable/icon_highlight_square</item>
<item name="android:textViewStyle">@style/MyText</item>
</style>
themes.xml

Ⅶ - 141
2.  ActivityとDialogにテーマを設定する
! ActivityにThemeを設定する
! DialogにThemeを設定する
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/CustomTheme" >
super(context, R.style.MyDialogTheme);
}

Ⅶ - 142
! 確認
! 以下のように表示されることを確認する

Ⅶ - 143
! 解答

Ⅶ - 145
概要
! アニメーションについて
! Tweenアニメーション
! Frameアニメーション

Ⅶ - 146
アニメーション
! アニメーション
! AndroidにはUIにアニメーション効果を実現するための機能が提供されている
! アニメーション用に提供された、２つのアニメーションフレームワーク
! View Animation
! Property Animation（APILevel 11以降）
! ※本トレーニングではView Animationフレームワークを用いた実装について解説す
る
! アニメーションの種類
! 移動アニメーション
! 回転アニメーション
! アルファアニメーション（透明）
! スケールアニメーション（拡大、縮小）
! 上記を合成したアニメーション
! コマ送りのようなアニメーション

Ⅶ - 147
ViewAnimation
! View Animation
! 実装ステップが少ない
! リソースファイルでイメージの変化を定義し、
! 見た目上のアニメーションを実現するが、Viewオブジェクトそのものは変化し
ていない
! 例えばボタン移動のアニメーションの場合、ボタン自体は移動しないので、表示
位置が変わってもボタンをタッチできない
! セットアップにかかる時間は短く、書き込みを行うコードが少なくて済む
! 特定のプロパティのみをアニメーションすることはできない
Button
Button
Button
移動アニメーション
実体は元の位置
押せない
見かけ上のアニメーション
Button

Ⅶ - 148
PropertyAnimation
! Property Animation
! Android 3.0で導入された
! View Animationよりも柔軟性が高い
! 任意のオブジェクトの任意のプロパティを時間経過と共に変化させる
! 見かけ上のアニメーションだけでなく、オブジェクトそのものがアニメする
! View Animationよりもセットアップに時間がかかりコードが複雑になる
Button
Button
実体も移動する
押せる
オブジェクトレベルのアニメーション
Button

Ⅶ - 149
アニメーションリソース
! Androidが提供するアニメーションリソース
! Viewアニメーションには一つのイメージを変化させるタイプと、コマ送りのよう
に複数のイメージを連続して表示するタイプがあり、リソースファイルで使い
分ける
•  一つのイメージを連続的に変化させるタイプ
•  イメージ自体は変化せず形状が変化する
–  移動アニメーション
–  回転アニメーション
–  アルファアニメーション（透明）
–  スケールアニメーション（拡大、縮小）
•  コマ送りのように複数のイメージを連続して表示するタイプ
•  イメージそのものを入れ替えパラパラ漫画のように順番に表示する

Ⅶ - 150
アニメーションリソース
! Viewアニメーションリソース
! TweenアニメーションとFrameアニメーションはリソースファイルで使い分ける
複数のイメージを連続して表示

Ⅶ - 151
Viewアニメーションの作成方法
! Viewアニメーションの使い方
! 手順
! アニメーションリソースを作成する
! プログラムにアニメーション処理を実装する
•  ソースコードを修正しアニメーションに必要な処理を実装する
–  アニメーションリソースの取得
–  アニメーションリスナの設定
–  アニメーションの開始

Ⅶ - 152
アニメーションリソースの作
成（１）
! アニメーションリソースを作成する
! res/以下にanimディレクトリを作成する
! res/anim/以下にアニメーションリソースを定義したxmlファイルを作成する


Ⅶ - 153
アニメーションリソースの作
成（２）
! アニメーションリソースの書式
! ルート要素に<set>を指定する
! 子要素に必要なアニメーション定義タグを記述する
! アニメーションの種類や、アニメーションの一連の処理などをタグで指定し、具体
的なアニメーションの効果を属性で設定する
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<alpha
android:duration="3000"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
</set>
例）アルファアニメーション

Ⅶ - 154
アニメーションタグ
! アニメーションリソースで使用可能なタグ
タグ
アニメーションの種類
説明
<set>
アニメーションコンテナ
アニメーションの要素(<alpha>、<scale>、
<translate>、<rotate>)または他の<set>
の要素を保持するコンテナ
<alpha>
アルファアニメーション
フェードイン、フェードアウト
<scale>
スケールアニメーション
拡大、縮小
<translate>
垂直方向、平行方向に移動
<rotate>
回転アニメーション
x,y,z軸を指定して回転

Ⅶ - 155
アニメーションタグ
! アニメーションタグの共通属性
! アニメーションタグに属性を追加し、アニメーションの効果を設定する
! 属性にはアニメーション種類に応じた属性と共通属性がある
属性値
説明
duration
アニメーション時間をミリ秒で設定
startOffset
アニメーション開始時間をミリ秒で設定
fillBefore
アニメーション終了時に開始状態に戻す
fillAfter
アニメーション終了時の状態を保つ
fillEnabled
fillAfterを有効にする
repeatCount
繰り返し回数を設定
repeatMode
繰り返し時に逆動作するかどうか
zAdjustment
Z軸調節による重ね順
interpolator
※interpolatorについては後述
<共通属性>

Ⅶ - 156
! タグ：<translate>
! 属性
! 使用例
属性値
説明
fromXDelta
開始のXオフセット値（値またはパーセンテージの相対値で指定）
※パーセンテージ指定の単位： % or %p
•  %：Viewからみた相対位置
•  %p：親のViewからみた相対位置
toXDelta
終了のXオフセット値（値またはパーセンテージの相対値で指定）
fromYDelta
開始のYオフセット値（値またはパーセンテージの相対値で指定）
toYDelta
終了のYオフセット値（値またはパーセンテージの相対値で指定）
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="-150%"
android:fromYDelta="0%"
android:toXDelta="50%"
android:toYDelta="0%" />

Ⅶ - 157
! タグ：<rotate>
! 属性
! 使用例
属性値
説明
fromDegrees
開始角度を指定
toDegrees
終了角度を指定
pivotX
回転軸Xを指定
pivotY
回転軸Yを指定
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="360" />
※pivotX,Yを50%に指定すると中心を軸にして回転する

Ⅶ - 158
! アルファアニメーション
! タグ：<alpha>
! 属性

! 使用例
•  フェードアウトするアニメーション
属性値
説明
fromAlpha
開始時の透明度を指定 (範囲 0.0 - 1.0)
toAlpha
終了時の透明度を指定 (範囲 0.0 - 1.0)
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
android:fromAlpha="1.0"
android:toAlpha="0.0" />
※透明度 0.0で完全に見えなくなる

Ⅶ - 159
! スケールアニメーション
! タグ：<scale>
! 属性
! 使用例
属性値
説明
fromXScale
開始時にXサイズを指定
toXScale
終了時にXサイズを指定
fromYScale
開始時にYサイズを指定
toYScale
終了時にYサイズを指定
pivotX
原点Xを指定
pivotY
原点Yを指定
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXScale="1.0"
android:fromYScale="1.0"
android:pivotX="0"
android:pivotY="0"
android:toXScale="0.0"
android:toYScale="0.0" />

Ⅶ - 160
アニメーション補間(Interpolator)
! Interpolatorとは
! アニメーションの変化率を定義します。
! 各アニメーション効果（アルファ、スケール、回転、移動等）のプロパティとし
て設定することが出来る
! 設定方法
! android:interpolator属性にInterpolatorリソースを指定する
種類
リソース
説明
AccelerateInterpolator
@android:anim/
accelerate_interpolator
加速
AnticipateInterpolator
@android:anim/
anticipate_interpolator
開始時に逆方向に溜める
BounceInterpolator
@android:anim/bounce_interpolator
終了時にバウンドする
CycleInterpolator
@android:anim/cycle_interpolator
設定したアニメーションの負の方向
も使用しながら繰り返す
DecelerateInterpolator
@android:anim/
decelerate_interpolator
減速
OvershootInterpolator
@android:anim/
overshoot_interpolator
終了時にはみ出す
Androidで定義済のInterpolator（一部抜粋）

Ⅶ - 161
アニメーション補間(Interpolator)
! Interpolatorの使用例
! スケールアニメーションにOvershootInterpolatorを設定する
! スケールアニメーションにOvershootInterpolatorを設定すると、android:toXScale、
android:toYScaleで設定した値を超えてアニメーションを終了するため飛び出すよ
うなアニメーション効果を加えることができる
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/overshoot_interpolator"
android:toYScale="1.0" />
飛び出る

Ⅶ - 162
合成アニメーション
! 合成アニメーション
! タグ：<set>
! <set>タグを使って複数のアニメーションを同時実行したり、順番に実行する
ことができる
! <set>タグを入れ子にすることも可能
<set xmlns:android="http://schemas.android.com/apk/res/android" >


<translate
...
/>

<rotate
...
/>
/set>
使用例

Ⅶ - 163
合成アニメーション
! プログラムにアニメーション処理を実装する
! Animationオブジェクトを作成する
! AnimationUtils#loadAnimationメソッドを使用して取得する
! Animationを実行する
! View#startAnimationメソッドでアニメーションを開始する

! サンプル
メソッド
説明
loadAnimation (Context context, int id)
アニメーションリソースを読み込む
引数　 Content context：コンテキスト
　　　　 int id：リソースID
メソッド
説明
startAnimation(Animation animation)
アニメーションを開始する
引数　　Animation animation：アニメーションオブジェクト
Animation anime = AnimationUtils.loadAnimation(this, R.anim.alpha);
image.startAnimation(anime);

Ⅶ - 164
Viewアニメーションの作
成（１）
! 実習
! Viewアニメーションを使ったサンプルプログラムの作成
! 以下のアニメーション（サンプルで説明したものと同じ）を実装したプログラム
を作成する
! アルファアニメーション
! スケールアニメーション
! Interpolaterを使ったスケールアニメーション
! 上記全てを含めた合成アニメーション

Ⅶ - 165
成（２）
! スケルトンプロジェクトのインポート
項目
設定値
Project name
ViewAnimationSample
Build Target
Application name
ViewAnimationSample
Package name
com.example.viewanimationsample
Create Activity
MainActivity

Ⅶ - 166
成（３）
! 手順
! 画面デザインの作成（実装済）
! 文字列リソースの作成
! 各アニメーションボタンの追加
! アニメーションリソースの作成
! 各アニメーションリソースの作成
! Activityの修正
! ボタン押下時の処理を追加

Ⅶ - 167
成（４）
1.  画面デザインの作成（実装済）
! 文字列リソースの作成
•  各Buttonに表示するための文字列リソースを作成する
<resources>

<string name="app_name">ViewAnimationSample</string>
<string name="menu_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
<string name="all">all</string>
<string name="trance">trance</string>
<string name="rotate">rotate</string>
<string name="alpha">alpha</string>
<string name="scale">scale</string>
<string name="enter">enter</string>

</resources>
strings.xml

Ⅶ - 168
成（５）
! 各アニメーションボタンの追加
! 以下の画面構成を参考にしレイアウトを作成する
RelativeLayout
ImageView
Button
Button
Button
Button
Button
Button
LinearLayout
余白15dp

Ⅶ - 169
成（６）
! 各アニメーションボタンの追加（続き）
! 画面構成の注意点
•  ImageViewは画面枠に対して15dpの余白をもつ
•  ImageViewの画像は縦横比を維持してリサイズされて表示される
•  Allを除く各アニメーションボタンの幅は均等になっている
•  Allは画面いっぱいの幅を持っている
! idとonClickプロパティにメソッド名を指定する
•  設定値
項目
id
onClick
transボタン
button_trans
onTransButton
rotateボタン
button_rot
onRotateButton
alphaボタン
button_alpha
onAlphaButton
scaleボタン
button_scale
onScaleButton
enterボタン
button_enter
onEnterButton
allボタン
button_all
onAllButton

Ⅶ - 170
成（７）
2.  アニメーションリソースの作成
! 各アニメーションリソースを作成する
1.  移動アニメーション
2.  回転アニメーション
3.  アルファアニメーション
4.  スケールアニメーション
5.  Interpolaterを使ったスケールアニメーション
6.  上記全てを含めた合成アニメーション
ファイル名
trance.xml
rotate.xml
alpha.xml
scale.xml
enter.xml
Interpolaterを使ったスケールアニメーション
all.xml
上記全てを含めた合成アニメーション
ファイル名一覧

Ⅶ - 171
成（８）
! animディレクトリの作成
•  res/animディレクトリを作成する

Ⅶ - 172
成（９）
1.  移動アニメーション
•  ファイル名： trans.xml
•  設定値
<translate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromXDelta="-220"
android:fromYDelta="0"
android:toXDelta="100"
android:toYDelta="0" />
項目
設定値
アニメーション時間
1秒
開始座標(x, y)
-220, 0
終了座標(x, y)
100, 0

Ⅶ - 173
Viewアニメーションの作成
（10）
2.  回転アニメーション
•  ファイル名： rotate.xml
•  設定値
<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="0"
android:toDegrees="360" />
項目
値
400ミリ秒
回転軸（x,y)
中心
開始角度
0度
終了角度
360度

Ⅶ - 174
（11）
3.  アルファアニメーション
•  ファイル名： alpha.xml
•  設定値
<?xml
version="1.0"

<alpha


android:fromAlpha="1"

android:toAlpha="0"/>

項目
値
800ミリ秒
開始アルファ
1
終了アルファ
0

Ⅶ - 175
（12）
4.  スケールアニメーション
•  ファイル名： scale.xml
•  設定値
<?xml
version="1.0"

<scale


android:fromXScale="0"

android:fromYScale="0"



android:toXScale="1"

android:toYScale="1"
/>
項目
値
600ミリ秒
基点（x,y)
中心
開始スケールX,Y
0
終了スケールX,Y
1

Ⅶ - 176
（13）
5.  Interpolaterを使ったアニメーション
•  ファイル名： enter.xml
•  設定値
<?xml
version="1.0"

<scale


android:fromXScale="0"

android:fromYScale="1"



android:toXScale="1"

android:toYScale="1"

android:interpolator="@android:anim/overshoot_interpolator"
/>

項目
値
100ミリ秒
基点（x,y)
中心
開始スケールX,Y
0
終了スケールX,Y
1
Interpolater
overshoot_interpolator

Ⅶ - 177
（14）
6.  合成アニメーション
•  ファイル名： all.xml
•  設定値
–  trans.xml, rotate.xml, alpha.xml, scale.xmlの内容を全て合成する
<?xml
version="1.0"

<set
xmlns:android="http://schemas.android.com/apk/res/android">

<!-‐-‐
移動 -‐-‐>

<translate


android:fromXDelta="-‐220"

android:fromYDelta="0"

android:toXDelta="100"

android:toYDelta="0"
/>

<!-‐-‐
回転 -‐-‐>

...略...
</set>

Ⅶ - 178
（15）
3.  Activityの修正
! ボタン押下時の処理を追加
•  各ボタンのonClickプロパティに設定したメソッドを実装する

public
void
onTransButton(View
v){

//
TODO
transボタンが押されたときのアニメーション開始処理
}

public
void
onRotateButton(View
v){

//
TODO
rotateボタンが押されたときのアニメーション開始処理
}

public
void
onAlphaButton(View
v){

//
TODO
alphaボタンが押されたときのアニメーション開始処理
}

public
void
onScaleButton(View
v){

//
TODO
scaleボタンが押されたときのアニメーション開始処理
}

public
void
onEnterButton(View
v){

//
TODO
enterボタンが押されたときのアニメーション開始処理
}

public
void
onAllButton(View
v){

//
TODO
allボタンが押されたときのアニメーション開始処理
}

Ⅶ - 179
（16）
3.  Activityの修正
! ボタン押下時の処理を追加(続き)
•  アニメーションを適用するImageViewは、onCreateメソッド内でメンバーに保
持しておく

ImageView
imageView
=
null;

@Override

public
void
onCreate(Bundle
savedInstanceState)
{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

imageView
=
(ImageView)findViewById(R.id.imageView);

}

Ⅶ - 180
（17）
! 確認
! クリックしたボタンに応じてアニメーションが再生されること
! リソースファイル内のパラメータをいろいろ変えてみましょう

Ⅶ - 181
Viewアニメーションの作成（
解答）
! 解答

Ⅶ - 183
概要
! UIDesigneMiniGameの作成
! 簡単なゲームにリッチなUIを実装させます
! 初期状態ではAndroid標準のUIを使用しており、前章までで習得した技術を使っ
てアプリケーションを完成させます
! アプリケーションに必要なロジックはすべて完成されており、UIの変更といくつかの
Animation設定でリッチなUIを実現させる
※まとめ実習ではデザイン手法を主眼にしたトレーニングのため、
ソースコードの解説は省略します

Ⅶ - 184
完成図
! 初期状態 → 完成

Ⅶ - 185
実習の進め方
! ３つのStepで使ってアプリケーションを完成させます
! Step 1 Title画面の修正
! ボタンデザインの作成
! 各UIのアニメーション対応
! ActivityのTheme対応
! Step 2 Game画面の修正
! Viewプロパティを駆使してデザインを整える
! Step 3 Dialogの設定
! Style, Theme対応
! 表示アニメーション
※実習では各Stepに合わせたスケルトンプロジェクトを提供しています

Ⅶ - 186
アプリケーションの説明
! UIDesignMiniGameの遊び方
! 画面上に表示されたイメージボタンを正しい順序で消していきます
! 全て消すと隠れていた画像が表示され、壁紙に設定することができます

イメージをクリック！
正しいイメージをクリックすると
消えます
イメージを全部消すとクリア！

Ⅶ - 187
ゲームの進め方（１）
! ゲームの進め方
! タイトル画面でレベル（初級〜上級）を選択する
! ゲーム画面で[Start]ボタンを押下しゲーム開始
! 画面上部のオーダービューの順番通りに画面中央の９つのイメージを押下す
る
! 正しいイメージを選択するとイメージが消える
! ゲームクリア条件
! 時間内にすべてのイメージを消す
! ゲームオーバー条件
! 時間内にすべてのボイメージを消せなかった
! LIFEが0の状態で間違えた


Ⅶ - 188
ゲームの進め方（２）
◆レベルボタン（初級〜上級）
ゲームの難易度を選択する
（※難易度については後述）
タイトル画面
ゲーム画面

Ⅶ - 189
ゲームの進め方（３）
! 開始ボタンを押すと画面中央にボタンが９つ表示される
ゲーム画面(開始)
◆オーダビュー
ボタンを押す順番を表示
スタートボタン
ゲームを開始する
ゲーム画面(実行中)
◆ボタン
オーダビューの順番に押す

Ⅶ - 190
ゲームの進め方（４）
! 画面上部のオーダービューの順番通りに制限時間内に９つのイメージを押
下する
! 間違ったイメージを選択するとライフが減る
! ゲーム中はタイムゲージが増加する
•  ゲージがMaxに達するとゲームオーバー
◆タイムゲージ
レベルに合わせた制限時
間が設定されている。
経過時間ごとにゲージが
増えていく
※上級ではさらに５秒後に
オーダービューが見えなく
なる

◆制限時間
•  初級：30秒
•  中級：20秒
•  上級：10秒

◆ライフ
残機を表示（3回まで失敗
できる）

Ⅶ - 191
ゲームの進め方（５）
! 時間内にすべてのボタンを押下する
! クリアするとクリア画面に遷移する
! タイムゲージがMaｘに達した
! ライフが0の状態で間違えた

ゲームオーバー
ゲームクリア

Ⅶ - 192
ゲームの進め方（６）
! ゲームをクリアするとクリア画面に遷移する
! クリア画面では難易度に合わせたイメージが用意されており、壁紙に設定す
ることができる
ホーム画面
壁紙に設定されている
クリア画面（壁紙設定確認ダイアログ）
OKを押すと壁紙に設定される
クリア画面
ダイアログが消えた状態
ホーム画面を起動する

Ⅶ - 193
アプリケーション概要
! アプリケーション概要
! 画面構成
! 実習で作成する「UIDesigneMiniGame」は３画面で構成されている
タイトル画面
ゲーム画面
クリアー画面

Ⅶ - 194
画面遷移パターン
! クリアケース
! ゲームオーバーケース

Ⅶ - 195
アプリケーションの構成
! 構成情報
! アプリケーションは以下のクラスで構成されている
クラス
概要
MainActivity
タイトル画面
ゲームの難易度を選択してゲーム画面に遷移する
GameActivity
ゲーム画面
難易度に合わせてゲームを実行する。ゲームオーバーならタイトル
画面に戻り、クリアした場合はクリア画面に遷移
ImageActivity
クリア画面
クリア画像を表示し壁紙に設定することも可
Constants
定数クラス
GameoverDialog
ゲームオーバー時に表示するDialog
ClearDialog
壁紙設定ダイアログ
OrderView
ゲーム画面上部のボタン順序を表示するためのView

Ⅶ - 196
MainActivity
! MainActivity
! ゲームタイトル画面
! レベルボタンをクリックしゲーム画面に遷移する
! レイアウトリソース
! activity_main.xml
レベルボタン
•  画面右側からスライド
しながら表示される
ゲームタイトル
•  画面右側からスライドし
ながら表示される
メイン画像
•  飛び出すようなアニメー
ション効果による表示

Ⅶ - 197
GameActivity（１）
! GameActivity
! ゲーム画面
! Startボタンをクリックしてゲームを開始する
! ゲーム開始前と開始後で表示内容が変わる


Ⅶ - 198
GameActivity（２）
! GameActivity
! activity_game.xml + include layout
activity_game.xmlは以下の3つのレイアウトリソースを組み合わせて構成
・ order.xml
・ buttons.xml　
・ life.xml

OrderView(order.xml)
ボタンを押す順序
buttons.xml
各ボタンはクリックのタイ
ミングでアニメーションを
実行する
・正解アニメーション
・不正解アニメーション
life.xml

Ⅶ - 199
ImageActivity
! ImageActivity
! クリア画面
! ゲームクリア後に起動する
! イメージを表示し、壁紙に設定可
! activity_image.xml

Ⅶ - 200
GameoverDialog
! GameoverDialog
! ゲームオーバーの時に表示
! 表示、非表示のタイミングでアニメーション効果

Ⅶ - 201
ClearDialog
! ClearDialog
! ゲームクリアの時に表示

Ⅶ - 202
OrderView
! OrderView
! ゲーム画面上部のクリック順序を表示
! ゲーム実行中は現在クリックするイメージを強調表示する
! レイアウト
! order.xml
! ゲーム開始前
! ゲーム実行中

Ⅶ - 203
ゲーム初期状態
! スケルトプロジェクトのインポート
! UIDesigneMiniGame_skeleton01
項目
設定値
Project name
UIDesigneMiniGame
Build Target
Application name
UIDesigneMiniGame
Package name
com.example.uidesigneminigame
Create Activity
MainActivity

Ⅶ - 204
ゲーム初期状態：実行
! スケルトンプロジェクトの実行
! UIDesigneMiniGame_skeleton01を実行すると以下のように表示される

Ⅶ - 205
スケルトプロジェクト詳細
! 各スケルトプロジェクト実装内容
プロジェクト名
実装内容
UIDesigneMiniGame_skeleton01_1
初期状態
Step 1-1 Selector対応
Step 1-2 Animation対応
Step 1-3 Style対応
Step 1-4 Theme対応
UIDesigneMiniGame_skeleton03-1
Step 2-2 Viewプロパティ対応
UIDesigneMiniGame_skeleton_complete
【完成】Step 3-2 Theme対応

Step 1
タイトル画面のカスタマイズ

Ⅶ - 207
Step 1 カスタマイズ概要
! タイトル画面のカスタマイズ概要
Step 1ではさらに4つのStepからなる

! Step 1-1
! Selector対応
•  LevelButtonに使用するselectorを作成する
! Step 1-2
! Animation対応
•  LevelButton、タイトル、BackgrountImageにアニメーション効果を追加する
! Step 1-3
! Style対応
•  LevelButton用のStyleを作成する
! Step 1-4
! Theme対応
•  Step 1-1 〜 Step 1-3を一つのThemeにする

Ⅶ - 208
Step 1 タイトル画面のカスタ
マイズ
! タイトル画面のカスタマイズ

修正前
修正後

Ⅶ - 209
Step 1-1 Selector対応（１）
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 210
Step 1-1 Selector対応（２）
! Step 1-1 実習
! LevelButton用のselectorを作成する

修正前
修正後

Ⅶ - 211
Step 1-1 Selector対応（３）
! 手順
! selectorリソースの作成
! 標準時、クリック時の状態を持つselectorリソースを作成する
! 「初級」ボタンにselectorを適用する

Ⅶ - 212
Step 1-1 Selector対応（４）
! ファイル名：btn_level_background.xml
! 背景に指定する画像
btn_level_normal.png（標準時）
btn_level_plessed.png（クリック時）
<selector xmlns:android="http://schemas.android.com/apk/res/android">


<item android:drawable="@drawable/btn_level_plessed"
android:state_pressed="true"/>


<item android:drawable="@drawable/btn_level_normal"/>

</selector>

Ⅶ - 213
Step 1-1 Selector対応（５）
<Button
android:id="@+id/button_level1"
android:background="@drawable/btn_level_background"
android:onClick="startGameLevel1"
android:text="@string/level_1" />

Ⅶ - 214
Step 1-1 Selector対応（確認）
! 確認
! LevelButton「初級」のデザインを確認する
! 標準時の背景が「btn_level_normal.png」になっている
! クリック時に背景が「btn_level_plessed.png」になっている

クリック！
色が変わる

Ⅶ - 215
Step 1-2 Animation対応（１）
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 216
Step 1-2 Animation対応（２）
! Step 1-2 実習
! LevelButton、タイトル、BackgrountImageにアニメーション効果を追加する

完成図
LevelButton、Title
画面右から移動アニ
メーション効果による表
示
BackgroundImage
飛び出すようなアニメー

Ⅶ - 217
Step 1-2 Animation対応（３）
! 手順
! animationリソースの修正
! LevelButton、タイトル用アニメーション
! BackgraundImage用アニメーション

Ⅶ - 218
Step 1-2 Animation対応（４）
! animationリソースの作成
•  slide_in_right.xmlに画面右からスライドインするアニメーション効果を作成する
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator" >

<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="100%p"
android:toXDelta="0" />

</set>

Ⅶ - 219
Step 1-2 Animation対応（５）
•  enter.xmlに飛び出すようなアニメーション効果を作成する
<set
android:interpolator="@anim/overshoot">
<scale
android:toYScale="1.0"
android:duration="350" />
</set>

Ⅶ - 220
Step 1-2 Animation対応（確認）
! 確認
! LevelButton、タイトル、BackgrountImageのアニメーション効果の確認

LevelButton、Title
示
BackgroundImage

Ⅶ - 221
Step 1-3 Style対応（１）
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 222
Step 1-3 Style対応（２）
! Step 1-3 実習
! LevelButton用のStyleを作成する

完成図

Ⅶ - 223
Step 1-3 Style対応（３）
! 手順
! LevelButton用のスタイルの作成
! styles.xmlの修正
! LevelButtonにstyleの適用

Ⅶ - 224
Step 1-3 Style対応（４）
! LevelButton用のスタイルの作成
! スタイル名：LevelButton
<style name="LevelButton" parent="android:Widget.Button">
<item name="android:textAppearance">
?android:attr/textAppearanceMedium</item>
<item name="android:textColor">@drawable/btn_level_text_color</item>
<item name="android:background">@drawable/btn_level_background</item>
<item name="android:visibility">invisible</item>
</style>
スタイル名
LevelButton
親
android:Widget.Button
テキストの色
@drawable/btn_level_text_color
背景
@drawable/btn_level_background
表示設定
invisible

Ⅶ - 225
Step 1-3 Style対応（５）
2.  LevelButtonにstyleの適用
•  button_level1のstyleを変更する
–  styleの設定
–  android:backgroundの削除
<Button
android:background="@drawable/btn_level_background" ※削除する
style="@style/LevelButton"
activity_main.xml

Ⅶ - 226
Step 1-3 Style対応（確認）
! 確認
! LevelButton「初級」のスタイルが変更されていることを確認
! クリック状態に合わせて背景が変更される
! クリック状態に合わせてテキストカラーが変更される
! 起動時は非表示
完成図

Ⅶ - 227
selector Tips
v  Tips ： android:textColorのselector対応
! textColorにもselectorを設定することで、ボタンの状態に合わせて文字の表
示色を変更することができる
! 手順
•  selectorの作成
•  selectorをViewのandroid:textColorプロパティに設定する


<item android:state_pressed="true" android:color="#ffaa00"/>
<item android:color="#ffffff"/>

</selector>
btn_level_text_color.xml
<Button
android:textColor="@drawable/btn_level_text_color"
※設定例

Ⅶ - 228
Step 1-4 Theme対応（１）
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 229
Step 1-4 Theme対応（２）
! Step 1-4 実習
! ActivityのThemeを作成する
完成図

Ⅶ - 230
Step 1-4 Theme対応（３）
! 手順
! TitleThemeの作成
! themes.xmlの修正
! MainActivityにthemeの適用
! AndroidManifest.xmlの修正

Ⅶ - 231
Step 1-4 Theme対応（４）
! TitleThemeの作成
! ファイル名：themes.xmlの修正
•  TitleThemeの作成
•  デフォルトのButtonスタイルをLevelButtonに設定する
<resources>

<style name="TitleTheme" parent="AppTheme">
<item name="android:buttonStyle">@style/LevelButton</item>
</style>

themes.xml

Ⅶ - 232
Step 1-4 Theme対応（５）
2.  MainActivityにthemeの適用
•  styleの設定を削除する
<activity
android:theme="@style/TitleTheme"
android:clearTaskOnLaunch="true"
android:name="com.example.uidesignminigame.MainActivity"
android:configChanges="orientation|keyboardHidden"
android:screenOrientation="landscape" >
<Button
style="@style/LevelButton" ※削除する
AndroidManifest.xml
activity_main.xml

Ⅶ - 233
Step 1-4 Theme対応（６）
! 確認
! ActivityのThemeが適用されていることを確認
! すべてのレベルボタンにLevelButtonスタイルが適用されている
完成図

Step 2
ゲーム画面のカスタマイズ

Ⅶ - 235
! ゲーム画面のカスタマイズ概要
Step 2ではさらに2つのStepでタイトル画面を完成させる

! Step 2-1
! Theme対応
•  ゲームActivityにThemeを適用する
! Step 2-2
! Viewプロパティ対応
•  Viewプロパティを駆使してデザインを整える

Ⅶ - 236
Step 2 ゲーム画面のカスタマ
イズ
! ゲーム画面のカスタマイズ

修正前
修正後

Ⅶ - 237
! Step 2
! Step 2-1
! Theme対応
! Step 2-2

Ⅶ - 238
! Step 2-1 実習
! GameActivityのTheme対応
完成図

Ⅶ - 239
! 手順
! レイアウトリソースの修正
! activity_game.xml
! GameActivityにthemeの適用

Ⅶ - 240
! ファイル名：activity_game.xml
•  ProgressBarのstyleを削除する
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"　　　※削除する
android:id="@+id/progressBar1"
</ProgressBar>
activity_game.xml

Ⅶ - 241
•  themeに「GameTheme」を設定する
※GameThemeはスケルトンプロジェクトで提供済
<activity
android:theme="@style/GameTheme"
android:name="com.example.uidesignminigame.GameActivity"
android:noHistory="true"
</activity>
AndroidManifest.xml

Ⅶ - 242
Step 2-1 Theme対応（確認）
! 確認
! ImageButtonボタンにNumberButtonスタイルが適用されている
! ProgressBarにTimeProgressBarスタイルが適用されている
完成図

Ⅶ - 243
Step 2-2 Viewプロパティ対
応（１）
! Step 2
! Step 2-1
! Theme対応
! Step 2-2

Ⅶ - 244
応（２）
! Step 2-2 実習
完成図

Ⅶ - 245
応（３）
! 手順
! order.xml
! buttons.xmlの修正
! life.xmlの修正
! activity_gameの修正

Ⅶ - 246
応（確認）
! 確認
! 以下の様な画面になっていることを確認
完成図

Step 3
ダイアログのカスタマイズ

Ⅶ - 248
! ダイアログのカスタマイズ概要

! Step 3-1
! Style対応
•  Dialog用のボタンのスタイルを作成する
! Step 3-2
! Theme対応
•  Dialog用のアニメーションのスタイルを作成する
•  MiniGame用のDialogテーマを作成する

Ⅶ - 249
Ste 3 ダイアログのカスタマイズ
修正前
修正後

Ⅶ - 250
! Step 3
! Step 3-1
! Style対応
! Step 3-2
! Theme対応

Ⅶ - 251
! Step 3-1 実習
! Dialog用のボタン、アニメーションのStyleを作成する
完成図

Ⅶ - 252
! 手順
! Button用のStyleの作成
! ButtonにStyleを適用させる

Ⅶ - 253
! Button用のスタイルの作成
! スタイル名：DialogButton
<style name="DialogButton" parent="android:Widget.Button">
<item name="android:textColor">@android:color/white</item>
<item name="android:background">@drawable/dialog_button_selector</item>
</style>
項目
設定値
スタイル名
DialogButton
親
テキストの色
@android:color/white
背景
@drawable/dialog_button_selector

Ⅶ - 254
2.  dialog_gameover.xmlの修正
! 「OK」ボタンにstyleを適用する
<Button
style="@style/DialogButton"

Ⅶ - 255
! 確認
! 以下のように表示されるのを確認する
完成図

Ⅶ - 256
! Step 3
! Step 3-1
! Style対応
! Step 3-2
! Theme対応

Ⅶ - 257
! Step 3-2 実習
完成図

Ⅶ - 258
! 手順
! DialogのアニメーションのStyelの作成
! DialogのThemeを作成する
! DialogにThemeを適用させる

Ⅶ - 259
! スタイル名：Animation.MiniGameDialog
<style name="Animation.MiniGameDialog" parent="android:Animation.Dialog">
<item name="android:windowEnterAnimation">@anim/enter</item>
<item name="android:windowExitAnimation">@anim/exit</item>
</style>
項目
設定値
スタイル名
Animation.MiniGameDialog
親
android:Animation.Dialog
表示アニメーション
@anim/enter
終了アニメーション
@anim/exit

Ⅶ - 260
2.  DialogのThemeの作成
! スタイル名：Theme.MiniGameDialog
<style name="Theme.MiniGameDialog" parent="android:style/Theme.Dialog">
<item name="android:windowAnimationStyle">
@style/Animation.MiniGameDialog</item>
<item name="android:windowBackground">
@drawable/main_frame_base_green</item>
<item name="android:buttonStyle">@style/DialogButton</item>
</style>
項目
設定値
スタイル名
Theme.MiniGameDialog
親
android:style/Theme.Dialog
表示、終了のアニメーション効果
@style/Animation.MiniGameDialog
ボタンのスタイル
@style/DialogButton

Ⅶ - 261
3.  DialogにThemeを適用させる
! dialog_gameover.xmlの修正
•  Buttonのstyleの削除
<Button
style="@style/DialogButton"　　　※削除

Ⅶ - 262
Step 3-2 Theme対応（７）
3.  DialogにThemeを適用させる（続き）
•  GameoverDialog、ClearDialogのコンストラクタでThemeを指定する
public GameoverDialog(Context context, GameoverDialogListener listener) {
super(context, R.style.Theme_MiniGameDialog);
myDialogListener = listener;
setContentView(R.layout.dialog_gameover);

GameoverDialog.java
public ClearDialog(Context context, ClearDialogListener listener) {
super(context, R.style.Theme_MiniGameDialog);
myDialogListener = listener;
setContentView(R.layout.dialog_wallpaper);

ClearDialog.java

Ⅶ - 263
! 確認
! DialogにThemeが適用されているのを確認する
! デザインが以下のようになっている
! 表示、非表示のタイミングで設定したアニメーション効果が反映されている
完成図

Ⅶ - 265
概要
! UIDesigneMiniGameの作成
! 簡単なゲームにリッチなUIを実装させます
! 初期状態ではAndroid標準のUIを使用しており、前章までで習得した技術を使っ
てアプリケーションを完成させます
! アプリケーションに必要なロジックはすべて完成されており、UIの変更といくつかの
Animation設定でリッチなUIを実現させる
※まとめ実習ではデザイン手法を主眼にしたトレーニングのため、
ソースコードの解説は省略します

Ⅶ - 266
完成図
! 初期状態 → 完成

Ⅶ - 267
実習の進め方
! ３つのStepで使ってアプリケーションを完成させます
! Step 1 Title画面の修正
! ボタンデザインの作成
! 各UIのアニメーション対応
! Step 2 Game画面の修正
! Step 3 Dialogの設定
! Style, Theme対応
! 表示アニメーション
※実習では各Stepに合わせたスケルトンプロジェクトを提供しています

Ⅶ - 268
アプリケーションの説明
! UIDesignMiniGameの遊び方
! 画面上に表示されたイメージボタンを正しい順序で消していきます
! 全て消すと隠れていた画像が表示され、壁紙に設定することができます

イメージをクリック！
正しいイメージをクリックすると
消えます
イメージを全部消すとクリア！

Ⅶ - 269
ゲームの進め方（１）
! 画面上部のオーダービューの順番通りに画面中央の９つのイメージを押下す
る
! 時間内にすべてのイメージを消す
! 時間内にすべてのボイメージを消せなかった
! LIFEが0の状態で間違えた


Ⅶ - 270
ゲームの進め方（２）
◆レベルボタン（初級〜上級）
ゲームの難易度を選択する
（※難易度については後述）
タイトル画面
ゲーム画面

Ⅶ - 271
ゲームの進め方（３）
! 開始ボタンを押すと画面中央にボタンが９つ表示される
ゲーム画面(開始)
◆オーダビュー
ボタンを押す順番を表示
スタートボタン
ゲームを開始する
ゲーム画面(実行中)
◆ボタン
オーダビューの順番に押す

Ⅶ - 272
ゲームの進め方（４）
! 画面上部のオーダービューの順番通りに制限時間内に９つのイメージを押
下する
! 間違ったイメージを選択するとライフが減る
! ゲーム中はタイムゲージが増加する
•  ゲージがMaxに達するとゲームオーバー
◆タイムゲージ
レベルに合わせた制限時
間が設定されている。
経過時間ごとにゲージが
増えていく
※上級ではさらに５秒後に
オーダービューが見えなく
なる

◆制限時間
•  初級：30秒
•  中級：20秒
•  上級：10秒

◆ライフ
残機を表示（3回まで失敗
できる）

Ⅶ - 273
ゲームの進め方（５）
! 時間内にすべてのボタンを押下する
! クリアするとクリア画面に遷移する
! タイムゲージがMaｘに達した
! ライフが0の状態で間違えた

ゲームオーバー
ゲームクリア

Ⅶ - 274
ゲームの進め方（６）
! ゲームをクリアするとクリア画面に遷移する
! クリア画面では難易度に合わせたイメージが用意されており、壁紙に設定す
ることができる
ホーム画面
壁紙に設定されている
クリア画面（壁紙設定確認ダイアログ）
OKを押すと壁紙に設定される
クリア画面
ダイアログが消えた状態
ホーム画面を起動する

Ⅶ - 275
アプリケーション概要
! アプリケーション概要
! 画面構成
! 実習で作成する「UIDesigneMiniGame」は３画面で構成されている
タイトル画面
ゲーム画面
クリアー画面

Ⅶ - 276
画面遷移パターン
! クリアケース
! ゲームオーバーケース

Ⅶ - 277
アプリケーションの構成
! 構成情報
! アプリケーションは以下のクラスで構成されている
クラス
概要
MainActivity
タイトル画面
ゲームの難易度を選択してゲーム画面に遷移する
GameActivity
ゲーム画面
難易度に合わせてゲームを実行する。ゲームオーバーならタイトル
画面に戻り、クリアした場合はクリア画面に遷移
ImageActivity
クリア画面
クリア画像を表示し壁紙に設定することも可
Constants
定数クラス
GameoverDialog
ゲームオーバー時に表示するDialog
ClearDialog
壁紙設定ダイアログ
OrderView
ゲーム画面上部のボタン順序を表示するためのView

Ⅶ - 278
MainActivity
! MainActivity
! ゲームタイトル画面
! レベルボタンをクリックしゲーム画面に遷移する
! activity_main.xml
レベルボタン
•  画面右側からスライド
しながら表示される
ゲームタイトル
•  画面右側からスライドし
ながら表示される
メイン画像
•  飛び出すようなアニメー

Ⅶ - 279
GameActivity（１）
! GameActivity
! ゲーム画面
! Startボタンをクリックしてゲームを開始する
! ゲーム開始前と開始後で表示内容が変わる


Ⅶ - 280
GameActivity（２）
! GameActivity
! activity_game.xml + include layout
activity_game.xmlは以下の3つのレイアウトリソースを組み合わせて構成
・ order.xml
・ buttons.xml　
・ life.xml

OrderView(order.xml)
buttons.xml
各ボタンはクリックのタイ
ミングでアニメーションを
実行する
・正解アニメーション
・不正解アニメーション
life.xml

Ⅶ - 281
ImageActivity
! ImageActivity
! クリア画面
! ゲームクリア後に起動する
! イメージを表示し、壁紙に設定可
! activity_image.xml

Ⅶ - 282
GameoverDialog
! GameoverDialog
! ゲームオーバーの時に表示

Ⅶ - 283
ClearDialog
! ClearDialog
! ゲームクリアの時に表示

Ⅶ - 284
OrderView
! OrderView
! ゲーム画面上部のクリック順序を表示
! ゲーム実行中は現在クリックするイメージを強調表示する
! レイアウト
! order.xml
! ゲーム開始前
! ゲーム実行中

Ⅶ - 285
ゲーム初期状態
! スケルトプロジェクトのインポート
! UIDesigneMiniGame_skeleton01
項目
設定値
Project name
UIDesigneMiniGame
Build Target
Application name
UIDesigneMiniGame
Package name
com.example.uidesigneminigame
Create Activity
MainActivity

Ⅶ - 286
ゲーム初期状態：実行
! スケルトンプロジェクトの実行
! UIDesigneMiniGame_skeleton01を実行すると以下のように表示される

Ⅶ - 287
スケルトプロジェクト詳細
! 各スケルトプロジェクト実装内容
プロジェクト名
実装内容
初期状態
Step 1-1 Selector対応
Step 1-2 Animation対応
UIDesigneMiniGame_skeleton03-1
Step 2-2 Viewプロパティ対応
UIDesigneMiniGame_skeleton_complete
【完成】Step 3-2 Theme対応

Ⅶ - 289
! タイトル画面のカスタマイズ概要
Step 1ではさらに4つのStepからなる

! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 290
Step 1 タイトル画面のカスタ
マイズ
! タイトル画面のカスタマイズ

修正前
修正後

Ⅶ - 291
Step 1-1 Selector対応（１）
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 292
Step 1-1 Selector対応（２）
! Step 1-1 実習
! LevelButton用のselectorを作成する

修正前
修正後

Ⅶ - 293
Step 1-1 Selector対応（３）
! 手順

Ⅶ - 294
Step 1-1 Selector対応（４）
! ファイル名：btn_level_background.xml
! 背景に指定する画像
btn_level_normal.png（標準時）
btn_level_plessed.png（クリック時）


<item android:drawable="@drawable/btn_level_plessed"
android:state_pressed="true"/>


<item android:drawable="@drawable/btn_level_normal"/>

</selector>

Ⅶ - 295
Step 1-1 Selector対応（５）
<Button

Ⅶ - 296
Step 1-1 Selector対応（確認）
! 確認
! LevelButton「初級」のデザインを確認する
! 標準時の背景が「btn_level_normal.png」になっている
! クリック時に背景が「btn_level_plessed.png」になっている

クリック！
色が変わる

Ⅶ - 297
Step 1-2 Animation対応（１）
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 298
Step 1-2 Animation対応（２）
! Step 1-2 実習
! LevelButton、タイトル、BackgrountImageにアニメーション効果を追加する

完成図
LevelButton、Title
示
BackgroundImage

Ⅶ - 299
Step 1-2 Animation対応（３）
! 手順
! animationリソースの修正

Ⅶ - 300
Step 1-2 Animation対応（４）
•  slide_in_right.xmlに画面右からスライドインするアニメーション効果を作成する
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="@android:anim/accelerate_interpolator" >

<translate
android:duration="@android:integer/config_shortAnimTime"
android:fromXDelta="100%p"
android:toXDelta="0" />

</set>

Ⅶ - 301
Step 1-2 Animation対応（５）
•  enter.xmlに飛び出すようなアニメーション効果を作成する
<set
android:interpolator="@anim/overshoot">
<scale
android:toYScale="1.0"
android:duration="350" />
</set>

Ⅶ - 302
Step 1-2 Animation対応（確認）
! 確認
! LevelButton、タイトル、BackgrountImageのアニメーション効果の確認

LevelButton、Title
示
BackgroundImage

Ⅶ - 303
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 304
! Step 1-3 実習
! LevelButton用のStyleを作成する

完成図

Ⅶ - 305
! 手順
1.  LevelButtonのベーススタイルの作成
2.  LevelButton1 〜 LevelButton3のスタイルの作成

Ⅶ - 306
1.  LevelButtonのベーススタイルの作成
! スタイル名：LevelButton
<style name="LevelButton" parent="android:Widget.Button">
<item name="android:textAppearance">
?android:attr/textAppearanceMedium</item>
<item name="android:textColor">@drawable/btn_level_text_color</item>
<item name="android:background">@drawable/btn_level_background</item>
<item name="android:visibility">invisible</item>
</style>
スタイル名
LevelButton
親
テキストの色
@drawable/btn_level_text_color
背景
@drawable/btn_level_background
表示設定
invisible

Ⅶ - 307
2.  LevelButton1 〜 LevelButton3のスタイルの作成
<style name="LevelButton.Level1">
<item name="android:background">@drawable/btn_level1_background</item>
</style>

</style>

</style>

Ⅶ - 308
Step 1-3 Style対応（６）
•  button_level1 〜 button_level3のstyleを変更する
–  styleの設定
–  android:backgroundの削除(button_level1のみ）
activity_main.xml
<Button
android:background="@drawable/btn_level_background" ※削除する
style="@style/LevelButton.Level1"
... />

<Button
... />

<Button
... />

Ⅶ - 309
! 確認
! LevelButton「初級」のスタイルが変更されていることを確認
! クリック状態に合わせて背景が変更される
! クリック状態に合わせてテキストカラーが変更される
! 起動時は非表示
完成図

Ⅶ - 310
selector Tips
v  Tips ： android:textColorのselector対応
! textColorにもselectorを設定することで、ボタンの状態に合わせて文字の表
示色を変更することができる
! 手順
•  selectorの作成
•  selectorをViewのandroid:textColorプロパティに設定する


<item android:state_pressed="true" android:color="#ffaa00"/>
<item android:color="#ffffff"/>

</selector>
btn_level_text_color.xml
<Button
android:textColor="@drawable/btn_level_text_color"
※設定例

Ⅶ - 311
! Step 1
! Step 1-1
! Selector対応
! Step 1-2
! Animation対応
! Step 1-3
! Style対応
! Step 1-4
! Theme対応

Ⅶ - 312
! Step 1-4 実習
! ActivityのThemeを作成する
完成図

Ⅶ - 313
! 手順
1.  TitleThemeの作成

Ⅶ - 314
1.  TitleThemeの作成
•  デフォルトテーマ「AppTheme」の修正
•  画面の背景を「application_background.png」に設定する
<style name="AppTheme" parent="AppBaseTheme">
<item name="android:windowBackground">@drawable/application_background</item>
</style>
styles.xml

Ⅶ - 315
1.  TitleThemeの作成（続き）
•  TitleThemeの作成
•  デフォルトのButtonスタイルをLevelButtonに設定する
<resources>

<style name="TitleTheme" parent="AppTheme">
<item name="android:buttonStyle">@style/LevelButton</item>
</style>

themes.xml

Ⅶ - 316
<activity
android:theme="@style/TitleTheme"
android:clearTaskOnLaunch="true"
android:name="com.example.uidesignminigame.MainActivity"
AndroidManifest.xml

Ⅶ - 317
! 確認
! すべてのレベルボタンにLevelButtonスタイルが適用されている
完成図

Ⅶ - 319
! ゲーム画面のカスタマイズ概要

! Step 2-1
! Theme対応
! Step 2-2

Ⅶ - 320
Step 2 ゲーム画面のカスタマ
イズ
! ゲーム画面のカスタマイズ

修正前
修正後

Ⅶ - 321
! Step 2
! Step 2-1
! Theme対応
! Step 2-2

Ⅶ - 322
! Step 2-1 実習
! GameActivityのTheme対応
完成図

Ⅶ - 323
! 手順
! game_header.xml
! GameActivityにthemeの適用

Ⅶ - 324
! ファイル名：game_header.xml
•  ProgressBarのstyleを削除する
<ProgressBar
style="?android:attr/progressBarStyleHorizontal"　　　※削除する
android:id="@+id/progressBar1"
</ProgressBar>
game_header.xml

Ⅶ - 325
•  themeに「GameTheme」を設定する
※GameThemeはスケルトンプロジェクトで提供済
<activity
android:theme="@style/GameTheme"
android:name="com.example.uidesignminigame.GameActivity"
android:noHistory="true"
</activity>
AndroidManifest.xml

Ⅶ - 326
! 確認
! ImageButtonボタンにNumberButtonスタイルが適用されている
! ProgressBarにTimeProgressBarスタイルが適用されている
完成図

Ⅶ - 327
応（１）
! Step 2
! Step 2-1
! Theme対応
! Step 2-2

Ⅶ - 328
応（２）
! Step 2-2 実習
完成図

Ⅶ - 329
応（３）
! 手順
! レイアウトファイルの修正

Ⅶ - 330
応（３）
! レイアウトファイルの修正
! 修正対象のレイアウトファイルを探し出し、プロパティを変更する
xmlファイル
説明
activity_game
画面全体のレイアウト。game_header.xmlとgame_content.xml
をincludeしている
game_header
画面上部の順番とプログレスバーを含んだレイアウト
order
画面上部のクリックの順番を表示するレイアウト。OrderView
のレイアウトリソース
game_conten
ライフ、ボタン、スタートボタンを含んだレイアウト
lifes
ライフを表示するレイアウト
buttons
ボタンを表示するレイアウト
GameActivityで使用するレイアウトリソース一覧

Ⅶ - 331
応（確認）
! 確認
! 以下の様な画面になっていることを確認
完成図

Ⅶ - 333
! ダイアログのカスタマイズ概要

! Step 3-1
! Style対応
! Step 3-2
! Theme対応

Ⅶ - 334
Ste 3 ダイアログのカスタマイズ
修正前
修正後
※activity_main.xmlの「button_gameover」「button_clear」がデバッグ
用に用意されているのでvisibilityをvisibleにすると表示される

Ⅶ - 335
! Step 3
! Step 3-1
! Style対応
! Step 3-2
! Theme対応

Ⅶ - 336
! Step 3-1 実習
! Dialog用のボタン、アニメーションのStyleを作成する
完成図

Ⅶ - 337
! 手順
1.  Button用のスタイルの作成
2.  Buttonにスタイルを適用させる

Ⅶ - 338
1.  Button用のスタイルの作成
! スタイル名：DialogButton
<style name="DialogButton" parent="android:Widget.Button">
<item name="android:textColor">@android:color/white</item>
<item name="android:background">@drawable/dialog_button_selector</item>
</style>
項目
設定値
スタイル名
DialogButton
親
テキストの色
@android:color/white
背景
@drawable/dialog_button_selector

Ⅶ - 339
2.  Buttonにスタイルを適用させる
•  「OK」ボタンにstyleを適用する
<Button
style="@style/DialogButton.GameOver"
android:layout_marginRight="@dimen/dialog_button_margin"

Ⅶ - 340
! 確認
! 以下のように表示されるのを確認する
完成図

Ⅶ - 341
! Step 3
! Step 3-1
! Style対応
! Step 3-2
! Theme対応

Ⅶ - 342
! Step 3-2 実習
完成図

Ⅶ - 343
! 手順
! DialogのThemeを作成する

Ⅶ - 344
! スタイル名：Animation.MiniGameDialog
<style name="Animation.MiniGameDialog" parent="android:Animation.Dialog">
<item name="android:windowEnterAnimation">@anim/enter</item>
<item name="android:windowExitAnimation">@anim/exit</item>
</style>
項目
設定値
スタイル名
Animation.MiniGameDialog
親
android:Animation.Dialog
表示アニメーション
@anim/enter
終了アニメーション
@anim/exit

Ⅶ - 345
! 親Themeの設定情報
<style name="Theme.MiniGameDialog" parent="android:style/Theme.Dialog">
<item name="android:windowAnimationStyle">@style/Animation.MiniGameDialog</item>
<item name="android:buttonStyle">@style/DialogButton</item>
</style>
項目
設定値
スタイル名
Theme.MiniGameDialog.GameOver
親
android:style/Theme.Dialog
@style/DialogButton

Ⅶ - 346
! スタイル名：Theme.MiniGameDialog.GameOver
<style name="Theme.MiniGameDialog.GameOver">
<item name="android:buttonStyle">@style/DialogButton.GameOver</item>
<item name="android:windowBackground">@drawable/dialog_gameover_background</item>
</style>
項目
設定値
スタイル名
Theme.MiniGameDialog.GameOver
@style/DialogButton.GameOver

Ⅶ - 347
3.  DialogにThemeを適用させる
•  Buttonのstyleの削除
<Button
style="@style/DialogButton.GameOver" ※削除
android:layout_marginRight="@dimen/dialog_button_margin"

Ⅶ - 348
Step 3-2 Theme対応（７）
3.  DialogにThemeを適用させる（続き）
•  GameoverDialog、ClearDialogのコンストラクタでThemeを指定する
public class GameoverDialog extends GameDialog{

public GameoverDialog(Context context, DialogListener listener) {
super(context, listener, R.style.Theme_MiniGameDialog_GameOver);
}

GameoverDialog.java
public class ClearDialog extends GameDialog {

public ClearDialog(Context context, DialogListener listener) {
super(context, listener, R.style.Theme_MiniGameDialog_Clear);
}

ClearDialog.java

Ⅶ - 349
! 確認
! DialogにThemeが適用されているのを確認する
! デザインが以下のようになっている
! 表示、非表示のタイミングで設定したアニメーション効果が反映されている
完成図

Ⅶ - 351
トレーニングの振り返り
! 内容
章
内容
第1章 ViewProperties
Viewプロパティの紹介
ViewGroupの紹介と独自プロパティ
ImageViewの独自プロパティ
第2章カスタムUI
Buttonの仕組み
9pachとは
selectorとは
カスタムButton作成方法
第3章 StyelとTheme
Styleの作成方法
Themeの作成方法
第4章 Dialogのカスタマイズ
Dialogのレイアウトのカスタマイズ
Dialogのデザインのカスタマイズ
第5章 Animation
Animationの紹介と実装方法
第6章まとめ実習
第1章〜第5章の技術を組み合わせたアプ
リケーション作成

Ⅶ - 352
Androidに関する情報提供元
! 書籍
タイトル
著者
出版社
図解 Androidプラットフォーム開発入門
橋爪香織
小林明大 ...他
技術評論社
Android Hacks
株式会社ブリリアント
サービス

オライリー
Android UI Cookbook for 4.0 ICS
あんざいゆき
インプレスジャ
パン
入門 Android 2 プログラミング
Mark Murphy
翔泳社
Android Layout Cookbook
あんざいゆき
インプレスジャ
パン

Ⅶ - 353
Androidに関する情報提供元
! インターネット
! 技術資料・ツール・ソース
! Android
Developers
•  http://developer.android.com/index.html
! Open Handset Alliance
•  http://www.openhandsetalliance.com/
! コミュニティ
! Android‐SDK‐Japan
•  https://groups.google.com/group/android-sdk-japan
! Android Developers
•  http://groups.google.com/group/android-developers

Ⅶ - 354
OESF公認Androidトレーニング
! アプリケーション開発
! Anroidプログラミング入門（難易度：★☆☆☆☆）
! Anroidアプリケーション開発入門（★★☆☆☆）
! Anroidアプリケーション開発応用（★★★★☆）
! Android応用 WebAPI開発（★★★★★）
! Android応用タブレットアプリケーション開発入門（★★★★☆）
! AnroidUIデザイン入門（★☆☆☆☆）
! 品質向上！ Androidアプリケーションテスト（★★★☆☆）

! 組み込み
! Android組み込み開発基礎コース - Armadillo-440 編 –

Ⅶ - 355
Anroidプログラミング入門
! 基本的なアプリケーション開発に必要なプログラミング技術を習得する
! ユーザインタフェースの使い方や画面遷移の仕方
From

Result

Request

RequestCode:
123

RequestCode:456

ResultCode

RESULT_OK
or
RESULT_CANCEL

ダイアログ表示

RESULT_OK
or
RESULT_CANCEL

MainActivity
NextActivity
NextActivity2
ResultCode：RESULT_OK

Ⅶ - 356
Anroidアプリケーション開発入門
! Androidの基本的な知識から本格的なアプリケーション開発
インターネット
データベース
インターネットからRSS
フィードを取得する
データベースに 
RSSフィードを登録
データベースからRSS
フィードを検索
一覧画面
詳細画面
一覧表示ボタンをクリッ
クする
一覧データを 
選択する
メニュー
画面
データベースへ登録
が完了した後、ダイア
ログを表示する

Ⅶ - 357
Anroidアプリケーション開発応用
! 入門編で作成したアプリケーションに手を加え、より快適なものに仕上げる
! Activityのタスク管理やプロファイリングなど開発における高度なサイド技術
の習得

Ⅶ - 358
Android応用 WebAPI開発
! 非同期処理、プロセス間通信など開発において重要で難易度の高い技術
の習得
! GAEサーバを使用した動画ダウンロードアプリケーションの開発

Ⅶ - 359
Androidタブレット開発コース
! タブレット基本的な知識、新機能、開発手法のベストプラクティスの習得
! ActionBar、Fragmentなどを駆使して画像ビューアを作成する

Ⅶ - 360
AndroidUIデザイン入門
! Androidで独自UIを実現させるためのカスタマイズ手法を習得する
! UI単体のカスタマイズからアプリケーション全体で統一されたデザインの実現
! ソースコードの修正は殆ど無いため、デザイナも受講生対象
! 実習用アプリケーションをGooglePlayで配布中
統一されたアプリケーションデザイン
Buttonカスタマイズ&
Android標準UI
Dialogカスタマイズ

Ⅶ - 361
品質向上！ Androidアプリケーシ
ョンテスト
! Androidで動作するアプリケーション開発に必要なテスティング技法を習得する
! JUnitベースのテストや、Android特有のテスティングフレームワークAPIと、
各種テスト（ストレステスト、シナリオテスト、カバレッジテスト、など）の効率
的な使い方を習得する

Ⅶ - 362
Android組み込み開発基礎コース
- Armadillo-440 編 ‒
! Armdillo-440を使ったシリアルデバイスアプリケーション作成
メニューの写真に
グリッドマークを
埋め込んだメニュー
①メニューをタッチ!
Grid OnputⓇ
G2スキャナ
USB-RS232C
変換ケーブル
給電用USB
ＲＳ２３２Ｃ
USB
Armadillo-440
（ Android 2.2）
読み取ったコードは３番です
②Toast表示
③
LANケーブル
開発用PC
ACアダプタ
シリアル
クロスケーブル

本ドキュメントは株式会社リーディング・エッジ社が作成しています。 
http://www.leadinge.co.jp/
このドキュメントの内容の一部は、Google が作成、提供しているコンテンツをベースに変更したもので、クリエイティブ・コモンズの表示 3.0 ライセンスに記載の条件に従って使用しています。

Android UIデザイン入門

More Related Content

What's hot (20)

Viewers also liked (15)

Similar to Android UIデザイン入門 (20)

Android UIデザイン入門