好用的流式布局

private FlowLayout mFL_FlowLayout;

LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
layoutParams.setMargins(10, 5, 10, 5);
if (mFL_FlowLayout != null) {
    mFL_FlowLayout.removeAllViews();
}
for (int i = 0; i < mLocationList.size(); i++) {
    final String tag = mLocationList.get(i);
    mTV_viewText = new TextView(this);
    mTV_viewText.setPadding(28, 10, 28, 10);
    mTV_viewText.setText(mLocationList.get(i));
    mTV_viewText.setMaxEms(10);
    mTV_viewText.setSingleLine();
    mTV_viewText.setBackgroundResource(R.drawable.flowlayout_bg);
    mTV_viewText.setLayoutParams(layoutParams);
    mFL_FlowLayout.addView(mTV_viewText, layoutParams);
    mTV_viewText.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            
        }
    });
}
<com.haribit.media.utils.FlowLayout
    android:id="@+id/flayout_interface"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@+id/tv_hintawake"/>

 

public class FlowLayout extends ViewGroup {

    public FlowLayout(Context context) {
        super(context);
    }

    public FlowLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        //   super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //遍历去调用所有子元素的measure方法(child.getMeasuredHeight()才能获取到值,否则为0)
        measureChildren(widthMeasureSpec, heightMeasureSpec);

        int measuredWidth = 0, measuredHeight = 0;

        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int widtMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //由于计算子view所占宽度,这里传值需要自身减去PaddingRight宽度,PaddingLeft会在接下来计算子元素位置时加上
        Map<String, Integer> compute = compute(widthSize - getPaddingRight());

        //EXACTLY模式:对应于给定大小或者match_parent情况
        if (widtMode == MeasureSpec.EXACTLY) {
            measuredWidth = widthSize;
            //AT_MOS模式:对应wrap-content(需要手动计算大小,否则相当于match_parent)
        } else if (widtMode == MeasureSpec.AT_MOST) {
            measuredWidth = compute.get("allChildWidth");
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            measuredHeight = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            measuredHeight = compute.get("allChildHeight");
        }
        //设置flow的宽高
        setMeasuredDimension(measuredWidth, measuredHeight);
    }


    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        for (int i = 0; i < getChildCount(); i++) {
            View child = getChildAt(i);
            Rect rect = (Rect) getChildAt(i).getTag();
            child.layout(rect.left, rect.top, rect.right, rect.bottom);
        }

    }

    /**
     * 测量过程
     *
     * @param flowWidth 该view的宽度
     * @return 返回子元素总所占宽度和高度(用于计算Flowlayout的AT_MOST模式设置宽高)
     */
    private Map<String, Integer> compute(int flowWidth) {
        //是否是单行
        boolean aRow = true;
        MarginLayoutParams marginParams;//子元素margin
        int rowsWidth = getPaddingLeft();//当前行已占宽度(注意需要加上paddingLeft)
        int columnHeight = getPaddingTop();//当前行顶部已占高度(注意需要加上paddingTop)
        int rowsMaxHeight = 0;//当前行所有子元素的最大高度(用于换行累加高度)

        for (int i = 0; i < getChildCount(); i++) {

            View child = getChildAt(i);
            //获取元素测量宽度和高度
            int measuredWidth = child.getMeasuredWidth();
            int measuredHeight = child.getMeasuredHeight();
            //获取元素的margin
            marginParams = (MarginLayoutParams) child.getLayoutParams();
            //子元素所占宽度 = MarginLeft+ child.getMeasuredWidth+MarginRight  注意此时不能child.getWidth,因为界面没有绘制完成,此时wdith为0
            int childWidth = marginParams.leftMargin + marginParams.rightMargin + measuredWidth;
            int childHeight = marginParams.topMargin + marginParams.bottomMargin + measuredHeight;
            //判断是否换行: 该行已占大小+该元素大小>父容器宽度  则换行

            rowsMaxHeight = Math.max(rowsMaxHeight, childHeight);
            //换行
            if (rowsWidth + childWidth > flowWidth) {
                //重置行宽度
                rowsWidth = getPaddingLeft() + getPaddingRight();
                //累加上该行子元素最大高度
                columnHeight += rowsMaxHeight;
                //重置该行最大高度
                rowsMaxHeight = childHeight;
                aRow = false;
            }
            //累加上该行子元素宽度
            rowsWidth += childWidth;
            //判断时占的宽段时加上margin计算,设置顶点位置时不包括margin位置,不然margin会不起作用,这是给View设置tag,在onlayout给子元素设置位置再遍历取出
            child.setTag(new Rect(rowsWidth - childWidth + marginParams.leftMargin, columnHeight + marginParams.topMargin, rowsWidth - marginParams.rightMargin, columnHeight + childHeight - marginParams.bottomMargin));
        }

        //返回子元素总所占宽度和高度(用于计算Flowlayout的AT_MOST模式设置宽高)
        Map<String, Integer> flowMap = new HashMap<>();
        //单行
        if (aRow) {
            flowMap.put("allChildWidth", rowsWidth);
        } else {
            //多行
            flowMap.put("allChildWidth", flowWidth);
        }
        //FlowLayout测量高度 = 当前行顶部已占高度 +当前行内子元素最大高度+FlowLayout的PaddingBottom
        flowMap.put("allChildHeight", columnHeight + rowsMaxHeight + getPaddingBottom());
        return flowMap;
    }

}

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FFFFFF" />
    <corners android:radius="3dp" />
    <stroke android:width="1dp"
            android:color="#BBBBBB"/>
