Material CalendarView 날짜 선택 시 배경 바꾸기

github.com/prolificinteractive/material-calendarview

prolificinteractive/material-calendarview

위의 사이트의 오픈소스를 사용하여서 캘린더를 만드는 프로젝트를 진행하다가 커스텀을 하는법을 찾다가 알게된 것들을 정리해본다.

github.com/prolificinteractive/material-calendarview/wiki/Custom-Selectors

prolificinteractive/material-calendarview

위에 깃허브 페이지에 나와있는 설명에따르면 drawble을 만들어서 Decorator에 설정해주면 된다고한다.

1. 먼저 xml에서 캘린더에 사용할 drawable을 생성한다.

왼쪽 - calendar_not_select_backround.xml    오른쪽 - calendar_select_background.xml 

calendar_backgorund.xml (선택시 바뀔 배경과 선택 안할 시 배경을 합쳐놓은 xml)

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


    <item
        android:state_pressed="true"
        android:drawable="@drawable/calendar_select_background"></item>

    <item
        android:state_checked="true"
        android:drawable="@drawable/calendar_select_background"></item>
    <item android:drawable="@drawable/calendar_not_select_background"></item>
</selector>

선택된 날짜를 나타내는 상태는 checked상태를 사용하므로 다음과 같이 설정해준다.

 

calendar_not_select_backgorund.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape
            android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="#3D3D42"></stroke>
            <corners android:radius="4dp"></corners>
            <solid android:color="#313136"></solid>
            <size
                android:width="16dp"
                android:height="16dp">

            </size>
        </shape>

    </item>

    <item
        android:width="16dp"
        android:height="16dp"
        android:bottom="2dp"
        android:drawable="@drawable/ic_main_assignment_24"
        android:gravity="bottom|center"></item>
</layer-list>

calendar_select_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>

        <shape android:shape="rectangle">
            <stroke
                android:width="1dp"
                android:color="@color/interface_purple"></stroke>
            <corners android:radius="4dp"></corners>
            <solid android:color="#313136"></solid>
            <size
                android:width="16dp"
                android:height="16dp">

            </size>
        </shape>

    </item>

    <item
        android:width="16dp"
        android:height="16dp"
        android:bottom="2dp"
        android:drawable="@drawable/ic_main_assignment_24"
        android:gravity="bottom|center"></item>
</layer-list>

2. Decorator 생성

EventDecorator.java

public class EventDecorator implements DayViewDecorator {


    private final Drawable drawable;
    private int color;
    private HashSet<CalendarDay> dates;
    private TextView textView;
    public EventDecorator(Collection<CalendarDay> dates, Activity context, TextView textView) {
        drawable = context.getResources().getDrawable(R.drawable.calendar_background);

        this.dates = new HashSet<>(dates);
        this.textView = textView;
    }

    @Override
    public boolean shouldDecorate(CalendarDay day){
        return dates.contains(day);
    }

    @Override
    public void decorate(DayViewFacade view) {
       view.setSelectionDrawable(drawable);
    }

    public void setText(String text){
        textView.setText(text);
    }

}

decorate 메소드에서 setSelectionDrawable에 위에서 생성한 drawable을 넣어준다.

 

3. decorator 추가

public class CalendarFragment extends BaseFragment<FragmentCalendarBinding, CalendarViewModel>  {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        setBinding(inflater, R.layout.fragment_calendar, container);
        setViewModel(CalendarViewModel.class);

        View view = binding.getRoot();

        ArrayList<CalendarDay> calendarDayList = new ArrayList<>();
        calendarDayList.add(CalendarDay.today());
        calendarDayList.add(CalendarDay.from(2020, 11, 25));

        EventDecorator eventDecorator = new EventDecorator(calendarDayList, getActivity(), binding.calendarTextview);
        binding.calendarview.addDecorators(eventDecorator);
       

        return view;
    }

}

calendarDayList에는 추가할 일정들의 날짜를 주고 eventDecorator의 매개변수로 주어서 calendarDayList에 있는 날짜만 배경을 변경시켜주고 calendarview에 eventDecorator를 추가하면 된다.

 

binding을 안쓴다면 그냥 Calendarview 객체에 eventDecorator를 달아주면 된다.