Kotlin 水平滚动RecyclerView,增加滚动条指示器(仿拼多多首页分类模块)

拼多多效果
我的效果
话不多说先上代码,首先是xml页面,RecyclerView布局下面是小滚动条的布局
activity_main.xml

 <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    <FrameLayout
        android:layout_gravity="center"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <View
            android:layout_width="102dp"
            android:layout_height="5dp"
            android:background="@drawable/horizontal_track"/>
        <View
            android:id="@+id/main_line"
            android:layout_width="30dp"
            android:layout_height="3dp"
            android:layout_marginLeft="1dp"
            android:layout_marginRight="1dp"
            android:background="@drawable/horizontal_thumb"
            android:layout_gravity="center_vertical"/>
    </FrameLayout>

horizontal_track.xml
长View整体长度的背景颜色

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#0600B3" />
    <corners android:radius="5dp" />
</shape>

horizontal_thumb.xml
短View的背景颜色

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#B992FF" />
    <corners android:radius="5dp" />
</shape>

MainActivity
设置成横向2行显示

 recyclerView.layoutManager =  GridLayoutManager(this, 2, GridLayoutManager.HORIZONTAL, false)

给recyclerView设置滚动监听addOnScrollListener

	recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
        override fun onScrollStateChanged(recyclerView :RecyclerView, newState : Int) {
            super.onScrollStateChanged(recyclerView, newState)
        }

        override fun onScrolled(recyclerView : RecyclerView, dx : Int, dy : Int) {
            super.onScrolled(recyclerView, dx, dy)
            //整体的总宽度,注意是整体,包括在显示区域之外的。
            var range = recyclerView.computeHorizontalScrollRange()
            var density = getScreenDensity()
            //计算出溢出部分的宽度,即屏幕外剩下的宽度
            var maxEndX = range + (10 * density) + 5 - ScreenUtils.getScreenWidth(this@MainActivity)
            //滑动的距离
            endX += dx
            //计算比例
            var proportion = endX / maxEndX
            //计算滚动条宽度
            var transMaxRange = (main_line.parent as ViewGroup).width - main_line.width
            //设置滚动条移动
            main_line.translationX = transMaxRange * proportion
        }
    })

获取屏幕像素和密度getScreenDensity

	fun getScreenDensity() : Float{
        var wm:WindowManager = getSystemService(Context.WINDOW_SERVICE) as WindowManager
        var dm =  DisplayMetrics()
        wm?.defaultDisplay?.getMetrics(dm)
        /*
          if (wm != null) {
             wm.defaultDisplay.getMetrics(dm)
          }
        */
        var width = dm.widthPixels// 屏幕宽度(像素)
        var height = dm.heightPixels // 屏幕高度(像素)
        var density = dm.density//屏幕密度(0.75 / 1.0 / 1.5)
        var densityDpi = dm.densityDpi//屏幕密度dpi(120 / 160 / 240)
        return density
    }

ScreenUtils获得屏幕相关的辅助类(获取屏幕的宽度和高度)

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Rect;
import android.util.DisplayMetrics;
import android.view.View;
import android.view.WindowManager;

public class ScreenUtils {

    private ScreenUtils() {
        /* cannot be instantiated */
        throw new UnsupportedOperationException("cannot be instantiated");
    }

    /**
     * 获得屏幕高度
     *
     * @param context
     * @return
     */
    public static int getScreenWidth(Context context) {
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.widthPixels;
    }

    /**
     * 获得屏幕宽度
     *
     * @param context
     * @return
     */
    public static int getScreenHeight(Context context) {
        WindowManager wm = (WindowManager) context
                .getSystemService(Context.WINDOW_SERVICE);
        DisplayMetrics outMetrics = new DisplayMetrics();
        wm.getDefaultDisplay().getMetrics(outMetrics);
        return outMetrics.heightPixels;
    }

}

猜你喜欢

转载自blog.csdn.net/weixin_43522997/article/details/107630311