自定义表格式布局FormLayout

自定义表格式布局FormLayout

项目中有这样的表格式布局，如下图

如果用LinearLayout，RelativeLayout也能实现这样的布局，但是比较麻烦，布局的层级也会比较多。所以就自己自定义了一个FormLayout来展示这些信息。

/**
* 自定义表格布局
* <p/>
* author yyw
* date 2017/7/12
* version 1.0
* desc
*/
public class FormLayout extends ViewGroup {
private float[] mChildWeight;//表格的每列的权重，用来计算每列表格的宽度,如果为空表示平均分配
private int columnCount;//表格的总列数
private int rowCount;//表格的总行数
private int dividerSize = 2;//表格边框的宽度
private int[] mChildColumnWidth;//表格每列的宽度
private int[] mChildRowHeight;//表格每行的高度
private Path mDividerPath;//边框的路径
private Paint mDividerPaint;//画笔
public FormLayout(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.FormLayout);
CharSequence[] weightArray = array.getTextArray(R.styleable.FormLayout_column_weight_array);
setWeight(weightArray);
columnCount = array.getInt(R.styleable.FormLayout_columnCount, 0);
rowCount = array.getInt(R.styleable.FormLayout_rowCount, 0);
int mDividerColor = array.getColor(R.styleable.FormLayout_dividerColor, Color.BLACK);
dividerSize = array.getDimensionPixelSize(R.styleable.FormLayout_dividerWidth, dividerSize);
array.recycle();
mChildColumnWidth = new int[columnCount];
mChildRowHeight = new int[rowCount];
mDividerPath = new Path();
mDividerPaint = new Paint();
mDividerPaint.setColor(mDividerColor);
mDividerPaint.setAntiAlias(true);
mDividerPaint.setStrokeWidth(dividerSize);
mDividerPaint.setStyle(Paint.Style.STROKE);
setWillNotDraw(false);
}
private void setWeight(CharSequence[] weightArray) {
if (weightArray == null) return;
mChildWeight = new float[weightArray.length];
for (int i = 0; i < weightArray.length; i++) {
float w = Float.parseFloat(weightArray[i].toString().trim());
mChildWeight[i] = w;
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
if (columnCount == 0 || rowCount == 0) return;
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
//计算每列的宽度
fillChildWidth(widthSize);
for (int i = 0; i < mChildRowHeight.length; i++) {
//计算每行的高度
mChildRowHeight[i] = getChildAtRowMaxHeight(i);
}
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
LayoutParams params = (LayoutParams) child.getLayoutParams();
//计算总的宽度
int childWidth = 0;
for (int j = params.columnIndex; j < (params.columnCount + params.columnIndex); j++) {
childWidth += mChildColumnWidth[j];
}
childWidth += (params.columnCount - 1) * dividerSize;
//计算总的高度
int childHeight = 0;
for (int j = params.rowIndex; j < (params.rowIndex + params.rowCount); j++) {
childHeight += mChildRowHeight[j];
}
childHeight += (params.rowCount - 1) * dividerSize;
int childWidthMeasureSpec = getChildMeasureSpec(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY),
getPaddingLeft() + getPaddingRight() + params.leftMargin
+ params.rightMargin, childWidth);
int childHeightMeasureSpec = getChildMeasureSpec(MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY),
getPaddingTop() + getPaddingBottom() + params.topMargin
+ params.bottomMargin, childHeight);
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
}
//计算布局的总高度
int allHeight = 0;
for (int h : mChildRowHeight) {
allHeight += h;
}
allHeight += (rowCount + 1) * dividerSize;
allHeight += getPaddingBottom() + getPaddingTop();
super.onMeasure(widthMeasureSpec, MeasureSpec.makeMeasureSpec(allHeight, MeasureSpec.EXACTLY));
}
/**
* 获取每行的最大的高度
*
* @param row 行数
* @return 最大高度
*/
private int getChildAtRowMaxHeight(int row) {
final int childCount = getChildCount();
int maxHeight = 0;
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
LayoutParams params = (LayoutParams) child.getLayoutParams();
if (row >= params.rowIndex && row < (params.rowIndex + params.rowCount)) {//表示在获取范围内
int childWidth = 0;
for (int j = params.columnIndex; j < (params.columnCount + params.columnIndex); j++) {
childWidth += mChildColumnWidth[j];//计算所占列的总宽度
}
childWidth += (params.columnCount - 1) * dividerSize;//计算总的宽度
int childHeight = getChildMeasureHeight(child, params, childWidth);
int rowHeight = (childHeight - (params.rowCount - 1) * dividerSize) / params.rowCount;//把宽度分给所占行的高度
maxHeight = Math.max(maxHeight, rowHeight);
}
}
return maxHeight;
}
/**
* 获取行高
*
* @param child
子view
* @param lp
子view的LayoutParams
* @param childWidth 子view的宽度
* @return 获取子view的高度
*/
private int getChildMeasureHeight(View child, LayoutParams lp, int childWidth) {
int childWidthMeasureSpec = getChildMeasureSpec(MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY),
getPaddingLeft() + getPaddingRight() + lp.leftMargin
+ lp.rightMargin, childWidth);
int childHeightMeasureSpec = getChildMeasureSpec(MeasureSpec.makeMeasureSpec(lp.height, MeasureSpec.UNSPECIFIED),
getPaddingTop() + getPaddingBottom() + lp.topMargin
+ lp.bottomMargin, ViewGroup.LayoutParams.WRAP_CONTENT);
child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
return child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;
}
/**
* 计算每列的位置
*
* @param widthSize 宽度
*/
private void fillChildWidth(int widthSize) {
int paddingLeft = getPaddingLeft();
int paddingRight = getPaddingRight();
widthSize = widthSize - paddingLeft - paddingRight - (columnCount + 1) * dividerSize;
if (mChildWeight != null && mChildWeight.length == mChildColumnWidth.length) {
float allWeight = 0.0f;
for (float w : mChildWeight) {
allWeight += w;
}
float weightStep = widthSize / allWeight;
for (int i = 0; i < mChildWeight.length; i++) {
mChildColumnWidth[i] = Math.round(mChildWeight[i] * weightStep);
}
} else {
float weightStep = widthSize / mChildColumnWidth.length;
for (int i = 0; i < mChildColumnWidth.length; i++) {
mChildColumnWidth[i] = Math.round(weightStep);
}
}
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
final int childTop = getPaddingTop() + dividerSize;
final int childLeft = getPaddingLeft() + dividerSize;
final int count = getChildCount();
for (int i = 0; i < count; i++) {
View child = getChildAt(i);
LayoutParams params = (LayoutParams) child.getLayoutParams();
int t = getCurrentTop(childTop, params.rowIndex) + params.rowIndex * dividerSize;
int l = getCurrentLeft(childLeft, params.columnIndex) + params.columnIndex * dividerSize;
int b = t + child.getMeasuredHeight();
int r = l + child.getMeasuredWidth();
child.layout(l, t, r, b);
}
}
private int getCurrentTop(int childTop, int rowIndex) {
for (int i = 0; i < rowIndex; i++) {
childTop += mChildRowHeight[i];
}
return childTop;
}
private int getCurrentLeft(int childLeft, int columnIndex) {
for (int i = 0; i < columnIndex; i++) {
childLeft += mChildColumnWidth[i];
}
return childLeft;
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//画边框
mDividerPath.reset();
final int childCount = getChildCount();
final int halfSize = dividerSize / 2;
for (int i = 0; i < childCount; i++) {
View child = getChildAt(i);
mDividerPath.moveTo(child.getLeft() - halfSize, child.getTop() - halfSize);
mDividerPath.lineTo(child.getLeft() - halfSize, child.getBottom() + halfSize);
mDividerPath.lineTo(child.getRight() + halfSize, child.getBottom() + halfSize);
mDividerPath.lineTo(child.getRight() + halfSize, child.getTop() - halfSize);
mDividerPath.lineTo(child.getLeft() - halfSize, child.getTop() - halfSize);
}
canvas.drawPath(mDividerPath, mDividerPaint);
}
@Override
protected boolean checkLayoutParams(ViewGroup.LayoutParams p) {
return p instanceof LayoutParams;
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new LayoutParams(getContext(), attrs);
}
@Override
protected ViewGroup.LayoutParams generateLayoutParams(ViewGroup.LayoutParams p) {
return new LayoutParams(p);
}
/**
* Per child parameters for children views of the {@link FormLayout}.
*/
public static class LayoutParams extends ViewGroup.MarginLayoutParams {
public int rowIndex;
public int rowCount;
public int columnIndex;
public int columnCount;
public LayoutParams(Context c, AttributeSet attrs) {
super(c, attrs);
TypedArray array = c.obtainStyledAttributes(attrs, R.styleable.FormLayout_Layout);
rowIndex = array.getInt(R.styleable.FormLayout_Layout_layout_rowIndex, 0);
rowCount = array.getInt(R.styleable.FormLayout_Layout_layout_rowCount, 1);
columnIndex = array.getInt(R.styleable.FormLayout_Layout_layout_columnIndex, 0);
columnCount = array.getInt(R.styleable.FormLayout_Layout_layout_columnCount, 1);
array.recycle();
}
public LayoutParams(@Px int width, @Px int height) {
super(new ViewGroup.LayoutParams(width, height));
}
public LayoutParams(LayoutParams source) {
super(source);
rowIndex = source.rowIndex;
rowCount = source.rowCount;
columnIndex = source.columnIndex;
columnCount = source.columnCount;
}
public LayoutParams(ViewGroup.LayoutParams source) {
super(source);
}
}
}

