快捷導(dǎo)航

基于Android實(shí)現(xiàn)可滾動(dòng)的環(huán)形菜單效果

更新時(shí)間：2022年03月29日 15:14:41 作者：fb0122

這篇文章主要為大家詳細(xì)介紹了Android如何使用kotlin實(shí)現(xiàn)可滾動(dòng)的環(huán)形菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

效果

首先看一下實(shí)現(xiàn)的效果：

可以看出，環(huán)形菜單的實(shí)現(xiàn)有點(diǎn)類似于滾輪效果，滾輪效果比較常見，比如在設(shè)置時(shí)間的時(shí)候就經(jīng)常會(huì)用到滾輪的效果。那么其實(shí)通過(guò)環(huán)形菜單的表現(xiàn)可以將其看作是一個(gè)圓形的滾輪，是一種滾輪實(shí)現(xiàn)的變式。

實(shí)現(xiàn)環(huán)形菜單的方式比較明確的方式就是兩種，一種是自定義View，這種實(shí)現(xiàn)方式需要自己處理滾動(dòng)過(guò)程中的繪制，不同item的點(diǎn)擊、綁定數(shù)據(jù)管理等等，優(yōu)勢(shì)是可以深層次的定制化，每個(gè)步驟都是可控的。另外一種方式是將環(huán)形菜單看成是一個(gè)環(huán)形的List，也就是通過(guò)自定義LayoutManager來(lái)實(shí)現(xiàn)環(huán)形效果，這種方式的優(yōu)勢(shì)是自定義LayoutManager只需要實(shí)現(xiàn)子控件的onLayoutChildren即可，數(shù)據(jù)綁定也由RecyclerView管理，比較方便。本文主要是通過(guò)第二種方式來(lái)實(shí)現(xiàn)，即自定義LayoutManager的方式。

如何實(shí)現(xiàn)

第一步需要繼承RecyclerView.LayoutManager：

class ArcLayoutManager(
    private val context: Context,
) : RecyclerView.LayoutManager() {
	override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams =
        RecyclerView.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
  
  override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
        super.onLayoutChildren(recycler, state)
        fill(recycler)
    }
  
  // layout子View
  private fun fill(recycler: RecyclerView.Recycler) {
  }
}

繼承LayoutManager之后，重寫了onLayoutChildren，并且通過(guò)fill()函數(shù)來(lái)擺放子View，所以fill()函數(shù)如何實(shí)現(xiàn)就是重點(diǎn)了：

首先看一下上圖，首先假設(shè)圓心坐標(biāo)(x, y)為坐標(biāo)原點(diǎn)建立坐標(biāo)系，然后圖中藍(lán)色線段b的為半徑，紅色線段a為子View中心到x軸的距離，綠色線段c為子View中心到y(tǒng)軸的距離，要知道子View如何擺放，就需要計(jì)算出紅色和綠色的距離。那么假設(shè)以-90為起點(diǎn)開始擺放子View，假設(shè)一共有n個(gè)子View，那么就可以計(jì)算得到：

計(jì)算中，需要使用弧度計(jì)算，需要將角度首先轉(zhuǎn)為弧度：Math.toRadians(angle)?；《扔?jì)算公式：弧度 = 角度 * π / 180

根據(jù)上述公式就可以得出fill()函數(shù)為：

// mCurrAngle: 當(dāng)前初始擺放角度
// mInitialAngle：初始角度
private fun fill(recycler: RecyclerView.Recycler) {
  if (itemCount == 0) {
    removeAndRecycleAllViews(recycler)
    return
  }

  detachAndScrapAttachedViews(recycler)

  angleDelay = Math.PI * 2 / (mVisibleItemCount)

  if (mCurrAngle == 0.0) {
    mCurrAngle = mInitialAngle
  }

  var angle: Double = mCurrAngle
  val count = itemCount
  for (i in 0 until count) {
    val child = recycler.getViewForPosition(i)
    measureChildWithMargins(child, 0, 0)
    addView(child)

    //測(cè)量的子View的寬，高
    val cWidth: Int = getDecoratedMeasuredWidth(child)
    val cHeight: Int = getDecoratedMeasuredHeight(child)

    val cl = (innerX + radius * sin(angle)).toInt()
    val ct = (innerY - radius * cos(angle)).toInt()

    //設(shè)置子view的位置
    var left = cl - cWidth / 2
    val top = ct - cHeight / 2
    var right = cl + cWidth / 2
    val bottom = ct + cHeight / 2

    layoutDecoratedWithMargins(
      child,
      left,
      top,
      right,
      bottom
    )
    angle += angleDelay * orientation.value
  }

  recycler.scrapList.toList().forEach {
    recycler.recycleView(it.itemView)
  }
}

