需求及前情提要
现有需求,按总宽度N等分,从左往右放置子布局,至最右处换下行继续,整体布局高度按照子布局高度逐级扩张。
实际可用效果如图:
demo.png
之前有做一个版本 TableLayout 整齐堆叠宽度等分布局 但实际实现方式存在问题,先根据扔物线大佬的教程视频重做一版如下:
/**
* TableLayout 2.0
* Author: @Kongzue
* Github: https://github.com/kongzue/
* Homepage: http://kongzue.com/
* Mail: myzcxhh@live.cn
* CreateTime: 2019/4/24 15:51
*/
public class TableLayout extends ViewGroup {
private int maxColumn = 2;
private int itemMargin = 0;
private int setChildHeight = dp2px(150);
private Context context;
public TableLayout(Context context) {
super(context);
this.context = context;
loadAttrs(context, null);
}
public TableLayout(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
loadAttrs(context, attrs);
}
public TableLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
this.context = context;
loadAttrs(context, attrs);
}
private void loadAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.TableLayout);
itemMargin = typedArray.getDimensionPixelOffset(R.styleable.TableLayout_marginDp, 0);
setChildHeight = typedArray.getDimensionPixelOffset(R.styleable.TableLayout_itemHeight, dp2px(150));
maxColumn = typedArray.getInteger(R.styleable.TableLayout_column, 2);
typedArray.recycle();
}
private List<View> items;
private int newHeight = 0;
private int[] childTop, childLeft, childRight, childBottom;
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int maxWidth = resolveSize(Integer.MAX_VALUE, widthMeasureSpec) + itemMargin;
int itemWidth = maxWidth / maxColumn - itemMargin;
int itemHeight = resolveSize(setChildHeight, heightMeasureSpec);
childTop = new int[getChildCount()];
childLeft = new int[getChildCount()];
childRight = new int[getChildCount()];
childBottom = new int[getChildCount()];
int l = 0, t = 0, r = 0, b = 0;
items = new ArrayList<>();
for (int i = 0; i < getChildCount(); i++) {
View child = getChildAt(i);
if (child.getVisibility() == VISIBLE) {
items.add(getChildAt(i));
}
}
//调用每个子view的onMeasure测量子view
for (int i = 0; i < items.size(); i++) {
View child = items.get(i);
//LayoutParams lp = child.getLayoutParams();
int childWidthSpec = MeasureSpec.makeMeasureSpec(itemWidth, MeasureSpec.EXACTLY);
int childHeightSpec = MeasureSpec.makeMeasureSpec(itemHeight, MeasureSpec.EXACTLY);
if (i != 0 && i % maxColumn == 0) {
l = 0;
t = t + itemHeight + itemMargin;
}
r = l + itemWidth;
b = t + itemHeight;
childLeft[i] = l;
childTop[i] = t;
childRight[i] = r;
childBottom[i] = b;
l = l + itemWidth + itemMargin;
newHeight = t + itemHeight;
child.measure(childWidthSpec, childHeightSpec);
}
int mWidth = resolveSize(itemWidth, widthMeasureSpec);
int mHeight = resolveSize(itemHeight, heightMeasureSpec);
//setMeasuredDimension(mWidth, mHeight);
//refreshViews(widthMeasureSpec, heightMeasureSpec);
setMeasuredDimension(mWidth, newHeight);//设置宽高
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
for (int i = 0; i < items.size(); i++) {
View child = items.get(i);
child.layout(childLeft[i], childTop[i], childRight[i], childBottom[i]);
}
}
@Override
public void addView(View child) {
super.addView(child);
}
@Override
public void addView(View child, int index) {
super.addView(child, index);
}
@Override
public void addView(View child, int width, int height) {
super.addView(child, width, height);
}
@Override
public void addView(View child, LayoutParams params) {
super.addView(child, params);
}
@Override
public void addView(View child, int index, LayoutParams params) {
super.addView(child, index, params);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
}
private int dp2px(float dpValue) {
return (int) (0.5f + dpValue * Resources.getSystem().getDisplayMetrics().density);
}
public int getMaxColumn() {
return maxColumn;
}
public TableLayout setMaxColumn(int maxColumn) {
this.maxColumn = maxColumn;
return this;
}
public int getItemMargin() {
return itemMargin;
}
public TableLayout setItemMargin(int itemMargin) {
this.itemMargin = itemMargin;
return this;
}
public int getItemHeight() {
return setChildHeight;
}
public TableLayout setItemHeight(int itemHeight) {
this.setChildHeight = itemHeight;
return this;
}
}
附录
视频链接:
扔物线大佬的《定制 Layout 的内部布局》:
https://www.bilibili.com/video/BV1QW411t7op
https://www.bilibili.com/video/BV1CW411q77t
网友评论