android 在回收器视图中减少滚动条的滚动区域/大小

vnjpjtjt  于 2023-03-11  发布在  Android
关注(0)|答案(2)|浏览(132)

我想减少滚动条的大小(附图片)为回收视图,我已经尝试了创建自定义可绘制的拇指和轨道,但拇指是不是在轨道的基础。有人能帮助我在更好的方法来实现这一点吗?

在上图中,水平滚动条在底部,这是小尺寸。我想实现这样的东西。

vvppvyoh

vvppvyoh1#

这里有一种方法,你可以做你想要的:
定义拇指:

自定义缩略图.xml

<shape
    android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="@android:color/holo_red_light" />
    <size
        android:width="40dp"
        android:height="10dp" />
</shape>

定义搜索栏的进度可绘制对象:

搜索栏_可绘制.xml

<layer-list>
    <item android:id="@android:id/progress">
        <clip android:drawable="@android:color/transparent" />
    </item>
</layer-list>

我们不会显示搜索条的进度,所以我们将进度可绘制项设置为“透明”。代替进度可绘制项,我们将定义另一个显示在进度条后面的视图。2我们为什么要这么做?3这是因为搜索条想把滑块移出进度区域,而我们想让滑块完全留在进度区域内。第二个视图包含所有的seekbar,再加上左右两侧包含thumb的一些区域。

搜索栏_背景.xml

<shape>
    <corners android:radius="20dp"/>
    <solid android:color="@android:color/darker_gray" />
</shape>

下面是一些示例XML,以显示其外观:

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/white">

    <View
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="@drawable/seekbar_background"
        app:layout_constraintBottom_toBottomOf="@id/seekBar"
        app:layout_constraintEnd_toEndOf="@id/seekBar"
        app:layout_constraintStart_toStartOf="@id/seekBar"
        app:layout_constraintTop_toTopOf="@id/seekBar" />

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="16dp"
        android:max="10000"
        android:min="0"
        android:paddingStart="20dp"
        android:paddingEnd="20dp"
        android:progressDrawable="@drawable/seekbar_drawable"
        android:thumb="@drawable/custom_thumb"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

使用SeekBar.OnSeekBarChangeListener通过 RecyclerView 的滚动功能滚动 RecyclerView。手动滚动 RecyclerView 时,使用RecyclerView.OnScrollListener设置搜索条的进度。您必须建立两个视图滚动状态的Map。
我已经硬编码了一些值,您可能需要调整这些值。
可以使用以下代码以编程方式更改缩略图的宽度,以调整 Recyclerview 项的数量或任何其他值。
例如,要将缩略图的宽度更改为2倍,可以执行以下操作:

val thumb = binding.seekBar.thumb as GradientDrawable
thumb.setSize(thumb.intrinsicWidth * 2, thumb.intrinsicHeight)
lb3vh1jj

lb3vh1jj2#

你可以创建自己的滚动条,并将其与回收视图绑定。以下是回收视图处理上述滚动条的扩展方法

fun RecyclerView.handleScroll(itemScrollerBinding: ItemScrollerBinding) {
    post {
        val parentWidth = itemScrollerBinding.parent.width
        val layoutParams = itemScrollerBinding.progress.layoutParams
        val initialX = itemScrollerBinding.progress.x
        layoutManager?.let {
            val totalWidth = this.computeHorizontalScrollRange()
            val visibleWidth = this.computeHorizontalScrollExtent()
            val percent =
                visibleWidth.toFloat() / totalWidth.toFloat()
            layoutParams.width = (parentWidth * percent).toInt()
            itemScrollerBinding.progress.layoutParams = layoutParams
            addOnScrollListener(object :
                RecyclerView.OnScrollListener() {
                override fun onScrolled(
                    recyclerView: RecyclerView,
                    dx: Int,
                    dy: Int,
                ) {
                    super.onScrolled(recyclerView, dx, dy)
                    val scrolledWidth =
                        this@handleScroll.computeHorizontalScrollOffset()
                    val updatedVisibleWidthRecyclerView =
                        visibleWidth + scrolledWidth
                    val scrolledWidthScroller =
                        ((parentWidth.toFloat() / totalWidth) * scrolledWidth)
                    itemScrollerBinding.progress.x =
                        initialX + scrolledWidthScroller
                }
            })
        }
    }
}

以下是ItemScrollerBinding的xml代码

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/parent"
    android:layout_width="@dimen/size_48"
    android:layout_height="@dimen/size_6"
    android:background="@drawable/bg_scroller_background">
    <LinearLayout
        android:id="@+id/progress"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="@drawable/bg_scroller"
        android:orientation="horizontal" />
</FrameLayout>

您可以将其放置在回收器视图下方并使其居中。

相关问题