通過(guò)實(shí)現(xiàn)以上fill()函數(shù)，首先就可以實(shí)現(xiàn)一個(gè)圓形排列的RecyclerView：

此時(shí)如果嘗試滑動(dòng)的話，是沒有效果的，所以還需要實(shí)現(xiàn)在滑動(dòng)過(guò)程中的View擺放, 因?yàn)閮H允許在豎直方向的滑動(dòng)，所以：

// 允許豎直方向的滑動(dòng)
override fun canScrollVertically() = true

// 滑動(dòng)過(guò)程的處理
override fun scrollVerticallyBy(
  dy: Int,
  recycler: RecyclerView.Recycler,
  state: RecyclerView.State
): Int {
  // 根據(jù)滑動(dòng)距離 dy 計(jì)算滑動(dòng)角度
  val theta = ((-dy * 180) * orientation.value / (Math.PI * radius * DEFAULT_RATIO)) * DEFAULT_SCROLL_DAMP
  // 根據(jù)滑動(dòng)角度修正開始擺放的角度
  mCurrAngle = (mCurrAngle + theta) % (Math.PI * 2)
  offsetChildrenVertical(-dy)
  fill(recycler)
  return dy
}

在根據(jù)滑動(dòng)距離計(jì)算角度時(shí)，將豎直方向的滑動(dòng)距離，近似看成是在圓上的弧長(zhǎng)，再根據(jù)自定義的系數(shù)計(jì)算出需要滑動(dòng)的角度。然后重新擺放子View。

實(shí)現(xiàn)了上述函數(shù)后，就可以正常滾動(dòng)了。那么當(dāng)我們希望滾動(dòng)完成后，能夠自動(dòng)將距離最近的一個(gè)子View位置修正為初始位置（在本例中即為-90度的位置），應(yīng)該如何實(shí)現(xiàn)呢？

// 當(dāng)所有子View計(jì)算并擺放完畢會(huì)調(diào)用該函數(shù)
override fun onLayoutCompleted(state: RecyclerView.State) {
    super.onLayoutCompleted(state)
    stabilize()
}

// 修正子View位置
private fun stabilize() {
}

要修正子View位置，就需要在所有子View都擺放完成后，再計(jì)算子View的位置，再重新擺放，所以stabilize() 實(shí)現(xiàn)就是關(guān)鍵了, 接下來(lái)就看下stabilize() 的實(shí)現(xiàn)：

// 修正子View位置
private fun stabilize() {
  if (childCount < mVisibleItemCount / 2 || isSmoothScrolling) return

  var minDistance = Int.MAX_VALUE
  var nearestChildIndex = 0
  for (i in 0 until childCount) {
    val child = getChildAt(i) ?: continue
    if (orientation == FillItemOrientation.LEFT_START && getDecoratedRight(child) > innerX)
    continue
    if (orientation == FillItemOrientation.RIGHT_START && getDecoratedLeft(child) < innerX)
    continue

    val y = (getDecoratedTop(child) + getDecoratedBottom(child)) / 2
    if (abs(y - innerY) < abs(minDistance)) {
      nearestChildIndex = i
      minDistance = y - innerY
    }
  }
  if (minDistance in 0..10) return
  getChildAt(nearestChildIndex)?.let {
    startSmoothScroll(
      getPosition(it),
      true
    )
  }
}
 
// 滾動(dòng)
private fun startSmoothScroll(
        targetPosition: Int,
        shouldCenter: Boolean
    ) {
}

在stabilize()函數(shù)中，做了一件事就是找到距離圓心最近距離的一個(gè)子View，然后調(diào)用startSmoothScroll() 滾動(dòng)到該子View的位置。

