Linux & Android Dialy

レイアウトの再利用

複数のレイアウトファイルで同じような配置がいくつもでてくる場合
その都度コードをコピペするとコード量が無駄に多くなる

この場合、共通する部分はレイアウトファイルを1つ作成して
includeで呼び出せば無駄が省ける

まずほ、再利用するレイアウトファイルを作成
ファイル名はinclude.xml

<LinearLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">

<TextView
android:layout_width="0dp"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_weight="1"
android:background="@color/FlatLightCyan"
android:gravity="center"
android:text="再利用テスト"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="0dp"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_weight="1"
android:background="@color/FlatLightYellow"
android:gravity="center"
android:text="再利用テストその2"
android:textColor="@color/white"/>

<TextView
android:layout_width="0dp"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_weight="1"
android:background="@color/FlatLightRed"
android:gravity="center"
android:text="再利用テストその3"
android:textColor="@android:color/white"/>

</LinearLayout>

これで、共通部分はできたので
次に個別のパーツ作成

このあたりはPHPとかでwordpressのテンプレートとかいじった経験あるとわかりやすい

これで、レイアウトファイルをincludeすると
再利用したいレイアウトファイルを任意の場所へ読み込める

<LinearLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="@dimen/padding_small"
android:layout_marginTop="@dimen/padding_xlarge"
android:text="もともとのレイアウトファイル">

<include
layout="@layout/include"/>

</LinearLayout>

これで、レイアウトファイルが組み込まれるようになる

AndroidのViewを均等に配置

Viewの均等な配置は
LinearLayoutの
android:layout_weight=””
を使うことでできるようになる

均等に配置したいのなら
android:layout_weight=”1″
にすればいい

ただし、計算される領域は
もともとの幅や高さを元にいったん領域を確保して
余った領域を均等に分割しているので
これだけだとうまく機能しない

このため
均等に余白設定するには
配置方向に応じて
対象のViewの幅や高さを
0dpに指定する

<LinearLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"/>

<TextView
android:layout_width="0dp"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_margin="@dimen/padding_small"
android:layout_weight="1"
android:background="@color/FlatLightGreen"
android:gravity="center"
android:text="view01"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="0dp"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_padding="@dimen/padding_small"
android:layout_weight="1"
android:gravity="center"
android:background="@color/FlatLightGreen"
android:text="view02"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="0dp"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_padding="@dimen/padding_small"
android:layout_weight="1"
android:background="@color/FlatLightGreen"
android:gravity="center"
android:text="view03"
android:textColor="@android:color/white"/>

</LinearLayout>

Androidは、デバイスごとに画面の大きさや解像度が違う

このため、
android:layout_weight=””
を使うことで
簡単に均等配置が実現できる

もし、普通にやるなら
プログラムでディスプレイ解像度を計算して
Viewの幅や高さを設定する必要がある

AndroidのViewへ余白設定

viewへ余白設定するには
android:layout_margin=””
もしくは
android:padding=””
を設定する

ちなみに、値の単位はdpになる

以下はメモ

android:layout_margin=”10dp”
Viewの外側全体に余白を設定

android:layout_margin_left=”10dp”
Viewの外側左部に余白を設定

android:layout_margin_right=”10dp”
Viewの外側右部に余白を設定

android:layout_margin_top=”10dp”
Viewの外側上部に余白を設定

android:layout_margin_bottom=”10dp”
Viewの外側下部に余白を設定

つまり、
android:layout_margin=””
なら外側へ余白設定する

逆に
android:padding=””
だと
Viewの内側に余白設定する

これだと、Viewがずれて表示されることはない

以下メモ

android:padding=”10dp”
Viewの内側全体に余白設定

android:padding_left=”10dp”
Viewの内側左部に余白設定

android:padding_right=”10dp”
Viewの内側右部に余白設定

android:padding_top=”10dp”
Viewの内側上部に余白設定

