Android日历界面MaterialCalendarView的使用

曾经终败给现在 2022-07-03 17:50 464阅读 0赞

# Android日历界面MaterialCalendarView的使用 #

前几天有一个界面需要选择时间的界面，但是系统的日期对话框有点不合适，因为有其他几个选择都是类似PopupWindow的格式显示在按钮下边的，而日期选择也是应该要同样的效果，所有这就需要自定义View，而不能是Dialog样式的显示。  
虽然我也会设计出来，但是我发现网上这个开源框架：MaterialCalendarView做得算是很完美的，不管是样式，很是里面方法的封装，动画效果的显示和逻辑的判断都是不错的！  
MaterialCalendarView的源码地址：[https://github.com/prolificinteractive/material-calendarview][https_github.com_prolificinteractive_material-calendarview]  
需要说明一点的是，这个框架里面有android5.0以上的类，需要设置SDK在5.0以上才能使用，并且需要V4以上的兼容包！

MaterialCalendarView的效果图：  
![x1][]

动态效果：  
![x2][]

MaterialCalendarView可以依赖使用，但是我使用的开发工具是IDEA（类似Eclipse），所以我把源代码复制下来，进行简单修改就可以使用了，大家如果要用也可以下载我的源码使用。  
展示一下主要代码使用：

## 1.布局文件 ##

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                  android:orientation="vertical"
                  android:layout_width="fill_parent"
                  android:layout_height="fill_parent"
            >
        <TextView android:layout_width="match_parent"
                  android:gravity="center"
                  android:layout_height="wrap_content"
                  android:text="日历界面"/>
        <com.example.calendar.materialcalendarview.materialcalendarview.MaterialCalendarView
                android:background="#fff"
                xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/calendarView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:mcv_showOtherDates="all"
                app:mcv_selectionColor="#F00"
                />
        <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="getTime"
                android:text="获取时间"
                />
    </LinearLayout>

自定义View的使用，包名都是根据自己放这个类的包名设置的，否则会运行会报错。上面也是用到了自定义命名空间属性设置，app:mcv\_selectionColor=”\#F00”表示被选中后日期的颜色的显示。

## 2.控制日历的简单代码 ##

package com.example.calendar;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.support.annotation.NonNull;
    import android.view.View;
    import android.widget.Toast;
    import com.example.calendar.materialcalendarview.materialcalendarview.CalendarDay;
    import com.example.calendar.materialcalendarview.materialcalendarview.CalendarMode;
    import com.example.calendar.materialcalendarview.materialcalendarview.MaterialCalendarView;
    import com.example.calendar.materialcalendarview.materialcalendarview.OnDateSelectedListener;
    
    import java.util.Calendar;
    
    public class MainActivity extends Activity {
        MaterialCalendarView materialCalendarView;//布局内的控件
        CalendarDay currentDate;//自定义的日期对象 
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.main);
            materialCalendarView = (MaterialCalendarView) findViewById(R.id.calendarView);// 實例化
    
            //编辑日历属性
            materialCalendarView.state().edit()
                    .setFirstDayOfWeek(Calendar.MONDAY)   //设置每周开始的第一天
                    .setMinimumDate(CalendarDay.from(2010, 4, 3))  //设置可以显示的最早时间
                    .setMaximumDate(CalendarDay.from(2018, 5, 12))//设置可以显示的最晚时间
                    .setCalendarDisplayMode(CalendarMode.MONTHS)//设置显示模式，可以显示月的模式，也可以显示周的模式
                    .commit();// 返回对象并保存
            //      设置点击日期的监听
            materialCalendarView.setOnDateChangedListener(new OnDateSelectedListener() {
                @Override
                public void onDateSelected(@NonNull com.example.calendar.materialcalendarview.materialcalendarview.MaterialCalendarView widget, @NonNull com.example.calendar.materialcalendarview.materialcalendarview.CalendarDay date, boolean selected) {
                    currentDate = date;
                }
            });
        }
    
        /**
         * 获取点击后的日期数
         */
        public void getTime(View view) {
            if (currentDate != null) {
                int year = currentDate.getYear();
                int month = currentDate.getMonth() + 1; //月份跟系统一样是从0开始的，实际获取时要加1
                int day = currentDate.getDay();
                Toast.makeText(this, currentDate.toString() + "你选中的是：" + year + "-" + month + "-" + day, Toast.LENGTH_LONG).show();
            } else {
                Toast.makeText(this, "请选择时间", Toast.LENGTH_LONG).show();
            }
    
    
        }
    
    }

相关的解释都是在代码中了，大家也可以研究一下MaterialCalendarView这个类里面的公共方法，里面还有其他属性的设置。  
程序运行后的效果：

![x3][]  
程序也可以改成Week模式，代码： setCalendarDisplayMode(CalendarMode.WEEKS)效果：  
![x4][]

这个基于View的日历框架就介绍到这里，里面的属性大家可以慢慢研究，或者多添些方法，上面源代码我也是做了一点小修改，就是上面点击左右边的按钮本来时显示上下月的，但是我感觉和左右滑动冲突的，我改成点击左右边的按钮设置成显示上下年，把MaterialCalendarView类中的代码： pager.setCurrentItem(pager.getCurrentItem() + 12, true);把这里的1改成12，就可以。  
这个框架还涉及到很多资源文件，不要忘记复制。

共勉：生活不止有眼前的苟且还有诗和远方。（最早是我以前一位章宝同学跟我说过的话，现在经常想起）

[https_github.com_prolificinteractive_material-calendarview]: https://github.com/prolificinteractive/material-calendarview
[x1]: /images/20220618/89737d83be5147078dac9bb6662892ab.png
[x2]: /images/20220618/c865894a3937441eb907cdb4bb444a24.png
[x3]: /images/20220618/a9a27b515c5d4964ba211edcad16ba41.png
[x4]: /images/20220618/5cd1886354ef40e3bc4dbbe5ad020f47.png