快捷導(dǎo)航

如何在android中制作一個方向輪盤詳解

更新時間：2021年09月16日 09:14:42 作者：ololee_cn

這篇文章主要給大家介紹了關(guān)于如何在android中制作一個方向輪盤的相關(guān)資料,這個是在手游領(lǐng)域中很常見的用于控制方向的輪盤,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下

先上效果圖

原理很簡單，其實就是一個自定義的view

通過觀察，很容易發(fā)現(xiàn)，我們自己的輪盤就兩個view需要繪制，一個是外面的圓盤，一個就隨手指移動的滑塊；
外面的圓盤很好繪制，內(nèi)部的滑塊則需要采集手指的位置，根據(jù)手指的位置計算出滑塊在大圓內(nèi)的位置；
最后，我們做的UI不是單純做一個UI吧，肯定還是要用于實際應(yīng)用中去，所以要加一個通用性很好的回調(diào).

計算滑塊位置的原理：

當(dāng)觸摸點在大圓與小圓的半徑差之內(nèi)：
那么滑塊的位置就是觸摸點的位置
當(dāng)觸摸點在大圓與小圓的半徑差之外：

已知大圓圓心坐標(biāo)(cx,cy),大圓半徑rout,小圓半徑rinside,觸摸點的坐標(biāo)(px,py)
求小圓的圓心(ax,ay)?

作為經(jīng)過九義的你我來說，這不就是一個簡簡單單的數(shù)學(xué)題嘛，很容易就求解出小圓的圓心位置了。
利用三角形相似：

通用性很好的接口：

滑塊在圓中的位置，可以很好的用一個二位向量來表示，也可以用兩個浮點的變量來表示；

這個接口就可以很好的表示了小圓在大圓的位置了，他們的取值范圍是[-1,1]

小技巧:

為了小圓能始終在脫手后回到終點位置，我們設(shè)計了一個動畫，當(dāng)然，實際情況中有一種情況是，你移動到某個位置后，脫手后位置不能動，那你禁用這個動畫即可。

代碼部分

tips：代碼部分的變量名與原理的變量名有出入

public class ControllerView extends View implements View.OnTouchListener {
  private Paint borderPaint = new Paint();//大圓的畫筆
  private Paint fingerPaint = new Paint();//小圓的畫筆
  private float radius = 160;//默認(rèn)大圓的半徑
  private float centerX = radius;//大圓中心點的位置cx
  private float centerY = radius;//大圓中心點的位置cy
  private float fingerX = centerX, fingerY = centerY;//小圓圓心的位置(ax,ay)
  private float lastX = fingerX, lastY = fingerY;//小圓自動回歸中點動畫中上一點的位置
  private float innerRadius = 30;//默認(rèn)小圓半徑
  private float radiusBorder = (radius - innerRadius);//大圓減去小圓的半徑
  private ValueAnimator positionAnimator;//自動回中的動畫
  private MoveListener moveListener;//移動回調(diào)的接口

  public ControllerView(Context context) {
    super(context);
    init(context, null, 0);
  }

  public ControllerView(Context context,
      @Nullable AttributeSet attrs) {
    super(context, attrs);
    init(context, attrs, 0);
  }

  public ControllerView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    init(context, attrs, defStyleAttr);
  }

  //初始化
  private void init(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    if (attrs != null) {
      TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ControllerView);
      int fingerColor = typedArray.getColor(R.styleable.ControllerView_fingerColor,
          Color.parseColor("#3fffffff"));
      int borderColor = typedArray.getColor(R.styleable.ControllerView_borderColor,
          Color.GRAY);
      radius = typedArray.getDimension(R.styleable.ControllerView_radius, 220);
      innerRadius = typedArray.getDimension(R.styleable.ControllerView_fingerSize, innerRadius);
      borderPaint.setColor(borderColor);
      fingerPaint.setColor(fingerColor);
      lastX = lastY = fingerX = fingerY = centerX = centerY = radius;
      radiusBorder = radius - innerRadius;
      typedArray.recycle();
    }
    setOnTouchListener(this);
    positionAnimator = ValueAnimator.ofFloat(1);
    positionAnimator.addUpdateListener(animation -> {
      Float aFloat = (Float) animation.getAnimatedValue();
      changeFingerPosition(lastX + (centerX - lastX) * aFloat, lastY + (centerY - lastY) * aFloat);
    });
  }

  @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(getActualSpec(widthMeasureSpec), getActualSpec(heightMeasureSpec));
  }


  //處理wrapcontent的測量
  //默認(rèn)wrapcontent,沒有做matchParent,指定大小的適配
  //view實際的大小是通過大圓半徑確定的
  public int getActualSpec(int spec) {
    int mode = MeasureSpec.getMode(spec);
    int len = MeasureSpec.getSize(spec);
    switch (mode) {
      case MeasureSpec.AT_MOST:
        len = (int) (radius * 2);
        break;
    }
    return MeasureSpec.makeMeasureSpec(len, mode);
  }

  //繪制
  @Override protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    canvas.drawCircle(centerX, centerY, radius, borderPaint);
    canvas.drawCircle(fingerX, fingerY, innerRadius, fingerPaint);
  }

  @Override public boolean onTouch(View v, MotionEvent event) {
    float evx = event.getX(), evy = event.getY();
    float deltaX = evx - centerX, deltaY = evy - centerY;
    switch (event.getAction()) {
      case MotionEvent.ACTION_DOWN:
        //圓外按壓不生效
        if (deltaX * deltaX + deltaY * deltaY > radius * radius) {
          break;
        }
      case MotionEvent.ACTION_MOVE:
        //如果觸摸點在圓外
        if (Math.abs(deltaX) > radiusBorder || Math.abs(deltaY) > radiusBorder) {
          float distance = (float) Math.sqrt(deltaX * deltaX + deltaY * deltaY);
          changeFingerPosition(centerX + (deltaX * radiusBorder / distance),
              centerY + (deltaY * radiusBorder / distance));
        } else { //如果觸摸點在圓內(nèi)
          changeFingerPosition(evx, evy);
        }
        positionAnimator.cancel();
        break;
      case MotionEvent.ACTION_UP:
        positionAnimator.setDuration(1000);
        positionAnimator.start();
        break;
    }
    return true;
  }

  /**
   * 改變位置的回調(diào)出來
   */
  private void changeFingerPosition(float fingerX, float fingerY) {
    this.fingerX = fingerX;
    this.fingerY = fingerY;
    if (moveListener != null) {
      float r = radius - innerRadius;
      if (r == 0) {
        invalidate();
        return;
      }
      moveListener.move((fingerX - centerX) / r, (fingerY - centerY) / r);
    }
    invalidate();
  }

  @Override protected void finalize() throws Throwable {
    super.finalize();
    positionAnimator.removeAllListeners();
  }

  public void setMoveListener(
      MoveListener moveListener) {
    this.moveListener = moveListener;
  }

  /**
    *回調(diào)事件的接口
    *
   **/
  public interface MoveListener {
    void move(float dx, float dy);
  }
}

style.xml

<declare-styleable name="ControllerView">
  <attr name="fingerColor" format="color" />
  <attr name="borderColor" format="color" />
  <attr name="fingerSize" format="dimension" />
  <attr name="radius" format="dimension" />
</declare-styleable>