自定义View(二)继承ViewGroup 实现流示布局
实现流示布局)
继承ViewGroup实现FlowLayout
实现步骤:
想要实现继承自ViewGroup的自定义View,一般需要重写onMeasure和onLayout两个部分,此外我们还可以给View添加自定义的交互事件。下面梳理一下整体思路:
- 继承ViewGroup类,重写oMeasure方法。
- 在Measure中拿到自身的size和mode;
- 结合ViewGroup对子View进行测量和处理;
- setMeasuredDimension传入最终宽高;
- 重写onLayout方法,通过child.layout方法对子view逐一布局。
- 完善
- 其他
效果展示
继承ViewGroup
// An highlighted block
public class FlowLayout extends ViewGroup{
public FlowLayout(Context context) {
super(context);
}
public FlowLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
......
}
}
拿到自身size和mode
经过前面一节的学习,我们知道size和mode都可以在MeasureSpec中拿到
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
int widthMode = MeasureSpce.getMode(widthMeasureSpec);
int widthSize = MeasureSpce.getsize(widthMeasureSpec);
int heightMode = MeasureSpce.getMode(heightMeasureSpec);
int heightSize = MeasureSpce.getsize(heightMeasureSpec);
}
结合ViewGroup对子View进行测量和处理
此处需要结合实际情况,对每一个子空间进行测量和记录。
private static final String TAG = "Cong";
private int mHorizontalSpacing = dp2px(16); //每个item横向间距
private int mVerticalSpacing = dp2px(8); //每个item纵向间距
private List<View> lineViews;//每一行的子View
private List<List<View>> views;//所有的行
private List<Integer> heights;//每一行的高度
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSize = MeasureSpec.getSize(heightMeasureSpec);
int lineHeight = 0;
int lineWidth = 0;
int flowHeigtt = 0;
int flowWidth =0;
views = new ArrayList<>();
lineViews = new ArrayList<>();
heights = new ArrayList<>();
for(int i=0;i<this.getChildCount();i++){
view child = this.getChildAt(i);
//结合子View与父View对子view进行测量获取当前子view在父view中的宽高
int childWidthMeasureSpec =
getChildMeasureSpec(widthMeasureSpec,paddingLeft + paddingRight,lp.width);
int childHeightMeasureSpec =
getChildMeasureSpec(heightMeasureSpec, paddingTop + paddingBottom,lp.height);
childView.measure(childWidthMeasureSpec,childHeightMeasureSpec);
//获取到当前子View的测量的宽度/高度
int childWidth = child.getMeasuredWidth();
int childHeight = child.getMeasuredHeight();
if(lineWidth + childWidth > widthSize){//换行
views.add(lineViews);
lineViews = new ArrayList<>();//创建新的一行
flowlayoutWidth = Math.max(flowlayoutWidth,lineWidth+mHorizontalSpacing);
flowlayoutHeight += lineHeight+mVerticalSpacing;
heights.add(lineHeight);
lineWidth = 0;
lineHeight = 0;
}
lineViews.add(child);
lineWidth += childWidth+mHorizontalSpacing;
lineHeight = Math.max(lineHeight,childHeight);
}
//FlowLayout最终宽高
setMeasuredDimension(widthMode == MeasureSpec.EXACTLY? widthSize:flowlayoutWidth
,heightMode == MeasureSpec.EXACTLY?heightSize:flowlayoutHeight);
}
layout
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int lineCount = views.size();
int currX = 0;
int currY = 0;
for(int i = 0; i < lineCount; i++) {//大循环,所有的子View 一行一行的布局
List<View> lineViews = views.get(i);//取出一行
int lineHeight = heights.get(i);// 取出这一行的高度值
//遍历当前行的子View
int size = lineViews.size();
for (int j = 0; j < size; j++) {//布局当前行的每一个view
View child = lineViews.get(j);
int left = currX;
int top = currY;
int right = left + child.getMeasuredWidth();
int bottom = top + child.getMeasuredHeight();
child.layout(left, top, right, bottom);
//确定下一个view的left
currX += child.getMeasuredWidth()+mHorizontalSpacing;
}
currY += lineHeight+mVerticalSpacing;
currX = getLeft();
}
完善
当内部控件layout为match_parent或者定值时会出现显示问题
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/shape_button_circular"
android:text="水果味孕妇奶粉" />
<TextView
android:layout_width="wrap_content"
android:layout_height="90dp"
android:background="@drawable/shape_button_circular"
android:text="儿童洗衣机" />
<TextView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/shape_button_circular"
android:text="洗衣机全自动" />
解决思路是:
通过MeasureSpec的mode对三种情况分别进行处理。
其他
对于该FlowLayout还有很多改进的地方,比如交互上更加舒服的动画,滑动等。下一节将会对继承View的自定义View进行学习和总结。如果读者发现文章问题,欢迎指正。共同进步。