一个简单的checkView

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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
public class CheckView extends View {
private Context mContext;
//圆环画笔
private Paint mPaintRing;
//对号画笔
private Paint mPaintTick;
//圆的画笔
private Paint mPaintCircle;
private int unCheckBaseColor;
private int checkBaseColor;
private int checkTickColor;
private RectF mRectF = new RectF();
private float centerX, centerY;
private float[] mPoints = new float[8];
private boolean mIsChecked;
private int radius;
private float tickRadius;
private float tickRadiusOffset;
private int ringProgress = 0;
private int circleProgress = 0;
private int rightAlpha = 0;
private boolean IsAnimeRuning;
private boolean ringAnimeEnd;
private OnCheckChangeListener mCheckChangeListener;
public CheckView(Context context) {
this(context, null);
}
public CheckView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public CheckView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mContext = context;
init(attrs);
initPaint();
setClickEvent();
}
private void initPaint() {
mPaintRing = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintRing.setStyle(Paint.Style.STROKE);
mPaintRing.setColor(mIsChecked ? checkBaseColor : unCheckBaseColor);
mPaintRing.setStrokeWidth(dp2px(mContext, 2.5f));
mPaintRing.setStrokeCap(Paint.Cap.ROUND);
mPaintCircle = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintCircle.setColor(checkTickColor);
mPaintCircle.setStrokeWidth(dp2px(mContext, 1));
mPaintTick = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaintTick.setColor(mIsChecked ? checkTickColor : unCheckBaseColor);
mPaintTick.setStyle(Paint.Style.STROKE);
mPaintTick.setStrokeCap(Paint.Cap.ROUND);
mPaintTick.setStrokeWidth(dp2px(mContext, 2.5f));
}
private void init(AttributeSet attrs) {
TypedArray a = mContext.obtainStyledAttributes(attrs, R.styleable.CheckView);
unCheckBaseColor = a.getColor(R.styleable.CheckView_uncheck_color, getResources().getColor(R.color.tick_gray));
checkBaseColor = a.getColor(R.styleable.CheckView_check_color, getResources().getColor(R.color.tick_yellow));
checkTickColor = a.getColor(R.styleable.CheckView_check_right_color, getResources().getColor(R.color.tick_white));
a.recycle();
radius = dp2px(mContext, 30);
tickRadius = dp2px(mContext, 12);
tickRadiusOffset = dp2px(mContext, 4);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int width = getMySize(radius * 2, widthMeasureSpec);
int height = getMySize(radius * 2, heightMeasureSpec);
int res = Math.max(width, height);
setMeasuredDimension(res, res);
centerX = getMeasuredWidth() / 2;
centerY = getMeasuredHeight() / 2;
mRectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
//设置打钩的几个点坐标
mPoints[0] = centerX - tickRadius + tickRadiusOffset;
mPoints[1] = (float) centerY;
mPoints[2] = centerX - tickRadius / 2 + tickRadiusOffset;
mPoints[3] = centerY + tickRadius / 2;
mPoints[4] = centerX - tickRadius / 2 + tickRadiusOffset;
mPoints[5] = centerY + tickRadius / 2;
mPoints[6] = centerX + tickRadius * 2 / 4 + tickRadiusOffset;
mPoints[7] = centerY - tickRadius * 2 / 4;
}
@Override
protected void onDraw(final Canvas canvas) {
super.onDraw(canvas);
if (!mIsChecked) {
canvas.drawArc(mRectF, 90, 360, false, mPaintRing);
canvas.drawLines(mPoints, mPaintTick);
return;
}
if (ringAnimeEnd){
mPaintCircle.setColor(checkBaseColor);
//画满黄色的圆
canvas.drawCircle(centerX,centerY,radius,mPaintCircle);
mPaintCircle.setColor(checkTickColor);
}
//画圆环
canvas.drawArc(mRectF, 90, ringProgress, false, mPaintRing);
//画逐渐缩小的白圆
canvas.drawCircle(centerX,centerY,radius-circleProgress,mPaintCircle);
//画对号
mPaintTick.setAlpha(rightAlpha);
canvas.drawLines(mPoints,mPaintTick);
if (!IsAnimeRuning) {
IsAnimeRuning = true;
ObjectAnimator ringAnimator = ObjectAnimator.ofInt(this,"ringProgress",0,360);
ObjectAnimator circleAnimator = ObjectAnimator.ofInt(this,"circleProgress",0,radius);
ObjectAnimator rightAnimator = ObjectAnimator.ofInt(this,"rightAlpha",0,255);
ringAnimator.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
ringAnimeEnd = true;
}
});
PropertyValuesHolder holder1 = PropertyValuesHolder.ofFloat("scaleX", 1f,1.2f,1f);
PropertyValuesHolder holder2 = PropertyValuesHolder.ofFloat("scaleY", 1f,1.2f,1f);
ObjectAnimator scaleAnimator = ObjectAnimator.ofPropertyValuesHolder(this, holder1, holder2);
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.playSequentially(ringAnimator,circleAnimator,rightAnimator,scaleAnimator);
animatorSet.start();
}
}
private void reset() {
initPaint();
ringProgress = 0;
circleProgress = 0;
rightAlpha = 0;
IsAnimeRuning = false;
ringAnimeEnd = false;
mRectF.set(centerX - radius, centerY - radius, centerX + radius, centerY + radius);
invalidate();
}
private void setClickEvent() {
this.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
mIsChecked = !mIsChecked;
reset();
if (mCheckChangeListener!=null){
mCheckChangeListener.onCheckChange((TestTickView)v,mIsChecked);
}
}
});
}
//用于属性动画的getter和setter
public int getRingProgress() {
return ringProgress;
}
public void setRingProgress(int ringProgress) {
this.ringProgress = ringProgress;
invalidate();
}
public int getCircleProgress() {
return circleProgress;
}
public void setCircleProgress(int circleProgress) {
this.circleProgress = circleProgress;
invalidate();
}
public int getRightAlpha() {
return rightAlpha;
}
public void setRightAlpha(int rightAlpha) {
this.rightAlpha = rightAlpha;
invalidate();
}
private int getMySize(int defSize, int measureSpec) {
int result;
int mode = MeasureSpec.getMode(measureSpec);
int size = MeasureSpec.getSize(measureSpec);
if (mode == MeasureSpec.UNSPECIFIED || mode == MeasureSpec.AT_MOST) {
result = defSize;
} else {
result = size;
}
return result;
}
private static int dp2px(Context context, float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
public void setCheckChangeListener(OnCheckChangeListener checkChangeListener) {
mCheckChangeListener = checkChangeListener;
}
public interface OnCheckChangeListener{
void onCheckChange(TestTickView testTickView,boolean checked);
}
}
1
2
3
4
5
6
7
8
9
<declare-styleable name="CheckView">
<attr name="uncheck_color" format="color" />
<!--选中后的基调颜色-->
<attr name="check_color" format="color" />
<!--选中后钩的颜色-->
<attr name="check_right_color" format="color" />
<!--圆的半径-->
<attr name="radius_size" format="dimension" />
</declare-styleable>