レイアウト部品とビュー

レイアウト部品(ビューグループ)

Android SDKで用意された画面部品の配置を定義。

主なレイアウト部品

参考1: レイアウト部品
 参考2: RelativeLayoutとConstraintLayout

タグ	内容
`<LinearLayout>`	`x`/`y`方向
`<TableLayout>`	表形式
`<FrameLayout>`	`z`方向
`<RelativeLayout>`	`循環制約`を許さない相対的配置
`<ConstraintLayout>`	`循環制約`を許す相対的配置

ビュー(ウィジェット)

Android SDKで用意された画面部品。

主なビュー

タグ	内容
`<TextView>`	ラベル
`<EditText>`	テキストフィールド
`<Button>`	ボタン
`<RadioButton>`	ラジオボタン ※`<RadioGroup>`によってグループ化する
`<CheckBox>`	チェックボックス
`<Spinner>`	プルダウンリスト
`<ListView>`	リスト
`<SeekBar>`	スライダー
`<RatingBar>`	「☆」のレート
`<Switch>`	スイッチ

レイアウト部品/ビューの記述

activity_main.xml

<LinearLayout>    <!-- ビューをレイアウトのタグで囲む -->
    <TextView/>    <!-- ビューは原則属性のみのタグ -->
</LinearLayout>

属性

レイアウト部品/ビュー共通の属性

属性	内容
`android:id`	ビューの`ID` `アクティビティ`でビューを取り扱う場合に使用
`android:layout_width` `android:layout_height`	`幅`/`高さ` `dp`/`sp`単位での調整が可能 `wrap_content`/`match_parent`の指定が可能 ※全てのビューに記述必須
`android:layout_margin` `android:padding`	`margin`はビュー`外側`の余白 `padding`はビュー`内側`の余白
`android:text`	文字列の`属性値`

基本的な記述

activity_main.xml

<?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">

    <TextView
        android:id="@+id/tvLabelInput"  <!-- @+id/... で記述 -->
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg  <!-- strings.xmlの文字列と紐づける場合は"@string/..." で記述 -->
    />
</LinearLayout>

strings.xml

<resources>
    <string name="app_name">UIComponents</string>
    <string name="tv_msg">input your name.</string>
</resources>

dp(Density-Independent Pixel; dip)とsp(Scale-Independent Pixel)

dpは密度非依存ピクセルと呼ばれ、画面密度の異なる端末でも見た目が同じになるように、OSが計算を行う表示サイズ単位。
spはスケール非依存ピクセルと呼ばれ、画面密度の違いだけでなく、ユーザ設定の文字サイズも考慮してOSが計算を行う表示サイズ単位。

ビューやレイアウト部品のサイズ設定にはdp,
文字列のサイズ設定にはspを用いる。

wrap_contentとmatch_parent

wrap_contentは、そのビューの表示に必要なサイズに自動調整を行う。
match_parentは、親ビューのサイズに合わせて自動拡張を行う。

レイアウト部品固有の属性

LinearLayoutの属性

属性	内容
`android:orientation`	配置方向 `horizontal`が`x方向`, `vertical`が`y方向`

LinearLayoutの入れ子による縦横配置

activity_main.xml

<LinearLayout
    android:orientation="vartical">

    <LinearLayout
        android:orientation="horizontal">
        ...
    </LinearLayout>
</LinearLayout>

ビュー固有の属性

EditText(テキストフィールド)の属性

属性	内容
`android:inputType`	キーボードの`属性値`

inputTypeの属性値

値	内容
`text`	デフォルト
`number`	数値
`phone`	電話番号
`textEmailAddress`	メールアドレス
`textMultiLine`	複数行
`textPassword`	パスワード
`textUri`	URI

EditTextの記述

activity_main.xml

<EditText
    android:inputType="text"
/>

Spinner(プルダウンリスト), ListView(リスト)の属性

属性	内容
`android:entries`	`リストデータ`の属性値

Spinnerの記述

strings.xml

<string-array name="sp_currylist">
    <item>item 1</item>
    <item>item 2</item>
    ...
</string-array>

activity_main.xml

<Spinner
    android:entries="@array/sp_currylist"
/>

ListView(リスト)の属性

属性	内容
`android:layout_weight`	画面余白に対する割合(`0-1`の値で表現) `x方向`に拡張する場合は`layout_width`, `y方向`に拡張する場合は`layout_height` に`0dp`を記述

android:layout_weightの記述

activity_main.xml

<ListView
    android:layout_height="0dp"
    android:layout_weight="1"
/>

デザインエディタの画面

左側はデザインビュー, 右側はブループリントビュー。
デザインビューでは、実際のアプリ画面が確認できる。
ブループリントビューでは、ビューの枠線やIDが確認できる。