基于Android實(shí)現(xiàn)可滾動(dòng)的環(huán)形菜單效果
效果
首先看一下實(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)的話,是沒(méi)有效果的,所以還需要實(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)文章!
相關(guān)文章
Android使用Sensor感應(yīng)器實(shí)現(xiàn)線程中刷新UI創(chuàng)建android測(cè)力計(jì)的功能
這篇文章主要介紹了Android使用Sensor感應(yīng)器實(shí)現(xiàn)線程中刷新UI創(chuàng)建android測(cè)力計(jì)的功能,實(shí)例分析了Android使用Sensor感應(yīng)器實(shí)現(xiàn)UI刷新及創(chuàng)建測(cè)力器的技巧,需要的朋友可以參考下2015-12-12Kotlin對(duì)象的懶加載方式by?lazy?與?lateinit?異同詳解
這篇文章主要為大家介紹了Kotlin對(duì)象的懶加載方式by?lazy?與?lateinit?異同詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10Android創(chuàng)建Menu菜單實(shí)例
這篇文章主要介紹了Android創(chuàng)建Menu菜單實(shí)例,講述了Android菜單項(xiàng)的創(chuàng)建方法,在Android應(yīng)用程序開發(fā)中非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10Android計(jì)時(shí)器chronometer使用實(shí)例講解
這篇文章主要為大家詳細(xì)介紹了Android計(jì)時(shí)器chronometer使用實(shí)例,介紹了Android計(jì)時(shí)器chronometer基本使用方法,感興趣的小伙伴們可以參考一下2016-04-04Android開發(fā)基礎(chǔ)簡(jiǎn)化Toast調(diào)用方法詳解
這篇文章主要為大家介紹了Android開發(fā)基礎(chǔ)簡(jiǎn)化Toast調(diào)用方法的相關(guān)資料,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Flutter實(shí)現(xiàn)支付寶集五福手畫福字功能
支付寶一年一度的集五?;顒?dòng)又開始了,其中包含了一個(gè)功能就是手寫福字,還包括撤銷一筆,清除重寫,保存相冊(cè)等。本文將介紹如何使用Flutter實(shí)現(xiàn)這些功能,感興趣的可以了解一下2022-01-01