GitHub开源库CalendarView的使用

作者: AR7_ | 来源:发表于2018-01-20 16:42 被阅读912次

学习并记录一下，使用GitHub上面的日历控件开源库CalendarView，地址：https://github.com/huanghaibin-dev/CalendarView

注意点：

1、使用样式自定义View，需从源码中复制过来使用，并将路径改为自己的包名。
2、实现默认日历伸缩状态，只需要在布局中的CalendarLayout里设置： app:default_status="shrink"即可，如果不设置，默认日历展开状态。
3、实现伸缩状态的方法，只需在布局中的CalendarLayout里设置 app:calendar_content_view_id="@+id/你需要滑动部分的id"，并且将需要滑动的部分设置在CalendarLayout控件里面即可，比如：

 <com.haibin.calendarview.CalendarLayout
        android:id="@+id/calendarLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        app:calendar_content_view_id="@+id/linearView"
        app:default_status="shrink">

        <com.haibin.calendarview.CalendarView
            android:id="@+id/calendarView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <LinearLayout
            android:id="@+id/linearView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
    
           //你需要滑动的内容
           ......
    

        </LinearLayout>
    </com.haibin.calendarview.CalendarLayout>

效果图:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.example.fss.calenderview.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <RelativeLayout
            android:id="@+id/rl_tool"
            android:layout_width="match_parent"
            android:layout_height="52dp"
            android:background="@color/colorPrimary">
            <TextView
                android:id="@+id/tv_month_day"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:gravity="center_vertical"
                android:paddingLeft="16dp"
                android:text="1月20日"
                android:textColor="#ffff"
                android:textSize="26sp"
                android:textStyle="bold"
                tools:ignore="RtlSymmetry" />

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_toRightOf="@+id/tv_month_day"
                android:orientation="vertical"
                android:paddingBottom="12dp"
                android:paddingLeft="6dp"
                android:paddingRight="6dp"
                android:paddingTop="12dp"
                tools:ignore="RelativeOverlap">

                <TextView
                    android:id="@+id/tv_year"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="2018"
                    android:textColor="#ffff"
                    android:textSize="10sp" />

                <TextView
                    android:id="@+id/tv_lunar"
                    android:layout_width="wrap_content"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="初四"
                    android:textColor="#ffff"
                    android:textSize="10sp"
                    tools:ignore="SmallSp" />
            </LinearLayout>

            <FrameLayout
                android:id="@+id/fl_current"
                android:layout_width="32dp"
                android:layout_height="32dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="12dp"
                android:background="@drawable/bg_ripple">

                <ImageView
                    android:id="@+id/ib_calendar"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:contentDescription="@string/app_name"
                    android:scaleType="centerInside"
                    android:src="@mipmap/menu_action_calendar_mvp"
                    android:tint="#FFFFFF" />

                <TextView
                    android:id="@+id/tv_current_day"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginTop="2dp"
                    android:gravity="center"
                    android:text="13"
                    android:textColor="#FFFFFF"
                    android:textSize="12sp" />
            </FrameLayout>
        </RelativeLayout>


        <!--app:default_status="shrink" 设置之后，默认收缩状态-->
        <com.haibin.calendarview.CalendarLayout
            android:id="@+id/calendarLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#fff"
            android:orientation="vertical"
            app:calendar_content_view_id="@+id/linearView">

            <com.haibin.calendarview.CalendarView

                android:id="@+id/calendarView"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:calendar_card_view="你的包名.ColorfulMonthView"
                app:day_text_size="18dp"
                app:selected_text_color="@color/colorPrimaryDark"
                app:week_view="你的包名.ColorfulWeekView"
                app:year_view_day_text_color="#000000"
                app:year_view_month_text_color="@color/colorPrimaryDark" />

            <LinearLayout
                android:id="@+id/linearView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@color/content_background"
                android:clickable="true"
                android:orientation="vertical"
                tools:ignore="KeyboardInaccessibleWidget">

                <LinearLayout
                    android:id="@+id/ll_flyme"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="36dp"
                        android:layout_height="39dp"
                        android:layout_margin="16dp"
                        android:contentDescription="flyme"
                        android:src="@mipmap/ic_flyme_logo" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="16dp"
                        android:layout_marginTop="16dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="317dp"
                            android:layout_height="wrap_content"
                            android:text="FLYME"
                            android:textColor="#333333"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="301dp"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="点击查看魅族flyme风格的日历控件"
                            android:textColor="#666666"
                            android:textSize="14sp" />
                    </LinearLayout>
                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/line_color" />

                <LinearLayout
                    android:id="@+id/ll_simple"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="39dp"
                        android:layout_height="39dp"
                        android:layout_margin="16dp"
                        android:contentDescription="flyme"
                        android:src="@mipmap/ic_simple_logo" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="16dp"
                        android:layout_marginTop="16dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="简单日历风格"
                            android:textColor="#333333"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="点击查看简单没有农历风格的日历"
                            android:textColor="#666666"
                            android:textSize="14sp" />
                    </LinearLayout>
                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/line_color" />


                <LinearLayout
                    android:id="@+id/ll_index"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="39dp"
                        android:layout_height="39dp"
                        android:layout_margin="16dp"
                        android:contentDescription="flyme"
                        android:src="@mipmap/ic_index_logo" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="16dp"
                        android:layout_marginTop="16dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="下标风格"
                            android:textColor="#333333"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="点击查看下标风格的日历控件"
                            android:textColor="#666666"
                            android:textSize="14sp" />
                    </LinearLayout>
                </LinearLayout>

                <View
                    android:layout_width="match_parent"
                    android:layout_height="1px"
                    android:background="@color/line_color" />

                <LinearLayout
                    android:id="@+id/ll_colorful"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <ImageView
                        android:layout_width="39dp"
                        android:layout_height="39dp"
                        android:layout_margin="16dp"
                        android:contentDescription="flyme"
                        android:src="@mipmap/ic_colorful_logo" />

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="16dp"
                        android:layout_marginTop="16dp"
                        android:orientation="vertical">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:text="多彩风格"
                            android:textColor="#333333"
                            android:textSize="18sp"
                            android:textStyle="bold" />

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="wrap_content"
                            android:layout_marginTop="4dp"
                            android:text="点击查看多彩风格风格的日历控件"
                            android:textColor="#666666"
                            android:textSize="14sp" />
                    </LinearLayout>
                </LinearLayout>
            </LinearLayout>
        </com.haibin.calendarview.CalendarLayout>

    </LinearLayout>