android:padding_bottom=”10dp”
Viewの内側下部に余白設定

android:padding=””
は、View Groupを使うことで
内包するView全体に余白設定したり
TextViewの内側へ余白設定することで
表示位置をずらすことができる

これにより、コンテンツの表示位置を調整することが可能

RelativeLayoutの属性メモ

android:layout_alignParentLeft=”true”
画面左端へ配置

android:layout_alignParentRight=”true”
画面右端に表示

android:layout_alignParentTop
画面最上部へ配置

android:layout_alignParentBottom=”true”
画面最下部へ配置

android:layout_centerInParent=”true”
画面中央へ配置

android:layout_centerInVertical=”true”
画面の垂直中央へ配置

android:layout_centerInHorizontal=”true”
画面の水平中央へ配置

android:layout_above=”@+id/xxx”
指定したViewの上部に
Viewの下部が重なるように配置

android:layout_below=”@+id/xxx”
指定したViewの下部に
Viewの上部が重なるように配置

android:layout_toRightOf=”@+id/xxx”
指定したViewの右側に
Viewの左部が重なるように配置

android:layout_toLeftOf=”@+id/xxx”
指定したViewの左側に
Viewの右側が重なるように配置

この2つは、反対側に重ねて表示になる

android:layout_alignLeft=”@+id/xxx”
指定したViewの左側に
Viewの左側が重なるように配置

android:layout_alignRight=”@+id/xxx”
指定したViewの右側に
Viewの右側が重なるように配置

android:layout_alignTop=”@+id/xxx”
指定したViewの上部に
Viewの上側が重なるように配置

android:layout_alignBottom=”@+id/xxx”
指定したviewの下部に
viewの下部が重なるように配置

この4つは、同じ方向へくっつけるのに使う
隣接して配置するのに使え不

android:layout_alignBaseline=”@+id/xxx”
指定したviewの水平位置と同じ高さに
viewを配置する

RelativeLayoutについて

RelativeLayoutは、Viewを相対的に配置するのに使う

サンプルアプリではよく使われる

レイアウトはXMLファイルで作成する

<RelativeLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="@dimen/layout_common_size_xlarge"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:background="@color/FlatLightCyan"
android:gravity="center"
android:text="view01"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="@dimen/layout_common_size_xlarge"
android:layout_height="@dimen/layout_common_size_xlarge"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:layout_gravity="center"
android:background="@color/FlatLightYellow"
android:gravity="center"
android:text="view02"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="@dimen/layout_common_size_xlarge"
android:layout_common_size_xlarge
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:background="@color/FlatLightRed"
android:gravity="center"
android:text="view03"
android:textColor="@android:color/white"/>

</RelativeLayout>

RelativeLayoutは、属性がたくさんあって覚えにくいけど
なれるとLinearLayoutなどの複雑構造を使わずに記述できるのがメリット

FrameLayoutの利用

FrameLayoutは、Viewを重ねて表示するのに使う　

使うには、レイアウトファイルで設定する

<FrameLayout
xmlns:android="http://scheams.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="left|center_vertical"
android:layout_margin="@dimen/padding_medium"
android:alpha="0.8"
android:background="@color/FlatLightCyan"
android:gravity="center"
android:padding="@dimen/layout_common_size_large"
android:text="View01"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_margin="@dimen/padding_medium"
android:alpha="0.8"
android:background="@color/FlatLightYellow"
android:gravity="center"
android:padding="@dimen/layout_common_size_large"
android:text="view02"
android:textColor="@android:color/white"/>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right|center_vertical"
android:layout_margin="@dimen/padding_medium"
android:alpha="0.8"
android:background="@color/FlatLightRed"
android:gravity="center"
android:padding="@dimen/layout_common_size_large"
android:text="view03"
android:textColor="@android:color/white"/>
[/FrameLayout]

ただし、FrameLayoutは、Viewは重ねられるけど
Viewそのものに対する配置指定だけで
関連する配置の指定ができない

