2014年7月 – ページ 2 – Linux & Android Dialy

AndroidでViewで使える数値の単位

dp
画面密度の基準単位

sp
OSのフォントサイズを基準にする単位

pt
1/72インチを1ptとする単位

px
画面のピクセルを基準にする

mm
ミリメートル単位

in
インチ単位

基本的には
Viewのサイズ設定にはdp

フォントサイズ設定ならspを使う

書籍ではよく
50dpとかで指定しているけど
これはわかりやすさ重視のため

Androidは、機種ごとのディスプレイサイズや解像度がかなり異なるため
dimens
xml
のリソースを準備して数値を定義して
マルチデバイス対応にするほうがベター

—
から送られてきた高速メモ帳

Androidの背景設定

背景設定は
android:background=””
で設定する

設定できるのは
通常の画像
shapeリソース
9patch

まずはShapeの場合

これには、まず背景用のShapeリソースを作成する

ソースは
/res/drawable/shape.xml

<shape
xmlns:android="http://scheams.android.com/apk/res/android">
<gradient
android:angle="270"
android:endColor="#FF2A68"
android:startColor="#FF53A"/>

<corners android:radius="10dp"/>
</shape>

次に、作成したレイアウトファイルを
背景に設定するので
android:background=””
で指定する

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/padding_xlarge"
android:background="@drawable/shape"
android:padding="@dimen/padding_large"
android:text="shapeを使った背景"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/padding_xlarge"
android:background="@drawable/normal"
android:text="普通の背景画像"/>

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/padding_xlarge"
android:background="@drawable/9patch"
android:text="9patchでの画像"/>

今回は一緒に
普通の場合と9patchの場合も追加

shapeリソースのメリットは
XMLなのでファイルが軽いこと
そして、Viewのサイズに依存しないので画質が一定になること

これは、グラデーション背景とか
角丸ボタンの作成に使われる

そして、9patchのメリットは
伸縮するのが前提なので、小さい画像ファイルでできるため
こちらもファイルサイズを小さくできる
またshapeみたいにViewのサイズに依存しないので画質が一定になる
さらに、コンテンツの表示領域の指定も可能

これは、画像こ一部だけをのばしたり
EditTextで特定の場所だけ入力欄にするときに使う

9patchリソースは
Android SDK の中の toolsディレクトリの中にあるツールの
draw9patch
を使うことで作成できる

レイアウトの再利用

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

この場合、共通する部分はレイアウトファイルを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の領域が確保できなくなってしまうため、画面に表示されなくなる