Android自定义控件之日历控件

Android自定义控件之日历控件

2015-10-23 Android开发中文站

三月份学习android，至今也有半年有余，中间也做过两个项目，但是依然感觉自己做的应用不是很有新意，比不上应用市场上那些应用如此绚丽。所以自己仍需继续努力。学习至今，仍感觉自定义控件是一块硬骨头，还没修炼到身后的内功，下面就切入正题，以一次项目的需求，来实现一个自定义的日历控件。效果图先来一发。

我们分析下效果图，然后确定我们的需求。

（1）、绘制星期的自定义View，用于标识日期的礼拜。

（2）、绘制日期的自定义View。

（3）、绘制事务圆圈，从效果图中我们以红圈标识今日有事务。

（4）、绘制选中日期的颜色。

（5）、对选中日期进行点击事件的处理。

通过对效果图的分析，得出了我们的需求，我们在仔细分析效果图，发现里面就是绘制文字和绘制线条，所以我们只要回Canvas的这两个功能即可，主要的难点是如何将这些日期进行位置的安排，接下来我们就来逐个分析如何实现一个自定义View。

实现Week的自定义View

效果图

分析下效果图，我们需要绘制上下两条线、然后绘制描述文字（日、一、二、三、四、五、六）。下面就讲解下我们的实现。先看着部分的源码，然后在分开讲解。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123


public class WeekDayView extends View {

//上横线颜色

private int mTopLineColor = Color.parseColor("#CCE4F2");

//下横线颜色

private int mBottomLineColor = Color.parseColor("#CCE4F2");

//周一到周五的颜色

private int mWeedayColor = Color.parseColor("#1FC2F3");

//周六、周日的颜色

private int mWeekendColor = Color.parseColor("#fa4451");

//线的宽度

private int mStrokeWidth = 4;

private int mWeekSize = 14;

private Paint paint;

private DisplayMetrics mDisplayMetrics;

private String[] weekString = new String[]{"日","一","二","三","四","五","六"};

public WeekDayView(Context context, AttributeSet attrs) {

super(context, attrs);

mDisplayMetrics = getResources().getDisplayMetrics();

paint = new Paint();

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

int widthSize = MeasureSpec.getSize(widthMeasureSpec);

int widthMode = MeasureSpec.getMode(widthMeasureSpec);

int

heightSize = MeasureSpec.getSize(heightMeasureSpec);

int

heightMode = MeasureSpec.getMode(heightMeasureSpec);

if(heightMode == MeasureSpec.AT_MOST){

heightSize = mDisplayMetrics.densityDpi * 30;

}

if(widthMode == MeasureSpec.AT_MOST){

widthSize = mDisplayMetrics.densityDpi * 300;

}

setMeasuredDimension(widthSize, heightSize);

}

@Override

protected void onDraw(Canvas canvas) {

int width = getWidth();

int height = getHeight();

//进行画上下线

paint.setStyle(Style.STROKE);

paint.setColor(mTopLineColor);

paint.setStrokeWidth(mStrokeWidth);

canvas.drawLine(0, 0, width, 0, paint);

//画下横线

paint.setColor(mBottomLineColor);

canvas.drawLine(0, height, width, height, paint);

paint.setStyle(Style.FILL);

paint.setTextSize(mWeekSize * mDisplayMetrics.scaledDensity);

int columnWidth = width / 7;

for(int i=0;i < weekString.length;i++){

String text = weekString[i];

int fontWidth = (int) paint.measureText(text);

int

startX = columnWidth * i + (columnWidth - fontWidth)/2;

int startY = (int) (height/2 - (paint.ascent() + paint.descent())/2);

if(text.indexOf("日") > -1|| text.indexOf("六") > -1){

paint.setColor(mWeekendColor);

}else{

paint.setColor(mWeedayColor);

}

canvas.drawText(text, startX, startY, paint);

}

}

/**

* 设置顶线的颜色

* @param mTopLineColor

*/

public void setmTopLineColor(int mTopLineColor) {

this.mTopLineColor = mTopLineColor;

}

/**

* 设置底线的颜色

* @param mBottomLineColor

*/

public void setmBottomLineColor(int mBottomLineColor) {

this.mBottomLineColor = mBottomLineColor;

}

/**

* 设置周一-五的颜色

* @return

*/

public void setmWeedayColor(int mWeedayColor) {

this.mWeedayColor = mWeedayColor;

}

/**

* 设置周六、周日的颜色

* @param mWeekendColor

*/

public void setmWeekendColor(int mWeekendColor) {

this.mWeekendColor = mWeekendColor;

}

/**

* 设置边线的宽度

* @param mStrokeWidth

*/

public void setmStrokeWidth(int mStrokeWidth) {

this.mStrokeWidth = mStrokeWidth;

}

/**

* 设置字体的大小

* @param mWeekSize

*/

public void setmWeekSize(int mWeekSize) {

this.mWeekSize = mWeekSize;

}

/**

* 设置星期的形式

* @param weekString

* 默认值 "日","一","二","三","四","五","六"

*/

public void setWeekString(String[] weekString) {

this.weekString = weekString;

}

}

