Android原生的CalendarView根本无法满足我们日常开发的需要,在开发吾记APP的过程中,我觉得需要来一款高性能且美观简洁的日历控件,觉得魅族的日历风格十分适合,于是打算撸一款。

github地址:https://github.com/huanghaibin-dev/CalendarView

compile 'com.haibin:calendarview:1.0.2'

先上效果图:

动手之前我们需要分析一下魅族是怎么设计如此高性能的日历的,我们打开开发者选项中的显示布局边界:

好吧,一开始我以为日历界面是ViewPager+RecyclerView的,但是这么一看明显就不是了,如果是RecyclerView,那么我们假设每个月的卡片都有5*7=35个item,每个item根布局是RelativeLayout+3个TextView,我们大概估算一下日历初始化时要加载的控件:

3个ViewPager的item * 35个RecyclerView的Item * 4(每个item的控件数) + 8 (星期栏)= 420+

我的天,这可不能这么干,明显性能大打折扣,我们再来看看月份控件:

好吧,这里看上去就是ViewPager+RecyclerView来做的,每个RecyclerView的item都只是一个控件,里面绘制了文本 ,这里大概就分析清楚了。

我们采取折中的方式,日历界面和月份卡界面均采用ViewPager+RecyclerView的方式,不同的是所有的item我们都采用自定义ViewCanvas绘制的方式来做,这样性能虽然比不上魅族,但速度体验基本差不多,下面先看日历界面的item代码:只需要绘制3个文本即可

public class CellView extends View {

    private int mDay = 20;
private String mLunar;
private String mScheme;
private Paint mDayPaint = new Paint();
private Paint mLunarPaint = new Paint();
private Paint mSchemePaint = new Paint();
private Paint mCirclePaint = new Paint();
private int mRadius;
private int mCirclePadding;
private int mCircleColor; public CellView(Context context) {
this(context, null);
} public CellView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs); mDayPaint.setAntiAlias(true);
mDayPaint.setColor(Color.BLACK);
mDayPaint.setFakeBoldText(true);
mDayPaint.setTextAlign(Paint.Align.CENTER); mLunarPaint.setAntiAlias(true);
mLunarPaint.setColor(Color.GRAY);
mLunarPaint.setTextAlign(Paint.Align.CENTER); mSchemePaint.setAntiAlias(true);
mSchemePaint.setColor(Color.WHITE);
mSchemePaint.setFakeBoldText(true);
mSchemePaint.setTextAlign(Paint.Align.CENTER); mCirclePaint.setAntiAlias(true);
mCirclePaint.setStyle(Paint.Style.FILL); TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.CellView);
mDayPaint.setTextSize(array.getDimensionPixelSize(R.styleable.CellView_cell_day_text_size, 18));
mLunarPaint.setTextSize(array.getDimensionPixelSize(R.styleable.CellView_cell_lunar_text_size, 12));
mRadius = (int) array.getDimension(R.styleable.CellView_cell_scheme_radius, 8);
mSchemePaint.setTextSize(array.getDimensionPixelSize(R.styleable.CellView_cell_scheme_text_size, 6));
mCirclePadding = array.getDimensionPixelSize(R.styleable.CellView_cell_circle_padding, 4);
mCirclePaint.setColor(array.getColor(R.styleable.CellView_cell_circle_color, 0xff16BB7F));
array.recycle();
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int w = (width - getPaddingLeft() - getPaddingRight());
int h = (height - getPaddingTop() - getPaddingBottom()) / 4;
canvas.drawText(String.valueOf(mDay), w / 2, 2 * h + getPaddingTop(), mDayPaint);
canvas.drawText(mLunar, w / 2, 4 * h + getPaddingTop(), mLunarPaint);
if (!TextUtils.isEmpty(mScheme)) {
canvas.drawCircle(w / 2 + mCirclePadding + mDayPaint.getTextSize(), getPaddingTop() + h, mRadius, mCirclePaint);
canvas.drawText(mScheme, w / 2 + mCirclePadding + mDayPaint.getTextSize(), getPaddingTop() + mRadius / 2 + h, mSchemePaint);
}
} /**
* 初始化日历
* @param day 天
* @param lunar 农历
* @param scheme 事件标记
*/
void init(int day, String lunar, String scheme) {
this.mDay = day;
this.mLunar = lunar;
this.mScheme = scheme;
} void setTextColor(int textColor) {
mDayPaint.setColor(textColor);
mLunarPaint.setColor(textColor);
} void setCircleColor(int circleColor) {
mCirclePaint.setColor(circleColor);
invalidate();
}
}

