RecycleView自定义滚动条
程序员文章站
2022-05-29 15:23:39
...
简陋了 哈哈
1 使用style属性
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_tabs"
style="@style/tablerv_style"
android:paddingTop="5dp"
android:background="#fffcfcfc"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
2
<style name="tablerv_style">
<item name="android:scrollbarThumbHorizontal">@drawable/scrollbar</item>
<item name="android:scrollbarTrackHorizontal">@drawable/scrollbar_bg</item>
<item name="android:scrollbarTrackVertical">@drawable/scrollbar_bg</item>
<item name="android:scrollbarSize">@dimen/qb_px_5</item>
<item name="android:scrollbars">horizontal</item>
<item name="android:fadeScrollbars">false</item>
<item name="android:scrollbarStyle">insideOverlay</item>
</style>
3 scrollbar
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:left="@dimen/qb_px_300"
android:right="@dimen/qb_px_300">
<shape>
<corners android:radius="@dimen/qb_px_3" />
<solid android:color="@color/main" />
</shape>
</item>
</layer-list>
4 scrollbar-bg
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="@dimen/qb_px_6"
android:left="@dimen/qb_px_300"
android:right="@dimen/qb_px_300">
<shape>
<corners android:radius="@dimen/qb_px_3" />
<solid android:color="@color/graytext" />
</shape>
</item>
</layer-list>
参考来源
RecyclerView 滚动条 长宽设置
原创Android_man_me 最后发布于2018-12-07 10:39:51 阅读数 4529 收藏
RecyclerView Scrollbar
记录滚动条相关属性,本文主要内容:
1,scrollbar 样式设置
2,scrollbar 背景以及滚动条 长宽设置
属性 | 效果 |
android:scrollbars | 设置滚动条水平 horizontal / 或垂直 vertical |
scrollbarThumbVertical[Horizontal] | 设置滑块(短条) |
scrollbarTrackVertical[Horizontal] | 设置背景(长条) |
android:scrollbarStyle 滚动条的样式和位置 |
insideOverlay (默认值,表示在padding区域内并且覆盖在view上) |
insideInset (表示在padding区域内并且插入在view后面) | |
outsideOverlay(表示在padding区域外并且覆盖在view上) | |
outsideInset(表示在padding区域外并且插入在view后面) | |
scrollbarSize | 设置滚动条的大小,垂直时指宽度,水平时指高度 |
overScrollMode | (never)设置滑动到边缘时无效果模式 |
scrollbars | (none)设置滚动条不显示 |
一,样式设置:
在styles.xml 文件中添加一个 style标签
<style name="ZoomItemRecyclerView_style">
<item name="android:scrollbarThumbVertical">@color/blue_color_008ee3</item>
<item name="android:scrollbarTrackVertical">@color/white_5</item>
<item name="android:layout_marginRight">@dimen/dpi_10px</item>
<item name="android:layout_marginLeft">@dimen/dpi_10px</item>
<item name="android:scrollbarSize">@dimen/dpi_5px</item>
<item name="android:overScrollMode">never</item>
<item name="android:scrollbars">vertical</item>
<item name="android:scrollbarStyle">insideOverlay</item>
</style>
注意:滚动条的 背景和滑块设置
- Shape自定义 Drawable
- 图片
- .9.png
@color/xxx
的方式使用颜色值
此处设置一个 垂直的滚动条,然后在xml中引用该样式
<cn.sh.changxing.onlineradio.aa_activity.view.ZoomItemRecyclerView
android:id="@+id/fragment_recommend_list"
style="@style/ZoomItemRecyclerView_style"
android:layout_width="match_parent"
android:layout_height="match_parent" />
效果图如下
最简单的一个效果出来了,但是这里可以看到,有两个现象
1,滚动条起始位置(这里就是指背景高度)是撑满整个列表的
2,当列表数据越多的时候,滑块长度越小
如果我滚动条长度要求只占80%,或指定高度,滑块长度维持不变,那这明显不行
二,背景以及滚动条 长宽设置
稍微修改下,背景跟滑块 使用两张自定义图片
<item name="android:scrollbarThumbVertical">@drawable/aa_scrollbar</item>
<item name="android:scrollbarTrackVertical">@drawable/aa_scrollbar_bg</item>
aa_scrollbar.xml 滑块图片
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:height="@dimen/dpi_80px"
android:bottom="@dimen/dpi_20px"
android:top="@dimen/dpi_20px">
<shape>
<corners android:radius="@dimen/dpi_2px" />
<solid android:color="?attr/Theme_color" />
</shape>
</item>
</layer-list>
android:height 指定高度
android:bottom 距离底部
android:top 距离顶部
corners 圆角
solid 填充颜色
aa_scrollbar_bg.xml 背景图片
<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:bottom="@dimen/dpi_20px"
android:top="@dimen/dpi_20px">
<shape>
<corners android:radius="@dimen/dpi_2px" />
<solid android:color="@color/scrollbar_bg" />
</shape>
</item>
</layer-list>
背景图片仅少了指定高度
效果如下:
高亮滑块 长度固定, 滚动条总长度占整个高度的80%左右,并带有圆角效果。
上一篇: 关于CSS3新增的背景属性
下一篇: CSS3中新增的背景属性