Android流式布局实现

最新推荐文章于 2024-03-17 19:57:00 发布

LaughingHe

最新推荐文章于 2024-03-17 19:57:00 发布

阅读量1.9k

点赞数 3

分类专栏： Android 文章标签： android android studio

本文链接：https://blog.csdn.net/qq_36050563/article/details/109206247

版权

Android 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Android流式布局实现

通过辛勤工作获得财富才是人生的大快事。

如何通过代码实现类似于一个一个的textview控件放入父控件中，如果一行放不下自动换行呢？今天我们就来实现这个效果，本文的目的旨在了解其原理，如果需要应用到时间项目中还需完善，废话不多说上图！

在这里插入图片描述

1.创建一个类继承自ViewGroup

这里重写下列几个方法，FlowLayout(Context context, AttributeSet attrs)用于再布局文件中使用；LayoutParams generateDefaultLayoutParams()、LayoutParams generateLayoutParams(LayoutParams p)、LayoutParams generateLayoutParams(AttributeSet attrs)用于获取布局文件中设置的margin；generateLayoutParams(AttributeSet attrs)用于获取测量模式和父布局的大小；onLayout用于摆列子view

public class FlowLayout extends ViewGroup {
    private static final String TAG = "FlowLayout";

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

    @Override
    protected LayoutParams generateDefaultLayoutParams() {
        return new MarginLayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.MATCH_PARENT);
    }

    @Override
    protected LayoutParams generateLayoutParams(LayoutParams p) {
        return new MarginLayoutParams(p);
    }

    @Override
    public LayoutParams generateLayoutParams(AttributeSet attrs) {
        return new MarginLayoutParams(getContext(),attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
       
    }
}

2.创建布局文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
   <com.ruibetter.customview.view.FlowLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       android:background="#ff00ff"
       >
      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="Welcome"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="IT工程师"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="我真是可以的"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="你觉得呢"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="不要只知道挣钱"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="努力ing"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="I thick i can"
          android:textColor="#43BBE7" />
      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="不要只知道"
          android:textColor="#43BBE7" />

      <TextView
          style="@style/text_flag_01"
          android:background="@drawable/flag_03"
          android:text="努力ing"
          android:textColor="#43BBE7" />

   </com.ruibetter.customview.view.FlowLayout>
</android.support.constraint.ConstraintLayout>

其中抽取公共属性到style和drawable里面的一个shape

    <style name="text_flag_01">
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_margin">4dp</item>
    </style>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#FFFFFF" >
    </solid>
    <corners android:radius="40dp"/>
    <padding
        android:bottom="2dp"
        android:left="10dp"
        android:right="10dp"
        android:top="2dp" />
</shape>

3.测量布局

@Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获取测量模式，这里有三种模式
        //wrap_content-> MeasureSpec.AT_MOST
		//match_parent -> MeasureSpec.EXACTLY
		//具体值 -> MeasureSpec.EXACTLY
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        //获取布局控件的宽高，这里我们设置的宽位match_parent所以宽位手机屏幕的宽，高我们设置的是wrap_content这里测量出来的        
         //是手机屏幕的高，当然我们不会用这里的高，我们要实际子view个数算出高。
        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);
		
		//定义每一行的宽，循环子view累加
        int lineWidth = 0;
        //定义每一行的高度即子view的高度
        int lineHeight = 0;
        //定义父容器的宽度，其实这里感觉没必要设置
        int width = 0;
        //这里下面循环子view出来的总共布局的高度
        int height = 0;
        //获取所有子view并循环
        int childCount = getChildCount();
        for (int i = 0; i < childCount; i++) {
        	//获取view
            View childAt = getChildAt(i);
            //测量子view这里一定要先测量，再调用childAt.getMeasuredWidth()和childAt.getMeasuredHeight()
            //还有在onlayout结束后才可以调用getWidth()和getHeight()
            measureChild(childAt,widthMeasureSpec,heightMeasureSpec);
            //这里就取到了重写marginLayoutParams的那几个方法获取布局文件中的margin
            MarginLayoutParams lp = null;
            if(childAt.getLayoutParams() instanceof MarginLayoutParams){
                lp = (MarginLayoutParams) childAt.getLayoutParams();
            }else{
                lp  = new MarginLayoutParams(0,0);
            }
            //获取子view的宽+左右外边距
            int childWidth = childAt.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;
            //获取子view的高+上下外边距
            int childHeight = childAt.getMeasuredHeight()+lp.topMargin+lp.bottomMargin;
            //一列中累加的宽度也就是linewidth+这次子view的宽度如果超过了， int measureWidth = 		   	                         //MeasureSpec.getSize(widthMeasureSpec);就让其换行。
            if(lineWidth+childWidth>measureWidth){
                //width就等于一列累加的宽度，这里如果布局文件中设置的是match_parent这里其实没啥用
                width = lineWidth;
				//行高累加
                height+=lineHeight;
				//将换行的的这个view的宽高，也就是下一行的第一个view赋值宽和高
                lineWidth = childWidth;
                lineHeight = childHeight;
            }else{
            	//如果已将累加的列宽+本次的子view的宽不大于measureWidth那就宽度lineWidth+=childWidth;
            	//高度的话取行高和本次子view中偏高的，由于我们布局文件中设置的子view高度都是一样的所有这一句也没什么用。
                lineHeight = Math.max(lineHeight,childHeight);
                lineWidth+=childWidth;
            }
            //最后一个元素，将行高+本次子view的高度。这个地方开始我也有点迷糊，最后还是断点一步步执行才明白过来，如果这里不判断是否是最后一行的话，循环完成后是少加了一次行高的，最后一行的view永远显示不出来。
            if (i == childCount -1){
                height += lineHeight;
                width = Math.max(width,lineWidth);
            }

        }
		//重新设置本父容器测量过后的结果，三元运算判断是哪种模式，用width还是measureWidth
        setMeasuredDimension((widthMode==MeasureSpec.EXACTLY)?measureWidth:width,(heightMode==MeasureSpec.EXACTLY)?measureHeight:height);
    }

4.子view排列

 @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
    	//还是先获取所有的子view
        int count = getChildCount();
        //定义列宽
        int lineWidth = 0;
        //定义行高
        int lineHeight = 0;
        //定义上、左边距
        int top = 0,left=0;
        for (int i = 0; i < count; i++) {
            View childAt = getChildAt(i);
            MarginLayoutParams layoutParams = (MarginLayoutParams) childAt.getLayoutParams();
            //因为onMeasure(int widthMeasureSpec, int heightMeasureSpec)方法已经执行完，所有这里我们可以直接调用
            //子view的宽+左右边距
            int childWidth = childAt.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
            int childHeight = childAt.getMeasuredHeight()+layoutParams.topMargin+layoutParams.bottomMargin;
            //这里的if判断和onMeasure中是一样的逻辑，不再赘述
            if(childWidth+lineWidth>getMeasuredWidth()){
            	//累加top
                top+=lineHeight;
                //因为换行了left置为0
                left = 0;
                lineHeight = childHeight;
                lineWidth = childWidth;
            }else{
                lineHeight = Math.max(lineHeight,childHeight);
                //行宽累加
                lineWidth+=childWidth;
            }
            //计算子view的左、上、右、下的值
            int lc = left+layoutParams.leftMargin;
            int tc = top+layoutParams.topMargin;
            //右边就等于自己的宽+左边的边距即lc
            int rc = lc+childAt.getMeasuredWidth();
            //底部逻辑同上
            int bc = tc+childAt.getMeasuredHeight();
            //布局
            childAt.layout(lc,tc,rc,bc);
            //这一句很重要，因为一行中有多个view，所有left是累加的关系。
            left+=childWidth;
        }
    }

到这里流式布局就讲完了，文中就是所有的代码，可以粘贴下来跑一跑。

LaughingHe

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Android流式布局实现

Android流式布局实现通过辛勤工作获得财富才是人生的大快事。如何通过代码实现类似于一个一个的textview控件放入父控件中，如果一行放不下自动换行呢？今天我们就来实现这个效果，本文的目的旨在了解其原理，如果需要应用到时间项目中还需完善，废话不多说上图！1.创建一个类集成子ViewGroup这里重写下列几个方法，FlowLayout(Context context, AttributeSet attrs)用于再布局文件中使用；LayoutParams generateDefaultLayout
复制链接

扫一扫