登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

自定义View实战:空调遥控器切换度数 [复制链接]

2017-11-13 10:29
hellokenken 阅读:406 评论:0 赞:0
Tag:  

首先看下效果

简单描述下这篇文章需要用到的技术:

  1. View的测量
  2. Canvas绘图技巧
  3. 触摸事件的计算
  4. 接口回调

    整体思路

    1. 需要画两个圆弧一个是底部固定不变的另一个是更随手指移动渐变的圆弧
    2. 圆环上的分割线可以利用画布的旋转进行画线
    3. 文字的显示需要根据到圆心的距离进行计算。
    4. 根据手指滑动的x、y求当前滑动的范围的角度根据起始度数相加。

代码解读

  1. 画底部圆环
    使用drawArc(RectF oval,float startAngle, float sweepAngle, boolean useCenter, Paint paint)
    参数解读:
    oval:圆环外的矩形
    startAngle:开始角度
    sweepAngle:扫描角度
    useCenter:是否和圆心连线
    paint:画笔
    这里简单说下开始的0度角
    这里写图片描述
  mArcRectf = new RectF(mCenter - mRadius, mCenter - mRadius, mCenter + mRadius, mCenter + mRadius);   
   //画底部纯白色圆
  canvas.drawArc(mArcRectf, 135, 270, false, mArcPaint);

2.画带渐变色的圆,渐变色使用的是SweepGradient

 int[] colors = {0xFFE5BD7D, 0xFFFAAA64,
                0xFFFFFFFF, 0xFF6AE2FD,
                0xFF8CD0E5, 0xFFA3CBCB,
                0xFFBDC7B3, 0xFFD1C299, 0xFFE5BD7D,};
        //渐变色
        mSweepGradient = new SweepGradient(mCenter, mCenter, colors, null);
        // 设置画笔渐变色
        mArcPaint.setShader(mSweepGradient);
        // 画带渐变色的圆
        canvas.drawArc(mArcRectf, 135, scanDegrees, false, mArcPaint);

3.画线每隔3度旋转故整个圆需要120条线

//画线 每隔3度画一天线 整个圆共画120条线
        for (int i = 0; i < 120; i++) {
            //圆心正顶部直线的Y坐标
            top = mCenter - mRadius - circleWidth / 2;
            // 去除底部不包含的区域 只旋转不划线
            if (i <= 45 || i >= 75) {
                if (i % 15 == 0) {
                    //整点时Y轴向外延伸
                    top = top - 25;
                }
                canvas.drawLine(mCenter, mCenter - mRadius + 30, mCenter, top, mLinePaint);
            }
            //旋转
            canvas.rotate(3, mCenter, mCenter);
        }

4.画文字这个比较复杂些需要计算x、y轴坐标
这里写图片描述
由图可以看出构成一个夹角为45度的直角三角形,斜边z的长度为mRadius + circleWidth / 2 + 45;
circleWidth :为圆的宽度
45为文字离圆的距离
所以x点为:

  //斜边
        int c = mRadius + circleWidth / 2 + 45;
        Log.e("CXX", "x:" + x);
        x = (int) Math.sqrt((c * c / 2));

下面是画文字的代码

 //画文字+45代表这个字距离圆外边的距离
        //x代表文字的中心距离圆心的距离 这是原点中心正左边字的长度
        int x = mRadius + circleWidth / 2 + 45;
        //斜边
        int c = mRadius + circleWidth / 2 + 45;
        x = (int) Math.sqrt((c * c / 2));
        canvas.drawText(startDegrees + "", mCenter - x, mCenter + x, mTextPaint);
        canvas.drawText((startDegrees + 2) + "", mCenter - c, mCenter + 10, mTextPaint);
        canvas.drawText((startDegrees + 4) + "", mCenter - x, mCenter - x + 10, mTextPaint);
        canvas.drawText((startDegrees + 6) + "", mCenter, mCenter - c + 10, mTextPaint);
        canvas.drawText((startDegrees + 8) + "", mCenter + x, mCenter - x + 10, mTextPaint);
        canvas.drawText((startDegrees + 10) + "", mCenter + c, mCenter + 10, mTextPaint);
        canvas.drawText((startDegrees + 12) + "", mCenter + x, mCenter + x, mTextPaint);

这样整个界面就完成了但是还没加上滑动监听。
手指滑动需要得到当前手指所在象限才好计算度数因为每个象限和圆心的夹角都是0~90度。
首先先计算每个象限的夹角
这里写图片描述
可以根据手指移动的x点计算出cos然后求出对应的角度。

  float v = x / (float) Math.sqrt(x * x + y * y);
                // 根据cos求角度
                double acos = Math.acos(v);
                acos = Math.toDegrees(acos);

整个计算角度的代码如下:
float y = event.getY();
float x = event.getX();
float firstX = event.getX();
float firstY = event.getY();
//判断当前手指距离圆心的距离 代表在圆心的右侧
if (x > mCenter) {
x = x - mCenter;
} else {
x = mCenter - x;
}
if (y < mCenter) {
y = mCenter - y;
} else {
y = y - mCenter;
}
Log.e(“CXX”, “sqrt” + Math.sqrt(x * x + y * y) + “radius” + (mRadius - 40));
//判断当前手指是否在空白区域
if (Math.sqrt(x * x + y * y) < (mRadius - 40)) {
Log.e(“CXX”, “终止滑动”);
isCanMove = false;
return false;
}
float v = x / (float) Math.sqrt(x * x + y * y);
// 根据cos求角度
double acos = Math.acos(v);
acos = Math.toDegrees(acos);
Log.e(“CXX”, “acos” + acos);
//手指在第三象限
if (firstX <= mCenter && firstY >= mCenter) {
Log.e(“cxx”, “第三象限”);
acos = 180 - acos;
} else if (firstX <= mCenter && firstY <= mCenter) {
//手指在第二象限
acos = acos + 180;
Log.e(“CXX”, “第二象限”);
} else if (firstX >= mCenter && firstY <= mCenter) {
//手指在第一象限
acos = 360 - acos;
Log.e(“CXX”, “第一象限”);
} else {
Log.e(“CXX”, “第四象限”);
}
Log.e(“cxx”, “v” + acos);
scanDegrees = (int) acos;
//计算度数 每22.5度值+1
if (scanDegrees >= 135 && scanDegrees <= 360) {
scanDegrees = scanDegrees - 135;
int degrees = (int) (scanDegrees / 22.5);
Log.e(“CXX”, “当前度数” + (degrees + startDegrees));
finalDegrees = degrees;
if (moveInterface != null) {
moveInterface.getCurrentDegrees((degrees + startDegrees));
}
invalidate();

            } else if (scanDegrees <= 65) {
                //小于45无法算到最后一个 故意多加了20度
                scanDegrees = (int) (360 - 135 + acos);
                if (scanDegrees > 270) {
                    scanDegrees = 270;
                }
                int degrees = (int) (scanDegrees / 22.5);
                Log.e("CXX", "当前度数" + (degrees + startDegrees));
                finalDegrees = degrees;
                if (moveInterface != null) {
                    moveInterface.getCurrentDegrees((degrees + startDegrees));
                }
                if (scanDegrees > 270) {
                    return false;
                }
                invalidate();
                Log.e("CXX", "onTouchEvent scanDegrees" + scanDegrees);
            } else {
                scanDegrees = 270;
            }
            return true;

这样整个程序就完成了。 

分享到:
我来说两句
facelist
您需要登录后才可以评论 登录 | 立即注册
所有评论(0)

站长推荐

通过邮件订阅最新安卓weekly信息
上一条 /4 下一条

广告投放| 申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

返回顶部