自适应布局FlowLayout

这是我的第一篇文章,想了很久不知道写什么内容,估计目前也没有什么能力写深奥的,那就写写之前写过的自定义view,分享一下,有不正确的地方往指正,大家共同学习。

好了,正文来了,这篇是主要写自适应布局,也就是添加的view从左到右排好,若新一个view在这一行放不下就放在下一行。

自定义view第一步是在attr.xml写属性,不过FlowLayout比较简单没有自定义属性,直接跳到后面的测量,布局等,那么就先重写onMeasure()方法

@Override

    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        int measureWidth = MeasureSpec.getSize(widthMeasureSpec);

        int measureHeight = MeasureSpec.getSize(heightMeasureSpec);

        int widthMode = MeasureSpec.getMode(widthMeasureSpec);

        int heightMode = MeasureSpec.getMode(heightMeasureSpec);

        //每行的的宽度

        int width = getPaddingStart() + getPaddingEnd();

        //自适应的长度

        int height = getPaddingTop() + getPaddingBottom();

        //最大宽度

        int maxWidth = 0;

        //每一行的最大长度

        int maxHeight = 0;

        //遍历子view

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

            View view = getChildAt(i);

            //测量子view

            measureChild(view, widthMeasureSpec, heightMeasureSpec);

            //获取子view的外边距

            MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams();

            //子view的宽,要加上子view的外边距,不然margin属性设置了没效果

            int w = view.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;

            //子view的高

            int h = view.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;

            //判断是否是该行最大长度

            maxHeight = maxHeight > h ? maxHeight : h;

            //判断加入该view后是否超过测量宽度,超过的话就换行

            if (measureWidth < w + width) {

            //判断该view是否超过父容器的最大值,是的话,设该view的宽度为父容器的测量值

                if (w > measureWidth) {

                    w = measureWidth;

                }

                //换行,新一行的宽度重置,最大长度增加

                width = getPaddingStart() + getPaddingEnd();

                height += maxHeight;

            }

            //该行加入子view宽度

            width += w;

            //获取最大宽度,其实最大也就是父容器的测量值

            maxWidth = maxWidth > width ? maxWidth : width;

            //因为是从0开始的,所以最后一个view时需要加上当前这一行的高度

            if (i == getChildCount() - 1) {

                height += maxHeight;

            }

        }

        if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.EXACTLY) {

            setMeasuredDimension(measureWidth, measureHeight);

        } else if (widthMode == MeasureSpec.EXACTLY && heightMode == MeasureSpec.AT_MOST) {

            setMeasuredDimension(measureWidth, height);

        } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.EXACTLY) {

            setMeasuredDimension(maxWidth, measureHeight);

        } else if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST) {

            setMeasuredDimension(maxWidth, height);

        } else {

            setMeasuredDimension(measureWidth, height);

        }

    }

以上就是重写后的onMeasure()方法,看注释应该就懂了,不过有一点需要注意,就是MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams();这段,获取子view的外边距,这就要重写generateLayoutParams()和generateDefaultLayoutParams()这两个方法了

@Override

    protected LayoutParams generateLayoutParams(LayoutParams p) {

        return new MarginLayoutParams(p);

    }

    @Override

    public LayoutParams generateLayoutParams(AttributeSet attrs) {

        return new MarginLayoutParams(getContext(), attrs);

    }

    @Override

    protected LayoutParams generateDefaultLayoutParams() {

        return new MarginLayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);

    }

因为MarginLayoutParams时继承LayoutParams的,而且有外边距属性,所以将LayoutParams转化为MarginLayoutParams就好了,这就可以拿到子view的外边距属性了。

那么测量完之后呢,那就是布局了,布局就时重写onLayout()方法

@Override

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

    //该行的开始宽度,是要加上父容器的内边距

        int width = getPaddingStart();

        //这是总高度

        int height = getPaddingTop();

        //这是目标行的最大高度

        int maxHeight = 0;

        //目标行的最大宽度

        int maxWidth = getMeasuredWidth() - getPaddingStart() - getPaddingEnd();

        //遍历子view

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

            View view = getChildAt(i);

            MarginLayoutParams layoutParams = (MarginLayoutParams) view.getLayoutParams();

            //子view宽度

            int w = view.getMeasuredWidth() + layoutParams.leftMargin + layoutParams.rightMargin;

            //子view高度

            int h = view.getMeasuredHeight() + layoutParams.topMargin + layoutParams.bottomMargin;

            maxHeight = maxHeight > h ? maxHeight : h;

            if (maxWidth < w + width) {

                if (w > maxWidth) {

                    w = maxWidth;

                }

                //换行,重置该行的开始宽度,目标行的高度增加

                width = getPaddingStart();

                height += maxHeight;

                maxHeight = 0;

            }

            width += w;

            //子view的左上角的坐标,width已经加上子view的宽度了,只要减去w就是开始坐标,加上子view的左外边距就可以了

            int viewL = width - w + layoutParams.leftMargin;

            int viewR = width - layoutParams.rightMargin;

            int viewT = height + layoutParams.topMargin;

            int viewB = ((height + h) > getMeasuredHeight() ? getMeasuredHeight() : (h + height)) - layoutParams.bottomMargin;

            view.layout(viewL, viewT, viewR, viewB);

        }

    }

以上就是onLayout()方法,其实跟onMeasure()方法差不多,那么我们来看看效果吧,首先添加到activity的布局里

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        tools:context="com.project.viewtest.activity.FlowActivity">

       

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="add"

            android:id="@+id/flow_add"/>

       

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="back"

            android:id="@+id/flow_back"

            app:layout_constraintLeft_toRightOf="@id/flow_add"/>

       

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:id="@+id/flow_layout"

            app:layout_constraintTop_toBottomOf="@id/flow_add"/>

   

从布局可以看出,有一个添加按钮,就是给FlowLayout添加子view的,那么看一下activity的内容

public class FlowActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_flow);

        final FlowLayout layout = findViewById(R.id.flow_layout);

        //返回按钮

        findViewById(R.id.flow_back).setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                finish();

            }

        });

        //添加按钮

        findViewById(R.id.flow_add).setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                TextView textView = new TextView(FlowActivity.this);

                textView.setText(getText());

                textView.setBackgroundResource(R.drawable.text_bg);

                ViewGroup.MarginLayoutParams layoutParams = new ViewGroup.MarginLayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

                //设置外边距

                layoutParams.setMargins(15, 15, 0, 0);

                textView.setLayoutParams(layoutParams);

                //添加

                layout.addView(textView);

            }

        });

    }

//获取随机字符串

    private String getText() {

        int count = (int) ((Math.random() + Math.random()) * 10);

        StringBuilder builder = new StringBuilder();

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

            builder.append((char) ((int) (Math.random() * 93) + 32));

        }

        Log.i("flowActivity", "getText: " + count + "/" + builder.toString());

        return builder.toString();

    }

}

现在可以看效果了

自适应布局FlowLayout_第1张图片

添加view后的

自适应布局FlowLayout_第2张图片

这样就写好一个自适应FlowLayout了,这是我在启舰大神的博客看到的,不过我没看代码,就是想自己写一个,附上启舰大神的博客:https://blog.csdn.net/harvic880925?t=1 ,可以去看看,对比一下。

有哪里不懂的可以提问,有哪里不对的可以指正,谢谢。

你可能感兴趣的:(自适应布局FlowLayout)