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

KendallBSU 8年前
   <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>