仿淘宝首页功能菜单实现可动态配置的进度展示

最近新需求要我们将app首页的功能菜单，做成类似于淘宝首页功能菜单滑动进度展示的样子，同时要满足，首页功能菜单的栏位可以后台动态配置:每页展示的行数和列数，滑动进度类似于淘宝首页菜单的样子。

淘宝首页菜单滑动进度条

通过观察可以发现，

淘宝菜单进度条红线的宽度比上灰线的宽度等于屏幕的宽度比上菜单的总宽度。

1.自定义底部进度条控件

继承View,实现其构造方法。
重写onDraw方法绘制两条横线，一条表示进度，一条表示要总长度。
定义方法，可以通过外部调用该方法来设置进度的其实位置和进度的长度，从而来改变进度相对进度条的位置。

  override fun onDraw(canvas: Canvas?) {
        super.onDraw(canvas)
         //绘制进度条的总长度
        canvas?.drawLine(0f, 0f, width.toFloat(), height.toFloat(), paintGray)
        //绘制进度条，startX表示x轴起始点，endX表示 进度的长度。
        canvas?.drawLine(startX, 0f, endX + startX, height.toFloat(), paintGreen)
    }

   /**  
     * 设置进度的长度和位置
     * @param startX 表示x轴起点
     * @param endX 表示进度的长度
     */
    fun setMoveDistance(startX: Float, endX: Float) {
        this.startX = startX
        this.endX = endX
        requestLayout()
    }

只需要几行代码就可以实现对进度条的自定义，然后，就是监听滑动事件来调用自定义View 的 setMoveDistance方法来设置进度的长度和位置了。

2.选择功能菜单的应该使用的控件

根据需求我们要动态的控制行数和列数，不能仅仅使用一个RecycleView来实现。
所以，这里采用，ScrollView来嵌套RecycleView来实现此功能。RecycleView徐需要动态加载，根据服务端返回的行数来进行动态的添加RecycleView。
由于ScrollView嵌套RecycleView会存在滑动冲突，这里我们使用自定义的RecycleView的LinearLayoutManager来解决这个问题，代码很简单，重写 LinearLayoutManager的canScrollHorizontally方法，将返回值改为false即可。对canScrollHorizontally不了解的可以自行百度。

 recycleView.layoutManager = object : LinearLayoutManager(myActivity, RecyclerView.HORIZONTAL, false) {
                override fun canScrollHorizontally(): Boolean {
                    return false
                }
            }

由于我们这里要横向滑动，所以这里使用了HorizontalScrollView，但是它本身是不支持滑动监听的，所以我们要继承 HorizontalScrollView 来重写 onScrollChanged方法来设置滑动监听。

   private lateinit var scrollViewListener: ScrollViewListener

    fun setScrollViewListener(scrollViewListener: ScrollViewListener) {
        this.scrollViewListener = scrollViewListener
    }

    override fun onScrollChanged(l: Int, t: Int, oldl: Int, oldt: Int) {
        super.onScrollChanged(l, t, oldl, oldt)
        scrollViewListener.onScrollChanged(this,l,t,oldl,oldt)
    }
}

interface ScrollViewListener {
    fun onScrollChanged(scrollView: ObservableScrollView, x: Int, y: Int, oldx: Int, oldy: Int)

现在所有的控件都已经准备好了，我们来将它们组合起来。
布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <com.zfw.jijia.view.ObservableScrollView
        android:id="@+id/hlScrollView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scrollbars="none">

        <LinearLayout
            android:id="@+id/llMenu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"/>

    </com.zfw.jijia.view.ObservableScrollView>

    <com.zfw.jijia.view.BottomLineView
        android:id="@+id/blv"
        android:layout_width="50dp"
        android:layout_height="2dp"
        android:layout_marginTop="5dp"
        android:layout_gravity="center"
        android:visibility="gone"/>
</LinearLayout>

根据接口返回的行数，往 LinearLayout 中添加 RecycleView

  for (i in navMenus.indices) {
      llMenu.addView(recycleView)
  }

通过监听 ObservableScrollView 的滑动事件来设置进度条的进度位置：

   // 屏幕宽度 / 功能菜单的总长度 = 进度的长度 / 进度条的长度
   ratio = meunView.blv.width.toDouble() / meunView.llMenu.width.toDouble()

   meunView.hlScrollView.setScrollViewListener(object : ScrollViewListener {
            override fun onScrollChanged(scrollView: ObservableScrollView, x: Int, y: Int, oldx: Int, oldy: Int) {
                //获取进度相对于进度条的其实位置= 滑动距离 * 比例
                val scrollDis = (scrollView.scrollX *  ratio).toFloat()
                meunView.blv.setMoveDistance(scrollDis, lbWidth)
            }

        })

ok,到这里就差不多了，其实，这个功能实现起来也不难，只要会基本的自定义控件，和对需求的一些分析，基本就差不多了。

仿淘宝首页功能菜单实现可动态配置的进度展示