MaterialCalendarDialog【Material樣式的日歷對話框】

版權聲明：本文為HaiyuKing原創文章，轉載請注明出處！

前言

Material樣式的日歷對話框

前提條件：Activity界面必須繼承FragmentActivity或者其子類（比如AppCompatActivity）

效果圖

 

代碼分析

對話框（MaterialCalendarDialog）： extends DialogFragment

日歷控件：com.prolificinteractive.materialcalendarview.MaterialCalendarView

mCalendarView.setSelectedDate(selectedDate);//設置選中的日期

mCalendarView.setCurrentDate(selectedDate);//實現定位到選中日期的當月

MySelectorBgDecorator —— 自定義選中狀態下的背景

SelectedDayDecorator —— 自定義選中狀態下的文本（加粗、加大字號）

TodayDecorator —— 自定義當天的文本顏色

//日歷控件的點擊事件
        mCalendarView.setOnDateChangedListener(new OnDateSelectedListener() {
            @Override
            public void onDateSelected(@NonNull MaterialCalendarView widget, @NonNull CalendarDay date, boolean selected) {
                selectedDate = date.getDate();
                parseDateToYearMonthDayWeek(selectedDate);

                //刷新選中的狀態
 selectedDayDecorator.setDate(selectedDate); widget.invalidateDecorators();
            }
        });

使用步驟

一、項目組織結構圖

注意事項：

1、導入類文件后需要change包名以及重新import R文件路徑

2、Values目錄下的文件（strings.xml、dimens.xml、colors.xml等），如果項目中存在，則復制里面的內容，不要整個覆蓋

二、導入步驟

在APP中的bundle.gradle文件中添加以下代碼，引入MaterialCalendarView控件

apply plugin: 'com.android.application'

android {
    compileSdkVersion 25
    buildToolsVersion "25.0.3"
    defaultConfig {
        applicationId "com.why.project.materialcalendarviewdialogdemo"
        minSdkVersion 15
        targetSdkVersion 25
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {
        exclude group: 'com.android.support', module: 'support-annotations'
    })
    compile 'com.android.support:appcompat-v7:25.3.1'
    testCompile 'junit:junit:4.12'

    //material-calendarview日歷控件 compile 'com.prolificinteractive:material-calendarview:1.4.3'

}

將materialcalendar包復制到項目中【注意，需要手動打開Java文件重新import R文件】

將material_calendar_decorator_selected_bg.xml文件復制到res/drawable目錄中

將dialog_material_calendar.xml文件復制到res/layout目錄中

 

在colors.xml文件中添加以下代碼

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>


    <!-- ==================Material樣式日歷對話框================== -->
    <!-- 選中日期的背景顏色值 -->
    <color name="materialcalendar_selected_color">#1A78EC</color>
    <!-- 當天日期的邊框的背景顏色值 -->
    <color name="materialcalendar_today_border_color">#FF4081</color>

</resources>

在dimens.xml文件中添加以下代碼

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>

    <!-- ==================Material樣式日歷對話框================== -->
    <!-- 對話框整體的外邊距（左右） -->
    <dimen name="material_calendar_dialog_margin">30dp</dimen>
    <!-- 對話框控件的內邊距（上下） -->
    <dimen name="material_calendar_dialog_paddingTB">15dp</dimen>
    <!-- 對話框控件的內邊距（左右） -->
    <dimen name="material_calendar_dialog_paddingLR">20dp</dimen>
    <!-- 對話框控件的年份文本大小 -->
    <dimen name="material_calendar_dialog_year_textsize">18sp</dimen>
    <!-- 對話框控件的月日星期文本大小 -->
    <dimen name="material_calendar_dialog_monthday_textsize">26sp</dimen>

</resources>

 至此，MaterialCalendarDialog【Material樣式的日歷對話框】就可以使用了。

三、使用方法

建議搭配工具類——DateTimeHelper【日期類型與字符串互轉以及日期對比相關操作】

package com.why.project.materialcalendarviewdialogdemo;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.text.TextUtils;
import android.view.View;
import android.widget.EditText;

import com.why.project.materialcalendarviewdialogdemo.dialog.materialcalendar.MaterialCalendarDialog;
import com.why.project.materialcalendarviewdialogdemo.utils.DateTimeHelper;

import java.text.ParseException;
import java.util.Calendar;
import java.util.Date;

/**
 * Create By HaiyuKing
 * Used 基於開源庫material-calendarview 材料設計日歷控件《https://github.com/prolificinteractive/material-calendarview》的使用Demo
 * 注意：建議搭配工具類——DateTimeHelper【日期類型與字符串互轉以及日期對比相關操作】
 */
public class MainActivity extends AppCompatActivity {

    private static final String TAG = "MainActivity";

    private EditText edt_starttime;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        initViews();
        initDatas();
        initEvents();
    }

    private void initViews() {
        edt_starttime = (EditText) findViewById(R.id.edt_starttime);

    }

    private void initDatas() {
    }

    private void initEvents() {

        //開始日期輸入框的點擊事件監聽
        edt_starttime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Date todayDate = Calendar.getInstance().getTime();
                if(! TextUtils.isEmpty(edt_starttime.getText().toString())){
                    try {
                        todayDate = DateTimeHelper.parseStringToDate(edt_starttime.getText().toString());
                    } catch (ParseException e) {
                        e.printStackTrace();
                    }
                }

                //顯示日歷對話框
                MaterialCalendarDialog calendarDialog = MaterialCalendarDialog.getInstance(MainActivity.this,todayDate); calendarDialog.setOnOkClickLitener(new MaterialCalendarDialog.OnOkClickLitener() { @Override public void onOkClick(Date date) { edt_starttime.setText(DateTimeHelper.formatToString(date,"yyyy-MM-dd")); } }); calendarDialog.show(getSupportFragmentManager(),TAG);
            }
        });
    }
}

混淆配置

無

參考資料

https://github.com/prolificinteractive/material-calendarview

最近開發的一款應用，我選擇了哪些框架 & 第三方庫

項目demo下載地址

https://github.com/haiyuKing/MaterialCalendarviewDialogDemo