自定义属性

<resources>
<declare-styleable name="FormLayout">
<attr name="column_weight_array" format="reference"/>
<attr name="rowCount" format="integer"/>
<attr name="columnCount" format="integer"/>
<attr name="dividerColor" format="color"/>
<attr name="dividerWidth" format="dimension"/>
</declare-styleable>
<declare-styleable name="FormLayout_Layout">
<attr name="layout_rowIndex" format="integer"/>
<attr name="layout_rowCount" format="integer"/>
<attr name="layout_columnIndex" format="integer"/>
<attr name="layout_columnCount" format="integer"/>
</declare-styleable>
</resources>

Demo

代码布局：

<com.tongyan.qrcode.support.widget.FormLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:columnCount="3"
app:rowCount="3">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="占一列三行"
app:layout_columnIndex="0"
app:layout_rowCount="3"
app:layout_rowIndex="0"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="占两列一行"
app:layout_columnCount="2"
app:layout_columnIndex="1"
app:layout_rowIndex="0"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="占一列一行"
app:layout_columnIndex="1"
app:layout_rowIndex="1"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="占一列一行"
app:layout_columnIndex="1"
app:layout_rowIndex="2"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:padding="10dp"
android:text="占一列两行"
app:layout_columnIndex="2"
app:layout_rowCount="2"
app:layout_rowIndex="1"/>
</com.tongyan.qrcode.support.widget.FormLayout>

如果要改动每列的宽度权重
可以定义一个String数组

<string-array name="demo">
<item>1</item>
<item>1.5</item>
<item>2</item>
</string-array>

在布局中加入

app:column_weight_array="@array/demo"

效果图

最后

以上就是俭朴红酒为你收集整理的自定义表格式布局FormLayout的全部内容，希望文章能够帮你解决自定义表格式布局FormLayout所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。