縱享絲滑滑動切換的周月日曆，可流暢滑動高度定製，仿小米日曆，基於 material-calendarview
阿新 • • 發佈：2019-01-09
monthweekmaterialcalendarview
專案地址：idic779/monthweekmaterialcalendarview 
簡介：縱享絲滑滑動切換的周月日曆，可流暢滑動高度定製，仿小米日曆，基於 material-calendarview （Android 官方的 CalendarView）實現，簡潔高效
標籤：
覺得有幫助的可以給個 star,有問題聯絡 [email protected]
可以點選進去檢視實現過程 縱享絲滑滑動切換的周月日曆，水滴效果，豐富自定義日曆樣式，仿小米日曆
之前開發任務中有涉及到年月日日曆的切換效果，由於是需要聯動，想到的方向大概有 3 種，要麼通過處理 view 的 touch 事件，要麼是通過自定義 behavior 去實現，要麼是通過 ViewDragHelper 這個神器去實現，網上比較多的是通過自定義 bahavior 去實現，本文使用的是第三種方法，實現的是一個可高度定製自由切換的周月日曆檢視,提供一種思路去實現頁面聯動效果。
features
- 可以控制是否允許左右滑動，上下滑動，切換年月
- 流暢的上下週月模式切換
- 允許選擇農曆和普通日曆
- 豐富自定義日曆樣式
- 設定每週的第一天
- 設定某一天不允許選中
- 基於 material-calendarview 這個庫實現，可以下載原始碼根據需求定製效果
更新日誌
V1.7
支援 grid and staggeredgrid layoutManager
Usages
step 1 : 新增依賴
gradle allprojects { repositories { ...... maven { url 'https://jitpack.io' } } } dependencies { ...... compile 'com.github.idic779:monthweekmaterialcalendarview:1.7' }
step 2: 添加布局
<com.amy.monthweek.materialcalendarview.MonthWeekMaterialCalendarView
android:id="@+id/slidelayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/linearlayout">
<com.prolificinteractive.materialcalendarview.MaterialCalendarView
android:id="@+id/calendarView_month_mode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mcv_calendarMode="month"
app:mcv_showOtherDates="other_months"
app:mcv_showWeekView="false" />
<com.prolificinteractive.materialcalendarview.MaterialCalendarView
android:id="@+id/calendarView_week_mode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:visibility="invisible"
app:mcv_calendarMode="week"
app:mcv_showTopBar="false"
app:mcv_showWeekView="false" />
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:orientation="vertical" />
<LinearLayout
android:id="@+id/weekview_top"
android:layout_width="match_parent"
android:layout_height="44dp"
android:background="@color/colorPrimary"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週日" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週一" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週二" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週三" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週四" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週五" />
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="週六" />
</LinearLayout>
</com.amy.monthweek.materialcalendarview.MonthWeekMaterialCalendarView>
step 3: 如何使用
- 底部的 recyclerView 的 layoutManager 要實現 ILayoutManager 介面，設定是否允許上下滑動， 例如示例中的CustomLinearLayoutManager.java
設定當前日期，日曆才會滾動到對應日期
monthWeekMaterialCalendarView.setCurrentDate(selectedDate);
設定選中日期
monthWeekMaterialCalendarView.setSelectedDate(selectedDate)
新增日曆的樣式，例如紅點 或者自定義圖案
monthWeekMaterialCalendarView.addDecorator(new EventDecorator(Color.RED, dates))
移除日曆樣式
monthWeekMaterialCalendarView.removeDecorators();
設定當前的模式
monthWeekMaterialCalendarView.setMode(MonthWeekMaterialCalendarView.Mode.MONTH)
跳轉到上一個月
monthWeekMaterialCalendarView.goToPrevious();
跳轉到下個月
monthWeekMaterialCalendarView.goToNext();
設定是否允許豎直拖動，預設是允許拖動切換周月模式
monthWeekMaterialCalendarView.setCanDrag
設定是否允許左右滑動
monthWeekMaterialCalendarView.setPagingEnabled
新增選中日期、模式改變 或者月份改變的回撥
monthWeekMaterialCalendarView.state().edit()
//設定最大最小日期
.setMinimumDate(new CalendarDay(2017,1,1))
.setMaximumDate(new CalendarDay(2018,3,1))
.setSlideModeChangeListener(new MonthWeekMaterialCalendarView.SlideModeChangeListener() {
@Override
public void modeChange(MonthWeekMaterialCalendarView.Mode mode) {
}
}).setSlideDateSelectedlistener(new MonthWeekMaterialCalendarView.SlideDateSelectedlistener() {
@Override
public void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) {
}
}).setSlideOnMonthChangedListener(new MonthWeekMaterialCalendarView.SlideOnMonthChangedListener() {
@Override
public void onMonthChanged(MaterialCalendarView widget, CalendarDay date) {
}
}).commit();
設定選中顏色
monthWeekMaterialCalendarView.setSelectionColor
因為基於 MaterialCalendarView 的周和月檢視組成的，所以可以在 XML 中設定選中顏色，字型樣式等等
<com.prolificinteractive.materialcalendarview.MaterialCalendarView
android:id="@+id/calendarView_month_mode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mcv_selectionColor="@color/colorPrimary"
app:mcv_dateTextAppearance="@style/TextAppearance.MaterialCalendarWidget.Date"
app:mcv_calendarMode="month"
app:mcv_showOtherDates="defaults|other_months"
app:mcv_showWeekView="false" />
<com.prolificinteractive.materialcalendarview.MaterialCalendarView
android:id="@+id/calendarView_week_mode"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
android:visibility="invisible"
app:mcv_selectionColor="@color/colorPrimary"
app:mcv_dateTextAppearance="@style/TextAppearance.MaterialCalendarWidget.Date"
app:mcv_calendarMode="week"
app:mcv_showTopBar="false"
app:mcv_showWeekView="false" />
定製用法
如果你想給單獨的日期檢視設定一些樣式的話，例如週末右上角有個圖示這樣子的需求之類的話，你可以寫一個類繼承自 DayViewDecorator
public class RemindDecorator implements DayViewDecorator {
private final Calendar calendar = Calendar.getInstance();
private Context context;
public RemindDecorator(Context context) {
this.context=context;
}
@Override
public boolean shouldDecorate(CalendarDay day) {
day.copyTo(calendar);
int weekDay = calendar.get(Calendar.DAY_OF_WEEK);
return weekDay == Calendar.SATURDAY || weekDay == Calendar.SUNDAY;
}
@Override
public void decorate(DayViewFacade view) {
view.addSpan(new RestSpan(context));
}
}
- shouldDecorate()這個方法是判斷是否需要新增 Decorator 的條件
- decorate()這個方法可以對顯示樣式做一些操作
DayViewFacade 可以通過 setSelectionDrawable()，setBackgroundDrawable(),addSpan()設定樣式，尤其是 addSpan 的方法，因為你傳進去的是一個 span,所以你可以在裡面做很多自定義樣式的操作，例如RestSpan.java週末右上角加個圖示。
還可以怎麼用
接下來說下你可以怎麼去定製？如果你想替換專案中的月和周檢視的話，很簡單，
只需要你自己的周月檢視必須有一個方法獲得單行日曆的高度(例如我的庫中的 MaterialCalendarView.getItemHeight() )，
然後把這個月檢視和周檢視，分別在 MonthWeekMaterialCalendarView 裡面按照順序放到對應位置即可。
然後再 setListener()裡面設定相關的回撥處理，例如日期選中或者月份切換的回撥等。
更多的使用方法可以下載 demo 參考
License
Copyright 2018 amy
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.