Android FlowLayout流式布局实现详解

本文实例为大家分享了Android FlowLayout流式布局的具体代码,供大家参考,具体内容如下

最近使用APP的时候经常看到有

这种流式布局 ,今天我就跟大家一起来动手撸一个这种自定义控件.

首先说一下自定义控件的流程:

自定义控件一般要么继承View要么继承ViewGroup

View的自定义流程:

继承一个View-->重写onMeasure方法-->重写onDraw方法-->定义自定义属性-->处理手势操作

ViewGroup的自定义流程:

继承一个ViewGroup-->重写onMeasure方法-->重写onLayout-->重写onDraw方法->定义自定义属性-->处理手势操作

我们可以看到自定义View和自定义ViewGroup略微有些不同,自定义ViewGroup多了个onlayout方法,那么这些方法都有什么作用呢?这里由于篇幅的问题不做过多的描述,简单的说

onMeasure:用来计算,计算自身显示在页面上的大小

onLayout:用来计算子View摆放的位置,因为View已经是最小单元了,所以没有字View,所以没有onLayout方法

onDraw:用来绘制你想展示的东西

定义自定义属性就是暴露一些属性给外部调用

好了,了解了自定义View的基本自定义流程,我们可以知道我们应该需要自定义一个ViewGroup就可以满足该需求.

首先自定义一个View命名为FlowLayout继承ViewGroup

public class FlowLayout extends ViewGroup {
 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);
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int count = getChildCount();
 for (int i = 0; i < count; i++) {
 getChildAt(i).layout(l,t,r,b);
 }
 }
}

可以看到onLayout是必须重写的,不然系统不知道你这个ViewGroup的子View摆放的位置.

然后XML中引用

<test.hxy.com.testflowlayout.FlowLayout 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:id="@+id/mFlowLayout"
 android:layout_margin="10dp"
 android:layout_width="match_parent"
 android:layout_height="match_parent" />

Activity中设置数据

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 FlowLayout mFlowLayout = (FlowLayout) findViewById(R.id.mFlowLayout);
 List<String> list = new ArrayList<>();
 list.add("java");
 list.add("javaEE");
 list.add("javaME");
 list.add("c");
 list.add("php");
 list.add("ios");
 list.add("c++");
 list.add("c#");
 list.add("Android");
 for (int i = 0; i < list.size(); i++) {
 View inflate = LayoutInflater.from(this).inflate(R.layout.item_personal_flow_labels, null);
 TextView label = (TextView) inflate.findViewById(R.id.tv_label_name);
 label.setText(list.get(i));
 mFlowLayout.addView(inflate);
 }
 }

运行一下:

咦!!!这时候发现我们添加的子View竟然没添加进去?这是为什么呢?

这时候就不得不说一下onMeasure方法了,我们重写一下onMeasure然后在看一下:

@Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
 int totalHeight = MeasureSpec.getSize(heightMeasureSpec);

 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingRight() - getPaddingLeft();
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();

 int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
 final int count = getChildCount();
 for (int i = 0; i < count; i++) {
 final View child = getChildAt(i);
 int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth, modeWidth == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeWidth);
 int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight, modeHeight == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeHeight);
 // 测量child
 child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 }
 setMeasuredDimension(totalWidth, resolveSize(totalHeight, heightMeasureSpec));
 }

在运行一下:

我们可以看到确实是有View显示出来了,可是为什么只有一个呢?

其实这里显示的不是只有一个,而是所有的子View都盖在一起了,所以看起来就像只有一个View,这是因为我们的onLayout里面getChildAt(i).layout(l,t,r,b);所有的子View摆放的位置都是一样的,所以这边要注意一下,自定义ViewGroup的时候一般onLayout和onMeasure都必须重写,因为这两个方法一个是计算子View的大小,一个是计算子View摆放的位置,缺少一个子View都会显示不出来.

接下来我们在改写一下onLayout方法让子View都显示出来

@Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 int count = getChildCount();
 for (int i = 0; i < count; i++) {
 getChildAt(i).layout(l,t,r,b);
 l+=getChildAt(i).getMeasuredWidth();
 }
 }

这样子View就不会重叠在一起了,可是又发现一个问题,就是子View都在排在同一行了,我们怎么才能让子View计算排满一行就自动换行呢?

接下来我们定义一个行的类Line来保存一行的子View:

