word横向分割线

ListView分割线

千次阅读 2016-08-24 13:16:12

重新定义分割线Drawable的Bounds 首先，需要清楚一个事实：出现以上情况的矛盾点，是官方ListView的分割线属性不支持左右留白。所以最佳的解决方案，就是使得官方的分割线支持这种功能，这样既利于扩展，也利于...


重新定义分割线Drawable的Bounds

首先，需要清楚一个事实：出现以上情况的矛盾点，是官方ListView的分割线属性不支持左右留白。所以最佳的解决方案，就是使得官方的分割线支持这种功能，这样既利于扩展，也利于提高性能。

先来简单看一下，ListView的源码是如何实现分割线的功能的。
<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> drawDivider(Canvas canvas, Rect bounds, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> childIndex) {
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// This widget draws the same divider for all children</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> Drawable divider = mDivider;

        divider.setBounds(bounds);
        divider.draw(canvas);
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

在onDraw方法中，最终会调用到drawDivider方法。由于分割线是一个Drawable对象，上下左右的位置都是由Rect对象控制的，这个对象通过setBounds方法设置。

这个Rect对象的top和bottom属性我们是不需要关心的，只需要看left和right两个属性，默认情况下left=paddingLeft，right=width-paddingLeft-paddingRight，即表示分割线的起点和终点贯穿ListView的左右两侧。

dispatchDraw方法中可以验证这一点：
<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> protected void dispatchDraw(Canvas canvas) {
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (drawDividers || drawOverscrollHeader || drawOverscrollFooter) {
        final Rect bounds = mTempRect;
        bounds.left = mPaddingLeft;
        bounds.right = mRight - mLeft - mPaddingRight;
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
        drawDivider(canvas, bounds, i);
    }
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span>
 }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

如果我们能将bounds的left和right属性的值进行修改，那么就能实现控制分割线的左右边距了。

既然需要扩展ListView，最常用的方法就是继承重写了。不幸的是由于drawDivider方法的访问控制故并不能被复写，但值得庆幸的是ListView的Divider对象具有setter和getter方法。

具体的实现逻辑非常简单，核心是装饰模式，我就不去详细说了。

源码和范例详见：https://github.com/MegatronKing/DividerSample

用法非常简单，给ListView分割线扩充了两个属性：dividerPaddingLeft和dividerPaddingRight，顾名思义。这两个属性值既可以在xml布局中配置也可以在代码中设置。

layout示例如下：
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.megatronking</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.divider</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DividerListView</span>    
    xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>
    xmlns:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res-auto"</span>
    android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/list"</span>
    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
    android:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#99cccccc"</span>
    android:dividerHeight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0.5dip"</span>
    divider:dividerPaddingLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span>
    divider:dividerPaddingRight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

使用inset标签定义drawable

在Drawable家族中有一个特殊的存在：InsetDrawable，可以定义上下左右四个边界的留白，InsetDrawable同样使用了装饰模式，和方案4的机制有异曲同工之妙。当被装饰Drawable的Bound值变化时，重新定义Bound。另外，最强大的是可以直接使用xml定义。
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">inset</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:insetLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"15dip"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">size</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.5dip"</span> /></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">solid</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#99cccccc"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">inset</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

通过insetLeft、insetRight、insetTop、insetRight四个属性可以定义不同方向的留白大小，另外还支持通过android:drawable熟悉引用另外一个Drawable即被装饰的Drawable。

2、LinearLayout的分割线

LinearLayout从Android 3.0版本开始，便添加了分割线属性。LinearLayout的分割线功能比ListView要强大一些，无论是横向线性布局还是纵向线性布局，都能够很好的支持。为了兼容3.0以下版本，v7包中提供一个LinearLayoutCompat布局，用法类似。

然而，知道这些属性的开发者并不多，很多时候还是使用着一条线一个View的方式。这种方式无疑使用繁琐，布局冗余。

现在先来简单介绍下LinearLayout的分割线功能。

LinearLayout的提供了三个分割线相关属性：

1、divider 必须引用一个drawable，无法使用或引用color。drawable一般是定义成shape，通过size指定宽度或高度，solid指定颜色。另外，由于LinearLayout分为横向布局和纵向布局，所以一般会定义两种分割线。
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">size</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.5dip"</span>/></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">solid</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#99cccccc"</span>/></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">size</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.5dip"</span>/></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">solid</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#99cccccc"</span>/></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

2、dividerPadding 控制分割线的留白距离，相比于ListView分割线的通栏，这个属性非常实用。但是却有一个缺陷：dividerPadding无法指定左右或上下，横向布局中上下都会有留白，纵向布局中，左右都会有留白。而，设计师往往喜欢左侧留白右侧通栏，所以这个属性有时就非常尴尬。

3、showDividers 这个属性是控制分割线显示位置的，一共有四个值：middle 在每一项中间添加分割线；end 在整体的最后一项添加分割线；beginning 在整体的最上方添加分割线；none 无；如果不设置这个属性的值，默认就是none，即不显示分割线。

虽然LinearLayout的分割线功能非常强大，但是遇到一侧留白的情况，还是无能为力。开发者还是要回到使用View作为分割线的老路上来，比如QQ浏览器的这种布局：



分割线左侧留白与文字对齐，右侧通栏，dividerPadding这个属性实在无能为力！

在分析解决方案之前，来简单看一下分割线的实现原理吧！
<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    void <span class="hljs-function" style="box-sizing: border-box;">drawHorizontalDivider(Canvas canvas, int top)</span> {
        mDivider<span class="hljs-class" style="box-sizing: border-box;">.setBounds</span>(<span class="hljs-function" style="box-sizing: border-box;">getPaddingLeft()</span> + mDividerPadding, <span class="hljs-attribute" style="box-sizing: border-box;">top</span>,
                <span class="hljs-function" style="box-sizing: border-box;">getWidth()</span> - <span class="hljs-function" style="box-sizing: border-box;">getPaddingRight()</span> - mDividerPadding, <span class="hljs-attribute" style="box-sizing: border-box;">top</span> + mDividerHeight);
        mDivider<span class="hljs-class" style="box-sizing: border-box;">.draw</span>(<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">canvas</span>);
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">    void <span class="hljs-function" style="box-sizing: border-box;">drawVerticalDivider(Canvas canvas, int left)</span> {
        mDivider<span class="hljs-class" style="box-sizing: border-box;">.setBounds</span>(<span class="hljs-attribute" style="box-sizing: border-box;">left</span>, <span class="hljs-function" style="box-sizing: border-box;">getPaddingTop()</span> + mDividerPadding,
                <span class="hljs-attribute" style="box-sizing: border-box;">left</span> + mDividerWidth, <span class="hljs-function" style="box-sizing: border-box;">getHeight()</span> - <span class="hljs-function" style="box-sizing: border-box;">getPaddingBottom()</span> - mDividerPadding);
        mDivider<span class="hljs-class" style="box-sizing: border-box;">.draw</span>(<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">canvas</span>);
    }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

一个水平方向的分割线，一个是垂直方向的分割线。同样是通过setBounds方法确定分割线的位置，而且mDividerPadding属性会同时作用于左右或上下。

所以，解决方案和前面所讲的ListView的应该是完全一样的：重新定义分割线Drawable的Bounds

源码不细说了，详见：https://github.com/MegatronKing/DividerSample

扩展LinearLayout提供了分割线的额外四个属性：dividerPaddingLeft，dividerPaddingRight，dividerPaddingTop，dividerPaddingBottom。同样的，既可以在layout中配置也可以在代码中动态设置。

当orientation为vertical时，dividerPaddingLeft和dividerPaddingRight两个属性生效；orientation为horizontal时，dividerPaddingTop和dividerPaddingBottom两个属性生效。

layout示例如下：
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.megatronking</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.divider</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DividerLinearLayout</span>        
    xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span>
    xmlns:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res-auto"</span>
    android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span>
    android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span>
    android:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/line_horizontal"</span>
    android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vertical"</span>
    android:showDividers=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"middle"</span>
    divider:dividerPaddingLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span>/></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

当然，通过InsetDrawable方式同样可以达到效果，原理其实差不多，不再赘述。

收起

展开全文

WPS如何去除分割线
2021-01-04 15:47:51
WPS如何去除分割线 将鼠标滑到需要删除分割线的页面，找到菜单栏中的“页面布局”->“页面边框”，弹出如下对话框：在“边框”窗口下设置“无”，点击确定即可。
```
WPS如何去除分割线


将鼠标滑到需要删除分割线的页面，找到菜单栏中的“页面布局”->“页面边框”，弹出如下对话框：




在“边框”窗口下设置“无”，点击确定即可。
```
收起
展开全文
wps

定义分割线Drawable的Bounds

2016-08-24 17:09:16

首先，需要清楚一个事实：出现以上情况的矛盾点，是官方ListView的分割线属性不支持左右留白。所以最佳的解决方案，就是使得官方的分割线支持这种功能，这样既利于扩展，也利于提高性能。先来简单看一下，...


首先，需要清楚一个事实：出现以上情况的矛盾点，是官方ListView的分割线属性不支持左右留白。所以最佳的解决方案，就是使得官方的分割线支持这种功能，这样既利于扩展，也利于提高性能。

先来简单看一下，ListView的源码是如何实现分割线的功能的。
<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> drawDivider(Canvas canvas, Rect bounds, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> childIndex) { <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">// This widget draws the same divider for all children</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> Drawable divider = mDivider; divider.setBounds(bounds); divider.draw(canvas); }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

在onDraw方法中，最终会调用到drawDivider方法。由于分割线是一个Drawable对象，上下左右的位置都是由Rect对象控制的，这个对象通过setBounds方法设置。

这个Rect对象的top和bottom属性我们是不需要关心的，只需要看left和right两个属性，默认情况下left=paddingLeft，right=width-paddingLeft-paddingRight，即表示分割线的起点和终点贯穿ListView的左右两侧。

dispatchDraw方法中可以验证这一点：
<code class="hljs r has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> protected void dispatchDraw(Canvas canvas) { <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (drawDividers || drawOverscrollHeader || drawOverscrollFooter) { final Rect bounds = mTempRect; bounds.left = mPaddingLeft; bounds.right = mRight - mLeft - mPaddingRight; <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> drawDivider(canvas, bounds, i); } <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">...</span> }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>

如果我们能将bounds的left和right属性的值进行修改，那么就能实现控制分割线的左右边距了。

既然需要扩展ListView，最常用的方法就是继承重写了。不幸的是由于drawDivider方法的访问控制故并不能被复写，但值得庆幸的是ListView的Divider对象具有setter和getter方法。

具体的实现逻辑非常简单，核心是装饰模式，我就不去详细说了。

源码和范例详见：https://github.com/MegatronKing/DividerSample

用法非常简单，给ListView分割线扩充了两个属性：dividerPaddingLeft和dividerPaddingRight，顾名思义。这两个属性值既可以在xml布局中配置也可以在代码中设置。

layout示例如下：
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.megatronking</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.divider</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DividerListView</span> xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span> xmlns:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res-auto"</span> android:id=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@+id/list"</span> android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span> android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"#99cccccc"</span> android:dividerHeight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"0.5dip"</span> divider:dividerPaddingLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span> divider:dividerPaddingRight=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span> /></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

使用inset标签定义drawable

在Drawable家族中有一个特殊的存在：InsetDrawable，可以定义上下左右四个边界的留白，InsetDrawable同样使用了装饰模式，和方案4的机制有异曲同工之妙。当被装饰Drawable的Bound值变化时，重新定义Bound。另外，最强大的是可以直接使用xml定义。
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">inset</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:insetLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"15dip"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">size</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.5dip"</span> /></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">solid</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#99cccccc"</span> /></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">inset</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li></ul>

通过insetLeft、insetRight、insetTop、insetRight四个属性可以定义不同方向的留白大小，另外还支持通过android:drawable熟悉引用另外一个Drawable即被装饰的Drawable。

2、LinearLayout的分割线

LinearLayout从Android 3.0版本开始，便添加了分割线属性。LinearLayout的分割线功能比ListView要强大一些，无论是横向线性布局还是纵向线性布局，都能够很好的支持。为了兼容3.0以下版本，v7包中提供一个LinearLayoutCompat布局，用法类似。

然而，知道这些属性的开发者并不多，很多时候还是使用着一条线一个View的方式。这种方式无疑使用繁琐，布局冗余。

现在先来简单介绍下LinearLayout的分割线功能。

LinearLayout的提供了三个分割线相关属性：

1、divider 必须引用一个drawable，无法使用或引用color。drawable一般是定义成shape，通过size指定宽度或高度，solid指定颜色。另外，由于LinearLayout分为横向布局和纵向布局，所以一般会定义两种分割线。
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">size</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.5dip"</span>/></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">solid</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#99cccccc"</span>/></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>
<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">size</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0.5dip"</span>/></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">solid</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:color</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"#99cccccc"</span>/></span> <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">shape</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li></ul>

2、dividerPadding 控制分割线的留白距离，相比于ListView分割线的通栏，这个属性非常实用。但是却有一个缺陷：dividerPadding无法指定左右或上下，横向布局中上下都会有留白，纵向布局中，左右都会有留白。而，设计师往往喜欢左侧留白右侧通栏，所以这个属性有时就非常尴尬。

3、showDividers 这个属性是控制分割线显示位置的，一共有四个值：middle 在每一项中间添加分割线；end 在整体的最后一项添加分割线；beginning 在整体的最上方添加分割线；none 无；如果不设置这个属性的值，默认就是none，即不显示分割线。

虽然LinearLayout的分割线功能非常强大，但是遇到一侧留白的情况，还是无能为力。开发者还是要回到使用View作为分割线的老路上来，比如QQ浏览器的这种布局：



分割线左侧留白与文字对齐，右侧通栏，dividerPadding这个属性实在无能为力！

在分析解决方案之前，来简单看一下分割线的实现原理吧！
<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> void <span class="hljs-function" style="box-sizing: border-box;">drawHorizontalDivider(Canvas canvas, int top)</span> { mDivider<span class="hljs-class" style="box-sizing: border-box;">.setBounds</span>(<span class="hljs-function" style="box-sizing: border-box;">getPaddingLeft()</span> + mDividerPadding, <span class="hljs-attribute" style="box-sizing: border-box;">top</span>, <span class="hljs-function" style="box-sizing: border-box;">getWidth()</span> - <span class="hljs-function" style="box-sizing: border-box;">getPaddingRight()</span> - mDividerPadding, <span class="hljs-attribute" style="box-sizing: border-box;">top</span> + mDividerHeight); mDivider<span class="hljs-class" style="box-sizing: border-box;">.draw</span>(<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">canvas</span>); }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>
<code class="hljs scss has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> void <span class="hljs-function" style="box-sizing: border-box;">drawVerticalDivider(Canvas canvas, int left)</span> { mDivider<span class="hljs-class" style="box-sizing: border-box;">.setBounds</span>(<span class="hljs-attribute" style="box-sizing: border-box;">left</span>, <span class="hljs-function" style="box-sizing: border-box;">getPaddingTop()</span> + mDividerPadding, <span class="hljs-attribute" style="box-sizing: border-box;">left</span> + mDividerWidth, <span class="hljs-function" style="box-sizing: border-box;">getHeight()</span> - <span class="hljs-function" style="box-sizing: border-box;">getPaddingBottom()</span> - mDividerPadding); mDivider<span class="hljs-class" style="box-sizing: border-box;">.draw</span>(<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;">canvas</span>); }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li></ul>

一个水平方向的分割线，一个是垂直方向的分割线。同样是通过setBounds方法确定分割线的位置，而且mDividerPadding属性会同时作用于左右或上下。

所以，解决方案和前面所讲的ListView的应该是完全一样的：重新定义分割线Drawable的Bounds

源码不细说了，详见：https://github.com/MegatronKing/DividerSample

扩展LinearLayout提供了分割线的额外四个属性：dividerPaddingLeft，dividerPaddingRight，dividerPaddingTop，dividerPaddingBottom。同样的，既可以在layout中配置也可以在代码中动态设置。

当orientation为vertical时，dividerPaddingLeft和dividerPaddingRight两个属性生效；orientation为horizontal时，dividerPaddingTop和dividerPaddingBottom两个属性生效。

layout示例如下：
<code class="hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">com</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.megatronking</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.divider</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.view</span><span class="hljs-preprocessor" style="color: rgb(68, 68, 68); box-sizing: border-box;">.DividerLinearLayout</span> xmlns:android=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res/android"</span> xmlns:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"http://schemas.android.com/apk/res-auto"</span> android:layout_width=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"match_parent"</span> android:layout_height=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"wrap_content"</span> android:divider=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"@drawable/line_horizontal"</span> android:orientation=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"vertical"</span> android:showDividers=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"middle"</span> divider:dividerPaddingLeft=<span class="hljs-string" style="color: rgb(0, 136, 0); box-sizing: border-box;">"15dip"</span>/></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li></ul>

当然，通过InsetDrawable方式同样可以达到效果，原理其实差不多，不再赘述。

收起

展开全文

RecyclerView Item 的分割线距边框距离问题总结

千次阅读 2018-12-19 14:45:53

分割线 在中间显示，距离左边边距是66px 右边依然是66px。刚开始接到这个需求，感觉还阔以，挺简单的，但是在实现中又有问题了，怎么设置都不能距离左右有间距，上网上查依然没有解决方案。网上有设置一个...

哈， 首先  今天Design 提了一个需求，废话少说~~！ 上图



分割线 在中间显示，距离左边 边距是66px 右边依然是66px。

刚开始接到这个需求，感觉还阔以，挺简单的，但是在实现中 又有问题了，

怎么设置 都不能距离左右 有间距，上网上查依然没有解决方案。

网上有设置一个 View 然后给这个 View 设置宽高 颜色 但是 在我这里不能用，

因为我是自定义的控件 直接继承 ViewGroup 直接用 View 会有问题 影响了滑动控件。

我的解决方案如下：

 

我的 item 布局 是自定义的。在不改变自定义控件前提下 加上这个间隔线。

item 布局如下非常的简单：

<?xml version="1.0" encoding="utf-8"?>
<com.mxnavi.music.view.search.SwipeMenuLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/px_100"
    android:clickable="true"
    app:ios="true"
    app:leftSwipe="true"
    app:swipeEnable="true">

    //自定义的TextView
    <com.mxnavi.music.view.custom.CustomTextView
        android:id="@+id/tv_word"
        android:layout_width="match_parent"
        android:layout_height="@dimen/px_100"
        android:layout_centerVertical="true"
        android:layout_marginStart="@dimen/px_14"
        android:drawableLeft="@drawable/icon_search_history"
        android:drawablePadding="@dimen/px_14"
        android:gravity="center_vertical"
        android:paddingLeft="@dimen/px_66"
        android:maxEms="16"
        android:singleLine="true"
        android:textColor="@color/color_white_transparency_10"
        android:textSize="@dimen/px_21" />

    <Button
        android:id="@+id/bt_del"
        android:layout_width="@dimen/px_140"
        android:layout_height="@dimen/px_100"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:background="@color/search_history_delete_bg"
        android:gravity="center"
        android:text="删除"
        android:textColor="@color/color_white"
        android:textSize="@dimen/px_22" />
</com.mxnavi.music.view.search.SwipeMenuLayout>

然后再 Fragment 中 BindView 下一章会讲 很简单的一个标签。

@BindView(R.id.recycler_history)
EasyRecyclerView recyclerHistory;

recyclerHistory.addItemDecoration(getRecyclerViewDivider(R.drawable.search_history_solid));

RecyclerHistory 不用说 就是RecyclerView 历史记录。给RecyclerView每个item添加间隔线。

/**
     * 获取分割线
     *
     * @param drawableId 分割线id
     * @return
     */
    public RecyclerView.ItemDecoration getRecyclerViewDivider(@DrawableRes int drawableId) {
        DividerItemDecoration itemDecoration = new DividerItemDecoration(mContext, DividerItemDecoration.VERTICAL);
        itemDecoration.setDrawable(ContextCompat.getDrawable(mContext, drawableId));
        return itemDecoration;
    }

xml 布局 如下：

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:insetLeft="66px"
    android:insetRight="66px">
    <shape>
        <!--分割线的高度，横向的RecyclerView,这里设置宽度即可-->
        <size android:height="1px" />
        <!--分割线的颜色-->
        <solid android:color="@color/search_dividing_line_color" />
    </shape>
</inset>

然后就完美解决了这个不改变 item 布局的情况下给每个 item 添加间隔线。

希望对你们有所帮助 哈哈！ 虽然没有粉丝。

收起

展开全文

Android

Android应用性能优化系列视图篇——恼人的分割线留白解决之道
2016-08-31 16:36:38
相信很多一线的开发者都遇到过分割线，作为视觉设计中的最常用的元素之一，虽然简单易画，但在布局排版中往往却起影响视图层级结构的重要作用。往往由于一道小小的分割线，不仅在layout中多个数个视图，而且容易导致...
收起
word技巧
千次阅读 2018-03-01 21:40:22
word 高效经典教程（整理版）目录一分钟驾驭word 高效经典教程（整理版）... 6A、基础知识... 61、度量单位... 62、WORD中文字字号与磅的对应关系... 63、字体文件格式... 7B、文本编辑... 71、快速移动文档... 72、...
收起
java poi生成word 横向插入多表格
2021-06-28 11:12:10
//默认：宋体（wps）/等线（office2016） 5号两端对齐单倍间距 runX.setText("舜发于畎亩之中，傅说举于版筑之间，胶鬲举于鱼盐之中，管夷吾举于士..."); runX.setBold(false);//加粗 runX.setCapitalized...
收起
poi
word操作技巧
2019-01-19 10:25:00
word学习记录随笔 1.去除空白页光标置于空白页，打开段落对话框，把行距设置为固定值1磅 2.插入文档的图片无法显示选中图片使用ctrl+1可以显示图片 3.一键去除页眉横线双击进入页眉编辑状态，使用ctrl+shift+N...
收起
word操作
2019-10-13 15:56:20
WORD初识键盘快捷键：文档内容的选取 word的本质是个压缩包模板下载&模板路径 WORD选项格式刷限制编辑字体段落查找 /替换通配符的查找&替换插入绘图工具分节符颜色英文的审阅 ...
收起
推荐 Word、EXCEL必备工具箱
千次阅读 2019-09-20 09:41:36
17、汇总工具→分割表格功能改进，在按“分割标志”分割的情况下，如果没有勾选“分割出的数据中保留分割标志”，则分割标志列会被隐藏（以前只是清除分割标志内容） 18、表格工具→表格→生成目录功能改进，返回...
收起
开发工具
2014年职称计算机word2003,2014年职称计算机考试Word2003模拟题及答案5
2021-07-17 00:22:02
8、将所给Word文档分成“偏右”，并加分割线。 9、请将页面的纸张设为A4大小。 10、请将所给页面的纸张由“纵向”设置为“横向”。 11、为所给文档左方设置1厘米宽的装订线。 12、请将“北京奥运”四个字编辑成...
收起
适合小白的word基本操作
2020-06-17 18:19:08
关于段落的左缩进、右缩进不再演示 2.6 将第二段进行分栏，并在中间设置分割线 分成两栏两栏之间添加分割线 2.7 落款的格式设置方式一，利用右对齐，若要求落款内容左对齐，则不合适方式二，选中落款，段落...
收起
ul、li实现横向导航按钮
2016-11-14 22:33:00
好久没写博客了，主要是懒得呼气都不想呼，上周...上周算是把框架搭起来来，今天上午熟悉下需求，下午的时候把数据库中关键的几个表设计了一下，明天就要往框架里面搬砖了，华为那边还说要两周搞定，word 哥啊，压...
收起
如何做到像使用 LaTeX 那样优雅地使用 Word？
千次阅读 2016-05-19 09:54:10
Clerk Ma ，LuaTeX-ja开发者 ...不过对于我来说，这几种战争都跟我没关系，尤其是LaTeX和Word，我都用。 LaTeX和Word完全不是一个类型的排版工具，但是目的一样：排版。 LaTeX是仿照Scribe
收起
使用 LaTeX
word使用技巧
2019-09-22 01:01:53
“页面设置”，将纸张大小设置成所希望的大小，例如8开纸设置成：宽38cm，高26.5cm，然后把“方向”设置成横向。点击“页边距”标签，将上、下、左、右各自设置好，在将“拼页”选中。（3）选择“插入”—>...
收起
docx4j操作word常用方法
千次阅读 2016-07-10 09:58:07
/*------------------------------------Word 表格相关--------------------------------------------------- */ /** * @Description: 跨列合并 */ public void mergeCellsHorizontalByGridSpan(Tbl tbl, int row, ...
收起
docx4j
虽然不能取代排版之王，但 Word 也能这样优雅地用
千次阅读 2016-05-19 09:56:05
如何做到像使用 LaTeX 那样优雅地使用 Word？墨磊，不折腾会死星人 // github.com/morlay 答案：不可能，目前暂无一个软件能取代 LaTeX 排版之王的地位。当然，LaTeX 的模式并不是每个人都喜闻乐见的。在加...
收起
排版
NPOI导出数据到Word
千次阅读 2016-07-29 18:30:13
以前的项目都是导出数据到Excel中，这个对于NPOI来说，技术是比较成熟的，但是导出到Word的，就差一些。刚好手头的项目需要导出一些数据到Word中，基于对NPOI导出到Word的认知是一片黑，于是到处找资料，结合了...
收起
[5] Word 手把手教你写毕业论文-2
2016-04-13 08:03:51
本文从前到后的介绍了使用word排版长文档诸如论文等的详细步骤，包括图表编号题注，专业的图和表制作，公式和参考文献，续上一篇目录与图表编号自动化目录事先目录页留空，最后填上即可，目录一般保留三级标题，...
收起
文档
最新Word及Excel操作技巧
2019-07-17 08:38:33
1、即时取消Word的后台打印：当我们刚刚编辑完一篇文档按了打印命令后，后来又不想打印当前的文档了，那么怎样才能即时取消后台打印任务呢？一般来说，大家在发出打印任务后，程序会自动将打印任务设置为后台打印，...
收起
Word 2007书籍排版完全手册
千次阅读 2013-06-09 23:20:07
一提到书籍的排版制作，也许有人会说只有PageMaker 或飞腾之类的软件才是专门用于排版书籍、制作海报的软件。...本文以 Word 2007 为操作环境，也同样适用于Word 2000 、Word 2003 版本，只是界面稍有不同而已。
收起
Word XP 中目录的编制方法,Word XP 功能键使用大全
万次阅读 2008-05-03 09:57:00
Word XPWord XP 中目录的编制方法　1.单击要插入目录的位置。　2.指向"插入"菜单上的"引用"，再单击"索引和目录"。　3.单击"目录"选项卡。　4.若要使用现有的设计，请在"格式"框中单击进行选择。　5.根据需要，选择...
收起
xp 文档工具 office microsoft
word和excel使用技巧大全
千次阅读 2011-04-25 16:49:00
<br />word和excel使用技巧大全 1、Word下如何使用着重号在Word中我们可以把着重号请到工具栏上。打开“工具—自定义”命令选项，打开“自定义”对话框。在“命令”标签卡下的...
收起
excel 工具文档输入法
山东专升本计算机Word基础（三）
2021-05-27 16:30:55
山东专升本Word基础（三）文档格式化与排版一. 设置字符格式二. 设置段落格式三. 项目符号和编号四. 分页、分节和分栏表格制作一. 创建表格文档格式化与排版一. 设置字符格式默认字号是五号，中文字体是宋体，...
收起
word应用2（实用）
千次阅读 2014-05-21 22:04:36
1、快速改变Word文档的行距选中你需要设置行距的文本段落，按“Ctrl+ 1”的组合键，即可将段落设置成单倍行距；按“Ctrl+ 2”的组合键，即可将段落设置成双倍行距；按“Ctrl+5”的组合键，即可将段落设置成1.5倍...
收起
计算机二级MS office（word 02）
2021-03-16 15:33:00
计算机二级MS office（word02）一、替换（ctrl+H) 1、批量修改字符手动换行符----->段落标记全部替换 2、批量删除字符（西文空格，全角半角，空行，索引）删除空白行（连续两个段落标记---->一个段落标记...
收起
excel
2014职称计算机考试题库,2014年职称计算机考试Word 2003练习题
2021-07-09 11:30:37
2014年职称计算机考试Word 2003练习题2014年职称计算机考试Word 2003练习题(一)1、请在Word 2003中新建窗口。[解]第一步：单击菜单栏中的[窗口]菜单。第二步：打击[新建窗口]命令即可。2、试述如何用模板建立一个新...
收起
Word 2003 长篇文档排版技巧
千次阅读 2012-09-03 08:38:11
简介市场部经常要出各种分析报告，一写就是洋洋洒洒几...制作目录也是出力不讨好的事，尽管小王知道Word中有插入目录的功能，可是尝试了几次就弃之不用了，原因是系统总是提示有错误。现在只能手工输入目录，加班加点
收起
文档工具 microsoft visio reference

ListView分割线

WPS如何去除分割线

WPS如何去除分割线

定义分割线Drawable的Bounds

RecyclerView Item 的分割线距边框距离问题总结

Android应用性能优化系列视图篇——恼人的分割线留白解决之道

word技巧

java poi生成word 横向插入多表格

word操作技巧

word操作

推荐 Word、EXCEL必备工具箱

2014年职称计算机word2003,2014年职称计算机考试Word2003模拟题及答案5

适合小白的word基本操作

ul、li实现横向导航按钮

如何做到像使用 LaTeX 那样优雅地使用 Word？

word使用技巧

docx4j操作word常用方法

虽然不能取代排版之王，但 Word 也能这样优雅地用

NPOI导出数据到Word

[5] Word 手把手教你写毕业论文-2

最新Word及Excel操作技巧

Word 2007书籍排版完全手册

Word XP 中目录的编制方法,Word XP 功能键使用大全

word和excel使用技巧大全

山东专升本计算机Word基础（三）

word应用2（实用）

计算机二级MS office（word 02）

2014职称计算机考试题库,2014年职称计算机考试Word 2003练习题

Word 2003 长篇文档排版技巧

word横向分割线

ListView分割线

WPS如何去除分割线

WPS如何去除分割线

定义分割线Drawable的Bounds

RecyclerView Item 的分割线 距边框距离问题总结

Android应用性能优化系列视图篇——恼人的分割线留白解决之道

word技巧

java poi生成word 横向 插入多表格

word操作技巧

word操作

推荐 Word、EXCEL必备工具箱

2014年职称计算机word2003,2014年职称计算机考试Word2003模拟题及答案5

适合小白的word基本操作

ul、li实现横向导航按钮

如何做到像使用 LaTeX 那样优雅地使用 Word？

word使用技巧

docx4j操作word常用方法

虽然不能取代排版之王，但 Word 也能这样优雅地用

NPOI导出数据到Word

[5] Word 手把手教你写毕业论文-2

最新Word及Excel操作技巧

Word 2007书籍排版完全手册

Word XP 中目录的编制方法,Word XP 功能键使用大全

word和excel使用技巧大全

山东专升本计算机Word基础（三）

word应用2（实用）

计算机二级MS office（word 02）

2014职称计算机考试题库,2014年职称计算机考试Word 2003练习题

Word 2003 长篇文档排版技巧

word横向分割线

RecyclerView Item 的分割线距边框距离问题总结

java poi生成word 横向插入多表格