（1）、首先我们定义了我们需要的成员变量，比如上下线条的颜色、宽度、字体的大小、周期的表现形式。这些都是为了灵活定制而需要的。方便使用。

（2）、现在来看看onMeasure方法，我们知道在自定义view中，我们遇到wrap_content属性，这是view的大小可能就不是我们想要的了，所以我们在onMeasure方法中，指定此条件下的大小，即默认大小为300*30。

（3）、onDraw方法，我们在onDraw方法中进行我们需要内容的绘制。我们使用drawLine方法，进行上下横线的绘制，然后int columnWidth = width / 7;计算每列的宽度，为什么计算宽度呢？因为我们要将”日”,”一”,”二”,”三”,”四”,”五”,”六”这七个字放在对应格子的居中位置。通过drawText方法进行绘制文字，我们需要指定绘制文字的起始位置，为了达到居中的位置，我们需要进行计算。


1

2


int

startX = columnWidth * i + (columnWidth - fontWidth)/2;

int startY = (int) (height/2 - (paint.ascent() + paint.descent())/2);

此处不是很了解的，可以参照下爱哥的文章。后面就是一些设置属性，没什么讲头。

至此很简单的实现了我们的week的自定义view。下面我们来分析下日期的实现。

实现日期Date的自定义View

类似WeekView的实现，我们在DateView中的难点也是如何放置这些日期date。先上源码，然后我们在具体分析：

（1）、首先我们还是定义了一些我们需要的成员变量，比如，字体的颜色、圆圈的颜色、选中的背景色、同样我们需要记录下我们正确的年月日、以及选中的年月日来进行区分，主要就这么多。

（2）、然后进行重写onMeasure方法，类似于WeekView，不做过多解释，差不多。

（3）、在onDraw方法中进行绘制，绘制的原理，我们根据Calendar获取当前月份的天数，以及第一天是礼拜几，只有计算出礼拜几，我们才知道我们的日历从哪列开始，这样我们就可以计算出每次绘制日期的位置：


1

2

3

4

5


int column = (day+weekNumber - 1) % 7;

int row = (day+weekNumber - 1) / 7;

daysString[row][column]=day + 1;

int startX = (int

) (mColumnSize * column + (mColumnSize - mPaint.measureText(dayString))/2);

int startY = (int) (mRowSize * row + mRowSize/2 - (mPaint.ascent() + mPaint.descent())/2);

一个礼拜有七天，我们根据日期号和起始计算出日期的对应行列，然后在乘以行列宽，就可以计算出每个日期号的其实位置。这样我们就可以通过drawText进行日期的绘制。我们有一个成员变量记录选中的日期号，然后进行绘制选中的背景色，如下代码：


1

2

3

4

5

6

7

8

9

10

11


if(dayString.equals(mSelDay+"")){

//绘制背景色矩形

int startRecX = mColumnSize * column;

int startRecY = mRowSize * row;

int endRecX = startRecX + mColumnSize;

int endRecY = startRecY + mRowSize;

mPaint.setColor(mSelectBGColor);

canvas.drawRect(startRecX, startRecY, endRecX, endRecY, mPaint);

//记录第几行，即第几周

weekRow = row + 1;

}

（4）、我们还有一个需求，就是绘制事务标志，我们定义了List daysHasThingList的list对象，这个对象我们用来’装’事务的日期号。然后我们在onDraw方法中判断日期是否包含在这个list中，然后绘制对应的圆圈。


1

2

3

4

5

6

7

8

9

10


private void drawCircle(int row,int column,int day,Canvas canvas){

if(daysHasThingList != null && daysHasThingList.size() >0){

if(!daysHasThingList.contains(day))return;

mPaint.setColor(mCircleColor);

float circleX = (float) (mColumnSize * column + mColumnSize*0.8);

float circley = (float) (mRowSize * row + mRowSize*0.2);

canvas.drawCircle(circleX, circley, mCircleRadius, mPaint);

}

}

}

