UIデザイントレーニング
Ⅶ - 2
トレーニングの目的
! トレーニングの目的	
! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを
習得します	
! UI単体のカスタマイズ	
•  Viewのどんな要素を変更すればよいか	
•  Andr...
Ⅶ - 3
トレーニングの目的
! トレーニングの目的	
! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを
習得します	
! UI単体のカスタマイズ	
•  Button、ImageView、Dialogに独自の装...
Ⅶ - 4
トレーニングスケジュール
! 目次	
! Viewプロパティ	
! Buttonのカスタマイズ	
! Style, Theme	
! Dialogのカスタマイズ	
! Animation	
! 実習	
This material i...
Ⅶ - 5
開発環境
! 開発環境の説明	
! 本トレーニングでは下記の開発ツールを用いる	
! トレーニング用マシンは既に開発環境は構築済みです	
ソフトウェア	
 バージョン	
Eclipse	
 Eclipse IDE with buil...
Ⅶ - 6
開発環境
! 開発環境の説明	
! ディレクトリ構成	
! トレーニングに必要なファイルは全てandroid_traing_uiに用意してあります。	
! 以下はandroid_traing_uiのディレクトリ構成になります	
パス...
Viewプロパティ
Ⅶ - 8
概要
! アプリケーション開発手順	
! 画面デザインの作成	
! View	
! Viewプロパティについて	
! 代表的なプロパティ	
! ImageView	
! ImageViewのプロパティ	
! ViewGroup	
!...
Ⅶ - 9
アプリケーション開発の手順
! 開発手順	
! Eclipseでプロジェクト作成	
! 画面デザインの作成	
•  Button、CheckBoxなどのパーツの配置	
! ソースコードを書く	
•  例)ボタンクリック時の処理など	...
Ⅶ - 10
プロジェクト構成
! 画面デザインの作成	
! Androidはソースコードとリソースファイルを管理するディレクトリが別れており
、それぞれ独立して作業を行うことができる	
! 画面デザインの作成は専用のエディタを使いドラッグ&ド...
Ⅶ - 11
View
! Viewとは	
! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです	
! 複数のViewをまとめる機能を持つViewをViewGroupといいます	
This material is licens...
Ⅶ - 12
Viewの描画領域(1)
! Viewの描画領域	
! コンテンツエリア	
! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup
はそれらの領域をすべて含んだ領域を持っています	
! 一つの...
Ⅶ - 13
Viewの描画領域(2)
! Viewの描画領域	
! バックグラウンドエリア	
! 背景として利用する描画領域の設定をします。	
! 描画領域を利用するリソース(画像、XML等)を指定するか、色を指定します	
This mate...
Ⅶ - 14
Viewプロパティ
! Viewのプロパティ	
! Viewをどのように表示するかを決定する	
! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画
像や色、余白をどのくらい使うかなどの情報をプロパティと...
Ⅶ - 15
Viewプロパティ
! 代表的なビューのプロパティ	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
プロパティ	
 設定値...
Ⅶ - 16
layout_width、 layout_height
! layout_widthとlayout_height	
! Viewの幅、高さを設定する	
This material is licensed under the Cre...
Ⅶ - 17
gravity、 layout_gravity
! gravityとlayout_gravity	
! Viewの配置する方向を設定する	
This material is licensed under the Creative ...
Ⅶ - 18
layout_weight
! layout_weight	
! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合	
! 設定例(weightなし)	
This material is licensed under...
Ⅶ - 19
layout_weight
! layout_weight	
! 設定例(weightあり)	
This material is licensed under the Creative Commons License BY-NC-...
Ⅶ - 20
weightSum
! weightSum	
! 余白部分を含めたLayoutの合計値を指定する	
This material is licensed under the Creative Commons License BY-N...
Ⅶ - 21
layout_margin、 padding
! layout_marginとpadding	
! layout_magin:外側の余白の設定する
	
! padding : 内側の余白の設定する
	