</shape>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: Android中的流式布局是一种常用的布局方式,它可以根据内容的大小和数量自动调整控件的位置和大小,使得界面能够自适应屏幕的宽度。通常在需要展示多个标签、图片或文字等的场景下使用。 流式布局的特点是将内容按照先后顺序从左到右排列,当一行的宽度不足以容纳下一个控件时,会自动换行。这种布局方式能够节省空间,提高界面的可读性和美观性。 在Android中,可以使用FlowLayout这个第三方库来实现流式布局。使用FlowLayout的步骤如下:首先在项目的build.gradle文件中添加依赖,然后在布局文件中将根布局设置为FlowLayout,并在其中添加需要展示的控件,可以通过调整控件的属性来定义布局的样式和排列方式。 流式布局可以动态调整控件的位置和大小,可以通过设置权重来控制每个控件在水平方向上的占比,也可以设置边距来调整控件之间的间隔。另外,流式布局还可以为每个控件设置点击事件和长按事件,方便实现更丰富的交互效果。 总之,流式布局是一种灵活且强大的布局方式,可以有效地解决多个控件在界面上排列不下或排列不美观的问题,同时也能够提高界面的可读性和用户体验。在开发Android应用时,如果遇到需要展示多个标签、图片或文字等的场景,流式布局是一个很好的选择。 ### 回答2: Android流式布局是一种灵活的布局方式,用于在屏幕上动态自适应地显示一系列视图。它能够根据子视图的大小和屏幕大小自动调整子视图的位置和宽度。这种布局方式适用于显示不规则大小的子视图,尤其适用于显示标签、图片、标签云等。 Android流式布局可以通过使用LinearLayout或GridLayout来实现。在LinearLayout中,可以设置orientation属性为horizontal或vertical来实现水平或垂直流式布局。在GridLayout中,可以通过设置列数来控制每行显示的子视图数量。 Android流式布局的优点是可以根据屏幕的大小和方向自动调整子视图的布局,使得页面在不同设备上都能够良好地显示。同时,它也提供了更好的用户体验,因为用户可以在不同屏幕上以不同的方式查看和交互。 然而,Android流式布局也存在一些限制。由于其自适应特性,子视图的大小和位置可能会受到限制。此外,较复杂的布局可能会导致性能问题,因为在布局过程中需要进行多次测量和计算。因此,在使用流式布局时,需要谨慎处理子视图的大小和数量,以提高性能并避免布局过于复杂。 总结来说,Android流式布局是一种灵活而自适应的布局方式,适用于显示不规则大小的子视图。它可以根据屏幕的大小和方向自动调整子视图的布局,并提供更好的用户体验。然而,需要注意处理子视图的大小和数量,以提高性能并避免布局过于复杂。 ### 回答3: Android流式布局(Flow Layout)是一种动态适应屏幕宽度的布局方式,主要用于解决在屏幕上按行排列多个子视图的问题。 在传统的线性布局中,如果视图超出屏幕宽度,就会自动换行,但是每一行只会放置一个子视图。而在流式布局中,子视图会根据屏幕宽度自动换行,并且每一行可以放置多个子视图,适应屏幕不同宽度的设备。 流式布局的使用非常方便,只需要将子视图添加到流式布局中即可。它提供了一些属性来控制子视图在布局中的排列方式,比如子视图之间的间距、子视图的对齐方式等。此外,流式布局还可以通过设置权重属性,实现子视图的均匀分布或者按比例分布。 流式布局在一些场景下非常有用,比如在标签云、瀑布流展示等需要动态调整子视图排列的情况下。相比于其他布局方式,流式布局可以更好地利用屏幕空间,提高用户体验。 总之,Android流式布局是一种动态适应屏幕宽度的布局方式,可以方便地排列多个子视图,并提供了一些属性来控制子视图的排列方式和样式。它的使用简单灵活,适用于多种场景,可以有效地提高用户界面的可用性和美观性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值