经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » Android » 查看文章
基于Android实现可滚动的环形菜单效果
来源:jb51  时间:2022/3/29 16:18:44  对本文有异议

效果

首先看一下实现的效果:

可以看出,环形菜单的实现有点类似于滚轮效果,滚轮效果比较常见,比如在设置时间的时候就经常会用到滚轮的效果。那么其实通过环形菜单的表现可以将其看作是一个圆形的滚轮,是一种滚轮实现的变式。

实现环形菜单的方式比较明确的方式就是两种,一种是自定义View,这种实现方式需要自己处理滚动过程中的绘制,不同item的点击、绑定数据管理等等,优势是可以深层次的定制化,每个步骤都是可控的。另外一种方式是将环形菜单看成是一个环形的List,也就是通过自定义LayoutManager来实现环形效果,这种方式的优势是自定义LayoutManager只需要实现子控件的onLayoutChildren即可,数据绑定也由RecyclerView管理,比较方便。本文主要是通过第二种方式来实现,即自定义LayoutManager的方式。

如何实现

第一步需要继承RecyclerView.LayoutManager:

  1. class ArcLayoutManager(
  2. private val context: Context,
  3. ) : RecyclerView.LayoutManager() {
  4. override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams =
  5. RecyclerView.LayoutParams(MATCH_PARENT, WRAP_CONTENT)
  6. override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
  7. super.onLayoutChildren(recycler, state)
  8. fill(recycler)
  9. }
  10. // layout子View
  11. private fun fill(recycler: RecyclerView.Recycler) {
  12. }
  13. }

继承LayoutManager之后,重写了onLayoutChildren,并且通过fill()函数来摆放子View,所以fill()函数如何实现就是重点了:

首先看一下上图,首先假设圆心坐标(x, y)为坐标原点建立坐标系,然后图中蓝色线段b的为半径,红色线段a为子View中心到x轴的距离,绿色线段c为子View中心到y轴的距离,要知道子View如何摆放,就需要计算出红色和绿色的距离。那么假设以-90为起点开始摆放子View,假设一共有n个子View,那么就可以计算得到:

计算中,需要使用弧度计算,需要将角度首先转为弧度:Math.toRadians(angle)。弧度计算公式:弧度 = 角度 * π / 180

根据上述公式就可以得出fill()函数为:

  1. // mCurrAngle: 当前初始摆放角度
  2. // mInitialAngle:初始角度
  3. private fun fill(recycler: RecyclerView.Recycler) {
  4. if (itemCount == 0) {
  5. removeAndRecycleAllViews(recycler)
  6. return
  7. }
  8.  
  9. detachAndScrapAttachedViews(recycler)
  10.  
  11. angleDelay = Math.PI * 2 / (mVisibleItemCount)
  12.  
  13. if (mCurrAngle == 0.0) {
  14. mCurrAngle = mInitialAngle
  15. }
  16.  
  17. var angle: Double = mCurrAngle
  18. val count = itemCount
  19. for (i in 0 until count) {
  20. val child = recycler.getViewForPosition(i)
  21. measureChildWithMargins(child, 0, 0)
  22. addView(child)
  23.  
  24. //测量的子View的宽,高
  25. val cWidth: Int = getDecoratedMeasuredWidth(child)
  26. val cHeight: Int = getDecoratedMeasuredHeight(child)
  27.  
  28. val cl = (innerX + radius * sin(angle)).toInt()
  29. val ct = (innerY - radius * cos(angle)).toInt()
  30.  
  31. //设置子view的位置
  32. var left = cl - cWidth / 2
  33. val top = ct - cHeight / 2
  34. var right = cl + cWidth / 2
  35. val bottom = ct + cHeight / 2
  36.  
  37. layoutDecoratedWithMargins(
  38. child,
  39. left,
  40. top,
  41. right,
  42. bottom
  43. )
  44. angle += angleDelay * orientation.value
  45. }
  46.  
  47. recycler.scrapList.toList().forEach {
  48. recycler.recycleView(it.itemView)
  49. }
  50. }

通过实现以上fill()函数,首先就可以实现一个圆形排列的RecyclerView:

此时如果尝试滑动的话,是没有效果的,所以还需要实现在滑动过程中的View摆放, 因为仅允许在竖直方向的滑动,所以:

  1. // 允许竖直方向的滑动
  2. override fun canScrollVertically() = true
  3.  
  4. // 滑动过程的处理
  5. override fun scrollVerticallyBy(
  6. dy: Int,
  7. recycler: RecyclerView.Recycler,
  8. state: RecyclerView.State
  9. ): Int {
  10. // 根据滑动距离 dy 计算滑动角度
  11. val theta = ((-dy * 180) * orientation.value / (Math.PI * radius * DEFAULT_RATIO)) * DEFAULT_SCROLL_DAMP
  12. // 根据滑动角度修正开始摆放的角度
  13. mCurrAngle = (mCurrAngle + theta) % (Math.PI * 2)
  14. offsetChildrenVertical(-dy)
  15. fill(recycler)
  16. return dy
  17. }

在根据滑动距离计算角度时,将竖直方向的滑动距离,近似看成是在圆上的弧长,再根据自定义的系数计算出需要滑动的角度。然后重新摆放子View。

