可能是第十好的Android 開源 日曆 Calendar 仿小米
阿新 • • 發佈：2019-01-31
SuperCalendar
簡介
- 博主現在工作在一家教育公司，最近公司的產品狗扔過來一個需求，說要做一個可以周月切換的課表，可以展示使用者在某一天的上課安排。接到這個任務之後我研究了很多的日曆控制元件，並且抽出了一個calenderlib。先看一下最後的專案中的效果：
- 看到本篇文章的同學估計也是實驗課或者專案需求中需要一個日曆表，當我接到這個需求的時候，當時腦子壓根連想都沒想，這麼通用的控制元件，GitHub上一搜一大堆不是嘛。可是等到真正做起來的時候，扎心了老鐵，GitHub上的大神居然異常的不給力，都是實現了基本功能，能夠滑動切換月份，找實現了周月切換功能的開源庫很難。終於我費盡千辛萬苦找到一個能夠完美切換的專案時，你周月切換之後的資料亂的一塌糊塗啊！！！
- 算了，自己擼一個！！！
- 如果你感覺到對你有幫助，歡迎star
- 如果你感覺對程式碼有疑惑，或者需要修改的地方，歡迎issue
主要特性
- 日曆樣式完全自定義，拓展性強
- 左右滑動切換上下週月，上下滑動切換周月模式
- 抽屜式周月切換效果
- 標記指定日期（marker）
- 跳轉到指定日期
思路
CalendarMindMap
- Calendar的繪製由CalendarRenderer完成，IDayRenderer實現自定義的日期效果，CalendarAttr中儲存日曆的屬性。
- 首先看一下Calendar的程式碼,Calendar主要是初始化Renderer和Attr，然後接受View的生命週期
- 在OnDraw的時候呼叫Renderer的onDraw方法，在點選事件onTouchEvent觸發時，呼叫Renderer的點選處理邏輯
private void initAttrAndRenderer() {
calendarAttr = new CalendarAttr();
calendarAttr.setWeekArrayType(CalendarAttr.WeekArrayType.Monday);
calendarAttr.setCalendarType(CalendarAttr.CalendayType.MONTH);
renderer = new CalendarRenderer(this , calendarAttr , context);
renderer.setOnSelectDateListener(onSelectDateListener);
}
@Override - 然後看一下CalendarRenderer的程式碼,Renderer承擔了Calendar的繪製任務，首先renderer根據種子日期seedDate填充出Calendar包含的Date資料，calendar中持有一個6*7二維陣列來存放日期資料。然後在onDraw的時候通過IDayRenderer來完成對日曆的繪製。當點選日期改變了日期的狀態時，首先改變對應日期的狀態State，然後重繪Calendar。
private void instantiateMonth() {
int lastMonthDays = Utils.getMonthDays(seedDate.year, seedDate.month - 1); // 上個月的天數
int currentMonthDays = Utils.getMonthDays(seedDate.year, seedDate.month); // 當前月的天數
int firstDayPosition = Utils.getFirstDayWeekPosition(seedDate.year, seedDate.month , CalendarViewAdapter.weekArrayType);
int day = 0;
for (int row = 0; row < Const.TOTAL_ROW; row++) {
day = fillWeek(lastMonthDays, currentMonthDays, firstDayPosition, day, row);
}
}
private int fillWeek(int lastMonthDays, int currentMonthDays, int firstDayWeek, int day, int row) {
for (int col = 0; col < Const.TOTAL_COL; col++) {
int position = col + row * Const.TOTAL_COL; // 單元格位置
if (position >= firstDayWeek && position < firstDayWeek + currentMonthDays) { // 本月的
day ++;
fillCurrentMonthDate(day, row, col);
} else if (position < firstDayWeek) { //last month
instantiateLastMonth(lastMonthDays, firstDayWeek, row, col, position);
} else if (position >= firstDayWeek + currentMonthDays) {//next month
instantiateNextMonth(currentMonthDays, firstDayWeek, row, col, position);
}
}
return day;
}
public void draw(Canvas canvas) {
for (int row = 0; row < Const.TOTAL_ROW; row++) {
if (weeks[row] != null) {
for (int col = 0; col < Const.TOTAL_COL; col ++) {
if (weeks[row].days[col] != null) {
dayRenderer.drawDay(canvas , weeks[row].days[col]);
}
}
}
}
}
public void onClickDate(int col, int row) {
if (col >= Const.TOTAL_COL || row >= Const.TOTAL_ROW)
return;
if (weeks[row] != null) {
if(attr.getCalendarType() == CalendarAttr.CalendayType.MONTH) {
if(weeks[row].days[col].getState() == State.CURRENT_MONTH){
weeks[row].days[col].setState(State.SELECT);
selectedDate = weeks[row].days[col].getDate();
CalendarViewAdapter.saveDate(selectedDate);
onSelectDateListener.onSelectDate(selectedDate);
seedDate = selectedDate;
} else if (weeks[row].days[col].getState() == State.PAST_MONTH){
selectedDate = weeks[row].days[col].getDate();
CalendarViewAdapter.saveDate(selectedDate);
onSelectDateListener.onSelectOtherMonth(-1);
onSelectDateListener.onSelectDate(selectedDate);
} else if (weeks[row].days[col].getState() == State.NEXT_MONTH){
selectedDate = weeks[row].days[col].getDate();
CalendarViewAdapter.saveDate(selectedDate);
onSelectDateListener.onSelectOtherMonth(1);
onSelectDateListener.onSelectDate(selectedDate);
}
} else {
weeks[row].days[col].setState(State.SELECT);
selectedDate = weeks[row].days[col].getDate();
CalendarViewAdapter.saveDate(selectedDate);
onSelectDateListener.onSelectDate(selectedDate);
seedDate = selectedDate;
}
}
}- 呼叫Renderer的draw方法時使用dayRenderer.drawDay(canvas , weeks[row].days[col])，dayRenderer是一個介面，在lib中有一個DayView 的抽象類實現該介面。 其中的drawDay方法完成了對該天到calendar的canvas上的繪製
@Override
public void drawDay(Canvas canvas , Day day) {
this.day = day;
refreshContent();
int saveId = canvas.save();
canvas.translate(day.getPosCol() * getMeasuredWidth(),
day.getPosRow() * getMeasuredHeight());
draw(canvas);
canvas.restoreToCount(saveId);
}- 使用繼承自ViewPager的MonthPager來存放calendar的view
viewPageChangeListener = new ViewPager.OnPageChangeListener() {}
//新建viewPagerChangeListener
@Override
protected void onSizeChanged(int w, int h, int oldW, int oldH) {
cellHeight = h / 6;
super.onSizeChanged(w, h, oldW, oldH);
}//重寫onSizeChanged，獲取dayView的高度
public int getTopMovableDistance() {
CalendarViewAdapter calendarViewAdapter = (CalendarViewAdapter) getAdapter();
rowIndex = calendarViewAdapter.getPagers().get(currentPosition % 3).getSelectedRowIndex();
return cellHeight * rowIndex;
}//計算周月切換時在到達選中行之前MonthPager收起的距離
public int getRowIndex() {
CalendarViewAdapter calendarViewAdapter = (CalendarViewAdapter) getAdapter();
rowIndex = calendarViewAdapter.getPagers().get(currentPosition % 3).getSelectedRowIndex();
Log.e("ldf","getRowIndex = " + rowIndex);
return rowIndex;
}//計算選中日期所在的行數- 使用CalendarViewAdapter為MonthPager填充calendar的例項
@Override
public void setPrimaryItem(ViewGroup container, int position, Object object) {
super.setPrimaryItem(container, position, object);
this.currentPosition = position;
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
if(position < 2){
return null;
}
Calendar calendar = calendars.get(position % calendars.size());
if(calendarType == CalendarAttr.CalendayType.MONTH) {
CalendarDate current = seedDate.modifyMonth(position - MonthPager.CURRENT_DAY_INDEX);
current.setDay(1);//每月的種子日期都是1號
calendar.showDate(current);
} else {
CalendarDate current = seedDate.modifyWeek(position - MonthPager.CURRENT_DAY_INDEX);
if(weekArrayType == 1) {
calendar.showDate(Utils.getSaturday(current));
} else {
calendar.showDate(Utils.getSunday(current));
}//每週的種子日期為這一週的最後一天
calendar.updateWeek(rowCount);
}
if (container.getChildCount() == calendars.size()) {
container.removeView(calendars.get(position % 3));
}
if(container.getChildCount() < calendars.size()) {
container.addView(calendar, 0);
} else {
container.addView(calendar, position % 3);
}
return calendar;
}- 日曆在切換周月時切換日曆中填充的資料
- 在月模式切換成周模式時，將當前頁的seedDate拿出來重新整理本頁資料，並且更新指定行數的週數據，然後得到seedDate下一週的週日作為下一頁的seedDate，重新整理下一頁的資料，並且更新指定行數的週數據。上一頁同理
- 也是說假設我當前選擇的是6月12號週日，處於日曆的第二行，也是說下一頁的seedDate是6月19號，然後重新整理6月19號所在周的資料到選定的第二行。
當切換周月時，把三頁的資料都會重新重新整理一遍，以保證資料的正確性。
public void switchToMonth() { if(calendars != null && calendars.size() > 0 && calendarType != CalendarAttr.CalendayType.MONTH){ calendarType = CalendarAttr.CalendayType.MONTH; MonthPager.CURRENT_DAY_INDEX = currentPosition; Calendar v = calendars.get(currentPosition % 3);//0 seedDate = v.getSeedDate(); Calendar v1 = calendars.get(currentPosition % 3);//0 v1.switchCalendarType(CalendarAttr.CalendayType.MONTH); v1.showDate(seedDate); Calendar v2 = calendars.get((currentPosition - 1) % 3);//2 v2.switchCalendarType(CalendarAttr.CalendayType.MONTH); CalendarDate last = seedDate.modifyMonth(-1); last.setDay(1); v2.showDate(last); Calendar v3 = calendars.get((currentPosition + 1) % 3);//1 v3.switchCalendarType(CalendarAttr.CalendayType.MONTH); CalendarDate next = seedDate.modifyMonth(1); next.setDay(1); v3.showDate(next); } } public void switchToWeek(int rowIndex) { rowCount = rowIndex; if(calendars != null && calendars.size() > 0 && calendarType != CalendarAttr.CalendayType.WEEK){ calendarType = CalendarAttr.CalendayType.WEEK; MonthPager.CURRENT_DAY_INDEX = currentPosition; Calendar v = calendars.get(currentPosition % 3); seedDate = v.getSeedDate(); rowCount = v.getSelectedRowIndex(); Calendar v1 = calendars.get(currentPosition % 3); v1.switchCalendarType(CalendarAttr.CalendayType.WEEK); v1.showDate(seedDate); v1.updateWeek(rowIndex); Calendar v2 = calendars.get((currentPosition - 1) % 3); v2.switchCalendarType(CalendarAttr.CalendayType.WEEK); CalendarDate last = seedDate.modifyWeek(-1); if(weekArrayType == 1) { v2.showDate(Utils.getSaturday(last)); } else { v2.showDate(Utils.getSunday(last)); }//每週的種子日期為這一週的最後一天 v2.updateWeek(rowIndex); Calendar v3 = calendars.get((currentPosition + 1) % 3); v3.switchCalendarType(CalendarAttr.CalendayType.WEEK); CalendarDate next = seedDate.modifyWeek(1); if(weekArrayType == 1) { v3.showDate(Utils.getSaturday(next)); } else { v3.showDate(Utils.getSunday(next)); }//每週的種子日期為這一週的最後一天 v3.updateWeek(rowIndex); } }- 使用CoordinateLayout的特性來做周月模式切換
1.RecyclerViewBehavior
@Override public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, RecyclerView child, View directTargetChild, View target, int nestedScrollAxes) { LinearLayoutManager linearLayoutManager = (LinearLayoutManager) child.getLayoutManager(); if(linearLayoutManager.findFirstCompletelyVisibleItemPosition() > 0) { return false; } boolean isVertical = (nestedScrollAxes & ViewCompat.SCROLL_AXIS_VERTICAL) != 0; int firstRowVerticalPosition = (child == null || child.getChildCount() == 0) ? 0 : child.getChildAt(0).getTop(); boolean recycleviewTopStatus = firstRowVerticalPosition >= 0; return isVertical && (recycleviewTopStatus || !Utils.isScrollToBottom()) && child == directTargetChild; } @Override public void onNestedPreScroll(CoordinatorLayout coordinatorLayout, RecyclerView child, View target, int dx, int dy, int[] consumed) { super.onNestedPreScroll(coordinatorLayout, child, target, dx, dy, consumed); if (child.getTop() <= initOffset && child.getTop() >= minOffset) { consumed[1] = Utils.scroll(child, dy, minOffset, initOffset); saveTop(child.getTop()); } } @Override public void onStopNestedScroll(final CoordinatorLayout parent, final RecyclerView child, View target) { Log.e("ldf","onStopNestedScroll"); super.onStopNestedScroll(parent, child, target); if (!Utils.isScrollToBottom()) { if (initOffset - Utils.loadTop() > Utils.getTouchSlop(context)){ scrollTo(parent, child, minOffset, 200); } else { scrollTo(parent, child, initOffset, 80); } } else { if (Utils.loadTop() - minOffset > Utils.getTouchSlop(context)){ scrollTo(parent, child, initOffset, 200); } else { scrollTo(parent, child, minOffset, 80); } } }- (2)MonthPagerBehavior 當recyclerView滑動式，MonthPager做相應的變化。
@Override
public boolean onDependentViewChanged(CoordinatorLayout parent, MonthPager child, View dependency) {
Log.e("ldf","onDependentViewChanged");
CalendarViewAdapter calendarViewAdapter = (CalendarViewAdapter) child.getAdapter();
if (dependentViewTop != -1) {
int dy = dependency.getTop() - dependentViewTop; //dependency對其依賴的view(本例依賴的view是RecycleView)
int top = child.getTop();
if( dy > touchSlop){
calendarViewAdapter.switchToMonth();
} else if(dy < - touchSlop){
calendarViewAdapter.switchToWeek(child.getRowIndex());
}
if (dy > -top){
dy = -top;
}
if (dy < -top - child.getTopMovableDistance()){
dy = -top - child.getTopMovableDistance();
}
child.offsetTopAndBottom(dy);
} else {
initRecyclerViewTop = dependency.getTop();
}
dependentViewTop = dependency.getTop();
top = child.getTop();
if((initRecyclerViewTop - dependentViewTop) >= child.getCellHeight()) {
Utils.setScrollToBottom(false);
calendarViewAdapter.switchToWeek(child.getRowIndex());
initRecyclerViewTop = dependentViewTop;
}
if((dependentViewTop - initRecyclerViewTop) >= child.getCellHeight()) {
Utils.setScrollToBottom(true);
calendarViewAdapter.switchToMonth();
initRecyclerViewTop = dependentViewTop;
}
return true;
// TODO: 16/12/8 dy為負時表示向上滑動，dy為正時表示向下滑動，dy為零時表示滑動停止
}- 使用IDayRender來實現自定義的日曆效果
DayView實現IDayRenderer，我們新建一個CustomDayView繼承自DayView，在裡面作自定義的顯示
public CustomDayView(Context context, int layoutResource) {
super(context, layoutResource);
dateTv = (TextView) findViewById(R.id.date);
marker = (ImageView) findViewById(R.id.maker);
selectedBackground = findViewById(R.id.selected_background);
todayBackground = findViewById(R.id.today_background);
}
@Override
public void refreshContent() {
renderToday(day.getDate());
renderSelect(day.getState());
renderMarker(day.getDate(), day.getState());
super.refreshContent();
}使用方法
XML佈局
- 新建XML佈局
RecyclerView的layout_behavior為com.ldf.calendar.behavior.RecyclerViewBehavior
<android.support.design.widget.CoordinatorLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1">
<com.ldf.calendar.view.MonthPager
android:id="@+id/calendar_view"
android:layout_width="match_parent"
android:layout_height="300dp"
android:background="#fff">
</com.ldf.calendar.view.MonthPager>
<android.support.v7.widget.RecyclerView
android:id="@+id/list"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_behavior="com.ldf.calendar.behavior.RecyclerViewBehavior"
android:background="#c2c2c2"
android:layout_gravity="bottom"/>
</android.support.design.widget.CoordinatorLayout>自定義日曆樣式
- 新建CustomDayView繼承自DayView並重寫refreshContent 和 copy 兩個方法
@Override
public void refreshContent() {
//你的程式碼 你可以在這裡定義你的顯示規則
super.refreshContent();
}
@Override
public IDayRenderer copy() {
return new CustomDayView(context , layoutResource);
}- 新建CustomDayView例項，並作為引數構建CalendarViewAdapter
CustomDayView customDayView = new CustomDayView(
context , R.layout.custom_day);
calendarAdapter = new CalendarViewAdapter(
context ,
onSelectDateListener ,
Calendar.MONTH_TYPE ,
customDayView);初始化View
- 目前來看 相比於Dialog選擇日曆 我的控制元件更適合於Activity/Fragment在Activity的
onCreate或者Fragment的onCreateView你需要實現這兩個方法來啟動日曆並裝填進資料
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_syllabus);
initCalendarView();
}
private void initCalendarView() {
initListener();
CustomDayView customDayView = new CustomDayView(
context , R.layout.custom_day);
calendarAdapter = new CalendarViewAdapter(
context ,
onSelectDateListener ,
Calendar.MONTH_TYPE ,
customDayView);
initMarkData();
initMonthPager();
}使用此方法回撥日曆點選事件
private void initListener() {
onSelectDateListener = new OnSelectDateListener() {
@Override
public void onSelectDate(CalendarDate date) {
//your code
}
@Override
public void onSelectOtherMonth(int offset) {
//偏移量 -1表示上一個月 ， 1表示下一個月
monthPager.selectOtherMonth(offset);
}
};
}使用此方法初始化日曆標記資料
private void initMarkData() {
HashMap markData = new HashMap<>();
//1表示紅點，0表示灰點
markData.put("2017-8-9" , "1");
markData.put("2017-7-9" , "0");
markData.put("2017-6-9" , "1");
markData.put("2017-6-10" , "0");
calendarAdapter.setMarkData(markData);
}使用此方法給MonthPager新增上相關監聽
monthPager.addOnPageChangeListener(new MonthPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
mCurrentPage = position;
currentCalendars = calendarAdapter.getAllItems();
if(currentCalendars.get(position % currentCalendars.size()) instanceof Calendar){
//you code
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
});重寫onWindowFocusChanged方法，使用此方法得知calendar和day的尺寸
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if(hasFocus && !initiated) {
CalendarDate today = new CalendarDate();
calendarAdapter.notifyDataChanged(today);
initiated = true;
}
}- 大功告成，如果還不清晰，請下載DEMO
Download
Gradle:
Step 1. Add it in your root build.gradle at the end of repositories:
allprojects {
repositories {
...
maven { url 'https://www.jitpack.io' }
}
}Step 2. Add the dependency
dependencies {
compile 'com.github.MagicMashRoom:SuperCalendar:v1.3.1'
}
Licence
Copyright 2017 MagicMashRoom, Inc.