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

# レイアウト部品とビュー

## レイアウト部品(ビューグループ)
`Android SDK`で用意された画面部品の`配置`を定義。

### 主なレイアウト部品
[参考1: レイアウト部品](https://qiita.com/yukiyamadajp/items/91b7ea994bd0dc4b5b76)
[参考2: RelativeLayoutとConstraintLayout](https://qiita.com/yamadacsa/items/a4fcf4de9982111cdb7c)

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

## ビュー(ウィジェット)
`Android SDK`で用意された`画面部品`。

### 主なビュー

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

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

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

# 属性

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

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

### 基本的な記述

```xml: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>
```

```xml: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`|配置方向<br>`horizontal`が`x方向`, `vertical`が`y方向`|

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

```xml: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の記述

```xml:activity_main.xml
<EditText
    android:inputType="text"
/>
```

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

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

#### Spinnerの記述

```xml:strings.xml
<string-array name="sp_currylist">
    <item>item 1</item>
    <item>item 2</item>
    ...
</string-array>
```

```xml:activity_main.xml
<Spinner
    android:entries="@array/sp_currylist"
/>
```

### ListView(リスト)の属性

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

#### android:layout_weightの記述

```xml:activity_main.xml
<ListView
    android:layout_height="0dp"
    android:layout_weight="1"
/>
```

# デザインエディタの画面

![デザインビューとブループリントビュー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/673880/09b59218-485b-0f57-effb-23ba80ee1b8d.png)
左側は`デザインビュー`, 右側は`ブループリントビュー`。
`デザインビュー`では、実際のアプリ画面が確認できる。
`ブループリントビュー`では、ビューの`枠線`や`ID`が確認できる。