Android UI-自定义日历控件

Android UI-自定义日历控件

博客之星，投票地址点击打开链接

本篇博客笔者给大家分享一个日历控件，这里有个需求：要求显示当前月的日期，左右可以切换月份来查看日期。

我们想一想会如何去实现这样的一个控件，有开源的，但可能不太满足我们的特定的需求，这里笔者自定义了一个，读者可以根据自己的需求来修改代码。下面来说一下实现的思路：

首先我们要显示当前月份，自然我们要计算出当前的日期，并且把每一天对应到具体的星期，我们会有以下效果：

我们先想一下这样的效果用什么控件可以实现？很自然可以想到用网格视图GridView，但这里笔者使用的不是GridView, 因为使用GridView可能无法实现那个红色的圈圈，所以笔者决定自定义View，通过绘制来达到这样的效果。

这里我们定于一个日历卡，每一个月代表一个日历卡，我们通过计算每个月的日期，然后根据计算出来的位置绘制我们的数字。

我们知道，一个星期有七天，分别为星期日、星期一、星期二、星期三、星期四、星期五、星期六，这里有7列，一个月至少有28天，最多31天，所以至少应该有6行。组成6*7的方格图。

直接上代码：

package com.xiaowu.calendar;import android.content.Context;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.util.AttributeSet;import android.view.MotionEvent;import android.view.View;import android.view.ViewConfiguration;/*** 自定义日历卡* * @author wuwenjie* */public class CalendarCard extends View {private static final int TOTAL_COL = 7; // 7列private static final int TOTAL_ROW = 6; // 6行private Paint mCirclePaint; // 绘制圆形的画笔private Paint mTextPaint; // 绘制文本的画笔private int mViewWidth; // 视图的宽度private int mViewHeight; // 视图的高度private int mCellSpace; // 单元格间距private Row rows[] = new Row[TOTAL_ROW]; // 行数组，每个元素代表一行private static CustomDate mShowDate; // 自定义的日期，包括year,month,dayprivate OnCellClickListener mCellClickListener; // 单元格点击回调事件private int touchSlop; //private boolean callBackCellSpace;private Cell mClickCell;private float mDownX;private float mDownY;/*** 单元格点击的回调接口* * @author wuwenjie* */public interface OnCellClickListener {void clickDate(CustomDate date); // 回调点击的日期void changeDate(CustomDate date); // 回调滑动ViewPager改变的日期}public CalendarCard(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init(context);}public CalendarCard(Context context, AttributeSet attrs) {super(context, attrs);init(context);}public CalendarCard(Context context) {super(context);init(context);}public CalendarCard(Context context, OnCellClickListener listener) {super(context);this.mCellClickListener = listener;init(context);}private void init(Context context) {mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);mCirclePaint.setStyle(Paint.Style.FILL);mCirclePaint.setColor(Color.parseColor("#F24949")); // 红色圆形touchSlop = ViewConfiguration.get(context).getScaledTouchSlop();initDate();}private void initDate() {mShowDate = new CustomDate();fillDate();//}private void fillDate() {int monthDay = DateUtil.getCurrentMonthDay(); // 今天int lastMonthDays = DateUtil.getMonthDays(mShowDate.year,mShowDate.month - 1); // 上个月的天数int currentMonthDays = DateUtil.getMonthDays(mShowDate.year,mShowDate.month); // 当前月的天数int firstDayWeek = DateUtil.getWeekDayFromDate(mShowDate.year,mShowDate.month);boolean isCurrentMonth = false;if (DateUtil.isCurrentMonth(mShowDate)) {isCurrentMonth = true;}int day = 0;for (int j = 0; j < TOTAL_ROW; j++) {rows[j] = new Row(j);for (int i = 0; i < TOTAL_COL; i++) {int position = i + j * TOTAL_COL; // 单元格位置// 这个月的if (position >= firstDayWeek&& position < firstDayWeek + currentMonthDays) {day++;rows[j].cells[i] = new Cell(CustomDate.modifiDayForObject(mShowDate, day), State.CURRENT_MONTH_DAY, i, j);// 今天if (isCurrentMonth && day == monthDay ) {CustomDate date = CustomDate.modifiDayForObject(mShowDate, day);rows[j].cells[i] = new Cell(date, State.TODAY, i, j);}if (isCurrentMonth && day > monthDay) { // 如果比这个月的今天要大，表示还没到rows[j].cells[i] = new Cell(CustomDate.modifiDayForObject(mShowDate, day),State.UNREACH_DAY, i, j);}// 过去一个月} else if (position < firstDayWeek) {rows[j].cells[i] = new Cell(new CustomDate(mShowDate.year,mShowDate.month - 1, lastMonthDays- (firstDayWeek - position - 1)),State.PAST_MONTH_DAY, i, j);// 下个月} else if (position >= firstDayWeek + currentMonthDays) {rows[j].cells[i] = new Cell((new CustomDate(mShowDate.year,mShowDate.month + 1, position - firstDayWeek- currentMonthDays + 1)),State.NEXT_MONTH_DAY, i, j);}}}mCellClickListener.changeDate(mShowDate);}@Overrideprotected void onDraw(Canvas canvas) {super.onDraw(canvas);for (int i = 0; i < TOTAL_ROW; i++) {if (rows[i] != null) {rows[i].drawCells(canvas);}}}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);mViewWidth = w;mViewHeight = h;mCellSpace = Math.min(mViewHeight / TOTAL_ROW, mViewWidth / TOTAL_COL);if (!callBackCellSpace) {callBackCellSpace = true;}mTextPaint.setTextSize(mCellSpace / 3);}@Overridepublic boolean onTouchEvent(MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownX = event.getX();mDownY = event.getY();break;case MotionEvent.ACTION_UP:float disX = event.getX() - mDownX;float disY = event.getY() - mDownY;if (Math.abs(disX) < touchSlop && Math.abs(disY) < touchSlop) {int col = (int) (mDownX / mCellSpace);int row = (int) (mDownY / mCellSpace);measureClickCell(col, row);}break;default:break;}return true;}/*** 计算点击的单元格* @param col* @param row*/private void measureClickCell(int col, int row) {if (col >= TOTAL_COL || row >= TOTAL_ROW)return;if (mClickCell != null) {rows[mClickCell.j].cells[mClickCell.i] = mClickCell;}if (rows[row] != null) {mClickCell = new Cell(rows[row].cells[col].date,rows[row].cells[col].state, rows[row].cells[col].i,rows[row].cells[col].j);CustomDate date = rows[row].cells[col].date;date.week = col;mCellClickListener.clickDate(date);// 刷新界面update();}}/*** 组元素* * @author wuwenjie* */class Row {public int j;Row(int j) {this.j = j;}public Cell[] cells = new Cell[TOTAL_COL];// 绘制单元格public void drawCells(Canvas canvas) {for (int i = 0; i < cells.length; i++) {if (cells[i] != null) {cells[i].drawSelf(canvas);}}}}/*** 单元格元素* * @author wuwenjie* */class Cell {public CustomDate date;public State state;public int i;public int j;public Cell(CustomDate date, State state, int i, int j) {super();this.date = date;this.state = state;this.i = i;this.j = j;}public void drawSelf(Canvas canvas) {switch (state) {case TODAY: // 今天mTextPaint.setColor(Color.parseColor("#fffffe"));canvas.drawCircle((float) (mCellSpace * (i + 0.5)),(float) ((j + 0.5) * mCellSpace), mCellSpace / 3,mCirclePaint);break;case CURRENT_MONTH_DAY: // 当前月日期mTextPaint.setColor(Color.BLACK);break;case PAST_MONTH_DAY: // 过去一个月case NEXT_MONTH_DAY: // 下一个月mTextPaint.setColor(Color.parseColor("#fffffe"));break;case UNREACH_DAY: // 还未到的天mTextPaint.setColor(Color.GRAY);break;default:break;}// 绘制文字String content = date.day + "";canvas.drawText(content,(float) ((i + 0.5) * mCellSpace - mTextPaint.measureText(content) / 2), (float) ((j + 0.7)* mCellSpace - mTextPaint.measureText(content, 0, 1) / 2), mTextPaint);}}/*** * @author wuwenjie 单元格的状态 当前月日期，过去的月的日期，下个月的日期*/enum State {TODAY,CURRENT_MONTH_DAY, PAST_MONTH_DAY, NEXT_MONTH_DAY, UNREACH_DAY;}// 从左往右划，上一个月public void leftSlide() {if (mShowDate.month == 1) {mShowDate.month = 12;mShowDate.year -= 1;} else {mShowDate.month -= 1;}update();}// 从右往左划，下一个月public void rightSlide() {if (mShowDate.month == 12) {mShowDate.month = 1;mShowDate.year += 1;} else {mShowDate.month += 1;}update();}public void update() {fillDate();invalidate();}}

/CustomCalendarView/src/com/xiaowu/calendar/DateUtil.java

package com.xiaowu.calendar;import android.annotation.SuppressLint;import android.util.Log;import java.text.ParseException;import java.text.SimpleDateFormat;import java.util.Calendar;import java.util.Date;import java.util.GregorianCalendar;public class DateUtil {public static String[] weekName = { "周日", "周一", "周二", "周三", "周四", "周五","周六" };public static int getMonthDays(int year, int month) {if (month > 12) {month = 1;year += 1;} else if (month < 1) {month = 12;year -= 1;}int[] arr = { 31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31 };int days = 0;if ((year % 4 == 0 && year % 100 != 0) || year % 400 == 0) {arr[1] = 29; // 闰年2月29天}try {days = arr[month - 1];} catch (Exception e) {e.getStackTrace();}return days;}public static int getYear() {return Calendar.getInstance().get(Calendar.YEAR);}public static int getMonth() {return Calendar.getInstance().get(Calendar.MONTH) + 1;}public static int getCurrentMonthDay() {return Calendar.getInstance().get(Calendar.DAY_OF_MONTH);}public static int getWeekDay() {return Calendar.getInstance().get(Calendar.DAY_OF_WEEK);}public static int getHour() {return Calendar.getInstance().get(Calendar.HOUR_OF_DAY);}public static int getMinute() {return Calendar.getInstance().get(Calendar.MINUTE);}public static CustomDate getNextSunday() {Calendar c = Calendar.getInstance();c.add(Calendar.DATE, 7 - getWeekDay()+1);CustomDate date = new CustomDate(c.get(Calendar.YEAR),c.get(Calendar.MONTH)+1, c.get(Calendar.DAY_OF_MONTH));return date;}public static int[] getWeekSunday(int year, int month, int day, int pervious) {int[] time = new int[3];Calendar c = Calendar.getInstance();c.set(Calendar.YEAR, year);c.set(Calendar.MONTH, month);c.set(Calendar.DAY_OF_MONTH, day);c.add(Calendar.DAY_OF_MONTH, pervious);time[0] = c.get(Calendar.YEAR);time[1] = c.get(Calendar.MONTH )+1;time[2] = c.get(Calendar.DAY_OF_MONTH);return time;}public static int getWeekDayFromDate(int year, int month) {Calendar cal = Calendar.getInstance();cal.setTime(getDateFromString(year, month));int week_index = cal.get(Calendar.DAY_OF_WEEK) - 1;if (week_index < 0) {week_index = 0;}return week_index;}@SuppressLint("SimpleDateFormat")public static Date getDateFromString(int year, int month) {String dateString = year + "-" + (month > 9 ? month : ("0" + month))+ "-01";Date date = null;try {SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");date = sdf.parse(dateString);} catch (ParseException e) {System.out.println(e.getMessage());}return date;}public static boolean isToday(CustomDate date){return(date.year == DateUtil.getYear() &&date.month == DateUtil.getMonth() && date.day == DateUtil.getCurrentMonthDay());}public static boolean isCurrentMonth(CustomDate date){return(date.year == DateUtil.getYear() &&date.month == DateUtil.getMonth());}}

/CustomCalendarView/src/com/xiaowu/calendar/CustomDate.java、

package com.xiaowu.calendar;import java.io.Serializable;public class CustomDate implements Serializable{private static final long serialVersionUID = 1L;public int year;public int month;public int day;public int week;public CustomDate(int year,int month,int day){if(month > 12){month = 1;year++;}else if(month <1){month = 12;year--;}this.year = year;this.month = month;this.day = day;}public CustomDate(){this.year = DateUtil.getYear();this.month = DateUtil.getMonth();this.day = DateUtil.getCurrentMonthDay();}public static CustomDate modifiDayForObject(CustomDate date,int day){CustomDate modifiDate = new CustomDate(date.year,date.month,day);return modifiDate;}@Overridepublic String toString() {return year+"-"+month+"-"+day;}public int getYear() {return year;}public void setYear(int year) {this.year = year;}public int getMonth() {return month;}public void setMonth(int month) {this.month = month;}public int getDay() {return day;}public void setDay(int day) {this.day = day;}public int getWeek() {return week;}public void setWeek(int week) {this.week = week;}}

所有绘制的操作在onDraw方面里实现，我这里定于了一个组对象Row、单元格元素Cell，通过Row[row].cell[col]来确定一个单元格，每次调用invalidate重绘视图。

接着，我们有一个需求需要左右切换，我们选用最熟悉的ViewPager，但这里有个问题，怎么实现无限循环呢，

这里我们传入一个日历卡数组，让ViewPager循环复用这几个日历卡，避免消耗内存。

/CustomCalendarView/src/com/xiaowu/calendar/CalendarViewAdapter.java

package com.xiaowu.calendar;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.view.View;import android.view.ViewGroup;public class CalendarViewAdapter<V extends View> extends PagerAdapter {public static final String TAG = "CalendarViewAdapter";private V[] views;public CalendarViewAdapter(V[] views) {super();this.views = views;}@Overridepublic Object instantiateItem(ViewGroup container, int position) {if (((ViewPager) container).getChildCount() == views.length) {((ViewPager) container).removeView(views[position % views.length]);}((ViewPager) container).addView(views[position % views.length], 0);return views[position % views.length];}@Overridepublic int getCount() {return Integer.MAX_VALUE;}@Overridepublic boolean isViewFromObject(View view, Object object) {return view == ((View) object);}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {((ViewPager) container).removeView((View) container);}public V[] getAllItems() {return views;}}

布局文件：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/white"android:orientation="vertical" ><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="50dp"android:background="#f6f1ea"><ImageButtonandroid:id="@+id/btnPreMonth"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginRight="33dip"android:layout_toLeftOf="@+id/tvCurrentMonth"android:background="@drawable/ic_before" /><ImageButtonandroid:id="@+id/btnNextMonth"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerVertical="true"android:layout_marginLeft="33dip"android:layout_toRightOf="@+id/tvCurrentMonth"android:background="@drawable/ic_next" /><TextViewandroid:id="@+id/tvCurrentMonth"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_centerInParent="true"android:layout_centerVertical="true"android:text="11月"android:textColor="#323232"android:textSize="22sp" /><ImageButtonandroid:id="@+id/btnClose"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:layout_marginRight="15dp"android:background="@drawable/ic_close" /></RelativeLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginTop="15dp"android:orientation="vertical"><TableLayoutandroid:layout_width="match_parent"android:layout_height="20dip"android:layout_marginBottom="2dip"android:layout_marginTop="2dip" ><TableRow><TextViewstyle="@style/dateStyle"android:text="@string/sunday"android:textColor="@color/canlendar_text_color" /><TextViewstyle="@style/dateStyle"android:text="@string/monday"android:textColor="@color/canlendar_text_color" /><TextViewstyle="@style/dateStyle"android:text="@string/thesday"android:textColor="@color/canlendar_text_color" /><TextViewstyle="@style/dateStyle"android:text="@string/wednesday"android:textColor="@color/canlendar_text_color" /><TextViewstyle="@style/dateStyle"android:text="@string/thursday"android:textColor="@color/canlendar_text_color" /><TextViewstyle="@style/dateStyle"android:text="@string/friday"android:textColor="@color/canlendar_text_color" /><TextViewstyle="@style/dateStyle"android:text="@string/saturday"android:textColor="@color/canlendar_text_color" /></TableRow></TableLayout></LinearLayout><LinearLayoutandroid:layout_width="match_parent"android:layout_height="0dp"android:orientation="vertical" android:layout_weight="1"android:layout_marginTop="15dp"><android.support.v4.view.ViewPagerandroid:id="@+id/vp_calendar"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center"android:background="@color/white" ></android.support.v4.view.ViewPager></LinearLayout></LinearLayout>

/CustomCalendarView/src/com/xiaowu/calendar/MainActivity.java

package com.xiaowu.calendar;import android.app.Activity;import android.os.Bundle;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.View.OnClickListener;import android.view.Window;import android.widget.ImageButton;import android.widget.TextView;import com.xiaowu.calendar.CalendarCard.OnCellClickListener;public class MainActivity extends Activity implements OnClickListener, OnCellClickListener{private ViewPager mViewPager;private int mCurrentIndex = 498;private CalendarCard[] mShowViews;private CalendarViewAdapter<CalendarCard> adapter;private SildeDirection mDirection = SildeDirection.NO_SILDE;enum SildeDirection {RIGHT, LEFT, NO_SILDE;}private ImageButton preImgBtn, nextImgBtn;private TextView monthText;private ImageButton closeImgBtn;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);mViewPager = (ViewPager) this.findViewById(R.id.vp_calendar);preImgBtn = (ImageButton) this.findViewById(R.id.btnPreMonth);nextImgBtn = (ImageButton) this.findViewById(R.id.btnNextMonth);monthText = (TextView) this.findViewById(R.id.tvCurrentMonth);closeImgBtn = (ImageButton) this.findViewById(R.id.btnClose);preImgBtn.setOnClickListener(this);nextImgBtn.setOnClickListener(this);closeImgBtn.setOnClickListener(this);CalendarCard[] views = new CalendarCard[3];for (int i = 0; i < 3; i++) {views[i] = new CalendarCard(this, this);}adapter = new CalendarViewAdapter<>(views);setViewPager();}private void setViewPager() {mViewPager.setAdapter(adapter);mViewPager.setCurrentItem(498);mViewPager.setOnPageChangeListener(new OnPageChangeListener() {@Overridepublic void onPageSelected(int position) {measureDirection(position);updateCalendarView(position);}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}@Overridepublic void onPageScrollStateChanged(int arg0) {}});}@Overridepublic void onClick(View v) {switch (v.getId()) {case R.id.btnPreMonth:mViewPager.setCurrentItem(mViewPager.getCurrentItem() - 1);break;case R.id.btnNextMonth:mViewPager.setCurrentItem(mViewPager.getCurrentItem() + 1);break;case R.id.btnClose:finish();break;default:break;}}@Overridepublic void clickDate(CustomDate date) {}@Overridepublic void changeDate(CustomDate date) {monthText.setText(date.month + "月");}/*** 计算方向* * @param arg0*/private void measureDirection(int arg0) {if (arg0 > mCurrentIndex) {mDirection = SildeDirection.RIGHT;} else if (arg0 < mCurrentIndex) {mDirection = SildeDirection.LEFT;}mCurrentIndex = arg0;}// 更新日历视图private void updateCalendarView(int arg0) {mShowViews = adapter.getAllItems();if (mDirection == SildeDirection.RIGHT) {mShowViews[arg0 % mShowViews.length].rightSlide();} else if (mDirection == SildeDirection.LEFT) {mShowViews[arg0 % mShowViews.length].leftSlide();}mDirection = SildeDirection.NO_SILDE;}}

用到的资源：

/CustomCalendarView/res/values/color.xml

<?xml version="1.0" encoding="utf-8"?><resources><color name="white">#ffffff</color><color name="canlendar_text_color">#323232</color></resources>

/CustomCalendarView/res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?><resources><string name="app_name">CustomCalendarView</string><string name="hello_world">Hello world!</string><string name="action_settings">Settings</string><string name="sunday">日</string><string name="monday">一</string><string name="thesday">二</string><string name="wednesday">三</string><string name="thursday">四</string><string name="friday">五</string><string name="saturday">六</string></resources>

/CustomCalendarView/res/values/styles.xml

<resources><!--Base application theme, dependent on API level. This theme is replacedby AppBaseTheme from res/values-vXX/styles.xml on newer devices.--><style name="AppBaseTheme" parent="android:Theme.Light"><!--Theme customizations available in newer API levels can go inres/values-vXX/styles.xml, while customizations related tobackward-compatibility can go here.--></style><!-- Application theme. --><style name="AppTheme" parent="AppBaseTheme"><!-- All customizations that are NOT specific to a particular API-level can go here. --></style><style name="dateStyle"><item name="android:layout_width">fill_parent</item><item name="android:layout_height">fill_parent</item><item name="android:layout_weight">1</item><item name="android:gravity">center</item><item name="android:textSize">16sp</item></style></resources>

源码下载：/detail/wwj_748/8312233