前言:
這段時間好久沒更新,最近對自定義View感興趣,先是根據(jù)網(wǎng)上的一些例子仿做了一個仿微信通訊錄的組合控件,就是那種帶字母索引ListView,可惜不知什么原因,用android studio導(dǎo)出的arr包卻老是報(bào)錯,待我繼續(xù)研究。
后來便搞了這個日歷控件,一是對自定義的view感興趣,二來后來的項(xiàng)目可能需要用到類似的控件,雖說網(wǎng)上也有類似的現(xiàn)成的控件下載,但是覺得自己動手又何嘗不是一次聯(lián)系的機(jī)會。
先上圖
normal
日期單選
日期多選
由于不會上傳視頻,只能截圖啦
自定義View的過程也不重復(fù)太多,畢竟網(wǎng)上這么多教程了
就總結(jié)一下流程吧
- 新建一個類繼承于View或者View的子類
- 實(shí)現(xiàn)三個構(gòu)造方法
- 可以在value目錄下新建attrs.xml文件,再其中聲明
<declare-styleable>
以及內(nèi)部的<attr>
子標(biāo)簽來定義xml屬性。 - 實(shí)現(xiàn)
onMeasure()
方法以及最重要的onDraw()
方法 - 因?yàn)槭亲远x的日歷控件,所以我也重寫了
dispatchTouchEvent()
方法來解決響應(yīng)事件。
思路:
- 要繪制出一個月的日歷,需要下列幾個參數(shù)
- 這個月的天數(shù)
- 這個月第一天是星期幾
- 今天是幾號
手畫的,見諒
貼上最重要的onDraw()
方法
protected void onDraw(Canvas canvas) {
//繪制背景色
canvas.drawColor(mBackground);
//繪制左箭頭
mNumPaint.setColor(clickLeft ? mNormalButtonColor1 : mClickButtonColor2);
mNumPaint.setStrokeWidth(6);
mNumPaint.setAntiAlias(true);
canvas.drawLine(mViewWidth / 8, mViewHeight / 16, mViewWidth * 3 / 16, mViewHeight / 32, mNumPaint);
canvas.drawLine(mViewWidth / 8, mViewHeight / 16, mViewWidth * 3 / 16, mViewHeight * 3 / 32, mNumPaint);
mNumPaint.reset();
//繪制右箭頭
mNumPaint.setColor(clickRight ? mNormalButtonColor1 : mClickButtonColor2);
mNumPaint.setStrokeWidth(6);
mNumPaint.setAntiAlias(true);
canvas.drawLine(mViewWidth * 7 / 8, mViewHeight / 16,
mViewWidth * 13 / 16, mViewHeight / 32, mNumPaint);
canvas.drawLine(mViewWidth * 7 / 8, mViewHeight / 16,
mViewWidth * 13 / 16, mViewHeight * 3 / 32, mNumPaint);
mNumPaint.reset();
//繪制年,月份
mNumPaint.setTextSize(mViewHeight / 16);
mNumPaint.setColor(mNormalTextColor1);
mNumPaint.setAntiAlias(true);
String theYear = year + "";
String theMonth = month + "";
canvas.drawText(theYear, mViewWidth / 2 - getTextWidth(mNumPaint, theYear) / 2,
mViewHeight / 16, mNumPaint);
mNumPaint.setTextSize(mViewHeight / 18);
mNumPaint.setColor(mNormalTextColor2);
canvas.drawText(theMonth, mViewWidth / 2 - getTextWidth(mNumPaint, theMonth) / 2,
mViewHeight / 8, mNumPaint);
mNumPaint.reset();
//繪制日歷
xInterval = mViewWidth / 7;
yInterval = mViewHeight / 8;
int day = 0;
float x;
float y;
int theday;
boolean isToday = false;
boolean isCheckDay = false;
float offset = 0;
radius = mViewWidth / 19;
for (int i = 0; i < weekName.length; i++) {
x = i * xInterval + mNormalTextSize / 2;
y = 1 * yInterval + yInterval / 2;
if (i == 0 || i == weekName.length - 1) {
drawNum(weekName[i], mNormalTextSize, mNormalTextColor2, x, y,
canvas, isToday, offset);
} else {
drawNum(weekName[i], mNormalTextSize, mNormalTextColor1, x, y,
canvas, isToday, offset);
}
}
mNumPaint.reset();
String str;
for (int i = 2; i < 8; i++) {
for (int j = 0; j < 7; j++) {
if (i == 2 && j == 0) {
j = weekOfFirstDay;
}
if (day > allDays.length - 1) {
theday = -1;
} else {
theday = allDays[day];
}
str = "" + theday;
if (theday == -1) {
str = "";
}
//單個數(shù)字的偏移量
if (theday < 10 && theday > 0) {
offset = mNormalTextSize / 4;
}
//計(jì)算數(shù)字的位置
y = i * yInterval + yInterval / 2;
x = j * xInterval + mNormalTextSize / 2 -
getTextWidth(mNumPaint, str) + offset;
//判斷是否為今天
isToday = theday == today;
if (isToday) {
drawACircle(x, y, Color.argb(255, 254, 140, 26),
radius, canvas, offset);
}
//如果數(shù)字是checkDay
isCheckDay = theday == firstCheckDay;
if (isCheckDay) {
drawACircle(x, y, 0xffa0c8c8, radius, canvas, offset);
}
if (secondCheckDay != -2) {
if (theday > firstCheckDay && theday <= secondCheckDay) {
drawACircle(x, y, 0xffa0c8c8, radius, canvas, offset);
isCheckDay = true;
}
}
if (j == 0 || j == 6) {
drawNum(str, mNormalTextSize, mNormalTextColor2,
x, y, canvas, isToday || isCheckDay, offset);
} else {
drawNum(str, mNormalTextSize, mNormalTextColor1,
x, y, canvas, isToday || isCheckDay, offset);
}
offset = 0;
day++;
mNumPaint.reset();
}
}
}
再貼上dispatchTouchEvent()
方法
public boolean dispatchTouchEvent(MotionEvent event) {
//獲取事件的位置
float touchX = event.getX();
float touchY = event.getY();
if (!canClick) {
return true;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (touchY < 3 * mViewHeight / 32 && touchY > mViewHeight / 32) {
if (touchX < 3 * mViewWidth / 16 && touchX > mViewWidth / 8) {
clickLeft = true;
//左箭頭事件
if (turnPageListener != null) {
turnPageListener.OnLeftDown(today, month, year);
}
}
if (touchX < 7 * mViewWidth / 8 && touchX > 13 * mViewWidth / 16) {
clickRight = true;
//右箭頭事件
if (turnPageListener != null) {
turnPageListener.OnRightUp(today, month, year);
}
}
}
//以下是對日歷的事件處理
int theX = (int) ((touchX + 0.1 * xInterval) / xInterval);//獲取第幾列
int theY = (int) ((touchY + 0.2 * yInterval) / yInterval);//獲取第幾行
if (theY < 2) {
theY = 2;
}
//得到是哪一天
int num = (theY - 2) * 7 + theX - weekOfFirstDay;
int day;
if (num < 0 || num > allDays.length - 1) {
num = -2;
day = 0;
} else {
day = allDays[num];
}
float x = theX * xInterval + mNormalTextSize / 2 -
mNumPaint.measureText("" + day);
float y = theY * yInterval + yInterval / 2;
//判斷是否點(diǎn)擊在每個數(shù)字為中心的圓內(nèi)
boolean isclick = isClick(x, y, num, touchX, touchY);
//有三種狀態(tài) 初始狀態(tài)(00),第一次點(diǎn)擊(10),第二次點(diǎn)擊(11)
if (!firstClick) {
firstClick = true;
} else if (!secondClick) {
secondClick = true;
} else {
firstClick = false;
secondClick = false;
firstCheckDay = -2;
secondCheckDay = -2;
}
//處理點(diǎn)擊在月份天數(shù)外所引起的數(shù)值問題
if (isclick && num != -2 && firstClick && !secondClick) {
firstCheckDay = allDays[num];
}
if (firstClick && firstCheckDay == -2) {
firstClick = false;
}
if (isclick && num != -2 && secondClick) {
if (allDays[num] < firstCheckDay) {
firstCheckDay = allDays[num];
secondClick = false;
} else {
secondCheckDay = allDays[num];
}
}
if (secondClick && secondCheckDay == -2) {
secondClick = false;
}
//
//調(diào)用接口
if (firstClick && !secondClick) {
if (chooseListener != null) {
chooseListener.onSingleChoose(firstCheckDay);
}
} else if (firstClick && secondClick) {
int numO = secondCheckDay - firstCheckDay + 1;
int[] days = new int[numO];
int tday = firstCheckDay;
for (int j = 0; j < numO; j++) {
days[j] = tday++;
}
if (chooseListener != null) {
chooseListener.onDoubleChoose(days);
}
}
break;
case MotionEvent.ACTION_UP:
//左箭頭事件
if (clickLeft) {
if (turnPageListener != null) {
turnPageListener.OnLeftUp(today, month, year);
}
clickLeft = !clickLeft;
preMonth();
}
//右箭頭事件
if (clickRight) {
if (turnPageListener != null) {
turnPageListener.OnRightUp(today, month, year);
}
clickRight = !clickRight;
nextMonth();
}
break;
}
invalidate();
return true;
}
待完善的地方
- 日期的多選還沒做到跨月
- 沒有做動畫
發(fā)現(xiàn)在對日期的繪制位置的計(jì)算出了偏差,待下次更新!