한이음 프로젝트 - Custom Calendar

material-calendarview

안드로이드에서 기본적으로 제공하는 캘린더로 원하는 방식을 구현하는데에 많은 제한이 있다.
따라서 캘린더 뷰 라이브러리를 사용해 캘린더를 커스텀 하고자 한다.

Gradle

프로젝트 수준의 build.gradle에 다음을 추가해준다.

repositories {
    ...
    maven { url 'https://jitpack.io' }
}

앱 수준의 build.gradle에 디펜던시를 추가해준다.

implementation 'com.prolificinteractive:material-calendarview:1.4.3'

Layout

날짜가 보여질 형식과 날짜 선택 시 원의 색상을 지정해준다.

<com.prolificinteractive.materialcalendarview.MaterialCalendarView
    android:id="@+id/calendar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerVertical="true"
    app:mcv_selectionColor="@color/colorLightGray"
    app:mcv_showOtherDates="all" />

처음 선택되어 있는 날짜를 당일로 지정하고 싶으면 다음과 같은 코드를 추가해주면 된다.

lateinit var calendar: MaterialCalendarView

calendar = view.findViewById(R.id.calendar)
calendar.setSelectedDate(CalendarDay.today())

Decorator

캘린더를 꾸미기 위해서는 Decorator 클래스를 따로 생성해주어야 한다.

다음은 당일 날짜의 글씨체를 키우고 색상을 바꾸는 Decorator 클래스이다.

class TodayDecorator: DayViewDecorator {
    private var date = CalendarDay.today()

    override fun shouldDecorate(day: CalendarDay?): Boolean {
        return day?.equals(date)!!
    }

    override fun decorate(view: DayViewFacade?) {
        view?.addSpan(StyleSpan(Typeface.BOLD))
        view?.addSpan(RelativeSizeSpan(1.4f))
        view?.addSpan(ForegroundColorSpan(Color.parseColor("#1D872A")))
    }
}

Decorator 클래스를 해당 calendar view에 추가해준다.

calendar.addDecorator(TodayDecorator())

또한 이벤트가 발생한 날 날짜 아래에 조그만 점을 찍어주는 Decorator 클래스를 생성해주었다.

class EventDecorator(dates: Collection<CalendarDay>): DayViewDecorator {

    var dates: HashSet<CalendarDay> = HashSet(dates)

    override fun shouldDecorate(day: CalendarDay?): Boolean {
        return dates.contains(day)
    }

    override fun decorate(view: DayViewFacade?) {
        view?.addSpan(DotSpan(5F, Color.parseColor("#1D872A")))
    }
}

해당 이벤트는 일단 날짜가 선택되면 발생하도록 설정하였다.

calendar.setOnDateChangedListener(object: OnDateSelectedListener {
    override fun onDateSelected(widget: MaterialCalendarView, date: CalendarDay, selected: Boolean) {
        calendar.addDecorator(EventDecorator(Collections.singleton(date)))
    }
})