Android 简单实现一个流式布局的示例

 更新时间:2018年02月06日 09:53:39   作者:萌动小彩笔  
本篇文章主要介绍了Android 简单实现一个流式布局的示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本篇文章主要介绍了Android 简单实现一个流式布局的示例,分享给大家,具体如下:

流式布局应该是我们很常见的一种布局了,在很多场景下都会遇到它,例如:标签之类的功能等。用轮子不如造轮子来的爽,这里自己简单的实现下流式布局:

  1. onMeasure
  2. onLayout

通过以上两个方法我们就可以完成对流式布局的基本操作:

onMeasure

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    // 获得它的父容器为它设置的测量模式和大小
    int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
    int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
    int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
    int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

    // 如果是warp_content情况下,记录宽和高
    int width = 0;
    int height = 0;

    //记录每一行的宽度,width不断取最大宽度
    int lineWidth = 0;
    //记录每一行的宽度,不断累加每行最大高度获取height
    int lineHeight = 0;

    //获取子View的数量
    int childCount = getChildCount();
    //遍历每个子元素
    for (int i = 0; i < childCount; i++) {
      //获取每一个子View
      View childView = getChildAt(i);
      //测量每一个子View的宽和高
      measureChild(childView,widthMeasureSpec,heightMeasureSpec);
      //得到子View的lp
      LayoutParam lp = (LayoutParam) childView.getLayoutParams();
      //当前子View实际占据的宽度
      int childWidth = childView.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
      //当前子View实际占据的高度
      int childHeight = childView.getMeasuredHeight() + lp.bottomMargin + lp.topMargin;

      //如果加入当前childView,超出最大宽度,则得到目前最大宽度给width,类加height 然后开启新行
      if (lineWidth + childWidth > sizeWidth) {
        // 取最大的宽度
        width = Math.max(lineWidth, childWidth);
        //重新开启新行,重新计算
        lineWidth = childWidth;
        //叠加当前高度
        height += childHeight;
        //记录下一行高度
        lineHeight = childHeight;
      }else {
        // 累加值lineWidth,lineHeight取最大高度
        lineWidth += childWidth;
        lineHeight = Math.max(lineHeight,childHeight);
      }
      // 如果是最后一个,则将当前记录的最大宽度和当前lineWidth做比较
      if (i == childCount - 1) {
        width = Math.max(width,lineWidth);
        height += lineHeight;
      }
    }
    setMeasuredDimension(modeWidth == MeasureSpec.EXACTLY?sizeWidth:width,modeHeight == MeasureSpec.EXACTLY?sizeHeight:height);
  }

在onMeasure方法中负责设置子控件的测量模式和大小 根据所有子控件设置自己的宽和高,一旦宽度超出最大宽度便进行换行处理。高度不断累加从而获取最终高度。

onLayout

  //存储所有的View,按行记录
  private List<List<View>> mAllViews = new ArrayList<>();
  //记录每一行的最大高度
  private List<Integer> mLineHeight = new ArrayList<>();
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    mAllViews.clear();
    mLineHeight.clear();

    int lineWidth = 0;
    int lineHeight = 0;

    int width = getWidth();

    int childCount = getChildCount();
    // 存储每一行所有的childView
    List<View> lineViews = new ArrayList<>();
    for (int i = 0; i < childCount; i++) {
      View childView = getChildAt(i);
      LayoutParam lp = (LayoutParam) childView.getLayoutParams();
      int childWidth = childView.getMeasuredWidth() + lp.rightMargin + lp.leftMargin;
      int childHeight = childView.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;

      if (lineWidth + childWidth > width) {
        // 记录这一行所有的View以及最大高度
        mLineHeight.add(lineHeight);
        // 将当前行的childView保存,然后开启新的ArrayList保存下一行的childView
        mAllViews.add(lineViews);
        lineWidth = 0;
        lineViews = new ArrayList<>();
      }
      //如果不需要换行,则累加
      lineWidth += childWidth;
      lineHeight = Math.max(lineHeight,childHeight);
      lineViews.add(childView);
    }
    // 记录最后一行
    mAllViews.add(lineViews);
    mLineHeight.add(lineHeight);

    int left = 0;
    int top = 0;

    // 得到总行数
    int size = mAllViews.size();

    for (int i = 0; i < size; i++) {
      // 每一行的所有的views
      lineViews = mAllViews.get(i);
      // 当前行的最大高度
      lineHeight = mLineHeight.get(i);

      for (View view : lineViews) {
        LayoutParam lp = (LayoutParam) view.getLayoutParams();
        //计算childView的left,top,right,bottom
        int lc = left + lp.leftMargin;
        int tc = top + lp.topMargin;
        int rc = lc + view.getMeasuredWidth();
        int bc = tc + view.getMeasuredHeight();
        view.layout(lc,tc,rc,bc);
        left += view.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;
      }
      left = 0;
      top += lineHeight;
    }
  }