</LinearLayout>

ColorfulMonthView


package com.example.fss.calenderview;

import android.content.Context;
import android.graphics.Canvas;

import com.haibin.calendarview.Calendar;
import com.haibin.calendarview.MonthView;

/**
 * 高仿魅族日历布局
 * Created by huanghaibin on 2017/11/15.
 */

public class ColorfulMonthView extends MonthView {

    private int mRadius;

    public ColorfulMonthView(Context context) {
        super(context);
    }

    @Override
    protected void onPreviewHook() {
        mRadius = Math.min(mItemWidth, mItemHeight) / 5 * 2;
    }

    @Override
    protected void onDrawSelected(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme) {
        int cx = x + mItemWidth / 2;
        int cy = y + mItemHeight / 2;
        canvas.drawCircle(cx, cy, mRadius, mSelectedPaint);
    }

    @Override
    protected void onDrawScheme(Canvas canvas, Calendar calendar, int x, int y) {
        int cx = x + mItemWidth / 2;
        int cy = y + mItemHeight / 2;
        canvas.drawCircle(cx, cy, mRadius, mSchemePaint);
    }

    @Override
    protected void onDrawText(Canvas canvas, Calendar calendar, int x, int y, boolean hasScheme, boolean isSelected) {
        int cx = x + mItemWidth / 2;
        int top = y - mItemHeight / 8;
        if (hasScheme) {
            canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top,
                    calendar.isCurrentDay() ? mCurDayTextPaint :
                            calendar.isCurrentMonth() ? mSchemeTextPaint : mOtherMonthTextPaint);

            canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + y + mItemHeight / 10, mCurMonthLunarTextPaint);
        } else {
            canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top,
                    calendar.isCurrentDay() ? mCurDayTextPaint :
                            calendar.isCurrentMonth() ? mCurMonthTextPaint : mOtherMonthTextPaint);
            canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + y + mItemHeight / 10, mCurMonthLunarTextPaint);
        }
    }
}

ColorfulWeekView

package com.example.fss.calenderview;

import android.content.Context;
import android.graphics.Canvas;

import com.haibin.calendarview.Calendar;
import com.haibin.calendarview.WeekView;

/**
 * 多彩周视图
 * Created by huanghaibin on 2017/11/29.
 */

public class ColorfulWeekView extends WeekView {

    private int mRadius;

    public ColorfulWeekView(Context context) {
        super(context);
    }

    @Override
    protected void onPreviewHook() {
        mRadius = Math.min(mItemWidth, mItemHeight) / 5 * 2;
    }

