最近，因为需要，利用自定义View实现了一个十分简单的日历，如下图：
虽然日历View十分简单，但是，可以配合一些控件基本上能实现日历最基本的功能。依照惯例，简单的介绍一下思路以及代码实现：
思路
1、利用Calendar类来获取指定月份的天数以及有几个星期
2、获取指定月份的1号是星期几（用来绘制日历的起点）
3、利用int[][]来保存对应日期的位置，用于点击指定位置时获取对应的日期
4、绘制时，先根据有几个星期来确定每行的高度（行数 = 星期数+1）
5、绘制最上层星期栏
6、根据1号是星期几开始依次绘制，注意选中的日期需要添加背景色
代码
attr.xml
<!--日历-->
<declare-styleable name="CalendarView">
<attr name="weekViewBgColor" format="color" />
<attr name="weekTextColor" format="color" />
<attr name="dateViewBgColor" format="color" />
<attr name="dateTextColor" format="color" />
<attr name="dateSelectedBgColor" format="color" />
<attr name="dateTextSelectedColor" format="color" />
<attr name="year" format="integer" />
<attr name="month" format="integer" />
<attr name="selected" format="integer" />
<attr name="textSize" format="dimension"/>
</declare-styleable>这里简单介绍一下各属性的含义：
1、weekViewBgColor ：星期栏背景色
2、weekTextColor ：星期栏文本颜色
3、dateViewBgColor ：日期栏背景色
4、dateTextColor ：日期栏文本色
5、dateSelectedBgColor ：选中日期背景色
6、dateTextSelectedColor ：选择日期文本颜色
7、year ：当前显示的年份
8、month ：当前显示的月份
9、selected ：当前显示的日期
10、textSize ：字体大小
DateSelectedCallBack .java
/**
* Created by ZhangHao on 2017/6/1.
* CalendarView日期选中回调
*/
public interface DateSelectedCallBack {
void getDate(View v, int year, int month, int date);
}CalendarView.java
/**
* Created by ZhangHao on 2017/6/1.
* 自定义日历
*/
public class CalendarView extends View implements View.OnTouchListener {
//年月
private int year;
private int month;
//选中的日期
private int selectedDate;
//字体大小
private int textSize;
//星期背景色
private int weekViewBgColor;
//星期文本颜色
private int weekTextColor;
//日期背景色
private int dateViewBgColor;
//日期文本色
private int dateTextColor;
//选中日期背景色
private int dateSelectedBgColor;
//选择日期文本颜色
private int dateTextSelectedColor;
//画笔
private Paint textPaint;
private Paint viewPaint;
//需要用的矩形
private Rect rect;
//星期数
private String[] weeks;
//计算每行的宽高
private int preWidth;
private int preHeight;
//用于记录对应区域的日期
private int[][] dateMap;
//回调
private DateSelectedCallBack callback;
//记录按下的坐标
private float downX, downY;
public CalendarView(Context context) {
this(context, null);
}
public CalendarView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public CalendarView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initDefault();
TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.CalendarView, defStyleAttr, 0);
int n = a.getIndexCount();
for (int i = 0; i < n; i++) {
int attr = a.getIndex(i);
switch (attr) {
case R.styleable.CalendarView_weekViewBgColor:
//星期栏背景色
weekViewBgColor = a.getColor(attr, Color.parseColor("#104d4f"));
break;
case R.styleable.CalendarView_weekTextColor:
//星期栏文本颜色
weekTextColor = a.getColor(attr, Color.parseColor("#ffffff"));
break;
case R.styleable.CalendarView_dateViewBgColor:
//日期栏背景色
dateViewBgColor = a.getColor(attr, Color.TRANSPARENT);
break;
case R.styleable.CalendarView_dateTextColor:
//日期栏文本色
dateTextColor = a.getColor(attr, Color.parseColor("#104d4f"));
break;
case R.styleable.CalendarView_textSize:
//字体大小
// 默认设置为16，TypeValue也可以把sp转化为px
textSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
break;
case R.styleable.CalendarView_dateSelectedBgColor:
// 选中日期背景色
dateSelectedBgColor = a.getColor(attr, Color.parseColor("#ffffff"));
break;
case R.styleable.CalendarView_dateTextSelectedColor:
// 选择日期文本颜色
dateTextSelectedColor = a.getColor(attr, Color.parseColor("#fc9e19"));
break;
case R.styleable.CalendarView_year:
//年
year = a.getInt(attr, 1970);
break;
case R.styleable.CalendarView_month:
//月
month = a.getInt(attr, 1);
break;
case R.styleable.CalendarView_selected:
//选中的日期
selectedDate = a.getInt(attr, 1);
break;
}
}
//Recycles the TypedArray
a.recycle();
//初始化画笔
textPaint = new Paint();
textPaint.setAntiAlias(true);
textPaint.setTextSize(textSize);
viewPaint = new Paint();
viewPaint.setAntiAlias(true);
viewPaint.setStyle(Paint.Style.FILL);
//初始化矩形
rect = new Rect();
//初始化星期数
weeks = new String[]{"日", "一", "二", "三", "四", "五", "六"};
//初始化dateMap
dateMap = new int[7][7];
//点击事件监听
setOnTouchListener(this);
}
/**
* 设置参数默认值
*/
private void initDefault() {
//默认年月日
year = 1970;
month = 1;
selectedDate = 1;
//默认字体16
textSize = 16;
//星期背景色
weekViewBgColor = Color.parseColor("#104d4f");
//星期文本颜色
weekTextColor = Color.parseColor("#ffffff");
//日期背景色
dateViewBgColor = Color.TRANSPARENT;
//日期文本色
dateTextColor = Color.parseColor("#104d4f");
//选中日期背景色
dateSelectedBgColor = Color.parseColor("#fc9e19");
//选择日期文本颜色
dateTextSelectedColor = Color.parseColor("#ffffff");
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
//计算View的宽高
int width = widthSize, height = heightSize;
if (widthMode == MeasureSpec.EXACTLY) {
//指定大小或者match_parent
width = widthSize;
} else if (widthMode == MeasureSpec.AT_MOST) {
//wrap_content
width = 100;
}
if (heightMode == MeasureSpec.EXACTLY) {
//指定大小或者match_parent
height = heightSize;
} else if (heightMode == MeasureSpec.AT_MOST) {
//wrap_content
height = 100;
}
setMeasuredDimension(width, height);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
/**
* 获取基本信息
*/
//当前月份的天数/星期数
int[] monthInfos = getInfosByYearMonth(year, month);
//当前月1号是星期几
int weekOfFirstDay = getDayOfWeekByDate(year + "-" + month + "-1");
//计算每行的宽高
preWidth = getWidth() / 7;
//这里第一行是星期，所以计算高时要在星期数的基础上加1
preHeight = getHeight() / (monthInfos[1] + 1);
/**
* 先绘制星期栏相关
*/
//背景
rect.set(0, 0, getWidth(), preHeight);
viewPaint.setColor(weekViewBgColor);
canvas.drawRect(rect, viewPaint);
//星期数
textPaint.setColor(weekTextColor);
for (int i = 0; i < 7; i++) {
rect.set(i * preWidth, 0, (i + 1) * preWidth, preHeight);
drawTextOnRect(canvas, rect, weeks[i]);
}
/**
* 绘制日期
*/
//背景
rect.set(0, preHeight, getWidth(), getHeight());
viewPaint.setColor(dateViewBgColor);
canvas.drawRect(rect, viewPaint);
//绘制日期
//行,从第二行开始计算
int row = 2;
//列
int rank = weekOfFirstDay;
for (int i = 1; i <= monthInfos[0]; i++) {
rect.set(rank * preWidth, (row - 1) * preHeight, (rank + 1) * preWidth, row * preHeight);
dateMap[row - 1][rank] = i;
if (i == selectedDate) {
//如果当前是选中的日期
textPaint.setColor(dateTextSelectedColor);
//绘制背景圆
viewPaint.setColor(dateSelectedBgColor);
//圆半径
int radius = preWidth > preHeight ? preHeight / 2 : preWidth / 2;
if (radius > 30) {
//设置圆半径最大值
radius = 30;
}
canvas.drawCircle(rect.left + preWidth / 2, rect.top + preHeight / 2, radius, viewPaint);
} else {
textPaint.setColor(dateTextColor);
}
//绘制日期
drawTextOnRect(canvas, rect, i + "");
//行列重新计算
if (rank + 1 >= weeks.length) {
//如果当前已经是周六
rank = 0;
row++;
} else {
rank++;
}
}
}
/**
* 在指定矩形中间drawText
*
* @param canvas 画布
* @param targetRect 指定矩形
* @param text 需要绘制的Text
*/
private void drawTextOnRect(Canvas canvas, Rect targetRect, String text) {
Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
// 获取baseLine
int baseline = targetRect.top + (targetRect.bottom - targetRect.top - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
// 下面这行是实现水平居中，drawText对应改为传入targetRect.centerX()
textPaint.setTextAlign(Paint.Align.CENTER);
canvas.drawText(text, targetRect.centerX(), baseline, textPaint);
}
/**
* 根据年 月 获取对应的月份 天数以及星期数
*/
private int[] getInfosByYearMonth(int year, int month) {
int[] infos = new int[2];
Calendar a = Calendar.getInstance();
a.set(Calendar.YEAR, year);
a.set(Calendar.MONTH, month - 1);
a.set(Calendar.DATE, 1);
a.roll(Calendar.DATE, -1);
infos[0] = a.get(Calendar.DATE);
infos[1] = a.getActualMaximum(Calendar.WEEK_OF_MONTH);
return infos;
}
/**
* 根据日期 找到对应日期是星期几
*/
private int getDayOfWeekByDate(String date) {
int week = -1;
try {
String dayOfWeek = "-1";
SimpleDateFormat myFormatter = new SimpleDateFormat("yyyy-MM-dd", Locale.getDefault());
Date myDate = myFormatter.parse(date);
SimpleDateFormat formatter = new SimpleDateFormat("E", Locale.getDefault());
dayOfWeek = formatter.format(myDate);
for (int i = 0; i < weeks.length; i++) {
if (weeks[i].equals(dayOfWeek.substring(dayOfWeek.length() - 1))) {
week = i;
break;
}
}
} catch (Exception e) {
e.printStackTrace();
}
return week;
}
public void setTextSize(int textSize) {
this.textSize = textSize;
postInvalidate();
}
public void setWeekViewBgColor(int weekViewBgColor) {
this.weekViewBgColor = weekViewBgColor;
postInvalidate();
}
public void setWeekTextColor(int weekTextColor) {
this.weekTextColor = weekTextColor;
postInvalidate();
}
public void setDateViewBgColor(int dateViewBgColor) {
this.dateViewBgColor = dateViewBgColor;
postInvalidate();
}
public void setDateTextColor(int dateTextColor) {
this.dateTextColor = dateTextColor;
postInvalidate();
}
public void setDateSelectedBgColor(int dateSelectedBgColor) {
this.dateSelectedBgColor = dateSelectedBgColor;
postInvalidate();
}
public void setDateTextSelectedColor(int dateTextSelectedColor) {
this.dateTextSelectedColor = dateTextSelectedColor;
postInvalidate();
}
public void setDateSelectedCallBack(DateSelectedCallBack callback) {
this.callback = callback;
}
public int getYear() {
return year;
}
public int getMonth() {
return month;
}
public int getSelectedDate() {
return selectedDate;
}
/**
* 设置日期，不需要修改可以传0或者负数
*
* @param year 年
* @param month 月
* @param date 日
*/
public void setDate(int year, int month, int date) {
if (year >= 1970 && year <= 3000) {
this.year = year;
}
if (month > 0 && month < 13) {
this.month = month;
}
if (date > 0 && date < 31) {
this.selectedDate = date;
}
postInvalidate();
}
@Override
public boolean onTouch(View v, MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
//仅监听按下的事件
//记录坐标点
downX = event.getX();
downY = event.getY();
break;
case MotionEvent.ACTION_UP:
//监听抬起事件
float moveX = event.getX() - downX;
float moveY = event.getY() - downY;
if (Math.abs(moveX) <= 10 && Math.abs(moveY) <= 10) {
//按下抬起x,y距离都不超过10时，认为是按下
if (preHeight > 0 && preWidth > 0) {
int rank = (int) (downX / preWidth);
int row = (int) (downY / preHeight);
if (dateMap[row][rank] > 0) {
//如果选中的是日期
selectedDate = dateMap[row][rank];
postInvalidate();
//回调
if (callback != null) {
callback.getDate(v, year, month, selectedDate);
}
}
}
} else if (moveX < -10) {
//向左滑动
if (month == 12) {
setDate(year + 1, 1, -1);
} else {
setDate(-1, month + 1, -1);
}
//回调
if (callback != null) {
callback.getDate(v, year, month, selectedDate);
}
} else if (moveX > -10) {
//向右滑动
if (month == 1) {
setDate(year - 1, 12, -1);
} else {
setDate(-1, month - 1, -1);
}
//回调
if (callback != null) {
callback.getDate(v, year, month, selectedDate);
}
}
break;
}
return true;
}
}这里的代码依靠注释应该都能看懂，稍微解释一下一下几点：
1、计算行数以及行高时，要加上星期栏，所以总共有（星期数+1）行
2、因为我这里星期排序是从周日到周六，所以每次绘制完是周六的日期之后就要另起一行重新绘制。
3、重写onTouch，我是通过按下和抬起的坐标差来判断是按下操作还是滑动操作：按下抬起x,y距离都不超过10时，认为是按下，
否则就是滑动。按下是选中日期操作，滑动则是更换月份
Demo
简单的放一下用来测试的activity以及对应的布局文件
CalendarViewActivity.java
public class CalendarViewActivity extends AppCompatActivity implements DateSelectedCallBack {
@BindView(R.id.my_calendar_view)
CalendarView myCalendarView;
@BindView(R.id.year_input)
EditText yearInput;
@BindView(R.id.month_input)
EditText monthInput;
@BindView(R.id.show_result)
TextView showResult;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_calendar_view);
ButterKnife.bind(this);
initCalendarView();
}
private void initCalendarView() {
myCalendarView.setDateSelectedCallBack(this);
}
@Override
public void getDate(View v, int year, int month, int date) {
showResult.setText(year + " 年 " + month + " 月 " + date + " 日 ");
}
public void onClick(View view) {
switch (view.getId()) {
case R.id.update_calender:
String yearStr = yearInput.getText().toString().trim();
String monStr = monthInput.getText().toString().trim();
if (!yearStr.equals("") && !monStr.equals("")) {
int year = Integer.parseInt(yearStr);
int month = Integer.parseInt(monStr);
myCalendarView.setDate(year, month, -1);
} else {
Toast.makeText(this, "非法输入", Toast.LENGTH_SHORT).show();
}
break;
}
}
}activity_calendar_view.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.sona.udv.calendarViews.CalendarView
android:id="@+id/my_calendar_view"
android:layout_width="500dp"
android:layout_height="300dp"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp" />
<!--输入日期-->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="20dp"
android:orientation="horizontal">
<EditText
android:id="@+id/year_input"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginStart="50dp"
android:inputType="number" />
<TextView
android:layout_width="20dp"
android:layout_height="50dp"
android:layout_marginStart="50dp"
android:gravity="center"
android:text="年" />
<EditText
android:id="@+id/month_input"
android:layout_width="100dp"
android:layout_height="50dp"
android:layout_marginStart="10dp"
android:inputType="number" />
<TextView
android:layout_width="20dp"
android:layout_height="50dp"
android:layout_marginStart="50dp"
android:gravity="center"
android:text="月" />
<Button
android:id="@+id/update_calender"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:onClick="onClick"
android:text="设置"
android:textSize="16sp" />
</LinearLayout>
<TextView
android:id="@+id/show_result"
android:layout_width="match_parent"
android:layout_height="100dp"
android:layout_marginTop="50dp"
android:gravity="center" />
</LinearLayout>
</RelativeLayout>这里的demo也十分简单，就是选中CalendarView的日期后，会对应的显示在下方的textView中。也可以在EditText中输入指定的年月，切换CalendarView的显示。
结语
1.因为本人文字功底有限，所以介绍性的文字很少，但是基本上每句代码都加了注释，理解起来应该不难，如果有任何问题，可以留言。
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
