Android史上最强分割线全攻略

借鉴自

https://blog.csdn.net/megatronkings/article/details/52156312

说实话，分割线这个东西，真的太难太难了！！！

难在何处？难在用最对的方式去实现它！

1.view——管理代码不便，绘制开销大。非常非常不好

2.图片——修改不便，增加apk体积。非常非常不好

3.Java代码——使用不便，增加代码量。非常非常不好

4.layer-list通过覆盖实现——过度绘制，修改不便。非常非常不好

5.shape——设置成background会自动填充，无法实现！

6.自定义控件——做模块化的时候，需要移植这个库。不太好

7.不充满的底部分割线的这种情况，实现起来更难——又一限制条件

所以他难

本人在探索了2个小时后，终于得出了结论

1.LinearLayout——虽然background这个属性会自动填充，不能用，但是他有divider属性！

2.其他布局——自定义控件

3.RecyclerView——ItemDecoration

下面我将给出这些情况的代码，你可以直接拷去用。

代码原理就不解释了，太简单了。有问题留言。

LinearLayout充满的底部分割线（其他方向的分割线也一样）

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:height="1dp"/>
    <solid android:color="@color/colorAccent"/>

</shape>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/line_bottom"
    android:showDividers="end"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools">

效果

LinearLayout不充满的底部分割线

<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/line_bottom"
    android:insetLeft="15dp">
</inset>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:height="1dp"/>
    <solid android:color="@color/colorAccent"/>

</shape>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:divider="@drawable/line_bottom_not_full"
    android:showDividers="end"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools">

效果

其他布局：网上开源库很多，不过我不太喜欢用别人的库，所以自己实现了一个（实现了主流的RelativeLayout和FrameLayout）

attrs

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="BorderRelativeLayout">
        <attr name="margin_start" format="dimension"/>线到起始端的margin
        <attr name="margin_end" format="dimension"/>线到末端的margin
        <attr name="width" format="dimension"/>线的宽度
        <attr name="color" format="color"/>线的颜色
        <attr name="position" format="string"/>线的位置：left、top、right、bottom
    </declare-styleable>
</resources>

border relative layout

package com.example.filemanager;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.util.Log;
import android.widget.RelativeLayout;

// TODO: 2018/5/3 如果你想多弄几条线 或者位置有特殊需求 自己改写呗！

public class BorderRelativeLayout extends RelativeLayout {

    private static final String TAG = "xbh";

    public BorderRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);

        //params

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.BorderRelativeLayout);

        startMargin = ta.getDimension(R.styleable.BorderRelativeLayout_margin_start, 0);
        endMargin = ta.getDimension(R.styleable.BorderRelativeLayout_margin_end, 0);
        width = ta.getDimension(R.styleable.BorderRelativeLayout_width, 0);
        int color = ta.getColor(R.styleable.BorderRelativeLayout_color, Color.GRAY);
        position = ta.getString(R.styleable.BorderRelativeLayout_position);

        ta.recycle();

        //init paint

        paint.setColor(color);
    }

    //拿到绘制坐标:position、margin、width

    private static final String LEFT = "left";
    private static final String TOP = "top";
    private static final String RIGHT = "right";
    private static final String BOTTOM = "bottom";

    private float startMargin;
    private float endMargin;
    private float width;
    private final String position;

    private float left;
    private float top;
    private float right;
    private float bottom;

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);

        int w = getWidth();
        int h = getHeight();

        if (LEFT.equals(position)) {
            left = 0;
            top = startMargin;
            right = width;
            bottom = h - endMargin;
        } else if (TOP.equals(position)) {
            left = startMargin;
            top = 0;
            right = w - endMargin;
            bottom = width;
        } else if (RIGHT.equals(position)) {
            left = w - width;
            top = startMargin;
            right = w;
            bottom = h - endMargin;
        } else if (BOTTOM.equals(position)) {
            left = startMargin;
            top = h - width;
            right = w - endMargin;
            bottom = h;
        }
    }

    //

    private final Paint paint = new Paint();

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);

        canvas.drawRect(left, top, right, bottom, paint);
    }
}

