42. Ⅶ - 42
GridLayout
! GridLayout(つづき 1)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="0"
android:background="#eee"
android:text="Item
3"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="0"
android:layout_row="1"
android:layout_rowSpan="2"
android:background="#ddd"
android:text="Item
4"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1“
android:layout_row="1“
android:layout_columnSpan="2“
43. Ⅶ - 43
GridLayout
! GridLayout(つづき 2)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
android:background="#eee"
android:text="Item
5"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1"
android:layout_row="2"
android:background="#ccc"
android:text="Item
6"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="2"
android:background="#ddd"
android:text="Item
7"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</GridLayout>
44. Ⅶ - 44
レイアウトの作成
! 実習 1
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
周囲の余白『10dp』
を設定
45. Ⅶ - 45
レイアウトの作成
! プロジェクト概要
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
項目
設定値
Project name
UISample
Build Target
※ トレーニングで指定したバージョン
Application name
UISample
Package name
jp.oesf.uisample
Create Activity
MainActivity
46. Ⅶ - 46
レイアウトの作成
! 手順
! res/drawble-hdpi/に「android.png」の画像を追加する
! 画像は解答ドキュメントより取得する
! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパティを設定し
レイアウトを完成させる
! 実習で使用するViewGroupとプロパティは各自で考えること
! 検索ボタンのリソースは、@android:drawable/ic_menu_searchを使用する。
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
View
EditText
ImageButton
ImageView
Button
Button
47. Ⅶ - 47
レイアウトの作成
! 確認
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
nexus one
nexus7
48. Ⅶ - 48
レイアウトの作成 -解答-
! 解答例
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<EditText
android:id="@+id/editText1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
</EditText>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_search" />
</LinearLayout>
49. Ⅶ - 49
レイアウトの作成 -解答-
! 解答例(続き)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@drawable/android" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
50. Ⅶ - 50
レイアウトの作成 [補足実習]
! 実習[補足]
! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する
! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存
在する。他にどんな実装方法があるかを考え組み立てる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
86. Ⅶ - 86
GridLayout
! GridLayout(つづき 1)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="0"
android:background="#eee"
android:text="Item
3"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="0"
android:layout_row="1"
android:layout_rowSpan="2"
android:background="#ddd"
android:text="Item
4"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1“
android:layout_row="1“
android:layout_columnSpan="2“
87. Ⅶ - 87
GridLayout
! GridLayout(つづき 2)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
android:background="#eee"
android:text="Item
5"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp"
android:layout_gravity="center“
android:layout_column="1"
android:layout_row="2"
android:background="#ccc"
android:text="Item
6"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
<TextView
android:layout_width="92dp"
android:layout_height="92dp“
android:layout_gravity="center"
android:layout_column="2"
android:layout_row="2"
android:background="#ddd"
android:text="Item
7"
android:textAppearance="?android:attr/textAppearanceLarge"
/>
</GridLayout>
88. Ⅶ - 88
レイアウトの作成
! 実習 1
! View、ViewGroup、ImageViewを組み合わせて以下のように表示されるレイ
アウトを作成する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
周囲の余白『10dp』
を設定
89. Ⅶ - 89
レイアウトの作成
! プロジェクト概要
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
項目
設定値
Project name
UISample
Build Target
※ トレーニングで指定したバージョン
Application name
UISample
Package name
jp.oesf.uisample
Create Activity
MainActivity
90. Ⅶ - 90
レイアウトの作成
! 手順
! res/drawble-hdpi/に「android.png」の画像を追加する
! 画像は解答ドキュメントより取得する
! 必要なViewGroupと以下のViewを配置しそれぞれ必要なプロパティを設定し
レイアウトを完成させる
! 実習で使用するViewGroupとプロパティは各自で考えること
! 検索ボタンのリソースは、@android:drawable/ic_menu_searchを使用する。
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
View
EditText
ImageButton
ImageView
Button
Button
91. Ⅶ - 91
レイアウトの作成
! 確認
! エミュレーターの解像度を変更し、レイアウトが崩れないことを確認する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
nexus one
nexus7
92. Ⅶ - 92
レイアウトの作成 -解答-
! 解答例
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="10dp" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<EditText
android:id="@+id/editText1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1" >
</EditText>
<ImageButton
android:id="@+id/imageButton1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@android:drawable/ic_menu_search" />
</LinearLayout>
93. Ⅶ - 93
レイアウトの作成 -解答-
! 解答例(続き)
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
<ImageView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:scaleType="fitCenter"
android:src="@drawable/android" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="bottom"
android:orientation="horizontal" >
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Button" />
</LinearLayout>
</LinearLayout>
94. Ⅶ - 94
レイアウトの作成 [補足実習]
! 実習[補足]
! 別のViewGroupやプロパティを組み合わせて外見が同じレイアウトを作成する
! レイアウトの作成パターンは1つではない、使い方によって複数の実装方法が存
在する。他にどんな実装方法があるかを考え組み立てる
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
100. Ⅶ - 100
Styleの作成 (適用)
! ViewにStyleを適用する
! 作成したStyleをViewのstyleプロパティに指定する
<Button
style="@style/MyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button01" >
</Button>
<Button
style="@style/MyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Button02" >
</Button>
<ToggleButton
style="@style/MyButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="ToggleButton" >
</ToggleButton>
<EditText
style="@style/MyButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="EditText" >
</EditText>
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
101. Ⅶ - 101
Styleの作成 (実行結果)
! 実行結果
! Viewの文字サイズが18spで統一
! Viewの文字カラーが#ddaa00で統一
! 背景画像がmy_selectorで統一
※Button以外のViewも同じデザインになっているため
それぞれのViewに特化したStyleを用意するのが一般的
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
102. Ⅶ - 102
Styleの作成(1)
! 実習1
! サンプルで解説したStyleを作成する
! 前回の実習で作成したselectorを使ってStyleを作成する
! 実行結果
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
103. Ⅶ - 103
Styleの作成(2)
! プロジェクト概要
項目
設定値
Project name
MyStyelSample
Build Target
※トレーニングで指定したバージョン
Application name
MyStyleSample
Package name
com.example.mystylesample
Create Activity
MainActivity
※前章で作成した「MySelectorSample」を修正して作業しても良い
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
104. Ⅶ - 104
Styleの作成(3)
! 手順
! リソースファイルの準備
! Styleリソースを作成する
! 画面デザインを変更しViewにStyleを設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
105. Ⅶ - 105
Styleの作成(4)
! リソースファイルの準備
! 前回作成したリソースファイルを追加する
3.2 実習 Themeを作成する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
106. Ⅶ - 106
Styleの作成(5)
! Styleリソースを作成する
! res/values以下のstyles.xmlファイルを修正する
! styles.xmlに以下の設定をする
! style名:MyButton
! parent:Widget.Button
! android:textSize:18sp
! android:textColor:#ddaa00
! android:background:@drawable/my_selector
<?xml version="1.0" encoding="utf-8"?>
<resources>
...略...
<style name="MyButton" parent="android:Widget.Button">
<item name="android:textSize">18sp</item>
<item name="android:textColor">#ddaa00</item>
<item name="android:background">@drawable/my_selector</item>
</style>
</resources>
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
107. Ⅶ - 107
Styleの作成(6)
! 画面デザインを変更する
! レイアウトリソースの内容を以下のように変更する
! 各ViewのstyleにMyButtonを指定する
View
Properties
Button
style="@style/MyButton"
android:text="Button01"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Button
style="@style/MyButton"
android:text="Button02"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
ToggleButton
style="@style/MyButton"
android:text="ToggleButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
EditText
style="@style/MyButton"
android:text="EditText"
android:layout_height="wrap_content"
android:layout_width="match_parent"
アウトライン
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
108. Ⅶ - 108
Styleの作成(7)
! 確認
! Viewの文字サイズが統一されていることを確認する
! Viewの文字カラーが統一されていることを確認する
! Viewの背景が統一されていることを確認する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
109. Ⅶ - 109
Theme
! Themeとは
! UIのプロパティを複数持ったリソース
! Styleは個々のビュー に設定するが、ThemeはActivityやDialogやアプリケー
ション全体に設定する
! リソースの書式はStyleと同じ
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
110. Ⅶ - 110
Themeの作成方法
! Themeの作成方法
! res/values以下にthemes.xmlを作成する(styles.xmlに追加しても良い)
! themes.xmlにUIのプロパティを定義する
! ActivityまたはApplicationのandroid:theme プロパティに作成したThemeを指定する
! 独自のThemeを最初から作成することはできるが、Androidはデフォルトで複数のThemeが用
意されているので、既存のThemeを継承して必要な部分のデザインを変更する
• ※最新のADTでは標準テーマを継承したAppThemeが定義されている
Theme.Light
Theme.Translucent
Theme.Black
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
111. Ⅶ - 111
Themeの作成方法(書式)
! Themeリソースの書式
! ルートノードに<resources>を指定する
! 子ノードに<style>を指定する
! styleのプロパティに、Style名、親Style名(Styleを継承する場合)を指定する
! <style>の子ノードに<item>を指定する
! itemのプロパティにViewで設定したいプロパティを設定する
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="android:Theme.Light">
<item name="android:windowBackground">@drawable/panel_picture_frame_bg_pressed_blue</item>
</style>
</resources>
themes.xml
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
112. Ⅶ - 112
Themeの作成方法(定義)
! Themeを使用したサンプル
! Android標準で用意されているTheme.Lightを継承した独自のCustomTheme
を定義
! android:windowBackground
• 背景画像を「activity_background.png」に設定
! android:buttonStyle
• デフォルトのButtonのStyleを「MyButton」に設定
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="CustomTheme" parent="AppTheme">
<item name="android:windowBackground">@drawable/activity_background</item>
<item name="android:buttonStyle">@style/MyButton</item>
</style>
</resources>
themes.xml
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
113. Ⅶ - 113
Themeの作成方法(適用)
! ActivityにThemeを設定する
! AndroidManifestファイルのactivityタグのthemeプロパティに適用させたい
Themeを指定する
<activity android:name=".MyStyleSample" android:theme="@style/CustomTheme"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
114. Ⅶ - 114
Themeの作成方法(実行結果)
! 実行結果
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
115. Ⅶ - 115
Themeを作成する(1)
! 実習2
! 前回作成したプロジェクトにThemeを追加する
※解答ドキュメントでは「MyThemeSample」で提供
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
116. Ⅶ - 116
Themeを作成する(2)
! 手順
1. リソースファイルの準備
2. Themeリソースを作成する
3. activity_main.xmlで設定したstyleプロパティを削除する
4. ActivityにThemeを設定する
This material is licensed under the Creative Commons License BY-NC-SA 4.0.
117. Ⅶ - 117
Themeを作成する(3)
1. リソースファイルの準備
! 新規に使用するリソースファイルを追加する
• activity_background.png
This material is licensed under the Creative Commons License BY-NC-SA 4.0.