class Line{
 int mWidth = 0;// 该行中所有的子View累加的宽度
 int mHeight = 0;// 该行中所有的子View中高度的那个子View的高度
 List<View> views = new ArrayList<View>();

 public void addView(View view) {// 往该行中添加一个
 views.add(view);
 mWidth += view.getMeasuredWidth();
 int childHeight = view.getMeasuredHeight();
 mHeight = mHeight < childHeight ? childHeight : mHeight;//高度等于一行中最高的View
 }
 //摆放行中子View的位置
 public void Layout(int l, int t){

 }

 }

这样我们就可以让FlowLayout专门对Line进行摆放,然后Line专门对本行的View进行摆放

接下来针对Line我们重新写一下onMeasure和onLayout方法

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 int totalWidth = MeasureSpec.getSize(widthMeasureSpec);
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec) - getPaddingRight() - getPaddingLeft();
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec) - getPaddingTop() - getPaddingBottom();
 restoreLine();// 还原数据,以便重新记录
 int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec);
 final int count = getChildCount();
 for (int i = 0; i < count; i++) {
 final View child = getChildAt(i);
 if (child.getVisibility() == View.GONE) {
 break;
 }
 int childWidthMeasureSpec = MeasureSpec.makeMeasureSpec(sizeWidth, modeWidth == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeWidth);
 int childHeightMeasureSpec = MeasureSpec.makeMeasureSpec(sizeHeight, modeHeight == MeasureSpec.EXACTLY ? MeasureSpec.AT_MOST : modeHeight);
 // 测量child
 child.measure(childWidthMeasureSpec, childHeightMeasureSpec);
 if (mLine == null) {
 mLine = new Line();
 }
 int measuredWidth = child.getMeasuredWidth();
 mUsedWidth += measuredWidth;// 增加使用的宽度
 if (mUsedWidth < sizeWidth) { //当本行的使用宽度小于行总宽度的时候直接加进line里面
 mLine.addView(child);
 mUsedWidth += mHorizontalSpacing;// 加上间隔
 if (mUsedWidth >= sizeWidth){
 if (!newLine()){
 break;
 }
 }
 }else {// 使用宽度大于总宽度。需要换行
 if (mLine.getViewCount() == 0){//如果这行一个View也没有超过也得加进去,保证一行最少有一个View
 mLine.addView(child);
 if (!newLine()) {// 换行
 break;
 }
 }else {
 if (!newLine()) {// 换行
 break;
 }
 mLine.addView(child);
 mUsedWidth += measuredWidth + mHorizontalSpacing;
 }
 }
 }
 if (mLine !=null && mLine.getViewCount() > 0 && !mLines.contains(mLine)){
 mLines.add(mLine);
 }
 int totalHeight = 0;
 final int linesCount = mLines.size();
 for (int i = 0; i < linesCount; i++) {// 加上所有行的高度
 totalHeight += mLines.get(i).mHeight;
 }
 totalHeight += mVerticalSpacing * (linesCount - 1);// 加上所有间隔的高度
 totalHeight += getPaddingTop() + getPaddingBottom();// 加上padding
 // 设置布局的宽高,宽度直接采用父view传递过来的最大宽度,而不用考虑子view是否填满宽度,因为该布局的特性就是填满一行后,再换行
 // 高度根据设置的模式来决定采用所有子View的高度之和还是采用父view传递过来的高度
 setMeasuredDimension(totalWidth, resolveSize(totalHeight, heightMeasureSpec));
 }

可能有点长,不过注释都写得比较清楚了,简单的说就是遍历计算子View的宽高,动态加入行中,如果View的宽大于剩余的行宽就在取一行放下,接下来我们在重写一些onLayout:

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
 if (!mNeedLayout && changed){
 mNeedLayout = false;
 int left = getPaddingLeft();//获取最初的左上点
 int top = getPaddingTop();
 int count = mLines.size();
 for (int i = 0; i < count; i++) {
 Line line = mLines.get(i);
 line.LayoutView(left,top);//摆放每一行中子View的位置
 top +=line.mHeight+ mVerticalSpacing;//为下一行的top赋值
 }
 }
 }

由于我们把子View的摆放都放在Line中了,所以onLayout比较简单,接下来我们看一下Line的LayoutView方法:

public void LayoutView(int l, int t) {
 int left = l;
 int top = t;
 int count = getViewCount();
 int layoutWidth = getMeasuredWidth() - getPaddingLeft() - getPaddingRight();//行的总宽度
 //剩余的宽度,是除了View和间隙的剩余空间
 int surplusWidth = layoutWidth - mWidth - mHorizontalSpacing * (count - 1);
 if (surplusWidth >= 0) {
 for (int i = 0; i < count; i++) {
 final View view = views.get(i);
 int childWidth = view.getMeasuredWidth();
 int childHeight = view.getMeasuredHeight();
 //计算出每个View的顶点,是由最高的View和该View高度的差值除以2
 int topOffset = (int) ((mHeight - childHeight) / 2.0 + 0.5);
 if (topOffset < 0) {
 topOffset = 0;
 }
 view.layout(left,top+topOffset,left+childWidth,top + topOffset + childHeight);
 left += childWidth + mVerticalSpacing;//为下一个View的left赋值
 }
 }
 }

也是比较简单,其实就是根据宽度动态计算而已,我们看看效果吧

可以了吧,看起来是大功告成了,可是我们发现左边和右边的间距好像不相等,能不能让子View居中显示呢?答案当然是可以的,接下来我们提供个方法,让外部可以设置里面子View的对齐方式:

public interface AlienState {
 int RIGHT = 0;
 int LEFT = 1;
 int CENTER = 2;

 @IntDef(value = {RIGHT, LEFT, CENTER})
 @interface Val {}
 }
 public void setAlignByCenter(@AlienState.Val int isAlignByCenter) {
 this.isAlignByCenter = isAlignByCenter;
 requestLayoutInner();
 }

 private void requestLayoutInner() {
 new Handler(Looper.getMainLooper()).post(new Runnable() {
 @Override
 public void run() {
 requestLayout();
 }
 });
 }

提供一个setAlignByCenter的方法,分别有左对齐右对齐和居中对齐,然后我们在Line的layoutView中改写一下:

//布局View
 if (i == 0) {
 switch (isAlignByCenter) {
 case AlienState.CENTER:
 left += surplusWidth / 2;
 break;
 case AlienState.RIGHT:
 left += surplusWidth;
 break;
 default:
 left = 0;
 break;
 }
}

在layoutView中把剩余的宽度按照对齐的类型平分一下就得到我们要的效果了

好了,这样就达到我们要的效果了.可是在回头来看一下我们MainActivity里面的写法会不会感觉很撮呢?对于习惯了ListView,RecyclerView的Adapter写法的我们有没有办法改一下,像写adapter一样来写布局呢?聪明的程序猿是没有什么办不到的,接下来我们就来改写一下:

public void setAdapter(List<?> list, int res, ItemView mItemView) {
 if (list == null) {
 return;
 }
 removeAllViews();
 int layoutPadding = dipToPx(getContext(), 8);
 setHorizontalSpacing(layoutPadding);
 setVerticalSpacing(layoutPadding);
 int size = list.size();
 for (int i = 0; i < size; i++) {
 Object item = list.get(i);
 View inflate = LayoutInflater.from(getContext()).inflate(res, null);
 mItemView.getCover(item, new ViewHolder(inflate), inflate, i);
 addView(inflate);
 }
 }

 public abstract static class ItemView<T> {
 abstract void getCover(T item, ViewHolder holder, View inflate, int position);
 }

 class ViewHolder {
 View mConvertView;

 public ViewHolder(View mConvertView) {
 this.mConvertView = mConvertView;
 mViews = new SparseArray<>();
 }

 public <T extends View> T getView(int viewId) {
 View view = mViews.get(viewId);
 if (view == null) {
 view = mConvertView.findViewById(viewId);
 mViews.put(viewId, view);
 }
 try {
 return (T) view;
 } catch (ClassCastException e) {
 e.printStackTrace();
 }
 return null;
 }

 public void setText(int viewId, String text) {
 TextView view = getView(viewId);
 view.setText(text);
 }
 }

然后我们在MainActivity中在使用一下:

protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_main);
 FlowLayout mFlowLayout = (FlowLayout) findViewById(R.id.mFlowLayout);
 List<String> list = new ArrayList<>();
 list.add("java");
 list.add("javaEE");
 list.add("javaME");
 list.add("c");
 list.add("php");
 list.add("ios");
 list.add("c++");
 list.add("c#");
 list.add("Android");
 mFlowLayout.setAlignByCenter(FlowLayout.AlienState.CENTER);
 mFlowLayout.setAdapter(list, R.layout.item, new FlowLayout.ItemView<String>() {
 @Override
 void getCover(String item, FlowLayout.ViewHolder holder, View inflate, int position) {
 holder.setText(R.id.tv_label_name,item);
 }
 });
 }