使用

<com.example.filemanager.BorderRelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:showDividers="end"
    android:divider="@drawable/line_bottom_not_full"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    app:margin_start="0dp"
    app:margin_end="0dp"
    app:width="1dp"
    app:position="left"
    app:color="#000">

测试了下非常好用。

frame layout你只需要改个名，继承自frame layout即可。

RecyclerView

列表的情况上面就不适用了，因为最后一个item我们不期望有线。

rv.addItemDecoration(new DividerItemDecoration(activity, DividerItemDecoration.VERTICAL));

这行代码就会为我们处理的很好。

效果如下

如果我们对他默认的样式不满意呢？

我们可以通过setDrawable的方式去设置我们drawable文件夹下自己定义的线。但是这导致的后果是我们最后一个item也有了线。所以我们需要自定义ItemDecoration。

（解决方案学习自：https://www.jianshu.com/p/26b33e1181e3 自己重写了一个DividerItemDecoration）

static class DividerItemDecoration extends RecyclerView.ItemDecoration {
    public static final int HORIZONTAL = LinearLayout.HORIZONTAL;
    public static final int VERTICAL = LinearLayout.VERTICAL;
    private static final String TAG = "DividerItem";
    private static final int[] ATTRS = new int[]{android.R.attr.listDivider};
    private Drawable mDivider;
    private boolean mIsShowBottomDivider;
    /**
     * Current orientation. Either {@link #HORIZONTAL} or {@link #VERTICAL}.
     */
    private int mOrientation;
    private final Rect mBounds = new Rect();

    public DividerItemDecoration(Context context, int orientation) {
        mIsShowBottomDivider = false;
        final TypedArray a = context.obtainStyledAttributes(ATTRS);
        mDivider = a.getDrawable(0);
        if (mDivider == null) {
            Log.w(TAG, "@android:attr/listDivider was not set in the theme used for this "
                    + "DividerItemDecoration. Please set that attribute all call setDrawable()");
        }
        a.recycle();
        setOrientation(orientation);
    }

    /**
     * Sets the orientation for this divider. This should be called if
     * {@link RecyclerView.LayoutManager} changes orientation.
     *
     * @param orientation {@link #HORIZONTAL} or {@link #VERTICAL}
     */
    public void setOrientation(int orientation) {
        if (orientation != HORIZONTAL && orientation != VERTICAL) {
            throw new IllegalArgumentException(
                    "Invalid orientation. It should be either HORIZONTAL or VERTICAL");
        }
        mOrientation = orientation;
    }

    /**
     * Sets the {@link Drawable} for this divider.
     *
     * @param drawable Drawable that should be used as a divider.
     */
    public void setDrawable(@NonNull Drawable drawable) {
        if (drawable == null) {
            throw new IllegalArgumentException("Drawable cannot be null.");
        }
        mDivider = drawable;
    }

    @Override
    public void onDraw(Canvas c, RecyclerView parent, RecyclerView.State state) {
        if (parent.getLayoutManager() == null || mDivider == null) {
            return;
        }
        if (mOrientation == VERTICAL) {
            drawVertical(c, parent, state);
        } else {
            drawHorizontal(c, parent, state);
        }
    }