（5）、至此，日期的绘制和事务都完成了，但是还没有点击事件进行切换日期的选择，这怎么办呢？所以我们需要重写View的onTouchEvent方法，然后判断点击事件，根据获取的X、Y值，计算出我们选择行列，然后我们在根据行列在daysString中获取我们选中的日期，设置选中日期，然后刷新视图。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20


public boolean onTouchEvent(MotionEvent event) {

int eventCode= event.getAction();

switch(eventCode){

case MotionEvent.ACTION_DOWN:

downX = (int) event.getX();

downY = (int) event.getY();

break;

case MotionEvent.ACTION_MOVE:

break;

case MotionEvent.ACTION_UP:

int upX = (int) event.getX();

int upY = (int) event.getY();

if(Math.abs(upX-downX) < 10 && Math.abs(upY - downY) < 10){//点击事件

performClick();

doClickAction((upX + downX)/2,(upY + downY)/2);

}

break;

}

return true;

}

（5）、有的需求是进行点击事情的处理，这时我们只需要写一个简单的回调，然后在activity中进行处理即可。


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27


private void doClickAction(int x,int y){

int row = y / mRowSize;

int column = x / mColumnSize;

setSelectYearMonth(mSelYear,mSelMonth,daysString[row][column]);

invalidate();

//执行activity发送过来的点击处理事件

if(dateClick != null){

dateClick.onClickOnDate();

}

}

/**

* 设置日期的点击回调事件

* @author shiwei.deng

*

*/

public interface DateClick{

public void onClickOnDate();

}

/**

* 设置日期点击事件

* @param dateClick

*/

public void setDateClick(DateClick dateClick) {

this.dateClick = dateClick;

}

（6）主要的处理已经完成，剩下的需要我们获取日期的显示以及显示第几周、点击【今】返回到今天，这些处理的逻辑就是设置选中的日期，然后刷新视图。代码就不贴了，上面的源码注释的挺详细的。

最后就是我们使用自定义View进行显示。如：


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86


<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:layout_centerInParent="true"

android:orientation="vertical" >

<!-- 日历时间选择栏 -->

<RelativeLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:gravity="center_vertical"

android:background="#ffffff"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:paddingTop="3dp">

<ImageView

android:id="@+id/iv_left"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentLeft="true"

android:contentDescription="@null"

android:background="@drawable/left_arrow" />

<ImageView

android:id="@+id/iv_right"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentRight="true"

android:contentDescription="@null"

android:background="@drawable/right_arrow" />

<LinearLayout

android:id="@+id/date_operator_ll"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_gravity="center_vertical"

android:gravity="center"

android:layout_centerInParent="true"

android:orientation="horizontal" >

<TextView

android:id="@+id/tv_today"

android:layout_width="25dp"

android:layout_height="25dp"

android:layout_marginRight="5dp"

android:text="今"

android:gravity="center"

android:background="#FFD700"

android:textColor="#ffffff"

android:textSize="17sp" />

<TextView

android:id="@+id/date_text"

style="@style/myschedule_current_month_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_horizontal"

android:textColor="#93C73C"

android:textSize="20sp"

android:text="" />

<TextView

android:id="@+id/week_text"

style="@style/myschedule_current_month_tv"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:gravity="center_horizontal"

android:layout_marginLeft="10dp"

android:textColor="#93C73C"

android:textSize="20sp"

android:text="" />

</LinearLayout>

</RelativeLayout>

<LinearLayout

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:background="#ffffff"

android:orientation="vertical" >

<com.dsw.datepicker.WeekDayView

android:layout_width="match_parent"

android:layout_height="30dp" />

<com.dsw.datepicker.MonthDateView

android:id="@+id/monthDateView"

android:layout_width="fill_parent"

android:layout_height="200dp" />

</LinearLayout>

</LinearLayout>

这样我们在activity中就能使用了

至此，全部的内容已经完成，一个简单的自定义view的使用，在实际项目中使用颇多，当然这个例子还有很多完善的地方，比如在onTouchEvent中进行滑动的监视，通过滑动来进行日期的修改，这些有兴趣的同学可以试试。

欢迎大家留言交流。

源码下载（请点击原文连接下载）

阅读原文

微信扫一扫
关注该公众号

时间： 2024-10-26 22:44:56

Android自定义控件之日历控件的相关文章

Android UI-自定义日历控件

Android UI-自定义日历控件 本篇博客笔者给大家分享一个日历控件,这里有个需求:要求显示当前月的日期,左右可以切换月份来查看日期. 我们想一想会如何去实现这样的一个控件,有开源的,但可能不太满足我们的特定的需求,这里笔者自定义了一个,读者可以根据自己的需求来修改代码.下面来说一下实现的思路: 首先我们要显示当前月份,自然我们要计算出当前的日期,并且把每一天对应到具体的星期,我们会有以下效果: 我们先想一下这样的效果用什么控件可以实现?很自然可以想到用网格视图GridView,但这里笔者使

