转载

Android必知必会-自定义Scrollbar样式

设计师给的设计图完全依照 IOS 的标准来的，导致很多细节的控件都得自己重写，最近的设计图中有显示滚动条，Android 默认的滚动条样式（带描边）和设计图格格不入，无奈，只好研究下自定义 Scrollbar 样式。这里稍微整理下。

知识点

在 ListView / ScrollView / RecyclerView 中添加属性：

<!-- 情况A ：垂直滚动条-->
android:scrollbars="vertical"
android:scrollbarTrackVertical="@drawable/xxx_vertical_track"
android:scrollbarThumbVertical="@drawable/xxx_vertical_thumb"
<!-- 情况B ：水平滚动条-->
android:scrollbars="horizontal"
android:scrollbarTrackHorizontal="@drawable/xxx_horizontal_track"
android:scrollbarThumbHorizontal="@drawable/xxx_horizontal_thumb"

<!-- 其他通用的属性 -->
<!-- 1.定义滚动条的样式和位置 -->
android:scrollbarStyle="outsideInset"
<!-- 2.定义滚动条的大小，垂直时指宽度，水平时指高度 -->
android:scrollbarSize="4dp"

属性	效果
scrollbarThumbVertical[Horizontal]	短条
scrollbarTrackVertical[Horizontal]	长条，即背景

即 scrollbaTrackxxx ， scrollbarThumbxxx 自定义的 xml 文件，放在 Drawable 中， track 是指长条， thumb 是指短条，然后再 xml 中定义短条和长条的样式。

需要注意

其中， scrollbaTrackxxx 、 scrollbarThumbxxx 可以使用 ：

Shape自定义 Drawable
图片
.9.png
@color/xxx 的方式使用颜色值

不可以直接使用 #xxxxxx 颜色值

android:scrollbarStyle

android:scrollbarStyle 可以定义滚动条的样式和位置，可选值有 insideOverlay 、 insideInset 、 outsideOverlay 、 outsideInset 四种。

其中 inside 和 outside 分别表示是否在 view 的 padding 区域内， overlay 和 inset 表示覆盖在 view 上或是插在 view 后面，所以四种值分别表示：

属性值	效果
insideOverlay	默认值，表示在padding区域内并且覆盖在view上
insideInset	表示在padding区域内并且插入在view后面
outsideOverlay	表示在padding区域外并且覆盖在view上
outsideInset	表示在padding区域外并且插入在view后面

Demo

下面是两个Demo：

color:

<color name="red_square">#CCFF6464</color>
<color name="transparent">#00000000</color>

drawable:scrollbar_vertical_thumb

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- 填充 -->
    <solid android:color="#66000000"/>
 <!-- 圆角 -->
    <corners android:radius="1dp" />
</shape>

Demo 1

layout：

android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb"
<!-- 
scrollbarTrackVertical设为透明或者直接不设置即可
android:scrollbarTrackVertical="@color/transparent"
再次强调：scrollbarThumbVertical、scrollbarTrackVertical 不可以直接设置为颜色值,但可以使用@color的方式使用颜色值
-->
android:scrollbarSize="3dp"
android:scrollbars="vertical"

Demo 2

layout：

android:scrollbarStyle="outsideOverlay"
android:scrollbarThumbVertical="@color/red_square"
android:scrollbarSize="3dp"
android:scrollbars="vertical"

效果图

默认样式	Demo 1	Demo 2

总结

在查资料的过程中，发现滚动条也可以使用代码来画，这里不做过多介绍，有兴趣的可以研究一下。

PS:

你可以关注的我 Github 、 CSDN 和微博

原文 http://likfe.github.io/2016/05/16/diyScrollbar/

正文到此结束

所属分类：编程技术

本文标签： GitHub src SDN schema IDE 微博 UI 总结 list git XML tab Android IOS 代码 http
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二