This material ...
Ⅶ - 22
enabled
! enabled	
! ビューの有効、無効を設定する	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<...
Ⅶ - 23
visibility
! visibility	
! ビューの表示、非表示を設定する	
This material is licensed under the Creative Commons License BY-NC-SA 4...
Ⅶ - 24
ImageView
! ImageViewとは	
! 画像を表示する際に使用するViewクラス	
! 配置したImageViewにdrawableから画像を読み込んで表示を行う	
! srcプロパティで表示する画像を指定する	
T...
Ⅶ - 25
ImageViewプロパティ
! 代表的なImageViewプロパティ	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
プ...
Ⅶ - 26
minHeight、minWidth
! minHeightとminWidth	
! Viewの高さ、幅の最小値を指定	
This material is licensed under the Creative Commons L...
Ⅶ - 27
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"	
xmlns:tools="http://schemas.android.com/...
Ⅶ - 28
scaleType
! scaleType	
! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定	
This material is licensed under the Creative Commons...
Ⅶ - 29
scaleType
! scaleType	
! 設定例(adjustViewBounds=false)	
This material is licensed under the Creative Commons License ...
Ⅶ - 30
scaleType
! scaleType	
! 設定例(adjustViewBounds=true)	
This material is licensed under the Creative Commons License B...
Ⅶ - 31
ViewGroup
! ViewGroupとは	
! 複数のビューをまとめる機能を持つビューである	
! ビューグループを使用する事により、複雑なレイアウトを作成することが可
能になる	
! ViewGroupの例:LinearL...
Ⅶ - 32
ViewGroupの種類
! 代表的なビューグループ	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
名前	
 説明	
R...
Ⅶ - 33
RelativeLayout
! RelativeLayout	
! View(親)の位置を決め、その位置を元にView(子)の位置を相対的に指定
する構成	
This material is licensed under the...
Ⅶ - 34
RelativeLayout
! RelativeLayout	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<?xml...
Ⅶ - 35
RelativeLayout
! RelativeLayout	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
	
  	...
Ⅶ - 36
LinearLayout
! LinearLayout	
! Viewを垂直または水平に配置する	
This material is licensed under the Creative Commons License BY-N...
Ⅶ - 37
ViewGroupの種類
! 配置方向の設定	
! orientationでLinearLayoutの内部のViewを配置する方向を決定する	
! vertical:垂直方向に配置	
! horizontal:水平方向に配置	
T...
Ⅶ - 38
FrameLayout
! FrameLayout	
! FrameLayoutは一つのViewを配置することを目的としたViewGroup	
! 複数配置した場合は重って表示される	
This material is licen...
Ⅶ - 39
ListView
! ListView	
! 縦方向に行を並べたリストを表示する	
This material is licensed under the Creative Commons License BY-NC-SA 4.0...
Ⅶ - 40
ListView
! ListView	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<?xml	
  version=...
Ⅶ - 41
GridLayout
! GridLayout	
! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合
ができる	
This material is licensed under the Creative Co...
Ⅶ - 42
GridLayout
! GridLayout(つづき 1)	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
	
  	
...
Ⅶ - 43
GridLayout
! GridLayout(つづき 2)	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
	
  	
...
Ⅶ - 44
レイアウトの作成
! 実習 1	
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する	
This material is licensed under the Creat...
Ⅶ - 45
レイアウトの作成
! プロジェクト概要	
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
項目	
 設定値	