实现了上述函数后,就可以正常滚动了。那么当我们希望滚动完成后,能够自动将距离最近的一个子View位置修正为初始位置(在本例中即为-90度的位置),应该如何实现呢?

  1. // 当所有子View计算并摆放完毕会调用该函数
  2. override fun onLayoutCompleted(state: RecyclerView.State) {
  3. super.onLayoutCompleted(state)
  4. stabilize()
  5. }
  6.  
  7. // 修正子View位置
  8. private fun stabilize() {
  9. }

要修正子View位置,就需要在所有子View都摆放完成后,再计算子View的位置,再重新摆放,所以stabilize() 实现就是关键了, 接下来就看下stabilize() 的实现:

  1. // 修正子View位置
  2. private fun stabilize() {
  3. if (childCount < mVisibleItemCount / 2 || isSmoothScrolling) return
  4.  
  5. var minDistance = Int.MAX_VALUE
  6. var nearestChildIndex = 0
  7. for (i in 0 until childCount) {
  8. val child = getChildAt(i) ?: continue
  9. if (orientation == FillItemOrientation.LEFT_START && getDecoratedRight(child) > innerX)
  10. continue
  11. if (orientation == FillItemOrientation.RIGHT_START && getDecoratedLeft(child) < innerX)
  12. continue
  13.  
  14. val y = (getDecoratedTop(child) + getDecoratedBottom(child)) / 2
  15. if (abs(y - innerY) < abs(minDistance)) {
  16. nearestChildIndex = i
  17. minDistance = y - innerY
  18. }
  19. }
  20. if (minDistance in 0..10) return
  21. getChildAt(nearestChildIndex)?.let {
  22. startSmoothScroll(
  23. getPosition(it),
  24. true
  25. )
  26. }
  27. }
  28. // 滚动
  29. private fun startSmoothScroll(
  30. targetPosition: Int,
  31. shouldCenter: Boolean
  32. ) {
  33. }

stabilize()函数中,做了一件事就是找到距离圆心最近距离的一个子View,然后调用startSmoothScroll() 滚动到该子View的位置。

接下来就是startSmoothScroll()的实现了:

  1. private val scroller by lazy {
  2. object : LinearSmoothScroller(context) {
  3.  
  4. override fun calculateDtToFit(
  5. viewStart: Int,
  6. viewEnd: Int,
  7. boxStart: Int,
  8. boxEnd: Int,
  9. snapPreference: Int
  10. ): Int {
  11. if (shouldCenter) {
  12. val viewY = (viewStart + viewEnd) / 2
  13. var modulus = 1
  14. val distance: Int
  15. if (viewY > innerY) {
  16. modulus = -1
  17. distance = viewY - innerY
  18. } else {
  19. distance = innerY - viewY
  20. }
  21. val alpha = asin(distance.toDouble() / radius)
  22. return (PI * radius * DEFAULT_RATIO * alpha / (180 * DEFAULT_SCROLL_DAMP) * modulus).roundToInt()
  23. } else {
  24. return super.calculateDtToFit(
  25. viewStart,
  26. viewEnd,
  27. boxStart,
  28. boxEnd,
  29. snapPreference
  30. )
  31. }
  32. }
  33.  
  34. override fun calculateSpeedPerPixel(displayMetrics: DisplayMetrics) =
  35. SPEECH_MILLIS_INCH / displayMetrics.densityDpi
  36. }
  37. }
  38.  
  39. // 滚动
  40. private fun startSmoothScroll(
  41. targetPosition: Int,
  42. shouldCenter: Boolean
  43. ) {
  44. this.shouldCenter = shouldCenter
  45. scroller.targetPosition = targetPosition
  46. startSmoothScroll(scroller)
  47. }

滚动的过程是通过自定义的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计算过程如下:

计算出目标子View与x轴的夹角后,再根据之前说过的根据滑动距离 dy 计算滑动角度反推出dy的值就可以了。

通过上述一系列操作,就可以实现了大部分效果,最后再加上一个初始位置的View 放大的效果:

  1. private fun fill(recycler: RecyclerView.Recycler) {
  2. ...
  3. layoutDecoratedWithMargins(
  4. child,
  5. left,
  6. top,
  7. right,
  8. bottom
  9. )
  10. scaleChild(child)
  11. ...
  12. }
  13.  
  14. private fun scaleChild(child: View) {
  15. val y = (child.top + child.bottom) / 2
  16. val scale = if (abs( y - innerY) > child.measuredHeight / 2) {
  17. child.translationX = 0f
  18. 1f
  19. } else {
  20. child.translationX = -child.measuredWidth * 0.2f
  21. 1.2f
  22. }
  23. child.pivotX = 0f
  24. child.pivotY = child.height / 2f
  25. child.scaleX = scale
  26. child.scaleY = scale
  27. }

当子View位于初始位置一定范围内,将其放大1.2倍,注意子View放大的同时,x坐标也同样需要变化。

经过上述步骤,就实现了基于自定义LayoutManager方式的环形菜单。

以上就是基于Android实现可滚动的环形菜单效果的详细内容,更多关于Android环形菜单的资料请关注w3xue其它相关文章!

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号