今天分享一个 HorizontalScrollView整体滑块，实现列表效果

HorizontalScrollView整体滑块，实现列表效果

有图有真相先上图

看到了效果我们来分析一下这个整体滑块，因为左边是固定的 而右边是一个整体的滑块，所以HorizontalScrollView肯定是包裹的左面。所以我们的思路基本上就有了。

因为使用列表控件实现这个功能时，最多的事情况是，一次性只能滑动一条而且用联动就会很麻烦，需要检测这一条在HorizontalScrollView滑动的距离，从而更改其他的条目的的位置且效果不好，会出现卡顿的情况，而且滑动不连贯。虽然说从列表的适配器中取到对应的控件也不是什么简单的事，只能说会者不难，不会者一脸懵逼。

所以我们的思想就是，既然列表实现不了，那我们就做一个类似于列表效果的横向滑块。
我们来分析一下我们需要的模块
上图

列表的主要的就是能上拉加载和下拉刷新，所以我们使用第三方的上拉加载，和下拉刷新的控件。
条目效果我们线性布局当容器使用，动态的将TextView添加到容器里形成一条的效果。然后把横向的每一条放在竖向的线性布局容器中，就可以实现了。
我们使用刷新控件是 com.scwang.smart.refresh.layout
导入方法在gradle引入

  /**
     * 刷新控件
     */
    implementation 'com.scwang.smart:refresh-layout-kernel:2.0.1'      //核心必须依赖
    implementation 'com.scwang.smart:refresh-header-classics:2.0.1'    //经典刷新头
    implementation 'com.scwang.smart:refresh-header-radar:2.0.1'       //雷达刷新头
    implementation 'com.scwang.smart:refresh-header-falsify:2.0.1'     //虚拟刷新头
    implementation 'com.scwang.smart:refresh-header-material:2.0.1'    //谷歌刷新头
    implementation 'com.scwang.smart:refresh-header-two-level:2.0.1'   //二级刷新头
    implementation 'com.scwang.smart:refresh-footer-ball:2.0.1'        //球脉冲加载
    implementation 'com.scwang.smart:refresh-footer-classics:2.0.1'    //经典加载

使用方法呢

        <com.scwang.smart.refresh.layout.SmartRefreshLayout
            android:id="@+id/refresh"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginTop="60dp">

            <com.scwang.smart.refresh.header.TwoLevelHeader
                android:id="@+id/header"
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <ScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"></ScrollView>


            <com.scwang.smart.refresh.footer.ClassicsFooter
                android:id="@+id/footer"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"></com.scwang.smart.refresh.footer.ClassicsFooter>
        </com.scwang.smart.refresh.layout.SmartRefreshLayout>

