带边框(Border)的LinearLayout

先看一下这样一个简单的布局，所展示的内容很少，上下两条分割线，两个文本。

1.普通做法

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_background_color"
    android:paddingTop="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical">

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#B4B4B4" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:gravity="center_vertical"
            android:text="我是标题"
            android:textColor="#2B2B2B"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:text="我是内容" />

        <View
            android:layout_width="match_parent"
            android:layout_height="0.5dp"
            android:background="#B4B4B4" />
    </LinearLayout>
</RelativeLayout>

2. 将分割线view定义在border.xml里面，通过include引入。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_background_color"
    android:paddingTop="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical">

        <include layout="@layout/border" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:gravity="center_vertical"
            android:text="我是标题"
            android:textColor="#2B2B2B"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:text="我是内容" />

        <include layout="@layout/border" />
    </LinearLayout>
</RelativeLayout>

3. 将两条线放到.9图片中。

4. 自定义LinearLayout将分割线定义为属性。

public class BorderLinearLayout extends LinearLayout {

    private final static int DEFAULT_BORDER_SIZE = PixValue.dp.valueOf(0.5f); //默认线的宽度
    private int mBorderColor = getResources().getColor(R.color.app_divider_color); //颜色
    private int mBoderLeftSize = 0; //左侧线
    private int mBoderTopSize = DEFAULT_BORDER_SIZE; //顶部线
    private int mBoderRightSize = 0; //右侧线
    private int mBoderBottomSize = DEFAULT_BORDER_SIZE; //底部线
    private boolean isBorderEnable = true; //线是否可用

    private Paint borderPaint;
    private Rect tempRect = new Rect();

    public BorderLinearLayout(Context context) {
        super(context);
        init();
    }

    public BorderLinearLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.BorderLinearLayout, 0, 0);
        mBorderColor = a.getColor(R.styleable.BorderLinearLayout_border_colors, mBorderColor);
        mBoderLeftSize = a.getDimensionPixelSize(R.styleable.BorderLinearLayout_border_left_size, 0);
        mBoderTopSize = a.getDimensionPixelSize(R.styleable.BorderLinearLayout_border_top_size, DEFAULT_BORDER_SIZE);
        mBoderRightSize = a.getDimensionPixelSize(R.styleable.BorderLinearLayout_border_right_size, 0);
        mBoderBottomSize = a.getDimensionPixelSize(R.styleable.BorderLinearLayout_border_bottom_size, DEFAULT_BORDER_SIZE);
        isBorderEnable = a.getBoolean(R.styleable.BorderLinearLayout_border_enable, true);
        a.recycle();
        init();
    }

    private void init() {
        borderPaint = new Paint();
        borderPaint.setColor(mBorderColor);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        super.dispatchDraw(canvas);
        if (!isBorderEnable) {
            return;
        }
        int vw = getWidth();
        int vh = getHeight();
        if (mBoderLeftSize > 0) {
            tempRect.setEmpty();
            tempRect.set(0, 0, mBoderLeftSize, vh);
            canvas.drawRect(tempRect, borderPaint);
        }
        if (mBoderTopSize > 0) {
            tempRect.setEmpty();
            tempRect.set(0, 0, vw, mBoderTopSize);
            canvas.drawRect(tempRect, borderPaint);
        }
        if (mBoderRightSize > 0) {
            tempRect.setEmpty();
            tempRect.set(vw - mBoderRightSize, 0, vw, vh);
            canvas.drawRect(tempRect, borderPaint);
        }
        if (mBoderBottomSize > 0) {
            tempRect.setEmpty();
            tempRect.set(0, vh - mBoderBottomSize, vw, vh);
            canvas.drawRect(tempRect, borderPaint);
        }
    }

    /**
     * 设置边框颜色
     *
     * @param color
     */
    public void setBorderColor(int color) {
        mBorderColor = color;
        borderPaint.setColor(mBorderColor);
        invalidate();
    }

    /**
     * 设置边框宽大小
     *
     * @param left
     * @param top
     * @param right
     * @param bottom
     */
    public void setBorderSize(int left, int top, int right, int bottom) {
        mBoderLeftSize = left;
        mBoderTopSize = top;
        mBoderRightSize = right;
        mBoderBottomSize = bottom;
        invalidate();
    }

    /**
     * 边框是否可用
     *
     * @return
     */
    public boolean isBorderEnable() {
        return isBorderEnable;
    }

    /**
     * 设置边框是否可用
     *
     * @param enable
     */
    public void setBorderEnable(boolean enable) {
        if (enable == isBorderEnable) {
            return;
        }
        isBorderEnable = enable;
        invalidate();
    }
}

    <!-- 带Border的LinearLayout -->
    <declare-styleable name="BorderLinearLayout">
        <attr name="border_left_size" format="dimension" />
        <attr name="border_top_size" format="dimension" />
        <attr name="border_right_size" format="dimension" />
        <attr name="border_bottom_size" format="dimension" />
        <attr name="border_enable" default="true" format="boolean" />
        <attr name="border_colors" format="color" />
    </declare-styleable>

xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/app_background_color"
    android:paddingTop="10dp">

    <com.xinling.view.layout.BorderLinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:gravity="center_vertical"
            android:text="我是标题"
            android:textColor="#2B2B2B"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="30dp"
            android:text="我是内容" />

    </com.xinling.view.layout.BorderLinearLayout>
</RelativeLayout>

总结：
    方式1. 代码量大，维护成本高，分割线的颜色变了，就要把所有带分割线的布局文件统统改一遍，并不保证不会遗漏。
    方式2. 复用和节省代码方便维护，但是会造不同样式的xml文件。
    方式3. 颜色变化，导致图片过多，增加Ul的工作量。
    方式4. 可根据需求随意配置边框颜色大小等属性。灵活、可拓展、好维护。