先看一下这样一个简单的布局,所展示的内容很少,上下两条分割线,两个文本。
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. 可根据需求随意配置边框颜色大小等属性。灵活、可拓展、好维护。