Project n...
Ⅶ - 46
レイアウトの作成
! 手順	
! res/drawble-hdpi/に「android.png」の画像を追加する	
! 画像は解答ドキュメントより取得する	
! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパ...
Ⅶ - 47
レイアウトの作成
! 確認	
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する	
This material is licensed under the Creative Commons License BY...
Ⅶ - 48
レイアウトの作成 -解答-
! 解答例	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<LinearLayout xml...
Ⅶ - 49
レイアウトの作成 -解答-
! 解答例(続き)	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<ImageView	
a...
Ⅶ - 50
レイアウトの作成 [補足実習]
! 実習[補足]	
! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する	
! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存
在する。他にど...
Viewプロパティ
Ⅶ - 52
概要
! アプリケーション開発手順	
! 画面デザインの作成	
! View	
! Viewプロパティについて	
! 代表的なプロパティ	
! ImageView	
! ImageViewのプロパティ	
! ViewGroup	
...
Ⅶ - 53
アプリケーション開発の手順
! 開発手順	
! Eclipseでプロジェクト作成	
! 画面デザインの作成	
•  Button、CheckBoxなどのパーツの配置	
! ソースコードを書く	
•  例)ボタンクリック時の処理など...
Ⅶ - 54
プロジェクト構成
! 画面デザインの作成	
! Androidはソースコードとリソースファイルを管理するディレクトリが別れており
、それぞれ独立して作業を行うことができる	
! 画面デザインの作成は専用のエディタを使いドラッグ&ド...
Ⅶ - 55
View
! Viewとは	
! ボタン、チェックボックス等などの画面を構成する部品の基底クラスです	
! 複数のViewをまとめる機能を持つViewをViewGroupといいます	
This material is licens...
Ⅶ - 56
Viewの描画領域(1)
! Viewの描画領域	
! コンテンツエリア	
! Viewは自分が画面上で占める領域を持っていて, 複数のViewを持つViewGroup
はそれらの領域をすべて含んだ領域を持っています	
! 一つの...
Ⅶ - 57
Viewの描画領域(2)
! Viewの描画領域	
! バックグラウンドエリア	
! 背景として利用する描画領域の設定をします。	
! 描画領域を利用するリソース(画像、XML等)を指定するか、色を指定します	
This mate...
Ⅶ - 58
Viewプロパティ
! Viewのプロパティ	
! Viewをどのように表示するかを決定する	
! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画
像や色、余白をどのくらい使うかなどの情報をプロパティと...
Ⅶ - 59
Viewプロパティ
! 代表的なビューのプロパティ	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
プロパティ	
 設定値...
Ⅶ - 60
layout_width、 layout_height
! layout_widthとlayout_height	
! Viewの幅、高さを設定する	
This material is licensed under the Cre...
Ⅶ - 61
gravity、 layout_gravity
! gravityとlayout_gravity	
! Viewの配置する方向を設定する	
This material is licensed under the Creative ...
Ⅶ - 62
layout_weight
! layout_weight	
! 余白を埋めるために、ウィジェットのサイズをそれぞれ引き延ばす割合	
! 設定例(weightなし)	
This material is licensed under...
Ⅶ - 63
layout_weight
! layout_weight	
! 設定例(weightあり)	
This material is licensed under the Creative Commons License BY-NC-...
Ⅶ - 64
weightSum
! weightSum	
! 余白部分を含めたLayoutの合計値を指定する	
This material is licensed under the Creative Commons License BY-N...
Ⅶ - 65
layout_margin、 padding
! layout_marginとpadding	
! layout_magin:外側の余白の設定する
	
! padding : 内側の余白の設定する
	
This material ...
Ⅶ - 66
enabled
! enabled	
! ビューの有効、無効を設定する	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<...
Ⅶ - 67
visibility
! visibility	
! ビューの表示、非表示を設定する	
This material is licensed under the Creative Commons License BY-NC-SA 4...
Ⅶ - 68
ImageView
! ImageViewとは	
! 画像を表示する際に使用するViewクラス	
! 配置したImageViewにdrawableから画像を読み込んで表示を行う	
! srcプロパティで表示する画像を指定する	
T...
Ⅶ - 69
ImageViewプロパティ
! 代表的なImageViewプロパティ	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
プ...
Ⅶ - 70
minHeight、minWidth
! minHeightとminWidth	
! Viewの高さ、幅の最小値を指定	
This material is licensed under the Creative Commons L...
Ⅶ - 71
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/
android"	
xmlns:tools="http://schemas.android.com/...
Ⅶ - 72
scaleType
! scaleType	
! 画像がImageViewのサイズに応じてどのようにリサイズされるかを指定	
This material is licensed under the Creative Commons...
Ⅶ - 73
scaleType
! scaleType	
! 設定例(adjustViewBounds=false)	
This material is licensed under the Creative Commons License ...
Ⅶ - 74
scaleType
! scaleType	
! 設定例(adjustViewBounds=true)	
This material is licensed under the Creative Commons License B...
Ⅶ - 75
ViewGroup
! ViewGroupとは	
! 複数のビューをまとめる機能を持つビューである	
! ビューグループを使用する事により、複雑なレイアウトを作成することが可
能になる	
! ViewGroupの例:LinearL...
Ⅶ - 76
ViewGroupの種類
! 代表的なビューグループ	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
名前	
 説明	
