【Android】カレンダーを自作する【株式会社ライトコード】

はじめに

カレンダー機能を実装する場合、ライブラリを使用するとうまくデザインを実現できないことがあると思います
そこで今回、RecyclerView と ViewPager2 を使ってカレンダーを自作してみました

カレンダーの実装

RecyclerView の GridLayoutManager を使用してカレンダーの見た目、ViewPager2 を使用してカレンダーの横スクロールを実装していきます

View の作成

メインとなる画面に、年月とボタンを表示する View とカレンダーを表示する ViewPager2 を配置し、 View を作成する
また、年月とボタンの View に罫線を追加するため、drawable で枠線を作成し、backgound に設定します

// res/drawable/header_border.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:width="1dp" android:color="@color/gray" />

</shape>

// res/layout/activity_main.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"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity"

    android:fitsSystemWindows="true">



    <LinearLayout

        android:id="@+id/llHeader"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:background="@drawable/header_border"

        android:baselineAligned="false"

        android:orientation="horizontal"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent">



        <ImageButton

            android:id="@+id/btPreviousMonth"

            style="?android:attr/borderlessButtonStyle"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/previous_month_button"

            android:src="@drawable/baseline_arrow_back_ios_new_24"

            app:tint="#ff000000" />



        <TextView

            android:id="@+id/tvMonth"

            android:layout_width="0dp"

            android:layout_height="wrap_content"

            android:layout_gravity="center"

            android:layout_weight="1"

            android:textAlignment="center" />



        <ImageButton

            android:id="@+id/btNextMonth"

            style="?android:attr/borderlessButtonStyle"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:contentDescription="@string/next_month_button"

            android:src="@drawable/baseline_arrow_forward_ios_24"

            app:tint="#ff000000" />



    </LinearLayout>



    <androidx.viewpager2.widget.ViewPager2

        android:id="@+id/calendarPager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintTop_toBottomOf="@+id/llHeader" />



</androidx.constraintlayout.widget.ConstraintLayout>

次に、カレンダーを表示するため、 RecyclerView を配置した View を作成する

// res/layout/fragment_calendar.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"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/main"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity">



    <androidx.recyclerview.widget.RecyclerView

        android:id="@+id/rvCalendar"

        android:layout_width="0dp"

        android:layout_height="0dp"

        app:layout_constraintBottom_toBottomOf="parent"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />



</androidx.constraintlayout.widget.ConstraintLayout>

最後に、日付を表示するための View を作成する
また、View に罫線を追加するため、drawable で枠線を作成し、backgound に設定します

// res/drawable/day_item_border.xml

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <stroke android:width="0.5dp" android:color="@color/gray" />

</shape>

// res/layout/day_item.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"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="@drawable/day_item_border">



    <TextView

        android:id="@+id/tvDay"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_marginTop="8dp"

        app:layout_constraintEnd_toEndOf="parent"

        app:layout_constraintStart_toStartOf="parent"

        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>