效果图
Java代码
public class FlowLayout extends ViewGroup {
private float mWidthMargin;
private float mHeightMargin;
public FlowLayout(Context context) {
this(context, null);
}
public FlowLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.FlowLayout);
mWidthMargin = array.getDimension(R.styleable.FlowLayout_width_margin, AppUtils.dp2px(10, getResources().getDisplayMetrics()));
mHeightMargin = array.getDimension(R.styleable.FlowLayout_height_margin, AppUtils.dp2px(10, getResources().getDisplayMetrics()));
array.recycle();
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childCount = getChildCount();
int horizontalWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();
int availableWidth = horizontalWidth;
int childTop = getPaddingTop();
int childLeft = getPaddingLeft();
int maxLineHeight = 0;
for (int i = 0; i < childCount; i++) {
View childAt = getChildAt(i);
if (childAt != null && childAt.getVisibility() != View.GONE) {
int childWidth = childAt.getMeasuredWidth();
int childHeight = childAt.getMeasuredHeight();
if (availableWidth < childWidth) {
availableWidth = horizontalWidth;
childTop += maxLineHeight + mHeightMargin;
maxLineHeight = 0;
childLeft = getPaddingLeft();
}
childAt.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
childLeft += childWidth + mWidthMargin;
availableWidth -= childWidth + mWidthMargin;
maxLineHeight = Math.max(maxLineHeight, childHeight);
}
}
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int width = MeasureSpec.getSize(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
int height = MeasureSpec.getSize(heightMeasureSpec);
if (widthMode != MeasureSpec.EXACTLY) {
width = AppUtils.dp2px(200, getResources().getDisplayMetrics());
}
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
}
if (heightMode != MeasureSpec.EXACTLY) {
setMeasuredDimension(width, getDesiredHeight(width));
} else {
setMeasuredDimension(width, height);
}
}
private int getDesiredHeight(int width) {
int horizontalWidth = width - getPaddingLeft() - getPaddingRight();
int availableWidth = horizontalWidth;
int totalHeight = getPaddingTop() + getPaddingBottom();
int maxLineHeight = 0;
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
View childAt = getChildAt(i);
if (childAt != null && childAt.getVisibility() != View.GONE) {
int childWidth = childAt.getMeasuredWidth();
int childHeight = childAt.getMeasuredHeight();
if (availableWidth < childWidth) {
availableWidth = horizontalWidth;
totalHeight += maxLineHeight + mHeightMargin;
maxLineHeight = 0;
}
availableWidth -= childWidth + mWidthMargin;
maxLineHeight = Math.max(maxLineHeight, childHeight);
if (i == childCount - 1) {
totalHeight += maxLineHeight;
}
}
}
return totalHeight;
}
}
style属性
<declare-styleable name="FlowLayout">
<attr name="width_margin" format="dimension" />
<attr name="height_margin" format="dimension" />
</declare-styleable>
使用方法
<com.huli.hulitestapplication.views.FlowLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="10dp"
app:width_margin="10dp">
<TextView
android:id="@+id/btn_web_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="WebView"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/btn_pointIndicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="pointIndicator"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/btn_error"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="热修复"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/btn_toast"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="toast"
android:textColor="@android:color/white" />
<TextView
android:id="@+id/alert_dialog"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="alert_dialog"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="美图秀秀"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="捕鱼达人"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="WIFI万能钥匙"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="微信"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="你好1"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="hao上网导航"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="免费游戏"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="优酷视频"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="百度地图"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="天天动听"
android:textColor="@android:color/white" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/tv_flow_bg"
android:text="腾讯手机管家"
android:textColor="@android:color/white" />
</com.huli.hulitestapplication.views.FlowLayout>