R...
Ⅶ - 77
RelativeLayout
! RelativeLayout	
! View(親)の位置を決め、その位置を元にView(子)の位置を相対的に指定
する構成	
This material is licensed under the...
Ⅶ - 78
RelativeLayout
! RelativeLayout	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<?xml...
Ⅶ - 79
RelativeLayout
! RelativeLayout	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
	
  	...
Ⅶ - 80
LinearLayout
! LinearLayout	
! Viewを垂直または水平に配置する	
This material is licensed under the Creative Commons License BY-N...
Ⅶ - 81
ViewGroupの種類
! 配置方向の設定	
! orientationでLinearLayoutの内部のViewを配置する方向を決定する	
! vertical:垂直方向に配置	
! horizontal:水平方向に配置	
T...
Ⅶ - 82
FrameLayout
! FrameLayout	
! FrameLayoutは一つのViewを配置することを目的としたViewGroup	
! 複数配置した場合は重って表示される	
This material is licen...
Ⅶ - 83
ListView
! ListView	
! 縦方向に行を並べたリストを表示する	
This material is licensed under the Creative Commons License BY-NC-SA 4.0...
Ⅶ - 84
ListView
! ListView	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<?xml	
  version=...
Ⅶ - 85
GridLayout
! GridLayout	
! グリッド表示に特化したレイアウト。セルの列方向、または行方向への結合
ができる	
This material is licensed under the Creative Co...
Ⅶ - 86
GridLayout
! GridLayout(つづき 1)	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
	
  	
...
Ⅶ - 87
GridLayout
! GridLayout(つづき 2)	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
	
  	
...
Ⅶ - 88
レイアウトの作成
! 実習 1	
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する	
This material is licensed under the Creat...
Ⅶ - 89
レイアウトの作成
! プロジェクト概要	
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
項目	
 設定値	
