androidでベーシックなコントローラ配置を学ぶ

# 今回の教科書
すいすい進んでいいね。おすすめできる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/c19a6419-6f04-9c71-e9eb-ab8ddb558108.png)

# ラベルを表示
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

</LinearLayout>
```

# 確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/48cadeff-299c-341c-77f9-75769d8d25f0.png)

# EditTextを追加
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

+   <EditText
+       android:id="@+id/etInput"
+       android:layout_width="match_parent"
+       android:layout_height="wrap_content"
+       android:layout_marginBottom="25dp"
+       android:layout_marginTop="5dp"
+       android:inputType="text" />

</LinearLayout>
```

# 確認
下に出てきた入力UIはもともとandroidが用意してくれているもの
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/ac6417c4-1502-9afd-3986-3d0f5d438be8.png)

# ボタンを追加
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:inputType="text" />

+   <Button
+       android:id="@+id/btSave"
+       android:layout_width="wrap_content"
+       android:layout_height="wrap_content"
+       android:text="@string/bt_save"/>

</LinearLayout>
```

# 確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/1d5c9faf-f83c-eae0-25ea-030e6677d4b7.png)

# リニアレイアウトを入れ子にする
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:inputType="text" />

+   <LinearLayout
+       android:layout_width="match_parent"
+       android:layout_height="wrap_content"
+       android:orientation="horizontal">
+       <CheckBox
+           android:id="@+id/cbDrink"
+           android:layout_width="wrap_content"
+           android:layout_height="wrap_content"
+           android:layout_marginEnd="25dp"
+           android:text="@string/cb_drink"/>
+       <CheckBox
+           android:id="@+id/cbFood"
+           android:layout_width="wrap_content"
+           android:layout_height="wrap_content"
+           android:text="@string/cb_food"/>
+   </LinearLayout>

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bt_save"/>

</LinearLayout>
```

# 確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/918dfefe-6180-b7ce-0206-642f2db39dc8.png)

# ラジオボタンを追加
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:inputType="text" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <CheckBox
            android:id="@+id/cbDrink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="25dp"
            android:text="@string/cb_drink"/>
        <CheckBox
            android:id="@+id/cbFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cb_food"/>
    </LinearLayout>

+   <RadioGroup
+       android:layout_width="match_parent"
+       android:layout_height="wrap_content"
+       android:layout_marginBottom="10dp"
+       android:layout_marginTop="10dp"
+       android:orientation="horizontal"
+       android:paddingBottom="10dp"
+       android:paddingTop="10dp">
+       <RadioButton
+           android:id="@+id/rbMale"
+           android:layout_width="wrap_content"
+           android:layout_height="wrap_content"
+           android:layout_marginLeft="25dp"
+           android:layout_marginRight="25dp"
+           android:text="@string/rb_male" />
+       <RadioButton
+           android:id="@+id/rbFemale"
+           android:layout_width="wrap_content"
+           android:layout_height="wrap_content"
+           android:text="@string/rb_female" />
+   </RadioGroup>

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bt_save"/>

</LinearLayout>
```

# 確認
まぁなんかVisualStudio的な感じよね
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/364c6a1b-eaa2-c2cd-9abe-d6836fbb2f1b.png)

# 選択ボックスを追加
```diff_xml:values/strings.xml
<resources>
    <string name="app_name">HelloAndroid</string>
    <string name="tv_msg">お名前を入力してください</string>
    <string name="bt_save">保存</string>
    <string name="cb_drink">ドリンク</string>
    <string name="cb_food">フード</string>
    <string name="rb_male">男</string>
    <string name="rb_female">女</string>
+   <string-array name="sp_curryList">
+       <item>ドライカレー</item>
+       <item>カツカレー</item>
+       <item>ビーフカレー</item>
+       <item>チキンカレー</item>
+       <item>シーフードカレー</item>
+       <item>キーマカレー</item>
+       <item>グリーンカレー</item>
+   </string-array>
</resources>
```
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:inputType="text" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <CheckBox
            android:id="@+id/cbDrink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="25dp"
            android:text="@string/cb_drink"/>
        <CheckBox
            android:id="@+id/cbFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cb_food"/>
    </LinearLayout>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">
        <RadioButton
            android:id="@+id/rbMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:text="@string/rb_male" />
        <RadioButton
            android:id="@+id/rbFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rb_female" />
    </RadioGroup>

+   <Spinner
+       android:id="@+id/spCurryList"
+       android:layout_width="match_parent"
+       android:layout_height="wrap_content"
+       android:entries="@array/sp_curryList"
+       android:paddingBottom="5dp"
+       android:paddingTop="5dp" />

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bt_save"/>

</LinearLayout>
```

# 確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/15faa59e-1255-91c4-2b32-9de5fd08ef57.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/a83496c9-7d13-0761-8d5f-bfd4512d14bc.png)

# リストを追加
```diff_xml:values/strings.xml
<resources>
    <string name="app_name">HelloAndroid</string>
    <string name="tv_msg">お名前を入力してください</string>
    <string name="bt_save">保存</string>
    <string name="cb_drink">ドリンク</string>
    <string name="cb_food">フード</string>
    <string name="rb_male">男</string>
    <string name="rb_female">女</string>
    <string-array name="sp_curryList">
        <item>ドライカレー</item>
        <item>カツカレー</item>
        <item>ビーフカレー</item>
        <item>チキンカレー</item>
        <item>シーフードカレー</item>
        <item>キーマカレー</item>
        <item>グリーンカレー</item>
    </string-array>
+   <string-array name="lv_cocktailList">
+       <item>ホワイト・レディー</item>
+       <item>バラライカ</item>
+       <item>XYZ</item>
+       <item>ニューヨーク</item>
+       <item>マンハッタン</item>
+       <item>ミシシッピミュール</item>
+       <item>マイタイ</item>
+       <item>マティーニ</item>
+   </string-array>
</resources>
```
```diff_kotlin:layout/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"
    android:background="#A1A9BA"
    android:orientation="vertical">

    <TextView
        android:id="@+id/tvLabel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="5dp"
        android:text="@string/tv_msg"/>

    <EditText
        android:id="@+id/etInput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="25dp"
        android:layout_marginTop="5dp"
        android:inputType="text" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <CheckBox
            android:id="@+id/cbDrink"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="25dp"
            android:text="@string/cb_drink"/>
        <CheckBox
            android:id="@+id/cbFood"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/cb_food"/>
    </LinearLayout>

    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:paddingBottom="10dp"
        android:paddingTop="10dp">
        <RadioButton
            android:id="@+id/rbMale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="25dp"
            android:layout_marginRight="25dp"
            android:text="@string/rb_male" />
        <RadioButton
            android:id="@+id/rbFemale"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/rb_female" />
    </RadioGroup>

    <Spinner
        android:id="@+id/spCurryList"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:entries="@array/sp_curryList"
        android:paddingBottom="5dp"
        android:paddingTop="5dp" />

    <Button
        android:id="@+id/btSave"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/bt_save"/>

+   <ListView
+       android:layout_width="match_parent"
+       android:layout_height="0dp"
+       android:layout_weight="1"
+       android:background="#ffffff"
+       android:entries="@array/lv_cocktailList" />

</LinearLayout>
```

# 確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/94562/c5cfc772-026a-8b21-5213-bde2d9a49ab5.png)