效果图:
原理图:
代码:
/**
* Created by mChenys on 2015/12/5.
* 2016/09/28 修改,对没有子控件的情况,避免MyFlowLayout填充父容器的情况
*/
public class MyFlowLayout extends ViewGroup {
public static final int DEFAULT_SPACING = 20;
//水平间距和垂直间距
private int mHorizontalSpacing = DEFAULT_SPACING, mVertivalSpacing = DEFAULT_SPACING;
private Line mLine = null; //当前行
private int mUsedWidth = 0;//当前行已使用的宽度
private int maxLine = 100; //最大行数
private List<Line> mLineList = new ArrayList<>();
public MyFlowLayout(Context context) {
this(context, null);
}
public MyFlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public MyFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int left = getPaddingLeft();
int top = getPaddingTop();
int lines = mLineList.size();
//确定行之间的垂直位置
for (int i = 0; i < lines; i++) {
Line oneLine = mLineList.get(i);
oneLine.layoutView(left, top);
//更新每一行的top坐标
top += oneLine.mHeight + mVertivalSpacing;
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//子控件的最大宽高
int maxChildWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingLeft() - getPaddingRight();
int maxChildHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
//父控件的宽高模式
int parentWidthMode = MeasureSpec.getMode(widthMeasureSpec);
int parentHeightMode = MeasureSpec.getMode(heightMeasureSpec);
restoreLine();//每次进来onMeasure都需要重置一下数据
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
if (childView.getVisibility() == View.GONE) {
continue;
}
//确定子控件的宽高模式
int childWidthSpec = MeasureSpec.makeMeasureSpec(maxChildWidth,
parentWidthMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : parentWidthMode);
int childHeightSpec = MeasureSpec.makeMeasureSpec(maxChildHeight,
parentHeightMode == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : parentHeightMode);
//测量子控件
childView.measure(childWidthSpec, childHeightSpec);
if (mLine == null) {
mLine = new Line();
}
int width = childView.getMeasuredWidth();
mUsedWidth += width;
if (mUsedWidth <= maxChildWidth) {
//当前使用的宽度没有超过最大子控件的宽度,那么可以添加到行中
mLine.addView(childView);
mUsedWidth += mHorizontalSpacing;//加上水平间距
if (mUsedWidth >= maxChildWidth) {
//加上水平间距后大于了最大子控件宽度,那么需要换行
if (!newLine()) {
break;
}
}
} else {
//2种情况
//1.当前行没有控件,要添加的控件宽度大于最大宽度,强制添加,再换行
if (mLine.getViewCount() == 0) {
mLine.addView(childView);
if (!newLine()) {
break;
}
} else {
//2.当前行剩余空间不够存放,需要先换行,再添加
if (!newLine()) {
break;
}
mLine.addView(childView);
mUsedWidth += childView.getMeasuredWidth() + mHorizontalSpacing;//更新当前行使用的宽度
}
}
}
//确保最后一行有剩余宽度的情况,也要把这一行添加到集合
if (null != mLine && mLine.getViewCount() > 0 && !mLineList.contains(mLine)) {
mLineList.add(mLine);
}
//确定父控件宽高
int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
int totalHeight = 0;
int lines = mLineList.size();
for (int i = 0; i < lines; i++) {
Line oneLine = mLineList.get(i);
totalHeight += oneLine.mHeight;
}
if (lines > 0) {
totalHeight += mVertivalSpacing * (lines - 1) + getPaddingTop() + getPaddingBottom();
setMeasuredDimension(totalWidth, totalHeight);
} else {
//没有子控件时避免该控件填充父容器
setMeasuredDimension(0, 0);
}
}
/**
* 创建新行
*
* @return
*/
private boolean newLine() {
//保存当前行
mLineList.add(mLine);
if (mLineList.size() > maxLine) {
return false;
}
//重置变量
mLine = new Line();
mUsedWidth = 0;
return true;
}
/**
* 还原所有数据
*/
private void restoreLine() {
mLineList.clear();
mLine = new Line();
mUsedWidth = 0;
}
/**
* 代表着一行，封装了一行所占高度，该行子View的集合，以及所有View的宽度总和
*/
private class Line {
private int mHeight;//行高
private int mWidth; //当前行子View的总宽度
private List<View> childViews = new ArrayList<>();
//添加子控件到行
public void addView(View view) {
childViews.add(view);
mHeight = mHeight > view.getMeasuredHeight() ? mHeight : view.getMeasuredHeight();
mWidth += view.getMeasuredWidth();
}
//获取当前行的子控件个数
public int getViewCount() {
return childViews.size();
}
public void layoutView(int left, int top) {
//1.有剩余宽度的情况
int viewCount = getViewCount();
int surplusWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight() -
mWidth - mHorizontalSpacing * (viewCount - 1);
if (surplusWidth >= 0) {
//需要平均分配
int splitWidth = (int) (surplusWidth / viewCount + 0.5f);
for (int i = 0; i < viewCount; i++) {
View childView = childViews.get(i);
int width = childView.getMeasuredWidth();
int height = childView.getMeasuredHeight();
//平分宽度的逻辑,如果不需要平分,可以注释掉
if (splitWidth > 0) {
width += splitWidth;
//重新测量控件
int widthSpec = MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY);
int heightSpec = MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY);
childView.measure(widthSpec, heightSpec);
}
//高度低的要垂直居中显示
int topOffset = (int) ((mHeight - height) / 2 + 0.5f);
if (topOffset < 0) {
topOffset = 0;
}
//更新top值
top += topOffset;
//确定当前行子控件的位置
childView.layout(left, top, left + width, top + height);
//更新下一子控件的left坐标
left += width + mHorizontalSpacing;
}
} else {
//2.超出子控件的最大宽度,强制添加后的位置确定
if (getViewCount() == 1) {
View childView = childViews.get(0);
childView.layout(left, top, left + childView.getMeasuredWidth(), top + childView.getMeasuredHeight());
}
}
}
}
}
使用方式:
public class MainActivity extends AppCompatActivity {
String content = "['QQ','视频','放开那三国','电子书','酒店','单机','小说','斗地主','优酷','网游'," +
"'WIFI万能钥匙','播放器','捕鱼达人2','机票','游戏','熊出没之熊大快跑','美图秀秀','浏览器','" +
"单机游戏','我的世界','电影电视','QQ空间','旅游','免费游戏','2048','刀塔传奇','壁纸','节奏大师'," +
"'锁屏','装机必备','天天动听','备份','网盘','海淘网','大众点评','爱奇艺视频','腾讯手机管家','百度地图'," +
"'猎豹清理大师','谷歌地图','hao123上网导航','京东','youni有你','万年历-农历黄历','支付宝钱包']";
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ScrollView scrollView = new ScrollView(this);
int padding = (int) (this.getResources().getDisplayMetrics().density * 10 + 0.5f);
scrollView.setPadding(padding, padding, padding, padding);
MyFlowLayout flowLayout = new MyFlowLayout(this);
Random random = new Random();
try {
JSONArray jsonArray = new JSONArray(content);
for (int i = 0; i < jsonArray.length(); i++) {
final String str = jsonArray.optString(i);
TextView textView = new TextView(this);
textView.setTextSize(TypedValue.COMPLEX_UNIT_SP, 16);
textView.setText(str);
textView.setGravity(Gravity.CENTER);
textView.setPadding(padding, padding, padding, padding);
textView.setTextColor(Color.WHITE);
//随机创建颜色值
int r = 30 + random.nextInt(210);
int g = 30 + random.nextInt(210);
int b = 30 + random.nextInt(210);
//按下后的偏白的背景色
int pressColor = 0xffcecece;
int defaultColor = Color.rgb(r, g, b);
//创建圆角矩形背景选择器
StateListDrawable selector = DrawableUtils.getStateList(defaultColor, pressColor, 5);
textView.setBackgroundDrawable(selector);
textView.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(MainActivity.this, str, Toast.LENGTH_SHORT).show();
}
});
flowLayout.addView(textView);
}
} catch (JSONException e) {
e.printStackTrace();
}
scrollView.addView(flowLayout);
setContentView(scrollView);
}
}