Project n...
Ⅶ - 90
レイアウトの作成
! 手順	
! res/drawble-hdpi/に「android.png」の画像を追加する	
! 画像は解答ドキュメントより取得する	
! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパ...
Ⅶ - 91
レイアウトの作成
! 確認	
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する	
This material is licensed under the Creative Commons License BY...
Ⅶ - 92
レイアウトの作成 -解答-
! 解答例	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<LinearLayout xml...
Ⅶ - 93
レイアウトの作成 -解答-
! 解答例(続き)	
This material is licensed under the Creative Commons License BY-NC-SA 4.0. 	
<ImageView	
a...
Ⅶ - 94
レイアウトの作成 [補足実習]
! 実習[補足]	
! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する	
! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存
在する。他にど...
StyleとTheme
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
Ⅶ - 96
StyleとTheme
! StyleとTheme	
! アプリケーションをデザインする場合に、 UIを統一感をもたせるときにstyleと
Themeを使用します	
! StyleとはUIのプロパティを複数持ったリソースです	
!...
Ⅶ - 97
Styleの作成
! Styleの作成方法	
! res/values以下にstyles.xmlを作成する	
! styles.xmlにUIのプロパティを定義する	
! プロパティはViewで定義されているプロパティが設定できる	...
Ⅶ - 98
Styleの作成 (書式)
! Styleリソースの書式	
! ルートノードに<resources>を指定する	
! 子ノードに<style>を指定する	
! styleのプロパティに、Style名、親Style名(Styleを継...
Ⅶ - 99
Styleの作成 (設定例)
! Styleを使用したサンプル	
! Styleに文字サイズと、文字カラーを設定し、背景以外も統一したボタンを作
成する	
! Sylteの名前を設定する	
•  styleタグのnameプロパティ...
Ⅶ - 100
Styleの作成 (適用)
! ViewにStyleを適用する	
! 作成したStyleをViewのstyleプロパティに指定する	
<Button	
style="@style/MyButton"	
android:layou...
Ⅶ - 101
Styleの作成 (実行結果)
! 実行結果	
! Viewの文字サイズが18spで統一	
! Viewの文字カラーが#ddaa00で統一	
! 背景画像がmy_selectorで統一	
	
※Button以外のViewも同じデ...
Ⅶ - 102
Styleの作成(1)
! 実習1	
! サンプルで解説したStyleを作成する	
! 前回の実習で作成したselectorを使ってStyleを作成する	
! 実行結果	
This material is licensed un...
Ⅶ - 103
Styleの作成(2)	
! プロジェクト概要	
	
項目	
 設定値	
Project name	
  MyStyelSample	
 
Build Target	
  ※トレーニングで指定したバージョン	
 
Applica...
Ⅶ - 104
Styleの作成(3)
! 手順	
! リソースファイルの準備	
! Styleリソースを作成する	
! 画面デザインを変更しViewにStyleを設定する	
This material is licensed under th...
Ⅶ - 105
Styleの作成(4)
! リソースファイルの準備	
! 前回作成したリソースファイルを追加する	
3.2 実習 Themeを作成する	
This material is licensed under the Creative ...
Ⅶ - 106
Styleの作成(5)
! Styleリソースを作成する	
! res/values以下のstyles.xmlファイルを修正する	
! styles.xmlに以下の設定をする	
! style名:MyButton	
! pare...
Ⅶ - 107
Styleの作成(6)
! 画面デザインを変更する	
! レイアウトリソースの内容を以下のように変更する	
! 各ViewのstyleにMyButtonを指定する	
View	
 Properties	
Button	
 sty...
Ⅶ - 108
Styleの作成(7)
! 確認	
! Viewの文字サイズが統一されていることを確認する	
! Viewの文字カラーが統一されていることを確認する	
! Viewの背景が統一されていることを確認する	
This materia...
Ⅶ - 109
Theme
! Themeとは	
! UIのプロパティを複数持ったリソース	
! Styleは個々のビュー に設定するが、ThemeはActivityやDialogやアプリケー
ション全体に設定する	
! リソースの書式はSty...
Ⅶ - 110
Themeの作成方法
! Themeの作成方法	
! res/values以下にthemes.xmlを作成する(styles.xmlに追加しても良い)	
! themes.xmlにUIのプロパティを定義する	
! Activit...
Ⅶ - 111
Themeの作成方法(書式)
! Themeリソースの書式	
! ルートノードに<resources>を指定する	
! 子ノードに<style>を指定する	
! styleのプロパティに、Style名、親Style名(Style...
Ⅶ - 112
Themeの作成方法(定義)
! Themeを使用したサンプル	
! Android標準で用意されているTheme.Lightを継承した独自のCustomTheme
を定義	
! android:windowBackground...
Ⅶ - 113
Themeの作成方法(適用)
! ActivityにThemeを設定する	
! AndroidManifestファイルのactivityタグのthemeプロパティに適用させたい
Themeを指定する	
<activity and...
Ⅶ - 114
Themeの作成方法(実行結果)
! 実行結果	
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
Ⅶ - 115
Themeを作成する(1)
! 実習2	
! 前回作成したプロジェクトにThemeを追加する	
※解答ドキュメントでは「MyThemeSample」で提供	
This material is licensed under the...
Ⅶ - 116
Themeを作成する(2)
! 手順	
1.  リソースファイルの準備	
2.  Themeリソースを作成する	
3.  activity_main.xmlで設定したstyleプロパティを削除する	
4.  ActivityにT...
Ⅶ - 117
Themeを作成する(3)
1.  リソースファイルの準備	
! 新規に使用するリソースファイルを追加する	
•  activity_background.png	
This material is licensed under...
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Android UIデザイン入門
Upcoming SlideShare
Loading in...5
×

Android UIデザイン入門

6,680

Published on

OESF公認
Android UIデザイン入門
公式トレーニングテキスト

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

Published in: Technology
0 Comments
30 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,680
On Slideshare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
0
Comments
0
Likes
30
Embeds 0
No embeds

No notes for slide

Android UIデザイン入門

  1. 1. UIデザイントレーニング
  2. 2. Ⅶ - 2 トレーニングの目的 ! トレーニングの目的 ! プログラマとデザイナが共有するべきAndroidのためのデザインノウハウを 習得します ! UI単体のカスタマイズ •  Viewのどんな要素を変更すればよいか •  Androidはどんな仕組みでリッチなUI実現させるのか、そのために必要な 技術、知識はなにか ! 統一されたデザインの作成方法 •  アプリケーションで扱うUIの一括管理 •  ボタンのデザイン、フォント、カラーの統一 ! デザイン手法、デザイン工学などのようなデザインガイダンスではありません This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  3. 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. Ⅶ - 4 トレーニングスケジュール ! 目次 ! Viewプロパティ ! Buttonのカスタマイズ ! Style, Theme ! Dialogのカスタマイズ ! Animation ! 実習 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  5. 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. Ⅶ - 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. 7. Viewプロパティ
  8. 8. Ⅶ - 8 概要 ! アプリケーション開発手順 ! 画面デザインの作成 ! View ! Viewプロパティについて ! 代表的なプロパティ ! ImageView ! ImageViewのプロパティ ! ViewGroup ! ViewGroupの代表的なプロパティ ! 実習 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  9. 9. Ⅶ - 9 アプリケーション開発の手順 ! 開発手順 ! Eclipseでプロジェクト作成 ! 画面デザインの作成 •  Button、CheckBoxなどのパーツの配置 ! ソースコードを書く •  例)ボタンクリック時の処理など ! ビルド ! Androidアプリが出来上がる(apk) ! エミュレータ、実機に転送 ! アプリケーションの起動 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  10. 10. Ⅶ - 10 プロジェクト構成 ! 画面デザインの作成 ! Androidはソースコードとリソースファイルを管理するディレクトリが別れており 、それぞれ独立して作業を行うことができる ! 画面デザインの作成は専用のエディタを使いドラッグ&ドロップなどで直感 的な画面作成ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. UIパーツ一覧 画面プレビュー
  11. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 14 Viewプロパティ ! Viewのプロパティ ! Viewをどのように表示するかを決定する ! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画 像や色、余白をどのくらい使うかなどの情報をプロパティとして設定する ! どんなプロパティが使えるかはViewによって様々だが、共通するプロパティも存 在する ! プロパティはレイアウトリソースのxmlの属性で指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  15. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 24 ImageView ! ImageViewとは ! 画像を表示する際に使用するViewクラス ! 配置したImageViewにdrawableから画像を読み込んで表示を行う ! srcプロパティで表示する画像を指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. ImageViewに画 像が設定される 読み込ませたい画 像を設定すると
  25. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 31 ViewGroup ! ViewGroupとは ! 複数のビューをまとめる機能を持つビューである ! ビューグループを使用する事により、複雑なレイアウトを作成することが可 能になる ! ViewGroupの例:LinearLayout ! Viewを縦方向または横方向に配置します This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  32. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 44 レイアウトの作成 ! 実習 1 ! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ アウトを作成する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 周囲の余白『10dp』 を設定
  45. 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. Ⅶ - 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. Ⅶ - 47 レイアウトの作成 ! 確認 ! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0. nexus one nexus7
  48. 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. Ⅶ - 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. Ⅶ - 50 レイアウトの作成 [補足実習] ! 実習[補足] ! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する ! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存 在する。他にどんな実装方法があるかを考え組み立てる This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  51. 51. Viewプロパティ
  52. 52. Ⅶ - 52 概要 ! アプリケーション開発手順 ! 画面デザインの作成 ! View ! Viewプロパティについて ! 代表的なプロパティ ! ImageView ! ImageViewのプロパティ ! ViewGroup ! ViewGroupの代表的なプロパティ ! 実習 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  53. 53. Ⅶ - 53 アプリケーション開発の手順 ! 開発手順 ! Eclipseでプロジェクト作成 ! 画面デザインの作成 •  Button、CheckBoxなどのパーツの配置 ! ソースコードを書く •  例)ボタンクリック時の処理など ! ビルド ! Androidアプリが出来上がる(apk) ! エミュレータ、実機に転送 ! アプリケーションの起動 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  54. 54. Ⅶ - 54 プロジェクト構成 ! 画面デザインの作成 ! Androidはソースコードとリソースファイルを管理するディレクトリが別れており 、それぞれ独立して作業を行うことができる ! 画面デザインの作成は専用のエディタを使いドラッグ&ドロップなどで直感 的な画面作成ができる This material is licensed under the Creative Commons License BY-NC-SA 4.0. UIパーツ一覧 画面プレビュー
  55. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 58 Viewプロパティ ! Viewのプロパティ ! Viewをどのように表示するかを決定する ! コンテンツエリア、バックグラウンドエリアに設定する領域のサイズ、表示する画 像や色、余白をどのくらい使うかなどの情報をプロパティとして設定する ! どんなプロパティが使えるかはViewによって様々だが、共通するプロパティも存 在する ! プロパティはレイアウトリソースのxmlの属性で指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  59. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 68 ImageView ! ImageViewとは ! 画像を表示する際に使用するViewクラス ! 配置したImageViewにdrawableから画像を読み込んで表示を行う ! srcプロパティで表示する画像を指定する This material is licensed under the Creative Commons License BY-NC-SA 4.0. ImageViewに画 像が設定される 読み込ませたい画 像を設定すると
  69. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 75 ViewGroup ! ViewGroupとは ! 複数のビューをまとめる機能を持つビューである ! ビューグループを使用する事により、複雑なレイアウトを作成することが可 能になる ! ViewGroupの例:LinearLayout ! Viewを縦方向または横方向に配置します This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  76. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 88 レイアウトの作成 ! 実習 1 ! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ アウトを作成する This material is licensed under the Creative Commons License BY-NC-SA 4.0. 周囲の余白『10dp』 を設定
  89. 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. Ⅶ - 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. Ⅶ - 91 レイアウトの作成 ! 確認 ! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0. nexus one nexus7
  92. 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. Ⅶ - 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. Ⅶ - 94 レイアウトの作成 [補足実習] ! 実習[補足] ! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する ! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存 在する。他にどんな実装方法があるかを考え組み立てる This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  95. 95. StyleとTheme This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  96. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 102 Styleの作成(1) ! 実習1 ! サンプルで解説したStyleを作成する ! 前回の実習で作成したselectorを使ってStyleを作成する ! 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  103. 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. Ⅶ - 104 Styleの作成(3) ! 手順 ! リソースファイルの準備 ! Styleリソースを作成する ! 画面デザインを変更しViewにStyleを設定する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  105. 105. Ⅶ - 105 Styleの作成(4) ! リソースファイルの準備 ! 前回作成したリソースファイルを追加する 3.2 実習 Themeを作成する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  106. 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. Ⅶ - 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. Ⅶ - 108 Styleの作成(7) ! 確認 ! Viewの文字サイズが統一されていることを確認する ! Viewの文字カラーが統一されていることを確認する ! Viewの背景が統一されていることを確認する This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  109. 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 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. Ⅶ - 114 Themeの作成方法(実行結果) ! 実行結果 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  115. 115. Ⅶ - 115 Themeを作成する(1) ! 実習2 ! 前回作成したプロジェクトにThemeを追加する ※解答ドキュメントでは「MyThemeSample」で提供 This material is licensed under the Creative Commons License BY-NC-SA 4.0.
  116. 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. Ⅶ - 117 Themeを作成する(3) 1.  リソースファイルの準備 ! 新規に使用するリソースファイルを追加する •  activity_background.png This material is licensed under the Creative Commons License BY-NC-SA 4.0.

×