接下來(lái)就是startSmoothScroll()的實(shí)現(xiàn)了：

private val scroller by lazy {
  object : LinearSmoothScroller(context) {

    override fun calculateDtToFit(
      viewStart: Int,
      viewEnd: Int,
      boxStart: Int,
      boxEnd: Int,
      snapPreference: Int
    ): Int {
      if (shouldCenter) {
        val viewY = (viewStart + viewEnd) / 2
        var modulus = 1
        val distance: Int
        if (viewY > innerY) {
          modulus = -1
          distance = viewY - innerY
        } else {
          distance = innerY - viewY
        }
        val alpha = asin(distance.toDouble() / radius)
        return (PI * radius * DEFAULT_RATIO * alpha / (180 * DEFAULT_SCROLL_DAMP) * modulus).roundToInt()
      } else {
        return super.calculateDtToFit(
          viewStart,
          viewEnd,
          boxStart,
          boxEnd,
          snapPreference
        )
      }
    }

    override fun calculateSpeedPerPixel(displayMetrics: DisplayMetrics) =
    SPEECH_MILLIS_INCH / displayMetrics.densityDpi
  }
}

// 滾動(dòng)
private fun startSmoothScroll(
  targetPosition: Int,
  shouldCenter: Boolean
) {
  this.shouldCenter = shouldCenter
  scroller.targetPosition = targetPosition
  startSmoothScroll(scroller)
}

滾動(dòng)的過(guò)程是通過(guò)自定義的LinearSmoothScroller來(lái)實(shí)現(xiàn)的，主要是兩個(gè)重寫函數(shù)：calculateDtToFit, calculateSpeedPerPixel。其中calculateDtToFit 需要說(shuō)明一下的是，當(dāng)豎直方向滾動(dòng)的時(shí)候，它的參數(shù)分別為：(子View的top，子View的bottom，RecyclerView的top，RecyclerView的bottom)，返回值為豎直方向上的滾動(dòng)距離。當(dāng)水平方向滾動(dòng)的時(shí)候，它的參數(shù)分別為：(子View的left，子View的right，RecyclerView的left，RecyclerView的right)，返回值為水平方向上的滾動(dòng)距離。而calculateSpeedPerPixel 函數(shù)主要是控制滑動(dòng)速率的，返回值表示每滑動(dòng)1像素需要耗費(fèi)多長(zhǎng)時(shí)間(ms)，這里SPEECH_MILLIS_INCH是自定義的阻尼系數(shù)。

關(guān)于calculateDtToFit計(jì)算過(guò)程如下：

計(jì)算出目標(biāo)子View與x軸的夾角后，再根據(jù)之前說(shuō)過(guò)的根據(jù)滑動(dòng)距離 dy 計(jì)算滑動(dòng)角度反推出dy的值就可以了。

通過(guò)上述一系列操作，就可以實(shí)現(xiàn)了大部分效果，最后再加上一個(gè)初始位置的View 放大的效果：

private fun fill(recycler: RecyclerView.Recycler) {
  ...
  layoutDecoratedWithMargins(
    child,
    left,
    top,
    right,
    bottom
  )
  scaleChild(child)
  ...
}

private fun scaleChild(child: View) {
  val y = (child.top + child.bottom) / 2
  val scale = if (abs( y - innerY) > child.measuredHeight / 2) {
    child.translationX = 0f
    1f
  } else {
    child.translationX = -child.measuredWidth * 0.2f
    1.2f
  }
  child.pivotX = 0f
  child.pivotY = child.height / 2f
  child.scaleX = scale
  child.scaleY = scale
}

當(dāng)子View位于初始位置一定范圍內(nèi)，將其放大1.2倍，注意子View放大的同時(shí)，x坐標(biāo)也同樣需要變化。

經(jīng)過(guò)上述步驟，就實(shí)現(xiàn)了基于自定義LayoutManager方式的環(huán)形菜單。

以上就是基于Android實(shí)現(xiàn)可滾動(dòng)的環(huán)形菜單效果的詳細(xì)內(nèi)容，更多關(guān)于Android環(huán)形菜單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: