话不多说先上代码,首先是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;
}
}