由于这个空间的的上拉加载和下拉刷新，需要在头和尾中间使用列表控件或者滑动控件，
所以我是用的是ScrollView。
然后我们的图结果就变成了
然后就是最最最重要的时候了，
功能代码的实现
声明： 使用kotlin 和mvvm开发。

 private fun initAutoShow(queryUserStockByUserBean: QueryUserStockByUserBean) {
        if (page == 1) {
            binding.llLeft.removeAllViews()
            binding.llRight.removeAllViews()
        }


        for (index in 0..queryUserStockByUserBean.data.list.size - 1) {
            array?.add(queryUserStockByUserBean?.data?.list?.get(index)?.id?.toInt()!!)
            if (index == 0 && page == 1) {
                val textView = TextView(context)
                textView.gravity = Gravity.CENTER
                textView.textColorResource = R.color.optional_white
                textView.text = "名称"
                val layoutParams = LinearLayout.LayoutParams(200, 65)
                layoutParams.margin = 10
                textView.layoutParams = layoutParams
                textView.textSize = 16f
                binding.llLeft.addView(textView)

                var ll = LinearLayout(context)
                val array = arrayOf(
                    "最新价",
                    "涨幅",
                    "涨跌",
                    "昨收",
                    "总量",
                    "金额",
                    "今开",
                    "最高",
                    "最低",
                    "市盈率",
                    "换手",
                    "操作"
                )
                for (i in 0..array.size - 1) {
                    when (i) {
                        1 -> {
                            CreateNewChild(array[i], 3, ll, index)
                        }
                        array.size - 1 -> {
                            CreateNewChild(array[i], 3, ll, index)
                        }
                        else -> {
                            CreateNewChild(array[i], 0, ll, index)
                        }
                    }



                    if (i == array.size - 1) {
                        binding.llRight.addView(ll)
                    }
                }
            }

            val textView = TextView(context)
            textView.gravity = Gravity.CENTER
            textView.textColorResource = R.color.optional_white
            textView.text = queryUserStockByUserBean.data.list.get(index).stockName
            val layoutParams = LinearLayout.LayoutParams(200, 65)
            layoutParams.margin = 10
            textView.textSize = 16f
            textView.layoutParams = layoutParams
            binding.llLeft.addView(textView)

            val ll = LinearLayout(context)
            for (dex in 0..11) {
                textView.backgroundResource = 0
                var type = 0
                when (dex) {
                    0 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).newPrice.toString(),
                            type, ll, index
                        )
                    }
                    1 -> {
                        if (queryUserStockByUserBean.data.list.get(index).upDownRate > 0) {
                            type = 1
                        } else {
                            type = 2
                        }
                        CreateNewChild(
                            "${
                                String.format(
                                    "%.2f",
                                    queryUserStockByUserBean.data.list.get(index).gianRate
                                )
                            } %", type, ll, index
                        )
                        type = 0
                    }

                    2 -> {

                        CreateNewChild(
                            "${
                                String.format(
                                    "%.2f",
                                    queryUserStockByUserBean.data.list.get(index).upDownRate
                                )
                            } %", type, ll, index
                        )
                    }
                    3 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).yesterdayPrice.toString(),
                            type,
                            ll,
                            index
                        )
                    }
                    4 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).total.toString(),
                            type,
                            ll,
                            index
                        )
                    }
                    5 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).amountOfMoney.toString(),
                            type,
                            ll,
                            index
                        )

                    }
                    6 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).openPrice.toString(),
                            type,
                            ll,
                            index
                        )

                    }
                    7 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).highPrice.toString(),
                            type,
                            ll,
                            index
                        )

                    }
                    8 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).lowPrice.toString(),
                            type,
                            ll,
                            index
                        )

                    }
                    9 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).peRatio.toString(),
                            type,
                            ll,
                            index
                        )

                    }
                    10 -> {
                        CreateNewChild(
                            queryUserStockByUserBean.data.list.get(index).turnoverRate.toString(),
                            type,
                            ll,
                            index
                        )

                    }
                    11 -> {
                        CreateNewChild("删除", 1, ll, index)

                    }

                }
            }
            binding.llRight.addView(ll)
        }

    }

    fun CreateNewChild(string: String, type: Int, ll: LinearLayout, index: Int) {
        var textView = TextView(context)
        textView.gravity = Gravity.CENTER
        textView.textColorResource = R.color.optional_white
        textView.text = string
        textView.textSize = 16f
        val layoutParams = LinearLayout.LayoutParams(200, 65)
        when (type) {
            1 -> {

                textView.backgroundResource = R.drawable.strategy_red_circle
            }
            2 -> {
                textView.backgroundResource = R.drawable.strategy_green_circle
            }

        }

        layoutParams.margin = 10
        ll.addView(textView, layoutParams)

        if (string.equals("删除")) {
            textView.setOnClickListener {
                ShowDialog(index)
            }
        }
    }

思路就是左边
当第一条时 需要额外生成标题
然后循环生成文本框 添加在竖向的线性布局之中

右边就是 先按照字段的数量循环将文本框生成添加在横向的线性布局之中
之后才将横的的布局添加在竖向的线性布局之中。

代码虽然不多，但是实现起来也并不是那么的容易，我只是介绍了一种方法，其他的就要靠各位小伙伴自己去探索了。

条条大路通罗马，没有必要在一棵树上吊死。

本文地址：https://blog.csdn.net/qq_43276983/article/details/108723926

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！