Android自定义控件——自定义组合控件

转载请注明出处http://blog.csdn.net/allen315410/article/details/39581055  前面几篇博文介绍了Android如何自定义控件,其实就是讲一下如何"从无到有"的自定义一个全新的控件,继承View或者继承ViewGroup,复写其相关方法,这种自定义控件的方式相对来说难度较大,而且并不是所有需要新控件的情况下,都要这样进行.有很多情况下,我们只要运用好Android给我提供好的控件,经过布局巧妙的结合在一起,就是一个新的控件,我称之为&

Android自定义控件1--自定义控件介绍

Android控件基本介绍 Android本身提供了很多控件比如我们常用的有文本控件TextView和EditText:按钮控件Button和ImageButton状态开关按钮ToggleButton单选复选按钮RadioButton和RadioGroup单选按钮和复选按钮CheckBox图片控件ImageView时钟控件AnalogClock和DigitalClock进度条ProgressBar和日期与时间选择控件DatePicker和TimePicker等. 文本控件TextView 和Ed

android 自定义控件学习之三 控件布局常用知识总结

1.View是什么 View是Android所有控件的基类,简单到TextView.Button,复杂到RelativeLayout,LinearLayout,其共同基类都是View. 所以,View可以理解为控件的抽象,也是一个控件. 除此之外,还有ViewGroup,字面意义上,它表示控件组,内部可以包含许多个控件. ViewGroup也继承自View,这意味着,一个View的可以是单个控件,也可以是多个控件组成的一组控件,这就形成了View树. 下面这个图很好地体现了View的继承关系 2

开源日历控件DatePicker源码解析

在一些项目开发中,会使用日历去标识事务,所以根据美工出的效果图,我们可以采用不同的方法去实现.比如通过GridView扣扣你敢.自定义View实现日历控件,这些都是我们解决问题的手段,我也实现过一个自定义日历控件(Android自定义控件之日历控件55993)),由于我只是粗糙的进行实现,并没有进行过多的在控件的可扩展性上进行打磨设计,所以在本篇文章中,我秉着学习的态度分析下爱哥的鼎力巨作DatePicker-DatePicker. DatePicker开源项目地址:[https://githu

Android自定义View（CustomCalendar－定制日历控件）

转载请标明出处: http://blog.csdn.net/xmxkf/article/details/54020386 本文出自:[openXu的博客] 目录: 1分析 2自定义属性 3onMeasure 4onDraw 绘制月份 绘制星期 绘制日期及任务 5事件处理 源码下载 ??应项目需求,需要做一个日历控件,效果图如下: ???? ??接到需求后,没有立即查找是否有相关开源日历控件可用.系统日历控件是否能满足 ,第一反应就是这个控件该怎么画?谁叫咱自定义控件技术牛逼呢O(∩_∩)O哈哈~

撸一个Android高性能日历控件，高仿魅族

Android原生的CalendarView根本无法满足我们日常开发的需要,在开发吾记APP的过程中,我觉得需要来一款高性能且美观简洁的日历控件,觉得魅族的日历风格十分适合,于是打算撸一款. github地址:https://github.com/huanghaibin-dev/CalendarView compile 'com.haibin:calendarview:1.0.2' 先上效果图: 动手之前我们需要分析一下魅族是怎么设计如此高性能的日历的,我们打开开发者选项中的显示布局边界: 好吧

android 自定义日历控件

日历控件View: [java] view plaincopyprint? /** * 日历控件 功能:获得点选的日期区间 * */ public class CalendarView extends View implements View.OnTouchListener { private final static String TAG = "anCalendar"; private Date selectedStartDate; private Date selectedEndD

Android自定义组件之日历控件-精美日历实现（内容、样式可扩展）

需求 我们知道,Android系统本身有自带的日历控件,网络上也有很多开源的日历控件资源,但是这些日历控件往往样式较单一,API较多,不易于在实际项目中扩展并实现出符合具体样式风格的,内容可定制的效果.本文通过自定义日历控件,实现了在内容和样式上可高度扩展的精美日历demo,有需要的Android应用开发人员可迅速移植并按需扩展实现. 在某个应用中,需要查询用户的历史考勤记录,根据实际考勤数据在日历中标记出不同的状态(如正常出勤.请假.迟到等),并在页面中显示相应的说明文字. 效果 实现的效果如