    private void drawVertical(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        canvas.save();
        final int left;
        final int right;
        //noinspection AndroidLintNewApi - NewApi lint fails to handle overrides.
        if (parent.getClipToPadding()) {
            left = parent.getPaddingLeft();
            right = parent.getWidth() - parent.getPaddingRight();
            canvas.clipRect(left, parent.getPaddingTop(), right,
                    parent.getHeight() - parent.getPaddingBottom());
        } else {
            left = 0;
            right = parent.getWidth();
        }

        final int childCount = parent.getChildCount();
        final int lastPosition = state.getItemCount() - 1;
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final int childRealPosition = parent.getChildAdapterPosition(child);
            //mIsShowBottomDivider false的时候不绘制最后一个view的divider
            if (mIsShowBottomDivider || childRealPosition < lastPosition) {
                parent.getDecoratedBoundsWithMargins(child, mBounds);
                final int bottom = mBounds.bottom + Math.round(child.getTranslationY());
                final int top = bottom - mDivider.getIntrinsicHeight();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(canvas);
            }
        }
        canvas.restore();
    }

    private void drawHorizontal(Canvas canvas, RecyclerView parent, RecyclerView.State state) {
        canvas.save();
        final int top;
        final int bottom;
        //noinspection AndroidLintNewApi - NewApi lint fails to handle overrides.
        if (parent.getClipToPadding()) {
            top = parent.getPaddingTop();
            bottom = parent.getHeight() - parent.getPaddingBottom();
            canvas.clipRect(parent.getPaddingLeft(), top,
                    parent.getWidth() - parent.getPaddingRight(), bottom);
        } else {
            top = 0;
            bottom = parent.getHeight();
        }

        final int childCount = parent.getChildCount();
        final int lastPosition = state.getItemCount() - 1;
        for (int i = 0; i < childCount; i++) {
            final View child = parent.getChildAt(i);
            final int childRealPosition = parent.getChildAdapterPosition(child);
            //mIsShowBottomDivider false的时候不绘制最后一个view的divider
            if (mIsShowBottomDivider || childRealPosition < lastPosition) {
                parent.getLayoutManager().getDecoratedBoundsWithMargins(child, mBounds);
                final int right = mBounds.right + Math.round(child.getTranslationX());
                final int left = right - mDivider.getIntrinsicWidth();
                mDivider.setBounds(left, top, right, bottom);
                mDivider.draw(canvas);
            }
        }
        canvas.restore();
    }

    @Override
    public void getItemOffsets(Rect outRect, View view, RecyclerView parent,
                               RecyclerView.State state) {
        if (mDivider == null) {
            outRect.set(0, 0, 0, 0);
            return;
        }
        if (mOrientation == VERTICAL) {
            //parent.getChildCount() 不能拿到item的总数
            //https://stackoverflow.com/questions/29666598/android-recyclerview-finding-out-first
            // -and-last-view-on-itemdecoration
            int lastPosition = state.getItemCount() - 1;
            int position = parent.getChildAdapterPosition(view);
            if (mIsShowBottomDivider || position < lastPosition) {
                outRect.set(0, 0, 0, mDivider.getIntrinsicHeight());
            } else {
                outRect.set(0, 0, 0, 0);
            }
        } else {
            int lastPosition = state.getItemCount() - 1;
            int position = parent.getChildAdapterPosition(view);
            if (mIsShowBottomDivider || position < lastPosition) {
                outRect.set(0, 0, mDivider.getIntrinsicWidth(), 0);
            } else {
                outRect.set(0, 0, 0, 0);
            }
        }
    }
}

自定义的样式

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <size android:height="1dp"/>
    <solid android:color="@color/colorAccent"/>

</shape>

使用自定义的样式

//rv

RecyclerView rv = (RecyclerView) fvb(R.id.rv);
rv.setAdapter(new Adapter());
rv.setLayoutManager(new LinearLayoutManager(activity));

DividerItemDecoration decoration = new DividerItemDecoration(activity, DividerItemDecoration.VERTICAL);
decoration.setDrawable(activity.getResources().getDrawable(R.drawable.border_bottom_not_full));
rv.addItemDecoration(decoration);

大功告成。分割线的不同情形的最佳实现思路一直是让人头疼的地方，甚至在难以满足需求的时候忍不住直接用view。看了本文后，您可以开开心心地搞定分割线啦！

Android史上最强分割线全攻略

猜你喜欢