このため、ほとんどの場合
RelativeLayoutを使うことで
Viewの配置指定や重なりの表現をすることになる

FrameLayoutの使い道としては
カメラアプリとか
ゲームのタイトル画面など
レイアウトがシンプルだけど
画像を重ねる必要がある場合とか
Fragmentの器にするなどの使い方をする

TableLayoutとGridLayoutの使い分け

TableLayoutとGridLayoutは似ているけど表現力が違う

GridLayoutは
Viewを格子状に配置したり
デザインとしてデータを整列させて表示するのに使う

これは、電卓アプリで数字ボタンを配置したり
画像のサムネイル一覧の表示などに使える

これに対してTableLayoutは
Viewを表状にして配置したり
見やすくデータを整列させて表示するのに使う
これは、テキストデータの表示
フォームの入力画面などに使われる

AndroidのLinearLayoutについて

LinearLayoutは、Viewを並べる方向を指定する

配置方向は
android:orientation=””
で指定する

縦に配置したいのなら
android:orientation=”vertical”

横へ配置したいのなら
android:orientation=”horizontal”
とする

LinearLayoutを使うときの注意点としては
LinearLayout内に配置するViewの幅に注意すること

android:layout_width=””
や
android:layout_height=””
で
match_parent
や
fill_parent
を選択すると
、すぐ隣に配置するViewの領域が確保できなくなってしまうため、画面に表示されなくなる

設定の変更の検出

基本的に設定を変えたらリアルタイムで処理するため
変更したら検出できるようにする必要がある

設定の変更を検出するには
変更を検出したいPreferenceへ
registerOnSharedPreferenceChangeListener
を設定すると変更を検出できる

registerOnSharedPreferenceChangeListener
を実装するには
まずクラスへ

extends PreferenceFragment implements OnSharedPreferenceChangeListener

を追記

そして、onCreate()の中で、設定画面のリソースファイルを読み込む

addPreferencesFromResource(R.xml.pref);

そして
onResume()
inPause()にもリスナーを追記する

@Override
public void onResume(){
super.onResume();
getPreferenceScreen().getSharedPreferences().registerOnSharedPreferenceChangeListener(this);
}

@Override
public void onPause(){
super.onPause();
getPreferenceScreen().getSharedPreferences().unregisterOnSharedPreferenceChangeListener(this);
}

さらに変更を検知したときの動作を実装

@Override
public void onSharedPreferenceChanged(SharedPreferences sharedPreferences, String key){

if(PREF_CUSTOMIZE_DIALOG.equals(key)){
String date = sharedPreferences.getString(key,null);

Toast.makeText(getActivity(), "選択した時間: "+date, Toast.LENGTH_SHORT).show();
}
}

今回はトーストで時間を表示している

設定画面の名称や説明を動的変更するには

Preferenceクラスの
setTitle()でタイトルの変更

setSummary()で説明の変更が可能

これは、レイアウトファイルではなくJavaで行う

まず、クラスへ必要なソースを追加する

extends PreferenceFragment implements OnSharedPreferenceChangeListener

を追加する

そして、onCreate()へ

addPreferenceFromResource(R.xml.pref);

でリソースファイルを読み込む

そして、PreferenceManagerクラスの
findPreference()
を使うことで
Preferenceインスタンスを取得

そして、取り出したインスタンスへ対して
setTitle()
setSummary()
を実行して書き換える

@Override
public void onActivityCreated(Bundle savedInstanceState){
super.onActivityCreated(savedInstanceState);

Preference preference = getPreferenceManager().findPreference(“setting_key”);

if(preference != null){
preference.setTitle(“タイトル変更: setTitle()で変更”);
preference.setSummary(“説明変更: setSummary()で変更”);
}
}
[/xml]

とりあえず、簡単な変更だけと
WiFiの有効化したらチェック項目の文字を変えるなど
用途はいろいろある