Zenn
📅

Jetpack Composeでカレンダーライブラリを作ってみた

2021/09/26に公開
Android
Kotlin
Jetpack Compose
tech

はじめに

Jetpack Composeを使って、アプリを作成していてカレンダーライブラリでいいものがなかったので、自作しました。
Github Packagesとしてライブラリ化しているので、気に入っていただければご自由にお使いください。
https://github.com/taiki0304/ComposeCalendar
Gradle version 7.0.2
minSDK 26
targetSDK 30
Jetpack Compose version 1.0.2
accompanist version 0.17.0

使い方

ライブラリとして、インストール

  1. github.properties ファイルを作成
    • クレデンシャル情報なので、.gitignoreにgithub.propertiesを追加してください
github.properties
gpr.user={userName}
gpr.key={GithubAccessToken}
  1. build.gradleに以下を追記
build.gradle
def githubProperties = new Properties()
githubProperties.load(new FileInputStream(rootProject.file("github.properties")))

allprojects {
    repositories {
        ...
        maven {
            name = "GitHubPackages"
            url = uri("https://maven.pkg.github.com/taiki0304/ComposeCalendar")
            credentials {
                username = githubProperties['gpr.user'] ?: System.getenv("USERNAME")
                password = githubProperties['gpr.key'] ?: System.getenv("TOKEN")
            }
        }
    }
}
  1. 以下の依存関係をapp/build.gradleに追加
    • compose-calendar
    • accompanist-pager
app/build.gradle
plugins {
  id 'maven-publish'
}
dependencies {
  implementation "com.taiki0304:compose-calendar:<version>"
  implementation "com.google.accompanist:accompanist-pager:<version>"
}

機能紹介

週始まり

  • 日曜日/月曜日の週始まりを変更可能です。
日曜日 月曜日
  • 変更方法
// 日曜日始まり(初期値)
CalendarManager.firstDayOfWeek = FirstDayOfWeek.SUNDAY
// 月曜日始まり
CalendarManager.firstDayOfWeek = FirstDayOfWeek.MONDAY

ページ切り替えの方向

  • 横方向/縦方向のスワイプの報告を変更可能です。
横スワイプ 縦スワイプ
  • 変更方法
// 横スワイプ(初期値)
CalendarManager.Layout.swipeDirection = SwipeDirection.HORIZONTAL
// 縦スワイプ
CalendarManager.Layout.swipeDirection = SwipeDirection.VERTICAL

日本の祝日完全対応

  • 祝日の日付をマークすることが可能です。
  • 祝日を判定するロジックは、カスタマイズ可能です。
  • 日本の祝日判定ロジックはデフォルトで利用可能です。
  • 利用方法
// 日本の祝日
CalendarManager.holidayStrategy = JapaneseHolidayStrategy()

独自の祝日判定ロジックを作成する場合

  1. HolidayStrategyに準拠したクラスを作成し、isHoliday(date:)を実装してください
  2. 上記で作成したクラスをCalendarManager.holidayStrategyに設定することで、利用可能です。
  3. 例えば、日本の祝日に準拠したカスタムロジックを作成する場合
class MyHolidayStrategy : HolidayStrategy {

    private val japaneseHolidayStrategy = JapaneseHolidayStrategy()

    /** 祝日判定とする日付 */
    private val additionalHolidays = listOf(
        LocalDate.of(2021, 1, 15),
        LocalDate.of(2021, 1, 16),
        LocalDate.of(2021, 1, 17),
    )

    override fun isHoliday(date: LocalDate): Boolean {
        if (japaneseHolidayStrategy.isHoliday(date)) {
            return true
        } else if (additionalHolidays.contains(date)) {
            return true
        }
        return false
    }
}

イベントのハンドリング

  • 以下のイベントをハンドリングすることが可能です
    • スワイプでのページ切り替え
    • 日付の選択

スワイプでのページ切り替え

  • onChangePageでスワイプでのページ切り替え時のイベントをハンドリングできます
Calendar(onChangePage = { yearMonth ->
  // スワイプでのページ切り替え時のイベント
})

日付の選択

  • onSelectDayで日付の選択のイベントをハンドリングできます
Calendar(onSelectDay = { date ->
  // 日付の選択
})

おわり

Jetpack Composeで実装することで、UIの作成が劇的にコード量が減って複雑なUIも簡単に作成できますね。
また、Github Packagesも今回初めて利用しましたが、意外と簡単だったので今後、活用していきたいと思います。

ライブラリのアップデートは随時していきたいと思うので、ご意見あればコメントください。

Discussion