通过onLayout方法给子View布局,前提,我们必须得知道每个子View的宽度和高度。所以我们先要在onMeasure的时候,测量一下每个子View的具体大小。

测试

public class MainActivity extends AppCompatActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    FlowLayout flowLayout = ((FlowLayout) findViewById(R.id.flowLayout));
    FlowLayout.LayoutParam params = new    FlowLayout.LayoutParam(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    params.setMargins(10,10,10,10);
    for (int i = 0; i < 10; i++) {
      TextView textView = new TextView(this);
      textView.setPadding(i * 10,10,i * 10,10);
      textView.setBackgroundColor(Color.BLUE);
      textView.setText("哈哈哈哈");
      textView.setTextColor(Color.WHITE);
      textView.setLayoutParams(params);
      flowLayout.addView(textView);
    }
  }
}

这里我们要注意下FlowLayout.LayoutParam params = new FlowLayout.LayoutParam(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);这个方法,有的小伙伴在写的过程中可能点不出来这个方法,那是因为这个方法是需要我们自己写一个静态内部类来实现。

@Override
  protected LayoutParams generateDefaultLayoutParams() {
    return new LayoutParam(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT);
  }

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

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

  public static class LayoutParam extends MarginLayoutParams{

    public LayoutParam(Context c, AttributeSet attrs) {
      super(c, attrs);
    }

    public LayoutParam(@Px int width, @Px int height) {
      super(width, height);
    }

    public LayoutParam(MarginLayoutParams source) {
      super(source);
    }

    public LayoutParam(LayoutParams source) {
      super(source);
    }
  }

好了,这样一个简单的流式布局就结束了,有时候自己亲自敲一遍将它实现,才发现会学到很多。这里测试的代码是循环加入的View,大家也可以尝试的写个类似适配器的方式去实现。贴上源码供参考。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 提示信息控件AlertDialog对话框详解

    提示信息控件AlertDialog对话框详解

    这篇文章主要为大家介绍了提示信息控件AlertDialog对话框的使用详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • Android第三方文件选择器aFileChooser使用方法详解

    Android第三方文件选择器aFileChooser使用方法详解

    这篇文章主要介绍了Android第三方文件选择器aFileChooser的使用方法详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • Android Studio 3.0中mipmap-anydpi-v26是什么东东

    Android Studio 3.0中mipmap-anydpi-v26是什么东东

    在Android Studio 3.0中一旦我们创建了一个项目,一个名为mipmap-anydpi-v26自动创建的文件夹在res文件夹下。它究竟能干什么?为什么我们需要这个?我们在开发时该如何利用它,下面通过本文给大家介绍下
    2017-12-12
  • Android SeekBar实现禁止滑动

    Android SeekBar实现禁止滑动

    这篇文章主要为大家详细介绍了Android SeekBar实现禁止滑动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Android Activity View加载与绘制流程深入刨析源码

    Android Activity View加载与绘制流程深入刨析源码

    这篇文章主要介绍了Android Activity View的加载与绘制流程源码分析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • Android中加入名片扫描功能实例代码

    Android中加入名片扫描功能实例代码

    这篇文章主要介绍了Android中加入名片扫描功能实例代码的相关资料,需要的朋友可以参考下
    2016-03-03
  • Flutter使用SingleTickerProviderStateMixin报错解决

    Flutter使用SingleTickerProviderStateMixin报错解决

    这篇文章主要为大家介绍了Flutter使用SingleTickerProviderStateMixin报错解决示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • Android编程中调用Camera时预览画面有旋转问题的解决方法

    Android编程中调用Camera时预览画面有旋转问题的解决方法

    这篇文章主要介绍了Android编程中调用Camera时预览画面有旋转问题的解决方法,涉及Android针对Camera调用摄像头源码部分的相关修改技巧,需要的朋友可以参考下
    2015-11-11
  • Android RecyclerView缓存复用原理解析

    Android RecyclerView缓存复用原理解析

    RecyclerView是Android一个更强大的控件,其不仅可以实现和ListView同样的效果,还有优化了ListView中的各种不足。其可以实现数据纵向滚动,也可以实现横向滚动(ListView做不到横向滚动)。接下来讲解RecyclerView的用法
    2022-11-11
  • Android设置PreferenceCategory背景颜色的方法

    Android设置PreferenceCategory背景颜色的方法

    这篇文章主要介绍了Android设置PreferenceCategory背景颜色的方法,涉及Android设置背景色的技巧,需要的朋友可以参考下
    2015-05-05

最新评论