Android简单转盘的实现
一、简介
在Android的菜鸟路上,学习自定义控件,掌握了一点东西就想实践一下,这时候刚好有个需求需要实现一个简单转盘的效果,那就动手去尝试一下,封装就…,只当做是自己的练习吧。效果图如下(点击可以让箭头旋转):
二、思路和主要代码
1、圆环部分的实现。先画一个蓝色的大圆,再画一个白色的小圆,前提是要设置相同的圆心,半径部分就可以自己去定义。主要代码:
// 从canvas层面去除绘制时锯齿 canvas.setDrawFilter(drawFilter); // 画圆环 paint.setColor(blue2); canvas.drawCircle(width / 2, height / 2, big_width, paint); paint.setColor(pure_white); canvas.drawCircle(width / 2, height / 2, small_width, paint);
画圆环
2、两条相交的直线。先让画布以圆心为中心点旋转45度,然后再画两条互相垂直的直线即可。代码如下:
// 画两条直线 canvas.rotate(45, width / 2, height / 2); paint.setColor(pure_white); paint.setStrokeWidth(dip2px(getContext(), 1)); canvas.drawLine(width / 2 - big_width, big_width, width / 2 + big_width, big_width, paint); canvas.drawLine(width / 2, height / 2 - big_width, width / 2, height/ 2 + big_width, paint); canvas.restore(); drawMyText(canvas, paint); drawTriagle(canvas, paint);
3、画三角形即图中的箭头。因为这三角形是需要转动,所以需要设置canvas的旋转的角度,再去画三角形。一开始设置三角形是在左边的,因此先确定三角形的三个顶点,然后在用Path类来画出三角形,至于旋转其实就是利用canvas.rotate(degree, width / 2, height / 2);要注意的是旋转的中心点是圆心,就可以让三角形围绕白色圆形转动了。不然就看不到旋转的三角形了。代码如下:
Path path = new Path(); // path.setFillType(FillType.WINDING); paint.setColor(pure_white); // 三角形的三个顶点 int x1, y1, x2, y2, x3, y3; canvas.save(); //旋转 canvas.rotate(degree, width / 2, height / 2); isRoating = false; x1 = width / 2 - (small_width + triagle_length); y1 = height / 2; x2 = x1 + (triagle_length + 10); y2 = height / 2 - (triagle_length + 10); x3 = x2; y3 = height / 2 + (triagle_length + 10); path.moveTo(x1, y1); path.lineTo(x2, y2); path.lineTo(x3, y3); path.close(); // 使这些点构成封闭的多边形 canvas.drawPath(path, paint); canvas.restore();
画三角形4、画文本。x坐标的是很容易确定的,y坐标我取的是文本的底部,所以需要使用以下方法来获取文本的范围。
paint.setColor(pure_white);
paint.setTextSize(fourTextSize);// 以像素为单位
Rect rbound = new Rect();
//左边的文字
paint.getTextBounds(leftText, 0, leftText.length(), rbound);
canvas.drawText(leftText, width / 2 - big_width + textPadding,
height / 2+rbound.height()/2, paint);
获取文本的大小之后就是画出具体的内容了,其它的文本也是类似。5、设置控件的点击事件。(1)判断点击是否落在圆环上。其实就是点到圆心的距离要大于小园的半径同时小于大圆的半径,这时候就能看出之前采用两个圆组合成圆环的好处了。
private boolean isInCircle(float x, float y) {
float distance = (float) Math.sqrt((x-width/2)(x-width/2)+(y-height/2)(y-height/2));
if(distance>small_width&&distance
(2)判断点落在哪一个区域。首先要计算出两条直线的表达式,要注意的是Android里面的坐标系竖直向下方向才是y轴的正方向。然后根据它在哪一条直线的上方和哪一条直线的下方等方向来判断。比如最左边的区域其实就是在倾斜角为45度直线的上方和另外一条直线的下方,这时候只需要判断y值就可以了。private int whichEdge(float x, float y) { int flag = -1; // 倾斜角为45度,右边那条直线y=-x+width/2+height/2; // 左边的直线为:y=x-(width/2-height/2),都转为andorid 坐标系了 float y2 = -x + width / 2 + height / 2; float y3 = x - (width / 2 - height / 2);// Log.e("点范围", "y2=" + y2 + " y3=" + y3 + " y=" + y); if (y > y3 && y < y2) flag = 0;// 在左侧范围 if (y < y3 && y < y2) flag = 1;// 上边范围 if (y < y3 && y > y2) flag = 2;// 右边范围 if (y > y3 && y > y2) flag = 3;// 底部范围 return flag; }(3)计算三角形要旋转的角度,这个就用暴力法来做,直接判断当前的位置和要旋转到的位置来设置它们的角度。暂时没想到其它的算法就只好将就了。(4)使用属性动画让三角形转起来。两个参数分别是三角形当前的角度和要旋转到的角度,然后在onAnimationUpdate回调方法里获取到当前的值,最后调用postInvalidate()方法重新绘图。
private void startAnim(){
ValueAnimator anim = ValueAnimator.ofInt(degree,degree2);
if(Math.abs(degree2-degree)==90){//旋转90度
anim.setDuration(rotateTime2);
}else{
//旋转180度
anim.setDuration(rotateTime);
}
anim.addUpdateListener(new AnimatorUpdateListener() {
@Override public void onAnimationUpdate(ValueAnimator animation) { degree = (int) animation.getAnimatedValue(); postInvalidate(); } }); anim.start();}
“`
开始旋转
(5)重写onTouchEvent方法。
@Override
public boolean onTouchEvent(MotionEvent event) {
if (event.getAction() == MotionEvent.ACTION_UP) {
if(isRoating)return true;
float downX = event.getX();
float downY = event.getY();
if (isInCircle(downX, downY)) {
int flag = whichEdge(downX, downY);
if (flag > -1) {
// 箭头指向
changeAngle(flag);
return true;
}
} else {
// 不在圆上
return false;
}
}
return true;
}
三、总结。
这是我学习了自定义控件的基础知识之后的实践,算是入门了,当然肯定会有很多不足的地方,慢慢来吧。我觉得遇到没做过的东西,主要就是要有自己的想法,虽然有可能不完美,但是至少是自己的东西。
源码下载
更多相关文章
- android处理拍照旋转问题及带来的对内存占用的思考
- Android中 3D 圆形旋转动态实现
- Android(安卓)RecyclerView设置分割线
- 2013.12.05(6)——— android ViewPagerIndicator之SampleTitlesDe
- Android视频播放器横竖屏自动切换
- android双指平移、旋转、缩放控件完美版
- android动画基础--旋转移动平移缩放
- 竖直的完美seekbar,无缝拖动!
- Tween动画xml