AndroidでRecyclerViewを使ってみた

目的

• RecyclerViewを使ってみる。
• 題材：カレンダー（Grid形式）

ポイント

• RecyclerView.Adapterの下記のメソッドを実装するだけで、簡単に実装ができました。
• getItemCount()
• onCreateViewHolder(parent: ViewGroup, viewType: Int)
• onBindViewHolder(holder: DateAdapterHolder, position: Int)

実装内容

ActivityのonCreateでレイアウトを読み込み、RecyclerViewを生成します。
LayoutManagerは、GridLayoutManagerを設定し、カラム数はカレンダーのため７にします。

RecyclerViewMainActivity.kt

class RecyclerViewMainActivity : AppCompatActivity() {
    private val SPAN_COUNT = 7

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

        val recyclerView = findViewById<RecyclerView>(R.id.calendar)
        val adapter = DateAdapter(this)
        recyclerView.adapter = adapter
        // GridLayoutManagerを設定
        // カレンダーなのでspanCount（カラム数）は７
        val layoutManager = GridLayoutManager(this, SPAN_COUNT)
        recyclerView.layoutManager = layoutManager
    }
}

レイアウトは単純に、画面全体にRecyclerViewを設定します。

activity_recycler_view.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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"
    tools:context="com.ykato.sample.kotlin.RecyclerViewMainActivity">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/calendar"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

続いては、Adapterです。

内部にViewHolderクラスを実装します。
今回Grid内には、日付用のTextViewを配置します。

getItemCount()の戻り値は、固定で７００としました。
※dateInfoListのサイズ（可変）にしようと思いましたが、getItemCountの値を途中で変えると色々と問題があったのでここでは固定値としています。

DateAdapter.kt

class DateAdapter (
    context: Context) : RecyclerView.Adapter<DateAdapter.DateAdapterHolder>() {
    private val ITEM_COUNT = 700
    private val UPDATE_POSITION = 14
    private val inflater = LayoutInflater.from(context)
    private val dateInfoUtil = DateInfoUtil()
    private var dateInfoList = dateInfoUtil.createDateInfoList()

    class DateAdapterHolder(view: View) : RecyclerView.ViewHolder(view) {
        var date = view.findViewById<TextView>(R.id.date)
    }

    override fun getItemCount(): Int {
        return ITEM_COUNT
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DateAdapterHolder {
        val view = inflater.inflate(R.layout.calendar_item, parent, false)
        return DateAdapterHolder(view)
    }

    override fun onBindViewHolder(holder: DateAdapterHolder, position: Int) {
        holder.date.text = dateInfoList[position].dateString
        holder.date.setTextColor(dateInfoList[position].textColor)

        if (dateInfoUtil.getDateInfoSize() - position < UPDATE_POSITION) {
            addDateInfo()
        }
    }

    private fun addDateInfo() {
        dateInfoUtil.addDateInfo()
        dateInfoList = dateInfoUtil.createDateInfoList()
    }
}

onCreateViewHolder(parent: ViewGroup, viewType: Int)では、レイアウトを読み込み、ViewHolderを生成して返します。

onBindViewHolder(holder: DateAdapterHolder, position: Int)ではpositionに応じた文字列をTexViewに設定します。

calendar_item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/calenderItem"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="right|center_vertical">

    <TextView
        android:id="@+id/date"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:gravity="right"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="日付" />
</android.support.constraint.ConstraintLayout>

DateInfoUtilクラスは、カレンダーに表示する月、曜日、日付のリストを作成するクラスです。
下記のイメージの日付け等の情報を返すように実装しています。

1月
日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

DateInfoUtil.kt

class DateInfoUtil {
    private val ADDITIONAL_COUNT_WEEK = 15
    private var localDate = LocalDate.of(LocalDate.now().year, LocalDate.now().month,1)
    private var dateInfoList = ArrayList<DateInfo>()
    private val emptyDateInfo = DateInfo("")
    private val dayOfWeekArray = arrayOf(DayOfWeek.SUNDAY,DayOfWeek.MONDAY,DayOfWeek.TUESDAY,DayOfWeek.WEDNESDAY,
            DayOfWeek.THURSDAY,DayOfWeek.FRIDAY,DayOfWeek.SATURDAY)

    private fun addMonthHeader(localDate: LocalDate , calenderStr : ArrayList<DateInfo>) {
        if (isJanuary(localDate)) {
            addYearToDateInfoList(calenderStr, localDate)
            addMonthToDateInfoList(calenderStr, localDate)
        } else {
            addMonthToDateInfoList(calenderStr, localDate)
            addEmptyInfoToDateInfoList(calenderStr)
        }
        addEmptyInfoToDateInfoList(calenderStr, 5)
    }

    private fun isJanuary(localDate: LocalDate) = localDate.month == Month.JANUARY

    private fun addYearToDateInfoList(calenderStr: ArrayList<DateInfo>, localDate: LocalDate) {
        calenderStr.add(DateInfo(localDate.year.toString()))
    }

    private fun addMonthToDateInfoList(calenderStr: ArrayList<DateInfo>, localDate: LocalDate) {
        calenderStr.add(DateInfo(localDate.month.toString().substring(0, 3)))
    }

    private fun addEmptyInfoToDateInfoList(calenderStr: ArrayList<DateInfo>, count: Int = 1) {
        for (i in 1..count) {
            calenderStr.add(emptyDateInfo)
        }
    }

    private fun addWeekHeader(calenderStr : ArrayList<DateInfo>) {
        for (i in dayOfWeekArray) {
            val dateInfo = DateInfo(i.toString().substring(0, 3))
            dateInfo.textColor = when(i) {
                DayOfWeek.SUNDAY -> Color.RED
                DayOfWeek.SATURDAY -> Color.BLUE
                else -> Color.BLACK
            }
            calenderStr.add(dateInfo)
        }
    }

    private fun addDateInfo(calenderStr : ArrayList<DateInfo>) {
        var isFirstDay = localDate.dayOfMonth == 1
        for (i in 1..ADDITIONAL_COUNT_WEEK) {
            if (isFirstDay) {
                addMonthHeader(localDate, calenderStr)
                addWeekHeader(calenderStr)
                isFirstDay = false
            }
            for (j in dayOfWeekArray) {
                if (!isFirstDay && j == localDate.dayOfWeek) {
                    val dateInfo = DateInfo(localDate.dayOfMonth.toString())
                    dateInfo.textColor = when(j) {
                        DayOfWeek.SUNDAY -> Color.RED
                        DayOfWeek.SATURDAY -> Color.BLUE
                        else -> Color.BLACK
                    }
                    calenderStr.add(dateInfo)
                    localDate = localDate.plusDays(1.toLong())
                    if (localDate.dayOfMonth == 1) {
                        isFirstDay = true
                    }
                } else {
                    calenderStr.add(emptyDateInfo)
                }
            }
        }
    }

    fun createDateInfoList() : ArrayList<DateInfo> {
        addDateInfo(dateInfoList)
        return dateInfoList
    }

    fun getDateInfoSize() : Int {
        return dateInfoList.size
    }

    fun addDateInfo() {
        addDateInfo(dateInfoList)
    }
}

改善点

• 表示までのパフォーマンスが良くないので原因調査と改善が必要です。
• 月と曜日はスクロールしても残るように、ItemDecorationを使用してスティッキーヘッダーに修正します。