Android流式布局,可配置是否将每一行的空白区域平均分配给子控件。
增加了将每一行的空白区域平均分配给子控件。
3、添加控件类
4、MainActivity中使用
就这样,一个流式布局的例子就好了。
增加了将每一行的空白区域平均分配给子控件。
demo中分别演示了在xml使用方式和在java代码中动态添加
先介绍一下最常用的使用场景:一般是从网上获得一些标签(个数不确定),所以需要能在代码里面动态添加。
下面傻瓜式的详细说明使用步骤:
1、布局使用
<pre name="code" class="html"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<com.toastmemo.ui.widget.BGAFlowLayout
android:id="@+id/flowlayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/intro"
android:layout_centerHorizontal="true"
android:layout_marginLeft="20dip"
android:layout_marginRight="20dip"
android:layout_marginTop="5dip"
android:padding="5dp"
app:fl_isDistributionWhiteSpacing="true" />
</RelativeLayout>
2、添加控件的属性声明
<declare-styleable name="BGAFlowLayout">
<!-- 标签之间的水平间距 -->
<attr name="fl_horizontalChildGap" format="dimension" />
<!-- 标签之间的垂直间距 -->
<attr name="fl_verticalChildGap" format="dimension" />
<!-- 是否平均分配每一行的剩余水平方向的空白区域给该行的标签 -->
<attr name="fl_isDistributionWhiteSpacing" format="boolean" />
</declare-styleable>
3、添加控件类
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
import com.toastmemo.R;
/**
* 作者:王浩 邮件:bingoogolapple@gmail.com
* 创建时间:15/6/24 11:21
* 描述:流式布局
*/
public class BGAFlowLayout extends ViewGroup {
private List<Row> mRows = new ArrayList<Row>();
private int mHorizontalChildGap;
private int mVerticalChildGap;
private boolean mIsDistributionWhiteSpacing = true;
public BGAFlowLayout(Context context) {
this(context, null);
}
public BGAFlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public BGAFlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
initDefaultAttrs(context);
initCustomAttrs(context, attrs);
}
private void initDefaultAttrs(Context context) {
mHorizontalChildGap = dp2px(context, 10);
mVerticalChildGap = dp2px(context, 10);
}
private void initCustomAttrs(Context context, AttributeSet attrs) {
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.BGAFlowLayout);
final int N = typedArray.getIndexCount();
for (int i = 0; i < N; i++) {
initCustomAttr(typedArray.getIndex(i), typedArray);
}
typedArray.recycle();
}
private void initCustomAttr(int attr, TypedArray typedArray) {
if (attr == R.styleable.BGAFlowLayout_fl_horizontalChildGap) {
/**
* getDimension和getDimensionPixelOffset的功能差不多,都是获取某个dimen的值,如果是dp或sp的单位,将其乘以density,如果是px,则不乘;两个函数的区别是一个返回float,一个返回int. getDimensionPixelSize则不管写的是dp还是sp还是px,都会乘以denstiy.
*/
mHorizontalChildGap = typedArray.getDimensionPixelOffset(attr, mHorizontalChildGap);
} else if (attr == R.styleable.BGAFlowLayout_fl_verticalChildGap) {
mVerticalChildGap = typedArray.getDimensionPixelOffset(attr, mVerticalChildGap);
} else if (attr == R.styleable.BGAFlowLayout_fl_isDistributionWhiteSpacing) {
mIsDistributionWhiteSpacing = typedArray.getBoolean(attr, mIsDistributionWhiteSpacing);
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
/**
* 1.EXACTLY:100dp,match_parent
* 2.AT_MOST:wrap_content
* 3.UNSPCIFIED:子控件想要多大就多大,很少见(ScrollView)
*/
int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
mRows.clear();
Row row = new Row(sizeWidth);
View child;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
child = getChildAt(i);
measureChild(child, widthMeasureSpec, heightMeasureSpec);
if (!row.addChild(child)) {
mRows.add(row);
row = new Row(sizeWidth);
row.addChild(child);
}
}
// 添加最后一行
if (!mRows.contains(row)) {
mRows.add(row);
}
int height = 0;
int rowCount = mRows.size();
for (int i = 0; i < rowCount; i++) {
height += mRows.get(i).mHeight;
if (i != rowCount - 1) {
height += mVerticalChildGap;
}
}
setMeasuredDimension(sizeWidth, modeHeight == MeasureSpec.EXACTLY ? sizeHeight : height + getPaddingTop() + getPaddingBottom());
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int rowCount = mRows.size();
int top = getPaddingTop();
Row row;
for (int i = 0; i < rowCount; i++) {
row = mRows.get(i);
if (mIsDistributionWhiteSpacing && i != rowCount - 1) {
row.layout(true, top);
} else {
row.layout(false, top);
}
top += row.mHeight + mVerticalChildGap;
}
}
private class Row {
private List<View> mViews = new ArrayList<View>();
private int mWidth;
private int mNewWidth;
private int mHeight;
private int mMaxWidth;
public Row(int sizeWidth) {
mMaxWidth = sizeWidth - getPaddingLeft() - getPaddingRight();
}
public boolean addChild(View child) {
if (isOutOfMaxWidth(child.getMeasuredWidth())) {
return false;
} else {
mViews.add(child);
mWidth = mNewWidth;
int childHeight = child.getMeasuredHeight();
mHeight = mHeight < childHeight ? childHeight : mHeight;
return true;
}
}
private boolean isOutOfMaxWidth(int childWidth) {
if (mViews.size() == 0) {
mNewWidth = mWidth + childWidth;
} else {
mNewWidth = mWidth + mHorizontalChildGap + childWidth;
}
return mNewWidth > mMaxWidth;
}
/**
* @param isNeedSplit 是否需要平均分配空白区域给每一个子孩子
* @param top
*/
public void layout(boolean isNeedSplit, int top) {
if (mViews.size() == 0) {
return;
}
int left = getPaddingLeft();
int count = mViews.size();
int splitWidth = (mMaxWidth - mWidth) / count;
View view;
for (int i = 0; i < count; i++) {
view = mViews.get(i);
int childWidth = view.getMeasuredWidth();
int childHeight = view.getMeasuredHeight();
if (isNeedSplit) {
childWidth = childWidth + splitWidth;
view.getLayoutParams().width = childWidth;
if (splitWidth > 0) {
/**
* 1.EXACTLY:100dp,match_parent
* 2.AT_MOST:wrap_content
* 3.UNSPCIFIED:子控件想要多大就多大,很少见(ScrollView)
*/
int widthMeasureSpec = MeasureSpec.makeMeasureSpec(childWidth, MeasureSpec.EXACTLY);
int heightMeasureSpec = MeasureSpec.makeMeasureSpec(childHeight, MeasureSpec.EXACTLY);
view.measure(widthMeasureSpec, heightMeasureSpec);
}
}
int topOffset = (int) ((mHeight - childHeight) / 2.0 + 0.5);
view.layout(left, top + topOffset, left + childWidth, top + topOffset + childHeight);
left += childWidth + mHorizontalChildGap;
}
}
}
public static int dp2px(Context context, float dpValue) {
return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dpValue, context.getResources().getDisplayMetrics());
}
}
4、MainActivity中使用
使用方法主要代码:
//设置标签内容样式
private TextView getLabel(String text) {
TextView label = new TextView(this);
label.setTextColor(Color.parseColor("#f2f2f2"));
label.setBackgroundResource(R.drawable.shape_label_bg);
label.setGravity(Gravity.CENTER);
label.setSingleLine(true);
label.setEllipsize(TextUtils.TruncateAt.END);
int paddingTop = BGAFlowLayout.dp2px(this, 5);
int paddingLeft = BGAFlowLayout.dp2px(this, 10);
label.setPadding(paddingLeft, paddingTop, paddingLeft, paddingTop);
label.setText(text);
return label;
}
//添加标签,其中labels是从网络上取到的字符数组。
private labels[] = {"萌妹子","漂亮","很有个性"}
private void addLabel() {
for (String label : labels) {
System.out.println(label);
if (!TextUtils.isEmpty(label)) {
mFlowLayout.addView(getLabel(label), new ViewGroup.MarginLayoutParams(ViewGroup.MarginLayoutParams.WRAP_CONTENT, ViewGroup.MarginLayoutParams.WRAP_CONTENT));
}
}
}
就这样,一个流式布局的例子就好了。