<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          Android實現(xiàn)溫度旋轉(zhuǎn)按鈕功能

          共 8288字,需瀏覽 17分鐘

           ·

          2021-11-23 20:47

          1、介紹


          首先看下效果圖:


          2、思路


          1. 初始化一些參數(shù)

          2. 繪制刻度盤

          3. 繪制刻度盤下的圓弧

          4. 繪制標題與溫度標識

          5. 繪制旋轉(zhuǎn)按鈕

          6. 繪制溫度

          7. 處理滑動事件

          8. 提供一些接口方法

          3、實現(xiàn)


          初始化一些參數(shù)

          public class TempControlView extends View {
          // 控件寬 private int width; // 控件高 private int height; // 刻度盤半徑 private int dialRadius; // 圓弧半徑 private int arcRadius; // 刻度高 private int scaleHeight = dp2px(10); // 刻度盤畫筆 private Paint dialPaint; // 圓弧畫筆 private Paint arcPaint; // 標題畫筆 private Paint titlePaint; // 溫度標識畫筆 private Paint tempFlagPaint; // 旋轉(zhuǎn)按鈕畫筆 private Paint buttonPaint; // 溫度顯示畫筆 private Paint tempPaint; // 文本提示 private String title = "最高溫度設(shè)置"; // 溫度 private int temperature; // 最低溫度 private int minTemp = 15; // 最高溫度 private int maxTemp = 30; // 四格(每格4.5度,共18度)代表溫度1度 private int angleRate = 4; // 按鈕圖片 private Bitmap buttonImage = BitmapFactory.decodeResource(getResources(), R.mipmap.btn_rotate); // 按鈕圖片陰影 private Bitmap buttonImageShadow = BitmapFactory.decodeResource(getResources(), R.mipmap.btn_rotate_shadow); // 抗鋸齒 private PaintFlagsDrawFilter paintFlagsDrawFilter; // 溫度改變監(jiān)聽 private OnTempChangeListener onTempChangeListener;
          // 以下為旋轉(zhuǎn)按鈕相關(guān)
          // 當前按鈕旋轉(zhuǎn)的角度 private float rotateAngle; // 當前的角度 private float currentAngle;
          ...
          @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // 控件寬、高 width = height = Math.min(h, w); // 刻度盤半徑 dialRadius = width / 2 - dp2px(20); // 圓弧半徑 arcRadius = dialRadius - dp2px(20); }
          ...}


          繪制刻度盤


          以屏幕中心為畫布原點,圓弧角度為270°,繪制未選中與選中狀態(tài)的刻度盤。
          旋轉(zhuǎn)方法中多減的2°是后期調(diào)整所得,不用在意。

          /** * 繪制刻度盤 * * @param canvas 畫布 */private void drawScale(Canvas canvas) {    canvas.save();    canvas.translate(getWidth() / 2, getHeight() / 2);    // 逆時針旋轉(zhuǎn)135-2度    canvas.rotate(-133);    dialPaint.setColor(Color.parseColor("#3CB7EA"));    for (int i = 0; i < 60; i++) {        canvas.drawLine(0, -dialRadius, 0, -dialRadius + scaleHeight, dialPaint);        canvas.rotate(4.5f);    }
          canvas.rotate(90); dialPaint.setColor(Color.parseColor("#E37364")); for (int i = 0; i < (temperature - minTemp) * angleRate; i++) { canvas.drawLine(0, -dialRadius, 0, -dialRadius + scaleHeight, dialPaint); canvas.rotate(4.5f); } canvas.restore();}

          繪制刻度盤下的圓弧

          /** * 繪制刻度盤下的圓弧 * * @param canvas 畫布 */private void drawArc(Canvas canvas) {    canvas.save();    canvas.translate(getWidth() / 2, getHeight() / 2);    canvas.rotate(135 + 2);    RectF rectF = new RectF(-arcRadius, -arcRadius, arcRadius, arcRadius);    canvas.drawArc(rectF, 0, 265, false, arcPaint);    canvas.restore();}



          繪制標題與溫度標識

              /**     * 繪制標題與溫度標識     *     * @param canvas 畫布     */    private void drawText(Canvas canvas) {        canvas.save();
          // 繪制標題 float titleWidth = titlePaint.measureText(title); canvas.drawText(title, (width - titleWidth) / 2, dialRadius * 2 + dp2px(15), titlePaint);
          // 繪制最小溫度標識 // 最小溫度如果小于10,顯示為0x String minTempFlag = minTemp < 10 ? "0" + minTemp : minTemp + ""; float tempFlagWidth = titlePaint.measureText(maxTemp + ""); canvas.rotate(55, width / 2, height / 2); canvas.drawText(minTempFlag, (width - tempFlagWidth) / 2, height + dp2px(5), tempFlagPaint);
          // 繪制最大溫度標識 canvas.rotate(-105, width / 2, height / 2); canvas.drawText(maxTemp + "", (width - tempFlagWidth) / 2, height + dp2px(5), tempFlagPaint); canvas.restore(); }



          繪制旋轉(zhuǎn)按鈕

          /** * 繪制旋轉(zhuǎn)按鈕 * * @param canvas 畫布 */private void drawButton(Canvas canvas) {    // 按鈕寬高    int buttonWidth = buttonImage.getWidth();    int buttonHeight = buttonImage.getHeight();    // 按鈕陰影寬高    int buttonShadowWidth = buttonImageShadow.getWidth();    int buttonShadowHeight = buttonImageShadow.getHeight();
          // 繪制按鈕陰影 canvas.drawBitmap(buttonImageShadow, (width - buttonShadowWidth) / 2, (height - buttonShadowHeight) / 2, buttonPaint);
          Matrix matrix = new Matrix(); // 設(shè)置按鈕位置 matrix.setTranslate(buttonWidth / 2, buttonHeight / 2); // 設(shè)置旋轉(zhuǎn)角度 matrix.preRotate(45 + rotateAngle); // 按鈕位置還原,此時按鈕位置在左上角 matrix.preTranslate(-buttonWidth / 2, -buttonHeight / 2); // 將按鈕移到中心位置 matrix.postTranslate((width - buttonWidth) / 2, (height - buttonHeight) / 2);
          //設(shè)置抗鋸齒 canvas.setDrawFilter(paintFlagsDrawFilter); canvas.drawBitmap(buttonImage, matrix, buttonPaint);}



          繪制溫度

          /** * 繪制溫度 * * @param canvas 畫布 */private void drawTemp(Canvas canvas) {    canvas.save();    canvas.translate(getWidth() / 2, getHeight() / 2);
          float tempWidth = tempPaint.measureText(temperature + ""); float tempHeight = (tempPaint.ascent() + tempPaint.descent()) / 2; canvas.drawText(temperature + "°", -tempWidth / 2 - dp2px(5), -tempHeight, tempPaint); canvas.restore();}



          處理滑動事件

          private boolean isDown;private boolean isMove;
          @Overridepublic boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: isDown = true; float downX = event.getX(); float downY = event.getY(); currentAngle = calcAngle(downX, downY); break;
          case MotionEvent.ACTION_MOVE: isMove = true; float targetX; float targetY; downX = targetX = event.getX(); downY = targetY = event.getY(); float angle = calcAngle(targetX, targetY);
          // 滑過的角度增量 float angleIncreased = angle - currentAngle;
          // 防止越界 if (angleIncreased < -270) { angleIncreased = angleIncreased + 360; } else if (angleIncreased > 270) { angleIncreased = angleIncreased - 360; }
          IncreaseAngle(angleIncreased); currentAngle = angle; invalidate(); break;
          case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: { if (isDown && isMove) { // 糾正指針位置 rotateAngle = (float) ((temperature - minTemp) * angleRate * 4.5); invalidate(); // 回調(diào)溫度改變監(jiān)聽 onTempChangeListener.change(temperature); isDown = false; isMove = false; } break; } } return true;}
          /** * 以按鈕圓心為坐標圓點,建立坐標系,求出(targetX, targetY)坐標與x軸的夾角 * * @param targetX x坐標 * @param targetY y坐標 * @return (targetX, targetY)坐標與x軸的夾角 */private float calcAngle(float targetX, float targetY) { float x = targetX - width / 2; float y = targetY - height / 2; double radian;
          if (x != 0) { float tan = Math.abs(y / x); if (x > 0) { if (y >= 0) { radian = Math.atan(tan); } else { radian = 2 * Math.PI - Math.atan(tan); } } else { if (y >= 0) { radian = Math.PI - Math.atan(tan); } else { radian = Math.PI + Math.atan(tan); } } } else { if (y > 0) { radian = Math.PI / 2; } else { radian = -Math.PI / 2; } } return (float) ((radian * 180) / Math.PI);}
          /** * 增加旋轉(zhuǎn)角度 * * @param angle 增加的角度 */private void IncreaseAngle(float angle) { rotateAngle += angle; if (rotateAngle < 0) { rotateAngle = 0; } else if (rotateAngle > 270) { rotateAngle = 270; } temperature = (int) (rotateAngle / 4.5) / angleRate + minTemp;}


          提供一些接口方法

          /** * 設(shè)置溫度 * * @param minTemp 最小溫度 * @param maxTemp 最大溫度 * @param temp    設(shè)置的溫度 */public void setTemp(int minTemp, int maxTemp, int temp) {    this.minTemp = minTemp;    this.maxTemp = maxTemp;    this.temperature = temp;    this.angleRate = 60 / (maxTemp - minTemp);    rotateAngle = (float) ((temp - minTemp) * angleRate * 4.5);    invalidate();}
          /** * 設(shè)置溫度改變監(jiān)聽 * * @param onTempChangeListener 監(jiān)聽接口 */public void setOnTempChangeListener(OnTempChangeListener onTempChangeListener) { this.onTempChangeListener = onTempChangeListener;}
          /** * 溫度改變監(jiān)聽接口 */public interface OnTempChangeListener { /** * 回調(diào)方法 * * @param temp 溫度 */ void change(int temp);}


          源碼地址:
          https://github.com/alidili/TempControlView

          到這里就結(jié)束啦。
          瀏覽 78
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  成人激情直播 | 又爽又黄又无遮挡 | 丁香五月婷婷在线观看 | 成人视频网站久久久精品网站久久久 | 成人黄色靠逼视频 |