【Kotlin研修1日目】レイアウト部品とビュー

レイアウト部品とビュー

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

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が確認できる。