monthweekmaterialcalendarview

項目地址：idic779/monthweekmaterialcalendarview?

簡介：縱享絲滑滑動切換的周月日歷，可流暢滑動高度定制，仿小米日歷，基于 material-calendarview （Android 官方的 CalendarView）實現，簡潔高效

更多：作者???提 Bug???

標簽：

?

apk download

覺得有幫助的可以給個 star,有問題聯系 idic779@163.com QQ 290950778，有定制問題直接提 issue

???

可以點擊進去查看實現過程?縱享絲滑滑動切換的周月日歷，水滴效果，豐富自定義日歷樣式，仿小米日歷

之前開發任務中有涉及到年月日日歷的切換效果，由于是需要聯動，想到的方向大概有 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.MonthWeekMaterialCalendarViewandroid:id="@+id/slidelayout"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_below="@+id/linearlayout"><com.prolificinteractive.materialcalendarview.MaterialCalendarViewandroid: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.MaterialCalendarViewandroid: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.RecyclerViewandroid:id="@+id/recyclerView"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@android:color/white"android:orientation="vertical" /><LinearLayoutandroid:id="@+id/weekview_top"android:layout_width="match_parent"android:layout_height="44dp"android:background="@color/colorPrimary"android:orientation="horizontal"><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="周日" /><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="周一" /><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="周二" /><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="周三" /><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="周四" /><TextViewandroid:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:text="周五" /><TextViewandroid: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() {@Overridepublic void modeChange(MonthWeekMaterialCalendarView.Mode mode) {}}).setSlideDateSelectedlistener(new MonthWeekMaterialCalendarView.SlideDateSelectedlistener() {@Overridepublic void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) {}}).setSlideOnMonthChangedListener(new MonthWeekMaterialCalendarView.SlideOnMonthChangedListener() {@Overridepublic void onMonthChanged(MaterialCalendarView widget, CalendarDay date) {}}).commit();

設置選中顏色

monthWeekMaterialCalendarView.setSelectionColor 因為基于 MaterialCalendarView 的周和月視圖組成的，所以可以在 XML 中設置選中顏色，字體樣式等等 <com.prolificinteractive.materialcalendarview.MaterialCalendarViewandroid: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.MaterialCalendarViewandroid: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;}@Overridepublic boolean shouldDecorate(CalendarDay day) {day.copyTo(calendar);int weekDay = calendar.get(Calendar.DAY_OF_WEEK);return weekDay == Calendar.SATURDAY || weekDay == Calendar.SUNDAY;}@Overridepublic 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 amyLicensed 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 athttp://www.apache.org/licenses/LICENSE-2.0Unless 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.

總結

以上是生活随笔為你收集整理的纵享丝滑滑动切换的周月日历，可流畅滑动高度定制，仿小米日历，基于 material-calendarview的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。