Android必知必会-自定义Scrollbar样式
KendallBSU
9年前
<p>设计师给的设计图完全依照 IOS 的标准来的,导致很多细节的控件都得自己重写,最近的设计图中有显示滚动条,Android 默认的滚动条样式(带描边)和设计图格格不入,无奈,只好研究下自定义 Scrollbar 样式。这里稍微整理下。</p> <h2>知识点</h2> <p>在 ListView / ScrollView / RecyclerView 中添加属性:</p> <pre> <code class="language-java"><!-- 情况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" </code></pre> <table> <thead> <tr> <th>属性</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td>scrollbarThumbVertical[Horizontal]</td> <td>短条</td> </tr> <tr> <td>scrollbarTrackVertical[Horizontal]</td> <td>长条,即背景</td> </tr> </tbody> </table> <p>即 scrollbaTrackxxx , scrollbarThumbxxx 自定义的 xml 文件,放在 Drawable 中, track 是指长条, thumb 是指短条,然后再 xml 中定义短条和长条的样式。</p> <h3>需要注意</h3> <p>其中, scrollbaTrackxxx 、 scrollbarThumbxxx <strong>可以使用</strong> :</p> <ul> <li>Shape自定义 Drawable</li> <li>图片</li> <li>.9.png</li> <li>@color/xxx 的方式使用颜色值</li> </ul> <p>不可以直接使用 #xxxxxx 颜色值</p> <h3>android:scrollbarStyle</h3> <p>android:scrollbarStyle 可以定义滚动条的样式和位置,可选值有 insideOverlay 、 insideInset 、 outsideOverlay 、 outsideInset 四种。</p> <p>其中 inside 和 outside 分别表示是否在 view 的 padding 区域内, overlay 和 inset 表示覆盖在 view 上或是插在 view 后面,所以四种值分别表示:</p> <table> <thead> <tr> <th>属性值</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td>insideOverlay</td> <td><strong>默认值</strong> ,表示在padding区域内并且覆盖在view上</td> </tr> <tr> <td>insideInset</td> <td>表示在padding区域内并且插入在view后面</td> </tr> <tr> <td>outsideOverlay</td> <td>表示在padding区域外并且覆盖在view上</td> </tr> <tr> <td>outsideInset</td> <td>表示在padding区域外并且插入在view后面</td> </tr> </tbody> </table> <h2>Demo</h2> <p>下面是两个Demo:</p> <p>color:</p> <pre> <code class="language-java"><color name="red_square">#CCFF6464</color> <color name="transparent">#00000000</color> </code></pre> <p>drawable:scrollbar_vertical_thumb</p> <pre> <code class="language-java"><?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> </code></pre> <h3>Demo 1</h3> <p>layout:</p> <pre> <code class="language-java">android:scrollbarStyle="outsideOverlay" android:scrollbarThumbVertical="@drawable/scrollbar_vertical_thumb" <!-- scrollbarTrackVertical设为透明或者直接不设置即可 android:scrollbarTrackVertical="@color/transparent" 再次强调:scrollbarThumbVertical、scrollbarTrackVertical 不可以直接设置为颜色值,但可以使用@color的方式使用颜色值 --> android:scrollbarSize="3dp" android:scrollbars="vertical" </code></pre> <h3>Demo 2</h3> <p>layout:</p> <pre> <code class="language-java">android:scrollbarStyle="outsideOverlay" android:scrollbarThumbVertical="@color/red_square" android:scrollbarSize="3dp" android:scrollbars="vertical" </code></pre> <h3>效果图</h3> <table> <thead> <tr> <th>默认样式</th> <th>Demo 1</th> <th>Demo 2</th> </tr> </thead> <tbody> <tr> <td><img src="https://simg.open-open.com/show/e43c84bf3804861036b121359a4889f7.png"></td> <td><img src="https://simg.open-open.com/show/e122ba6a70596618697b9407ad17adfe.png"></td> <td><img src="https://simg.open-open.com/show/3d8d8f97960374631b6ffa67f9b67372.png"></td> </tr> </tbody> </table> <h2>总结</h2> <p>在查资料的过程中,发现滚动条也可以使用代码来画,这里不做过多介绍,有兴趣的可以研究一下。</p> <p>via: http://likfe.github.io/2016/05/16/diyScrollbar/</p>