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

12744 ワード
Android AndroidStudio Kotlin Android テキストリンク

レイアウト部品とビュー

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

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