【Android】画面コンポーネント / include ～ 画面を動的に切り替える ～

■ はじめに

以下のサイトのように、ユーザアクションに対して、
動的に切り替える画面を作りたくて調べていたら
include タグってのがあったので、使ってみた。

https://banatech.net/blog/view/30

■ 手順

１）[app]-[res]-[layout] を右クリックし、
　[New]-[Layout Resource File] を選択し
　切り替えたい画面部品を作成する
　（今回は「select_week.xml」とする）

２）１）の切り替えたい画面部品を実装する
　（以下、サンプルの「select_week.xml」を参照）

３）対象画面Activityに対して、
　Palette の [Containers]-[<include>] を選択すると、
　対象の画面部品を選択するダイアログに移行するので、
　１）で追加した画面部品を選択する

４）切り替えるコンポーネントの追加し
　（今回はCheckbox「repeatCheckBox」）
　画面レイアウトを整える

５）切り替えるための画面Activityの実装をする
　（以下、サンプルの「MainActivity.kt」を参照）

補足：表示切替（Visibility）

#	Visibility Type	説明
1	visibility = View.VISIBLE	表示
2	visibility = View.INVISIBLE	非表示（要素は消えない。透明）
3	visibility = View.GONE	非表示（要素ごとは消える）

■ サンプル

* 上記「■ 手順」に従って実装する
* 完成イメージは、以下のサイトみたいな感じ。

https://banatech.net/blog/view/30
select_week.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/selectWeek"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--
     「@drawable/round_button」については、以下の関連記事を参照のこと。
    https://dk521123.hatenablog.com/entry/2020/08/08/000000
     -->
    <Button
        android:id="@+id/sundayButton"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_marginTop="8dp"
        android:background="@drawable/round_button"
        android:text="SUN"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

・・・略（あまり本質ではないので）

</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

import android.os.Bundle
import android.view.View
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        this.switchVisibilityOfWeek()

        // Click Events

        repeatCheckBox.setOnClickListener {
            this.switchVisibilityOfWeek()
        }
    }

    private fun switchVisibilityOfWeek() {
        if (repeatCheckBox.isChecked) {
            include.visibility = View.VISIBLE
        } else {
            include.visibility = View.GONE
        }
    }
}

参考文献

https://qiita.com/sussan0416/items/531b77be1676a30b8fab

関連記事

画面コンポーネント / Button
https://dk521123.hatenablog.com/entry/2020/08/08/000000
アラーム機能 ～ 基本編 ～
https://dk521123.hatenablog.com/entry/2020/08/06/000000