月份卡自定义View

public class MonthView extends View {
private int mDiff;//第一天偏离周日多少天
private int mCount;//总数
private int mLastCount;//最后一行的天数
private int mLine;//多少行
private Paint mPaint = new Paint();
private Paint mSchemePaint = new Paint();
private List<Calendar> mSchemes;
private Calendar mCalendar; public MonthView(Context context) {
this(context, null);
} public MonthView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
mPaint.setAntiAlias(true);
mPaint.setTextAlign(Paint.Align.CENTER);
mSchemePaint.setAntiAlias(true);
mSchemePaint.setTextAlign(Paint.Align.CENTER);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MonthView);
mPaint.setTextSize(array.getDimensionPixelSize(R.styleable.MonthView_month_view_text_size, 12));
mSchemePaint.setTextSize(array.getDimensionPixelSize(R.styleable.MonthView_month_view_text_size, 12));
mPaint.setColor(array.getColor(R.styleable.MonthView_month_view_text_color, Color.BLACK));
mSchemePaint.setColor(array.getColor(R.styleable.MonthView_month_view_remark_color, Color.RED));
array.recycle();
measureLine();
} @Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
int width = getWidth();
int height = getHeight();
int pLeft = getPaddingLeft();
int w = (width - getPaddingLeft() - getPaddingRight()) / 7;
int h = (height - getPaddingTop() - getPaddingBottom()) / 6;
int d = 0;
for (int i = 0; i < mLine; i++) {
if (i == 0) {//第一行
for (int j = 0; j < (7 - mDiff); j++) {
++d;
canvas.drawText(String.valueOf(j + 1), mDiff * w + j * w + pLeft + w / 2, h, isScheme(d) ? mSchemePaint : mPaint);
}
} else if (i == mLine - 1 && mLastCount != 0) {
int first = mCount - mLastCount + 1;
for (int j = 0; j < mLastCount; j++) {
++d;
canvas.drawText(String.valueOf(first), j * w + pLeft + w / 2, (i + 1) * h, isScheme(d) ? mSchemePaint : mPaint);
++first;
}
} else {
int first = i * 7 - mDiff + 1;
for (int j = 0; j < 7; j++) {
++d;
canvas.drawText(String.valueOf(first), j * w + pLeft + w / 2, (i + 1) * h, isScheme(d) ? mSchemePaint : mPaint);
++first;
}
}
}
} /**
* 计算行数
*/
private void measureLine() {
int offset = mCount - (7 - mDiff);
mLine = 1 + (offset % 7 == 0 ? 0 : 1) + offset / 7;
mLastCount = offset % 7;
} /**
* 初始化月份卡
* @param mDiff 偏离天数
* @param mCount 当月总天数
* @param mYear 哪一年
* @param mMonth 哪一月
*/
void init(int mDiff, int mCount, int mYear, int mMonth) {
this.mDiff = mDiff;
this.mCount = mCount;
mCalendar = new Calendar();
mCalendar.setYear(mYear);
mCalendar.setMonth(mMonth);
measureLine();
invalidate();
} void setSchemes(List<Calendar> mSchemes) {
this.mSchemes = mSchemes;
} void setSchemeColor(int schemeColor) {
if (schemeColor != 0)
mSchemePaint.setColor(schemeColor);
if(schemeColor == 0xff30393E)
mSchemePaint.setColor(Color.RED);
} private boolean isScheme(int day) {
if (mSchemes == null || mSchemes.size() == 0)
return false;
mCalendar.setDay(day);
return mSchemes.contains(mCalendar);
}
}

  

其它代码没有什么难度,日历算法是github上找的,更多详情请看仓库地址:https://github.com/huanghaibin-dev/CalendarView