    @Override
    protected void onDrawSelected(Canvas canvas, Calendar calendar, int x, boolean hasScheme) {
        int cx = x + mItemWidth / 2;
        int cy =  mItemHeight / 2;
        canvas.drawCircle(cx, cy, mRadius, mSelectedPaint);
    }

    @Override
    protected void onDrawScheme(Canvas canvas, Calendar calendar, int x) {
        int cx = x + mItemWidth / 2;
        int cy =  mItemHeight / 2;
        canvas.drawCircle(cx, cy, mRadius, mSchemePaint);
    }

    @Override
    protected void onDrawText(Canvas canvas, Calendar calendar, int x, boolean hasScheme, boolean isSelected) {
        int cx = x + mItemWidth / 2;
        int top =  - mItemHeight / 8;
        if (hasScheme) {
            canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top,
                    calendar.isCurrentDay() ? mCurDayTextPaint :
                            calendar.isCurrentMonth() ? mSchemeTextPaint : mSchemeTextPaint);

            canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + mItemHeight / 10, mCurMonthLunarTextPaint);
        } else {
            canvas.drawText(String.valueOf(calendar.getDay()), cx, mTextBaseLine + top,
                    calendar.isCurrentDay() ? mCurDayTextPaint :
                            calendar.isCurrentMonth() ? mCurMonthTextPaint : mCurMonthTextPaint);
            canvas.drawText(calendar.getLunar(), cx, mTextBaseLine + mItemHeight / 10, mCurMonthLunarTextPaint);
        }
    }
}

MainActivity

package com.example.fss.calenderview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.haibin.calendarview.Calendar;
import com.haibin.calendarview.CalendarLayout;
import com.haibin.calendarview.CalendarView;

public class MainActivity extends AppCompatActivity implements CalendarView.OnYearChangeListener, CalendarView.OnDateSelectedListener {



    TextView mTextMonthDay;

    TextView mTextYear;

    TextView mTextLunar;

    TextView mTextCurrentDay;

    CalendarView mCalendarView;

    RelativeLayout mRelativeTool;

    private int mYear;
    private CalendarLayout mCalendarLayout;

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

    }

    private void initView() {
        mTextMonthDay = (TextView) findViewById(R.id.tv_month_day);
        mTextYear = (TextView) findViewById(R.id.tv_year);
        mTextLunar = (TextView) findViewById(R.id.tv_lunar);
        mRelativeTool = (RelativeLayout) findViewById(R.id.rl_tool);
        mCalendarView = (CalendarView) findViewById(R.id.calendarView);
        mTextCurrentDay = (TextView) findViewById(R.id.tv_current_day);
        mTextMonthDay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (!mCalendarLayout.isExpand()) {
                    mCalendarView.showSelectLayout(mYear);
                    return;
                }
                mCalendarView.showSelectLayout(mYear);
                mTextLunar.setVisibility(View.GONE);
                mTextYear.setVisibility(View.GONE);
                mTextMonthDay.setText(String.valueOf(mYear));
            }
        });
        findViewById(R.id.fl_current).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mCalendarView.scrollToCurrent();
            }
        });

        mCalendarLayout = (CalendarLayout) findViewById(R.id.calendarLayout);
        mCalendarView.setOnYearChangeListener(this);
        mCalendarView.setOnDateSelectedListener(this);
        mTextYear.setText(String.valueOf(mCalendarView.getCurYear()));
        mYear = mCalendarView.getCurYear();
        mTextMonthDay.setText(mCalendarView.getCurMonth() + "月" + mCalendarView.getCurDay() + "日");
        mTextLunar.setText("今日");
        mTextCurrentDay.setText(String.valueOf(mCalendarView.getCurDay()));
    }

    @Override
    public void onYearChange(int year) {
        mTextMonthDay.setText(String.valueOf(year));
    }

    @Override
    public void onPointerCaptureChanged(boolean hasCapture) {

    }

    @Override
    public void onDateSelected(Calendar calendar, boolean isClick) {
        mTextLunar.setVisibility(View.VISIBLE);
        mTextYear.setVisibility(View.VISIBLE);
        mTextMonthDay.setText(calendar.getMonth() + "月" + calendar.getDay() + "日");
        mTextYear.setText(String.valueOf(calendar.getYear()));
        mTextLunar.setText(calendar.getLunar());
        mYear = calendar.getYear();
    }
}

GitHub开源库CalendarView的使用

注意点：

效果图:

activity_main.xml

ColorfulMonthView

ColorfulWeekView

MainActivity

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Android轮子