GitHub开源库CalendarView的使用
2018-01-20 本文已影响912人
AR7_
学习并记录一下,使用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();
}
}