怎么样,是不是就根绝在跟使用adapter一样了呢.

Demo已放到github,欢迎大家指点

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

(0)

相关推荐

  • Android课程表界面布局实现代码

    前言 Android课程表布局实现 我是个菜鸟,文章供参考 示例 图1: 图2: 布局分析 该界面主要可分为三部分: 1.显示年份及周数部分 2.显示周一到周日 3.课程显示部分 实现步骤 1.首先整个页面放在一个LinearLayout布局下面,分为上面和下面两个部分,下面一个是显示课程表的详细信息 2.将控件一个TextView用来显示年份,一个View用来当作竖线,再用一个LinearLayout用来显示选择周数 3.使用ScrollView来显示课程表的详细信息 话不多说直接给代码!!!

  • 自己实现Android View布局流程

    相关阅读:尝试自己实现Android View Touch事件分发流程 Android View的布局以ViewRootImpl为起点,开启整个View树的布局过程,而布局过程本身分为测量(measure)和布局(layout)两个部分,以View树本身的层次结构递归布局,确定View在界面中的位置. 下面尝试通过最少的代码,自己实现这套机制,注意下面类均为自定义类,未使用Android 源码中的同名类. MeasureSpec 首先定义MeasureSpec,它是描述父布局对子布局约束的类,在

  • Android自定义流式布局实现淘宝搜索记录

    本文实例为大家分享了Android实现淘宝搜索记录的具体代码,供大家参考,具体内容如下 效果如下: 废话不多说 实现代码: attrs.xml <declare-styleable name="TagFlowLayout"> <!--最大选择数量--> <attr name="max_select" format="integer"/> <!--最大可显示行数--> <attr name=&q

  • Android实现单行标签流式布局

    近期产品提了有关流式布局的新需求,要求显示字数不定的标签,如果一行显示不完,就只显示一行的内容,而且还在一两个页面采取了多种样式,无语了 自己归类了一下,需求有以下几个区别 1:可选择添加标签与否 2:是否有具体数量限制(比如最多显示3个) 3:是否要靠右对齐 有需求,先找一波现有的工具,看是不是可以直接用 参考Android流式布局实现热门标签效果 FlowLayout原样式: 这个和我们的需求已经比较符合了,但是他并不能控制只显示单行内容 如果要实现这样的布局,官方也提供了Flexbox和F

  • android实现上下左右滑动界面布局

    本文实例为大家分享了android实现滑动界面布局的具体代码,供大家参考,具体内容如下 1.我使用的是ScrollView嵌套HorizontalScrollView让ScrollView负责上下滑动HorizontalScrollView负责左右滑动 2.以下代码提供了思路和完成手段,请根据具体业务去进行修改,我试过使用recyclerview进行自定义,发现一旦有了复杂业务之后会掉帧卡顿所以使用了这种方法 XML布局 <?xml version="1.0" encoding=

  • 详解Android布局加载流程源码

    一.首先看布局层次 看这么几张图 我们会发现DecorView里面包裹的内容可能会随着不同的情况而变化,但是在Decor之前的层次关系都是固定的.即Activity包裹PhoneWindow,PhoneWindow包裹DecorView.接下来我们首先看一下三者分别是如何创建的. 二.Activity是如何创建的 首先看到入口类ActivityThread的performLaunchActivity方法: private Activity performLaunchActivity(Activi

  • Android自定义ViewGroup实现流式布局

    本文实例为大家分享了Android自定义ViewGroup实现流式布局的具体代码,供大家参考,具体内容如下 1.概述 本篇给大家带来一个实例,FlowLayout,什么是FlowLayout,我们常在App 的搜索界面看到热门搜索词,就是FlowLayout,我们要实现的就是图中的效果,就是根据容器的宽,往容器里面添加元素,如果剩余的控件不足时候,自行添加到下一行,FlowLayout也叫流式布局,在开发中还是挺常用的. 2.对所有的子View进行测量 onMeasure方法的调用次数是不确定的

  • Android自定义流式布局/自动换行布局实例

    最近,Google开源了一个流式排版库"FlexboxLayout",功能强大,支持多种排版方式,如各种方向的自动换行等,具体资料各位可搜索学习^_^. 由于我的项目中,只需要从左到右S型的自动换行,需求效果图如下: 使用FlexboxLayout这个框架未免显得有些臃肿,所以自己动手写了一个流式ViewGroup. 安卓中自定义ViewGroup的步骤是: 1. 新建一个类,继承ViewGroup 2. 重写构造方法 3. 重写onMeasure.onLayout方法 onMeasu

  • Android自定义流式布局的实现示例

    在日常的app使用中,我们会在android 的app中看见 热门标签等自动换行的流式布局,今天,我们就来看看如何自定义一个类似热门标签那样的流式布局.下面我们就来详细介绍流式布局的应用特点以及用的的技术点. 1.流式布局的特点以及应用场景 特点:当上面一行的空间不够容纳新的TextView时候,才开辟下一行的空间. 原理图: 场景:主要用于关键词搜索或者热门标签等场景 2.自定义ViewGroup (1)onMeasure:测量子view的宽高,设置自己的宽和高 (2)onLayout:设置子

  • Android FlowLayout流式布局实现详解

    本文实例为大家分享了Android FlowLayout流式布局的具体代码,供大家参考,具体内容如下 最近使用APP的时候经常看到有 这种流式布局 ,今天我就跟大家一起来动手撸一个这种自定义控件. 首先说一下自定义控件的流程: 自定义控件一般要么继承View要么继承ViewGroup View的自定义流程: 继承一个View-->重写onMeasure方法-->重写onDraw方法-->定义自定义属性-->处理手势操作 ViewGroup的自定义流程: 继承一个ViewGroup-

  • flutter中使用流式布局示例详解

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow layout,也就是流式布局. 同样的,在flutter中也有流式布局,这个流式布局的名字叫做Flow.事实上,在flutter中,Flow通常是和FlowDelegate一起使用的,FlowDelegate用来设置Flow子组件的大小和位置,通过使用FlowDelegate.paintChildre可

  • Android AS创建自定义布局案例详解

    先创建一个title.xml <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" andr

  • Android自定义ViewGroup之实现FlowLayout流式布局

    整理总结自鸿洋的博客:http://blog.csdn.net/lmj623565791/article/details/38352503/  一.FlowLayout介绍  所谓FlowLayout,就是控件根据ViewGroup的宽,自动的往右添加,如果当前行剩余空间不足,则自动添加到下一行.有点像所有的控件都往左飘的感觉,第一行满了,往第二行飘~所以也叫流式布局.Android并没有提供流式布局,但是某些场合中,流式布局还是非常适合使用的,比如关键字标签,搜索热词列表等,比如下图: git

  • FlowLayout流式布局实现搜索清空历史记录

    本文实例为大家分享了FlowLayout实现搜索清空历史记录的具体代码,供大家参考,具体内容如下 效果图:点击搜索框将搜索的历史在流式布局中展示出来,清空历史记录就会将历史清空,每次搜索后都存入sp中,每次进入页面都先判断sp里是否有值并展示 首先需要导入一个module,下载地址 下载完这个工程后,需要将里面的flowlayout-lib导入到工程中, 导入工程的步骤:File - New - Import Module 选中这个flowlayout-lib 导入完成后,在项目的build.g

  • JavaSwing FlowLayout 流式布局的实现

    1. 概述 官方JavaDocsApi: java.awt.FlowLayout FlowLayout,流式布局管理器.按水平方向依次排列放置组件,排满一行,换下一行继续排列.排列方向(左到右 或 右到左)取决于容器的componentOrientation属性(该属性属于Component),它可能的值如下: ComponentOrientation.LEFT_TO_RIGHT(默认) ComponentOrientation.RIGHT_TO_LEFT 同一行(水平方向)的组件的对齐方式由

  • Android流式布局FlowLayout详解

    现在商城类的APP几乎都要用到流式布局来实现选择属性功能,在我的demo中是通过FlowLayout工具类实现流式布局 使用起来非常简单,十几行代码就可以实现: 在我们的项目中大部分都是单选效果,为了防止用到多选,demo中也实现了多选: FlowLayout大家不用研究怎么实现的,只要会使用就好: 就好比谷歌提供的ListView条目点击事件一样,只要会用就好,没必要研究个所以然:大家在用的时候直接从demo中复制到项目中即可: 大家可以将FlowLayout理解为一个线性布局:将准备好的一个

随机推荐