Android + kotlin + ViewPager2 でカレンダーの横スクロールを実現する

## 概要
今回は前回作った6月のカレンダーをスクロールして、7,8月のカレンダーも見れるようにしたいと思います。

## 技術テーマ
* ViewPager2

横スクロールにはViewPagerは避けては通れないのでそちらを使って実装していこうと思います。

## 手順
### Fragmentの作成
ViewPagerではスクロールすることでfragmentが切り替わるというものなので、今までActivityしか使ってなかったのですが、メインの処理をFragmentに移行したいと思います。

```fragment_calendar.xml
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="date"
            type="String[]" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <!--縦分割のガイドライン-->
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/youbi"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.1" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.25" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.40" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.55" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.70" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="0.85" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/line_6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            app:layout_constraintGuide_percent="1" />

        <!--横分割のガイドライン-->
        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.14" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.28" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.42" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.56" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row5"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.70" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row6"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="0.84" />

        <androidx.constraintlayout.widget.Guideline
            android:id="@+id/row7"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_constraintGuide_percent="1" />


        <TextView
            android:id="@+id/sunday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="Sun"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />


        <TextView
            android:id="@+id/monday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Mon"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/tuesday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Tue"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/wednesday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Wed"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/thursday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Thu"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/friday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="Fri"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@+id/sunday" />

        <TextView
            android:id="@+id/saturday"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="Sat"
            app:layout_constraintBottom_toBottomOf="@id/youbi"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@+id/sunday" />


        <TextView
            android:id="@+id/cell_1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[0]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/youbi" />


        <TextView
            android:id="@+id/cell_2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[1]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[2]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_4"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[3]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_5"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[4]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_6"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[5]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_7"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[6]}"
            app:layout_constraintBottom_toBottomOf="@id/line_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/youbi" />

        <TextView
            android:id="@+id/cell_21"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[7]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_1" />


        <TextView
            android:id="@+id/cell_22"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[8]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_23"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[9]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_24"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[10]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_25"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[11]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_26"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[12]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_27"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[13]}"
            app:layout_constraintBottom_toBottomOf="@id/line_2"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_1" />

        <TextView
            android:id="@+id/cell_31"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[14]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_2" />


        <TextView
            android:id="@+id/cell_32"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[15]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_33"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[16]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_34"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[17]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_35"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[18]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_36"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[19]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_37"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[20]}"
            app:layout_constraintBottom_toBottomOf="@id/line_3"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_2" />

        <TextView
            android:id="@+id/cell_41"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[21]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_42"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[22]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_43"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[23]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_44"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[24]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_45"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[25]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_46"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[26]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_47"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[27]}"
            app:layout_constraintBottom_toBottomOf="@id/line_4"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_3" />

        <TextView
            android:id="@+id/cell_51"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[28]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_52"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[29]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_53"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[30]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_54"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[31]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_55"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[32]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_56"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[33]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_57"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[34]}"
            app:layout_constraintBottom_toBottomOf="@id/line_5"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_4" />

        <TextView
            android:id="@+id/cell_61"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_red"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[35]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row1"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_62"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[36]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row2"
            app:layout_constraintStart_toEndOf="@+id/row1"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_63"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[37]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row3"
            app:layout_constraintStart_toEndOf="@+id/row2"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_64"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[38]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row4"
            app:layout_constraintStart_toEndOf="@+id/row3"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_65"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[39]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row5"
            app:layout_constraintStart_toEndOf="@+id/row4"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_66"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[40]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="@id/row6"
            app:layout_constraintStart_toEndOf="@+id/row5"
            app:layout_constraintTop_toTopOf="@id/line_5" />

        <TextView
            android:id="@+id/cell_67"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="@drawable/flame_style_blue"
            android:gravity="center_horizontal|center_vertical"
            android:text="@{date[41]}"
            app:layout_constraintBottom_toBottomOf="@id/line_6"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@id/row6"
            app:layout_constraintTop_toTopOf="@id/line_5" />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

```

```CalendarFragment.kt
package com.example.myfavoritecontentsmanage

import android.os.Bundle
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import androidx.fragment.app.Fragment
import com.example.myfavoritecontentsmanage.databinding.FragmentCalendarBinding
import java.util.*

class CalendarFragment() : Fragment() {
    private lateinit var binding: FragmentCalendarBinding
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentCalendarBinding.inflate(inflater, container, false)
        inflater.inflate(R.layout.fragment_calendar, container, false)
        val calendar = Calendar.getInstance()
        val year = 2019
        val month = 6
        val minDay = 1
        calendar.set(year, month - 1, 1)
        val maxDay = calendar.getActualMaximum(Calendar.DAY_OF_MONTH)
        val blankDays = calendar.get(Calendar.DAY_OF_WEEK)

        val dayArray: MutableList<String> = mutableListOf()
        for (i in minDay until blankDays) {
            dayArray.add("")
        }
        for (i in minDay..maxDay) {
            dayArray.add(i.toString())
        }
        binding.date = dayArray.toTypedArray()

        return binding.root
    }
}
```

基本的にただ移行するだけなのでそこまで苦戦することはありません。

### ViewPager2の利用

**前提**
ViewPager2を使うためにはgradleに下記の記述を追加します。

```
    implementation "androidx.viewpager2:viewpager2:1.0.0"
```

まず、アクティビティのレイアウトファイルでviewPagerを定義します。

```activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".MainActivity">

        <androidx.viewpager2.widget.ViewPager2
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />


    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

```

そしてMainActivityでadapterを呼び出し、連結します。

```MainActivity.kt
package com.example.myfavoritecontentsmanage

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.databinding.DataBindingUtil
import androidx.fragment.app.Fragment
import androidx.fragment.app.FragmentActivity
import androidx.viewpager2.adapter.FragmentStateAdapter
import com.example.myfavoritecontentsmanage.databinding.ActivityMainBinding

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
        super.onCreate(savedInstanceState)
//        setContentView(R.layout.activity_main)

        val pager = ScreenSlidePagerAdapter(this)
        binding.pager.adapter = pager

    }

    private inner class ScreenSlidePagerAdapter(fa: FragmentActivity) : FragmentStateAdapter(fa) {
        override fun getItemCount(): Int = 3

        override fun createFragment(position: Int): Fragment = CalendarFragment(position)
    }
}

```

実行結果がこちら！

<img width="400" alt="mojikyo45_640-2.gif" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/83409/cf26f340-91b6-063a-87a0-4ee409a584ce.gif">


ちょっと月の表示が無いのでわかりにくいかもしれないのですが、ちゃんと切り替わっている様子が伝わるかと!!!

今回は3の制限が付いていて、しかも5月など過去の月が表示できないのでその辺りを調整しようと思います！