精华内容
下载资源
问答
  • 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分割线扩充了两个属性:dividerPaddingLeftdividerPaddingRight,顾名思义。这两个属性值既可以在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如何去除分割线

    1. 将鼠标滑到需要删除分割线的页面,找到菜单栏中的“页面布局”->“页面边框”,弹出如下对话框:
      在这里插入图片描述

    2. 在“边框”窗口下设置“无”,点击确定即可。

    展开全文
  • 首先,需要清楚一个事实:出现以上情况的矛盾点,是官方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方式同样可以达到效果,原理其实差不多,不再赘述。

    展开全文
  • 分割线 在中间显示,距离左边 边距是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 添加间隔线。

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

    展开全文
  • 相信很多一线的开发者都遇到过分割线,作为视觉设计中的最常用的元素之一,虽然简单易画,但在布局排版中往往却起影响视图层级结构的重要作用。往往由于一道小小的分割线,不仅在layout中多个数个视图,而且容易导致...
  • word技巧

    千次阅读 2018-03-01 21:40:22
    word 高效经典教程(整理版)目录一分钟驾驭word 高效经典教程(整理版)... 6A、基础知识... 61、度量单位... 62、WORD中文字字号与磅的对应关系... 63、字体文件格式... 7B、文本编辑... 71、快速移动文档... 72、...
  • //默认:宋体(wps)/等线(office2016) 5号 两端对齐 单倍间距 runX.setText("舜发于畎亩之中, 傅说举于版筑之间, 胶鬲举于鱼盐之中, 管夷吾举于士..."); runX.setBold(false);//加粗 runX.setCapitalized...
  • 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、表格工具→表格→生成目录功能改进,返回...
  • 8、将所给Word文档分成“偏右”,并加分割线。 9、请将页面的纸张设为A4大小。 10、请将所给页面的纸张由“纵向”设置为“横向”。 11、为所给文档左方设置1厘米宽的装订线。 12、请将“北京奥运”四个字编辑成...
  • 关于段落的左缩进、右缩进不再演示 2.6 将第二段进行分栏,并在中间设置分割线 分成两栏 两栏之间添加分割线 2.7 落款的格式设置 方式一,利用右对齐,若要求落款内容左对齐,则不合适 方式二,选中落款,段落...
  • 好久没写博客了,主要是懒得呼气都不想呼,上周...上周算是把框架搭起来来,今天上午熟悉下需求,下午的时候把数据库中关键的几个表设计了一下,明天就要往框架里面搬砖了,华为那边还说要两周搞定,word 哥啊,压...
  • Clerk Ma ,LuaTeX-ja开发者 ...不过对于我来说,这几种战争都跟我没关系,尤其是LaTeX和Word,我都用。 LaTeX和Word完全不是一个类型的排版工具,但是目的一样:排版。 LaTeX是仿照Scribe
  • 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, ...
  • 如何做到像使用 LaTeX 那样优雅地使用 Word?  墨磊,不折腾会死星人 // github.com/morlay 答案:不可能,目前暂无一个软件能取代 LaTeX 排版之王的地位。 当然,LaTeX 的模式并不是每个人都喜闻乐见的。 在加...
  • NPOI导出数据到Word

    千次阅读 2016-07-29 18:30:13
    以前的项目都是导出数据到Excel中,这个对于NPOI来说,技术是比较成熟的,但是导出到Word的,就差一些。 刚好手头的项目需要导出一些数据到Word中,基于对NPOI导出到Word的认知是一片黑,于是到处找资料,结合了...
  • 本文从前到后的介绍了使用word排版长文档诸如论文等的详细步骤,包括图表编号题注,专业的图和表制作,公式和参考文献,续上一篇目录与图表编号自动化目录 事先目录页留空,最后填上即可,目录一般保留三级标题,...
  • 1、即时取消Word的后台打印:当我们刚刚编辑完一篇文档按了打印命令后,后来又不想打印当前的文档了,那么怎样才能即时取消后台打印任务呢?一般来说,大家在发出打印任务后,程序会自动将打印任务设置为后台打印,...
  • Word 2007书籍排版完全手册

    千次阅读 2013-06-09 23:20:07
    一提到书籍的排版制作,也许有人会说只有PageMaker 或飞腾之类的软件才是专门用于排版书籍、制作海报的软件。...本文以 Word 2007 为操作环境,也同样适用于Word 2000 、Word 2003 版本,只是界面稍有不同而已。
  • Word XPWord XP 中目录的编制方法 1.单击要插入目录的位置。 2.指向"插入"菜单上的"引用",再单击"索引和目录"。 3.单击"目录"选项卡。 4.若要使用现有的设计,请在"格式"框中单击进行选择。 5.根据需要,选择...
  • word和excel使用技巧大全

    千次阅读 2011-04-25 16:49:00
    <br />word和excel使用技巧大全   1、Word下如何使用着重号   在Word中我们可以把着重号请到工具栏上。打开“工具—自定义”命令选项,打开“自定义”对话框。在“命令”标签卡下的...
  • 山东专升本Word基础(三)文档格式化与排版一. 设置字符格式二. 设置段落格式三. 项目符号和编号四. 分页、分节和分栏表格制作一. 创建表格 文档格式化与排版 一. 设置字符格式 默认字号是五号,中文字体是宋体,...
  • word应用2(实用)

    千次阅读 2014-05-21 22:04:36
    1、快速改变Word文档的行距 选中你需要设置行距的文本段落,按“Ctrl+ 1”的组合键,即可将段落设置成单倍行距;按“Ctrl+ 2”的组合键,即可将段落设置成双倍行距;按“Ctrl+5”的组合键,即可将段落设置成1.5倍...
  • 计算机二级MS office(word02) 一、替换(ctrl+H) 1、批量修改字符 手动换行符----->段落标记 全部替换 2、批量删除字符(西文空格,全角半角,空行,索引) 删除空白行(连续两个段落标记---->一个段落标记...
  • 2014年职称计算机考试Word 2003练习题2014年职称计算机考试Word 2003练习题(一)1、请在Word 2003中新建窗口。[解]第一步:单击菜单栏中的[窗口]菜单。第二步:打击[新建窗口]命令即可。2、试述如何用模板建立一个新...
  • Word 2003 长篇文档排版技巧

    千次阅读 2012-09-03 08:38:11
    简介 市场部经常要出各种分析报告,一写就是洋洋洒洒几...制作目录也是出力不讨好的事,尽管小王知道Word中有插入目录的功能,可是尝试了几次就弃之不用了,原因是系统总是提示有错误。现在只能手工输入目录,加班加点

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,243
精华内容 897
关键字:

word横向分割线