撸一个Android高性能日历控件,高仿魅族的更多相关文章

  1. Android自定义日历控件(继承系统控件实现)

    Android自定义日历控件(继承系统控件实现) 主要步骤 编写布局 继承LinearLayout设置子控件 设置数据 继承TextView实现有圆圈背景的TextView 添加Attribute 添 ...

  2. android 自定义日历控件

    日历控件View: /** * 日历控件 功能:获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouc ...

  3. 在iOS上实现一个简单的日历控件

    http://blog.csdn.net/jasonblog/article/details/21977481 近期需要写一个交互有点DT的日历控件,具体交互细节这里略过不表. 不过再怎么复杂的控件, ...

  4. 分享一个WPF下日历控件(Calendar)的样式

    WPF日历控件的一个样式 WPF自带的日历控件样式可能会比较丑,要修改其样式看起来挺复杂的,实际上很简单,用Blend打开,修改三个模板,基本就能改变全部面貌,也很容易 先上图 样式如下: <S ...

  5. Android图表日历控件组件

    1.图表引擎 - AChartEngine AChartEngine是一款基于Android的图表绘制引擎,它为Android开发人员提供了非常多有用的图表绘制工具类,假设你须要在Android应用中 ...

  6. 一个android的各种控件库

    在这里 https://github.com/Trinea/android-open-project 很多的listview,非常棒

  7. Android自己定义控件实战——仿淘宝商品浏览界面

    转载请声明出处http://blog.csdn.net/zhongkejingwang/article/details/38656929 用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个Scr ...

  8. Android 一个日历控件的实现代码

    转载  2017-05-19   作者:Othershe   我要评论 本篇文章主要介绍了Android 一个日历控件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看 ...

  9. Android自定义控件之日历控件

      标签: android 控件 日历 应用 需求 2015年09月26日 22:21:54 25062人阅读 评论(109) 收藏 举报 分类: Android自定义控件系列(7) 版权声明:转载注 ...

随机推荐

  1. 制作jar文件

    一.制作可运行jar文件 使用java的swing.awt制作了一个简单的界面交互模块.程序打成jar包后,能双击运行,制作过程: 1.eclipse →properties →Export,选择ja ...

  2. 数据库SQL,NoSQL之小感悟

    遇到1000万数据表 最近遇到一个问题,就是单表数据过的存储及查询问题.举个例子:1000万的数据存在一个表中,字段4-5个样子,日常 开发中难免要做过滤.排序.分页.如果把这几个放在一起即要过滤又要 ...

  3. C#操作XML方式

    前言 前一篇XML读取,现在咱们继续XML操作相关 C#中也有三种操作(增.删.改.查)XML文件方法如下: 使用 XmlDocument(DOM模式) 使用 XmlTextWriter(流模式) 使 ...

  4. Android Studio 错误集

    错误列表与解决方案: 1.Android studio Gradle project sync failed Android studio 构建项目出错 Error:Unable to start t ...

  5. wpf中子窗口的几个问题

    今天研究了一下wpf中的窗口,写这篇文章来总结一下今天的收获.(转载请注明出处~) 总所周知,窗口是windows系统中十分重要的一个元素(从名字上就能体现出来),而一个应用程序总是包含很多窗口(主窗 ...

  6. (二) 从Angular1到Angular2需要的预备知识

    1. TypeScript语法与ES6新特性 写惯了jQ的话突然从ES5跳到ES6,又是个变形的ES6(TypeScript),学习成本确实不低.不过笔者也是从ng1直接上手ng2,对与很多新特性的积 ...

  7. webpack入门与解析(一)

    每次学新东西总感觉自己是不是变笨了,看了几个博客,试着试着就跑不下去,无奈只有去看官方文档. webpack是基于node的.先安装最新的node. 1.初始化 安装node后,新建一个目录,比如ht ...

  8. [Mysql] "Too many connections"

    刚刚在项目中遇到mysql数据库连接不够的问题,查了一点资料,记录下.异常信息主要为:Data source rejected establishment of connection, message ...

  9. git链接GitHub命令及基本操作

    Git是一款不错的代码管理工具,下面引用百科的一段话:  Git是用于Linux内核开发的版本控制工具.与CVS.Subversion一类的集中式版本控制工具不同,它采用了分布式版本库的作法,不需要服 ...

  10. centos 安装gcc->联网 问题解决

    本篇部分摘抄至TD_时缔 VMware虚拟机下安装centosmini版本,安装后第一件事就是yum update 但是有错:cannot find a valid baseurl for repo ...