效果
首先看一下實現的效果：
實現環形菜單的方式比較明確的方式就是兩種，一種是自定義View，這種實現方式需要自己處理滾動過程中的繪制，不同item的點擊、綁定數據管理等等，優勢是可以深層次的定制化，每個步驟都是可控的。另外一種方式是將環形菜單看成是一個環形的List，也就是通過自定義LayoutManager來實現環形效果，這種方式的優勢是自定義LayoutManager只需要實現子控件的onLayoutChildren即可，數據綁定也由RecyclerView管理，比較方便。本文主要是通過第二種方式來實現，即自定義LayoutManager的方式。
如何實現
第一步需要繼承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，并且通過fill()函數來擺放子View，所以fill()函數如何實現就是重點了：
α=2π/n
∵sinα=a/b
∴a=sin(α)?b
∵cosα=c/b
∴c=cos(α)?b
∴x1=x+c
∴y1=y?a計算中，需要使用弧度計算，需要將角度首先轉為弧度：Math.toRadians(angle)?；《扔嬎愎剑?code>弧度 = 角度 * π / 180
根據上述公式就可以得出fill()函數為：
// mCurrAngle: 當前初始擺放角度
// 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)
//測量的子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()
//設置子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)
}
}通過實現以上fill()函數，首先就可以實現一個圓形排列的RecyclerView：
// 允許豎直方向的滑動
override fun canScrollVertically() = true
// 滑動過程的處理
override fun scrollVerticallyBy(
dy: Int,
recycler: RecyclerView.Recycler,
state: RecyclerView.State
): Int {
// 根據滑動距離 dy 計算滑動角度
val theta = ((-dy * 180) * orientation.value / (Math.PI * radius * DEFAULT_RATIO)) * DEFAULT_SCROLL_DAMP
// 根據滑動角度修正開始擺放的角度
mCurrAngle = (mCurrAngle + theta) % (Math.PI * 2)
offsetChildrenVertical(-dy)
fill(recycler)
return dy
}在根據滑動距離計算角度時，將豎直方向的滑動距離，近似看成是在圓上的弧長，再根據自定義的系數計算出需要滑動的角度。然后重新擺放子View。實現了上述函數后，就可以正常滾動了。那么當我們希望滾動完成后，能夠自動將距離最近的一個子View位置修正為初始位置（在本例中即為-90度的位置），應該如何實現呢？
// 當所有子View計算并擺放完畢會調用該函數
override fun onLayoutCompleted(state: RecyclerView.State) {
super.onLayoutCompleted(state)
stabilize()
}
// 修正子View位置
private fun stabilize() {
}要修正子View位置，就需要在所有子View都擺放完成后，再計算子View的位置，再重新擺放，所以stabilize() 實現就是關鍵了, 接下來就看下stabilize() 的實現：
// 修正子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
)
}
}
// 滾動
private fun startSmoothScroll(
targetPosition: Int,
shouldCenter: Boolean
) {
}在stabilize()函數中，做了一件事就是找到距離圓心最近距離的一個子View，然后調用startSmoothScroll() 滾動到該子View的位置。接下來就是startSmoothScroll()的實現了：
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
}
}
// 滾動
private fun startSmoothScroll(
targetPosition: Int,
shouldCenter: Boolean
) {
this.shouldCenter = shouldCenter
scroller.targetPosition = targetPosition
startSmoothScroll(scroller)
}滾動的過程是通過自定義的LinearSmoothScroller來實現的，主要是兩個重寫函數：calculateDtToFit, calculateSpeedPerPixel。其中calculateDtToFit 需要說明一下的是，當豎直方向滾動的時候，它的參數分別為：(子View的top，子View的bottom，RecyclerView的top，RecyclerView的bottom)，返回值為豎直方向上的滾動距離。當水平方向滾動的時候，它的參數分別為：(子View的left，子View的right，RecyclerView的left，RecyclerView的right)，返回值為水平方向上的滾動距離。而calculateSpeedPerPixel 函數主要是控制滑動速率的，返回值表示每滑動1像素需要耗費多長時間(ms)，這里SPEECH_MILLIS_INCH是自定義的阻尼系數。
關于calculateDtToFit計算過程如下：
a=(viewStart+viewEnd)/2?y
∵sinα=a/b
∴α=arcsin(a/b)計算出目標子View與x軸的夾角后，再根據之前說過的根據滑動距離 dy計算滑動角度反推出dy的值就可以了。
通過上述一系列操作，就可以實現了大部分效果，最后再加上一個初始位置的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
}當子View位于初始位置一定范圍內，將其放大1.2倍，注意子View放大的同時，x坐標也同樣需要變化。
經過上述步驟，就實現了基于自定義LayoutManager方式的環形菜單。
