锐客网

  1. 首页 > it技术 > >

自适应布局FlowLayout

这是我的第一篇文章，想了很久不知道写什么内容，估计目前也没有什么能力写深奥的，那就写写之前写过的自定义view，分享一下，有不正确的地方往指正，大家共同学习。
好了，正文来了，这篇是主要写自适应布局，也就是添加的view从左到右排好，若新一个view在这一行放不下就放在下一行。
自定义view第一步是在attr.xml写属性，不过FlowLayout比较简单没有自定义属性，直接跳到后面的测量，布局等，那么就先重写onMeasure()方法
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//每行的的宽度
int width = getPaddingStart() + getPaddingEnd();
//自适应的长度
int height = getPaddingTop() + getPaddingBottom();
//最大宽度
int maxWidth = 0;
//每一行的最大长度
int maxHeight = 0;
//遍历子view
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
//测量子view
measureChild(view, widthMeasureSpec, heightMeasureSpec);
//获取子view的外边距
MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams();
//子view的宽，要加上子view的外边距，不然margin属性设置了没效果
int w = view.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
//子view的高
int h = view.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
//判断是否是该行最大长度
maxHeight = maxHeight > h ? maxHeight : h;
//判断加入该view后是否超过测量宽度，超过的话就换行
if (measureWidth < w + width) {
//判断该view是否超过父容器的最大值，是的话，设该view的宽度为父容器的测量值
if (w > measureWidth) {
w = measureWidth;
}
//换行，新一行的宽度重置，最大长度增加
width = getPaddingStart() + getPaddingEnd();
height += maxHeight;
}
//该行加入子view宽度
width += w;
//获取最大宽度，其实最大也就是父容器的测量值
maxWidth = maxWidth > width ? maxWidth : width;
//因为是从0开始的，所以最后一个view时需要加上当前这一行的高度
if (i == getChildCount() - 1) {
height += maxHeight;
}
}
if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {
setMeasuredDimension(measureWidth, measureHeight);
} else if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(measureWidth, height);
} else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.EXACTLY) {
setMeasuredDimension(maxWidth, measureHeight);
} else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {
setMeasuredDimension(maxWidth, height);
} else {
setMeasuredDimension(measureWidth, height);
}
}
以上就是重写后的onMeasure()方法，看注释应该就懂了，不过有一点需要注意，就是MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams(); 这段，获取子view的外边距，这就要重写generateLayoutParams()和generateDefaultLayoutParams()这两个方法了
@Override
protected LayoutParams generateLayoutParams(LayoutParams p) {
return new MarginLayoutParams(p);
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
@Override
protected LayoutParams generateDefaultLayoutParams() {
return new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
}
因为MarginLayoutParams时继承LayoutParams的，而且有外边距属性，所以将LayoutParams转化为MarginLayoutParams就好了，这就可以拿到子view的外边距属性了。
那么测量完之后呢，那就是布局了，布局就时重写onLayout()方法
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
//该行的开始宽度，是要加上父容器的内边距
int width = getPaddingStart();
//这是总高度
int height = getPaddingTop();
//这是目标行的最大高度
int maxHeight = 0;
//目标行的最大宽度
int maxWidth = getMeasuredWidth() - getPaddingStart() - getPaddingEnd();
//遍历子view
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams();
//子view宽度
int w = view.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;
//子view高度
int h = view.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;
maxHeight = maxHeight > h ? maxHeight : h;
if (maxWidth < w + width) {
if (w > maxWidth) {
w = maxWidth;
}
//换行，重置该行的开始宽度，目标行的高度增加
width = getPaddingStart();
height += maxHeight;
maxHeight = 0;
}
width += w;
//子view的左上角的坐标，width已经加上子view的宽度了，只要减去w就是开始坐标，加上子view的左外边距就可以了
int viewL = width - w + layoutParams.leftMargin;
int viewR = width - layoutParams.rightMargin;
int viewT = height + layoutParams.topMargin;
int viewB = ((height + h) > getMeasuredHeight() ? getMeasuredHeight() : (h + height)) - layoutParams.bottomMargin;
view.layout(viewL, viewT, viewR, viewB);
}
}
以上就是onLayout()方法，其实跟onMeasure()方法差不多，那么我们来看看效果吧，首先添加到activity的布局里
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.project.viewtest.activity.FlowActivity">
【自适应布局FlowLayout】android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="add"
android:id="@+id/flow_add"/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="back"
android:id="@+id/flow_back"
app:layout_constraintLeft_toRightOf="@id/flow_add"/>
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/flow_layout"
app:layout_constraintTop_toBottomOf="@id/flow_add"/>

从布局可以看出，有一个添加按钮，就是给FlowLayout添加子view的，那么看一下activity的内容
public class FlowActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flow);
final FlowLayout layout = findViewById(R.id.flow_layout);
//返回按钮
findViewById(R.id.flow_back).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
finish();
}
});
//添加按钮
findViewById(R.id.flow_add).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
TextView textView = new TextView(FlowActivity.this);
textView.setText(getText());
textView.setBackgroundResource(R.drawable.text_bg);
ViewGroup.MarginLayoutParams layoutParams = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
//设置外边距
layoutParams.setMargins(15, 15, 0, 0);
textView.setLayoutParams(layoutParams);
//添加
layout.addView(textView);
}
});
}
//获取随机字符串
private String getText() {
int count = (int) ((Math.random() + Math.random()) * 10);
StringBuilder builder = new StringBuilder();
for (int i = 0; i < count; i++) {
builder.append((char) ((int) (Math.random() * 93) + 32));
}
Log.i("flowActivity", "getText: " + count + "/" + builder.toString());
return builder.toString();
}
}
现在可以看效果了
自适应布局FlowLayout
文章图片
添加view后的
自适应布局FlowLayout
文章图片
这样就写好一个自适应FlowLayout了，这是我在启舰大神的博客看到的，不过我没看代码，就是想自己写一个，附上启舰大神的博客：https://blog.csdn.net/harvic880925?t=1 ，可以去看看，对比一下。
有哪里不懂的可以提问，有哪里不对的可以指正，谢谢。

    推荐阅读


    上一篇：花之舞北更校区暑假班开班啦！

    下一篇：最美中国