Android自定義控制條效果

更新時間：2020年07月03日 08:33:15 作者：rains at night

這篇文章主要為大家詳細(xì)介紹了Android自定義控制條效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Android自定義控制條效果的具體代碼，供大家參考，具體內(nèi)容如下

ControlBar

自定義一個可以調(diào)節(jié)大小的控件，可以根據(jù)寬高來指定控制條方向。當(dāng)width >= heigth時，為橫向控制條，否則為豎向控制條

onMeasure

根據(jù)用戶給定的width與height計算控制條的坐標(biāo)。

1.主要的計算思路

先計算橫向的的坐標(biāo)點，豎向的坐標(biāo)點即橫向的逆時針旋轉(zhuǎn)90度再向下移一個heigth的長度。

//橫向坐標(biāo)點
mHorLArcFirstPathX = mRadius + mLArcLength;
mHorLArcFirstPathY = startY + mBarHeight * (1.0f - LITTLE_ARC_PER_WIDTH) / 2.0f ;
//對應(yīng)豎向坐標(biāo)點
mLArcFirstPathX = mHorLArcFirstPathY;
mLArcFirstPathY = -mHorLArcFirstPathX + longSide;

onDraw

根據(jù)計算所得坐標(biāo)點，構(gòu)建路徑，繪圖

super.onDraw(canvas);
  mBgPaint.setColor(Color.WHITE);
  canvas.drawPath(mBgPath, mBgPaint);
  mBgPaint.setColor(Color.GRAY);
  canvas.drawPath(mMaxPath, mBgPaint);
  canvas.drawPath(mPath, mPaint);
  mBgPaint.setColor(Color.WHITE);
  if(mDirection == HORIZONTAL){
   canvas.drawCircle(mRadius + mPercent * mBarWidth, mRadius, mRadius, mBgPaint);
   canvas.drawCircle(mRadius + mPercent * mBarWidth, mRadius, mRadius - SPACING, mPaint);
  }else {
   canvas.drawCircle(mRadius, mHeight - (mRadius + mPercent * mBarWidth), mRadius, mBgPaint);
   canvas.drawCircle(mRadius, mHeight - (mRadius + mPercent * mBarWidth), mRadius - SPACING, mPaint);
  }

onTouchEvent

根據(jù)手指滑動，動態(tài)調(diào)整數(shù)值大小

@Override
 public boolean onTouchEvent(MotionEvent event) {
  switch (event.getAction()){
   case MotionEvent.ACTION_DOWN:
   case MotionEvent.ACTION_MOVE:
    float distance = 0;
    float maxDist = 0;
    switch (mDirection){
     case HORIZONTAL:
      distance = event.getX();
      maxDist = mWidth;
      break;
     case VERTICAL:
      distance = mHeight - event.getY();
      maxDist = mHeight;
      break;
    }
    if(distance <= mRadius){
     updateView(MIN_VALUE);
    }else if(distance >= maxDist - mRadius){
     updateView(MAX_VALUE);
    }else {
     updateView(calculatingValue(distance));
    }
    return true;
   default:
    return super.onTouchEvent(event);
  }
 }

實際效果如圖所示

橫向控制條