自定义FlowLayout,android flowLayout实现
【摘要】
我想大家在开发过程中都碰到过这样的需求，类似标签展示，要展示如上图效果，这里面的数据不确定每项字数，有的非常长，有的很短，数据动态填充。
这种情况用listView和gridView展示效果都没有上图的效果。
这时我们其实是要自己写一个控件来填充上图的数据，也就是我们今天要说的自定义view,流式布局。
方法还是重写onMea...
我想大家在开发过程中都碰到过这样的需求，类似标签展示，要展示如上图效果，这里面的数据不确定每项字数，有的非常长，有的很短，数据动态填充。
这种情况用listView和gridView展示效果都没有上图的效果。
这时我们其实是要自己写一个控件来填充上图的数据，也就是我们今天要说的自定义view,流式布局。
方法还是重写onMeasure和onLayout
话不多说 ，代码贴上
一.自定义view
-
package com.jky.mobilebzt.view;
-
-
import java.util.ArrayList;
-
import java.util.List;
-
-
import android.content.Context;
-
import android.util.AttributeSet;
-
import android.view.View;
-
import android.view.ViewGroup;
-
-
public class XCFlowLayout extends ViewGroup {
-
// 存储所有子View
-
private List<List<View>> mAllChildViews = new ArrayList<List<View>>();
-
// 每一行的高度
-
private List<Integer> mLineHeight = new ArrayList<Integer>();
-
-
public XCFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
-
super(context, attrs, defStyleAttr);
-
}
-
-
public XCFlowLayout(Context context, AttributeSet attrs) {
-
this(context, attrs, 0);
-
}
-
-
public XCFlowLayout(Context context) {
-
this(context, null);
-
}
-
-
@Override
-
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
-
// TODO Auto-generated method stub
-
// 父控件传进来的宽度和高度以及对应的测量模式
-
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
-
int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
-
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
-
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
-
-
// 如果当前ViewGroup的宽高为wrap_content的情况
-
int width = 0; // 自己测量的宽度
-
int height = 0; // 自己测量的高度
-
-
int lineWidth = 0;// 每一行的宽度
-
int lineHeight = 0; // 每一行的高度
-
-
int childCount = getChildCount();// 获取子view的个数
-
for (int i = 0; i < childCount; i++) {
-
View child = getChildAt(i);
-
// 测量子View的宽和高
-
measureChild(child, widthMeasureSpec, heightMeasureSpec);
-
// 得到LayoutParams
-
MarginLayoutParams lp = (MarginLayoutParams) getLayoutParams();
-
// 得到子View占据的宽度
-
int childWidth = child.getMeasuredWidth() + lp.leftMargin
-
+ lp.rightMargin;
-
// 得到子View占据的高度
-
int childHeight = child.getMeasuredHeight() + lp.topMargin
-
+ lp.bottomMargin;
-
if (lineWidth + childWidth > sizeWidth) {// 需要进行换行
-
width = Math.max(width, lineWidth); // 得到最大宽度
-
lineWidth = childWidth; // 重置lineWidth
-
height += lineHeight; // 得到高度
-
lineHeight = childHeight;// 重置LineHeight
-
} else {// 不需要进行换行
-
lineWidth += childWidth;// 叠加行宽
-
lineHeight = Math.max(lineHeight, childHeight);
-
}
-
-
if (i == childCount - 1) {// 处理最后一个子View的情况
-
width = Math.max(width, lineWidth);
-
height += lineHeight;
-
}
-
}
-
-
// wrapcontent
-
setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY ? sizeWidth
-
: width, modeHeight == MeasureSpec.EXACTLY ? sizeHeight
-
: height);
-
-
// super.onMeasure(widthMeasureSpec, heightMeasureSpec);
-
}
-
-
@Override
-
protected void onLayout(boolean changed, int l, int t, int r, int b) {
-
// TODO Auto-generated method stub
-
mAllChildViews.clear();
-
mLineHeight.clear();
-
-
int width = getWidth();// 获取当前ViewGroup宽度
-
int lineWidth = 0;
-
int lineHeight = 0;
-
-
List<View> lineViews = new ArrayList<View>();// 记录当前行的View
-
int childCount = getChildCount();
-
for (int i = 0; i < childCount; i++) {
-
View child = getChildAt(i);
-
MarginLayoutParams lp = (MarginLayoutParams) child
-
.getLayoutParams();
-
int childWidth = child.getMeasuredWidth();
-
int childHeight = child.getMeasuredHeight();
-
-
// 需要换行
-
if (lineWidth + childWidth + lp.leftMargin + lp.rightMargin > width) {
-
mLineHeight.add(lineHeight); // 记录lineHeight
-
mAllChildViews.add(lineViews); // 记录当前行的Views
-
// 重置 行的宽高
-
lineWidth = 0;
-
lineHeight = childHeight + lp.topMargin + lp.bottomMargin;
-
// 重置当前行的View集合；
-
lineViews = new ArrayList<View>();
-
}
-
-
lineWidth += childWidth + lp.leftMargin + lp.rightMargin;
-
lineHeight = Math.max(lineHeight, childHeight + lp.topMargin
-
+ lp.bottomMargin);
-
lineViews.add(child);
-
}
-
// 处理最后一行
-
mLineHeight.add(lineHeight);
-
mAllChildViews.add(lineViews);
-
-
// 设置子View的位置
-
int left = 0;
-
int top = 0;
-
// 获取行数
-
int lineCount = mAllChildViews.size();
-
for (int i = 0; i < lineCount; i++) {
-
// 当前行的views和高度
-
lineViews = mAllChildViews.get(i);
-
lineHeight = mLineHeight.get(i);
-
for (int j = 0; j < lineViews.size(); j++) {
-
View child = lineViews.get(j);
-
// 判断是否显示
-
if (child.getVisibility() == View.GONE) {
-
continue;
-
}
-
MarginLayoutParams lp = (MarginLayoutParams) child
-
.getLayoutParams();
-
int cLeft = left + lp.leftMargin;
-
int cTop = top + lp.topMargin;
-
int cRight = cLeft + child.getMeasuredWidth();
-
int cBottom = cTop + child.getMeasuredHeight();
-
// 进行子View进行布局
-
child.layout(cLeft, cTop, cRight, cBottom);
-
left += child.getMeasuredWidth() + lp.leftMargin
-
+ lp.rightMargin;
-
}
-
left = 0;
-
-
top += lineHeight;
-
}
-
}
-
-
/**
-
* 与当前ViewGroup对应的LayoutParams
-
*/
-
@Override
-
public LayoutParams generateLayoutParams(AttributeSet attrs) {
-
return new MarginLayoutParams(getContext(), attrs);
-
}
-
}
二.xml部分
xml布局中加上这个
-
<com.jky.mobilebzt.view.XCFlowLayout
-
android:id="@+id/xcf_hot_words"
-
android:layout_width="match_parent"
-
android:layout_height="wrap_content"
-
android:layout_marginLeft="@dimen/margin_lsmall"
-
android:layout_marginBottom="@dimen/margin_normal"
-
android:layout_marginRight="@dimen/margin_normal" />
三.初始化数据部分
-
@SuppressLint("NewApi")
-
private void initHotWordViews() {
-
MarginLayoutParams lp = new MarginLayoutParams(
-
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
-
lp.leftMargin = 20;
-
lp.rightMargin = 20;
-
lp.topMargin = 8;
-
lp.bottomMargin = 8;
-
for (int i = 0; i < hotWords.size(); i++) {
-
final String hotWord = hotWords.get(i);
-
TextView view = new TextView(this);
-
view.setGravity(Gravity.CENTER);
-
view.setText(hotWords.get(i));
-
view.setTextColor(Color.BLACK);
-
view.setBackground(getResources().getDrawable(R.drawable.hot_word_selector));
-
mFlowLayout.addView(view, lp);
-
view.setOnClickListener(new OnClickListener() {
-
@Override
-
public void onClick(View v) {
-
-
}
-
});
-
}
-
}
hotWords就是你要填充的数据集合
基本核心的东西就上面这些 ，最上面的图是我的项目里面最后实现的效果图。如果还有其他问题欢迎加入我们的qq群：
开发一群：454430053开发二群：537532956
文章来源: wukong.blog.csdn.net，作者：再见孙悟空_，版权归原作者所有，如需转载，请联系作者。
原文链接：wukong.blog.csdn.net/article/details/72625902
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）