ViewGroup2——自定义实现流式布局

喜欢ヅ旅行 2021-09-22 04:58 289阅读 0赞

Android中的线性布局LinearLayout，只能横向或纵向排列子控件，而且横向排列时不能自动换行。实际上，通过扩展ViewGroup就能够实现控件自动的往右添加，如果当前行剩余空间不足，则自动添加到下一行，也就是所谓的流式布局，上代码

**自定义CustomViewGroup.java如下**

public class CustomViewGroup extends ViewGroup \{

int mCellWidth;

int mCellHeight;

public CustomViewGroup(Context context, AttributeSet attrs) \{

super(context, attrs);

mCellWidth = 120;

mCellHeight = 120;

\}

public CustomViewGroup(Context context) \{

super(context);

\}

public void setCellWidth(int width) \{

mCellWidth = width;

requestLayout();

\}

public void setCellHeight(int height) \{

mCellHeight = height;

requestLayout();

\}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) \{

int cellWidthSpec = MeasureSpec.makeMeasureSpec(mCellWidth,

MeasureSpec.AT\_MOST);

int cellHeightSpec = MeasureSpec.makeMeasureSpec(mCellHeight,

MeasureSpec.AT\_MOST);

int count = getChildCount();

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

View childView = getChildAt(i);

measureChild(childView, cellWidthSpec, cellHeightSpec);

// childView.measure(cellWidthSpec, cellHeightSpec);

\}

// 使用父容器给我们的尺寸和计算出的尺寸进行比较，选择正确的尺寸设置容器控件所占区域大小

setMeasuredDimension(resolveSize(mCellWidth \* count, widthMeasureSpec),

resolveSize(mCellHeight \* count, heightMeasureSpec));

\}

@Override

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

int cellWidth = mCellWidth;

int cellHeight = mCellHeight;

int columns = (r - l) / cellWidth;

if (columns < 0) \{

columns = 1;

\}

int x = 0;// 横坐标

int y = 0;// 纵坐标

int i = 0;

int count = getChildCount();

for (int index = 0; index < count; index++) \{

final View childView = getChildAt(index);

int cWidth = childView.getMeasuredWidth(); // childView的宽度

int cHeight = childView.getMeasuredHeight();

int left = x + ((cellWidth - cWidth) / 2);// 相对父容器，左边的位置

int top = y + ((cellHeight - cHeight) / 2);

childView.layout(left, top, left + cWidth, top + cHeight);

if (i >= (columns - 1)) \{

// 转到下一行

i = 0;

x = 0;

y += cellHeight;

\} else \{

i++;

x += cellWidth;

\}

\}

\}

\}

在xml布局中使用CustomViewGroup

<?xml version="1.0" encoding="utf-8"?>

<com.example.view.CustomViewGroup xmlns:android="[http://schemas.android.com/apk/res/android][http_schemas.android.com_apk_res_android]"

xmlns:app="[http://schemas.android.com/apk/res/com.example.activity][http_schemas.android.com_apk_res_com.example.activity]"

android:id="@+id/viewgroup\_main\_flow"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent" >

<ImageView

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:src="@drawable/ic\_launcher" />

<ImageView

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:src="@drawable/ic\_launcher" />

<ImageView

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:src="@drawable/ic\_launcher" />

<ImageView

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:src="@drawable/ic\_launcher" />

<ImageView

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:src="@drawable/ic\_launcher" />

<ImageView

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:src="@drawable/ic\_launcher" />

</com.example.view.CustomViewGroup>

效果如下：  
![Center][]

因为在创建CustomViewGroup时，系统会调用构造函数初始化

public CustomViewGroup(Context context, AttributeSet attrs) \{

super(context, attrs);

mCellWidth = 120;

mCellHeight = 120;

\}

因此所有子控件的单元格都设置为120，当然也可以通过代码改变控件大小，如下：

CustomViewGroup customViewGroup=(CustomViewGroup) findViewById(R.id.viewgroup\_main\_flow);

customViewGroup.setCellWidth(200);

customViewGroup.setCellHeight(200);

![Center 1][]

这个例子的效果很像GridView，但又有些不同，这只是简单的实现，我们还可以更加完善一下它。虽然这样，这个例子也有很大的局限性——那就是每个控件的大小都是一样的，如果我们的子控件不相同怎么办？

直接盗用鸿洋大神的劳动成果了，看代码

**CustomViewGroup.java如下**

public class CustomViewGroup extends ViewGroup \{

public CustomViewGroup(Context context, AttributeSet attrs) \{

super(context, attrs);

\}

@Override

protected ViewGroup.LayoutParams generateLayoutParams(

ViewGroup.LayoutParams p) \{

return new MarginLayoutParams(p);

\}

@Override

public ViewGroup.LayoutParams generateLayoutParams(AttributeSet attrs) \{

return new MarginLayoutParams(getContext(), attrs);

\}

@Override

protected ViewGroup.LayoutParams generateDefaultLayoutParams() \{

return new MarginLayoutParams(LayoutParams.MATCH\_PARENT,

LayoutParams.MATCH\_PARENT);

\}

/\*\*

\* 负责设置子控件的测量模式和大小,根据所有子控件设置自己的宽和高

\*/

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) \{

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

// 获得ViewGroup的父容器为它设置的测量模式和大小

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取lineWidth最大宽度

\*/

int lineWidth = 0;

/\*\*

\* 每一行的高度，累加至height

\*/

int lineHeight = 0;

int count = getChildCount();

// 遍历每个子元素

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

View childView = getChildAt(i);

// 测量每一个child的宽和高

measureChild(childView, widthMeasureSpec, heightMeasureSpec);

// 得到childView的lp

MarginLayoutParams lp = (MarginLayoutParams) childView

.getLayoutParams();

// 当前子空间实际占据的宽度

int childWidth = childView.getMeasuredWidth() + lp.leftMargin

+ lp.rightMargin;

// 当前子空间实际占据的高度

int childHeight = childView.getMeasuredHeight() + lp.topMargin

+ lp.bottomMargin;

/\*\*

\* 如果加入当前childView，则超出最大宽度，则得到目前最大宽度给width，类加height 然后开启新的一行

\*/

if (lineWidth + childWidth > sizeWidth) \{

width = Math.max(lineWidth, childWidth);// 取最大的

lineWidth = childWidth; // 重新开启新行，开始记录

// 叠加当前高度，

height += lineHeight;

// 开启记录下一行的高度

lineHeight = childHeight;

\} else

// 否则累加值lineWidth,lineHeight取最大高度

\{

lineWidth += childWidth;

lineHeight = Math.max(lineHeight, childHeight);

\}

// 如果是最后一个，则将当前记录的最大宽度和当前lineWidth做比较

if (i == count - 1) \{

width = Math.max(width, lineWidth);

height += lineHeight;

\}

\}

setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth

: width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight

: height);

\}

/\*\*

\* 存储所有的View，按行记录

\*/

private List<List<View>> mAllViews = new ArrayList<List<View>>();

/\*\*

\* 记录每一行的最大高度

\*/

private List<Integer> mLineHeight = new ArrayList<Integer>();

@Override

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

mAllViews.clear();

mLineHeight.clear();

int width = getWidth();

int lineWidth = 0;

int lineHeight = 0;

// 存储每一行所有的childView

List<View> lineViews = new ArrayList<View>();

int count = getChildCount();

// 遍历所有的孩子

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

View childView = getChildAt(i);

MarginLayoutParams lp = (MarginLayoutParams) childView

.getLayoutParams();

int childWidth = childView.getMeasuredWidth();

int childHeight = childView.getMeasuredHeight();

// 如果已经需要换行

if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) \{

// 记录这一行所有的View以及最大高度

mLineHeight.add(lineHeight);

// 将当前行的childView保存，然后开启新的ArrayList保存下一行的childView

mAllViews.add(lineViews);

lineWidth = 0;// 重置行宽

lineViews = new ArrayList<View>();

\}

/\*\*

\* 如果不需要换行，则累加

\*/

lineWidth += childWidth + lp.leftMargin + lp.rightMargin;

lineHeight = Math.max(lineHeight, childHeight + lp.topMargin

+ lp.bottomMargin);

lineViews.add(childView);

\}

// 记录最后一行

mLineHeight.add(lineHeight);

mAllViews.add(lineViews);

int left = 0;

int top = 0;

// 得到总行数

int lineNums = mAllViews.size();

for (int i = 0; i < lineNums; i++) \{

// 每一行的所有的views

lineViews = mAllViews.get(i);

// 当前行的最大高度

lineHeight = mLineHeight.get(i);

// 遍历当前行所有的View

for (int j = 0; j < lineViews.size(); j++) \{

View child = lineViews.get(j);

if (child.getVisibility() == View.GONE) \{

continue;

\}

MarginLayoutParams lp = (MarginLayoutParams) child

.getLayoutParams();

// 计算childView的left,top,right,bottom

int lc = left + lp.leftMargin;

int tc = top + lp.topMargin;

int rc = lc + child.getMeasuredWidth();

int bc = tc + child.getMeasuredHeight();

child.layout(lc, tc, rc, bc);

left += child.getMeasuredWidth() + lp.rightMargin

+ lp.leftMargin;

\}

left = 0;

top += lineHeight;

\}

\}

\}

在onMeasure方法中首先得到父容器传入的测量模式和宽高值，然后遍历所有的childView，使用measureChild方法对所有的childView进行测 量。然后根据所有childView测量得出的宽和高得到该ViewGroup如果设置为wrap\_content时的宽和高。最后根据模式，如果是 MeasureSpec.EXACTLY则直接使用父ViewGroup传入的宽和高，否则设置为自己计算的宽和高。然后在onLayout中完成对所有childView的布局。

**看下activity\_main.xml**

<com.example.view.CustomViewGroup xmlns:android="[http://schemas.android.com/apk/res/android][http_schemas.android.com_apk_res_android]"

xmlns:tools="[http://schemas.android.com/tools][http_schemas.android.com_tools]"

android:layout\_width="200dp"

android:layout\_height="wrap\_content" >

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_01"

android:text="Welcome" />

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_01"

android:text="You" />

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_02"

android:text="自定义" />

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_02"

android:text="ViewGroup" />

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_03"

android:text="努力" />

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_03"

android:text="学习" />

<TextView

style="@style/text\_style"

android:background="@drawable/flag\_04"

android:text="Try you best" />

</com.example.view.CustomViewGroup>

实现效果如下：

![Center 2][]

篇幅有限，先说这么多吧

[源代码][Link 1]

参考：

[http://blog.csdn.net/lmj623565791/article/details/38352503][http_blog.csdn.net_lmj623565791_article_details_38352503]

[http://blog.csdn.net/u013045971/article/details/45257677][http_blog.csdn.net_lmj623565791_article_details_38352503]

[http_schemas.android.com_apk_res_android]: http://schemas.android.com/apk/res/android
[http_schemas.android.com_apk_res_com.example.activity]: http://schemas.android.com/apk/res/com.example.activity
[Center]: /images/20210920/47aa3c1e78b348e1a1438ea337a8645d.png
[Center 1]: /images/20210920/500e4cf4d6f34b3b9cae07a210e638af.png
[http_schemas.android.com_tools]: http://schemas.android.com/tools
[Center 2]: /images/20210920/c9a801eec8ac4f7e8ddc04a50b3ff92a.png
[Link 1]: http://download.csdn.net/detail/xuemengrui12/9512367
[http_blog.csdn.net_lmj623565791_article_details_38352503]: http://blog.csdn.net/lmj623565791/article/details/38352503

发表评论取消回复

表情：

评论列表（有 0 条评论，289人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android自定义ViewGroup：实现简单的垂直方向线性布局（2）

Android自定义ViewGroup：实现简单的垂直方向线性布局（2）附录文章1自定义了一个ViewGroup，该ViewGroup实现了一个线性布局，水平方向的

- 日理万妓/ 2024年02月17日 17:17/ 0 赞/ 16 阅读

相关 android--自定义ViewGroup

转载请标明出处：[http://blog.csdn.net/lmj623565791/article/details/38339817][http_blog.csdn.net_

缺乏、安全感/ 2022年08月10日 16:39/ 0 赞/ 171 阅读

相关自定义viewgroup

public class MyViewGroup extends ViewGroup \{ private Scroller mScroller; p

迷南。/ 2022年08月07日 03:35/ 0 赞/ 146 阅读

相关自定义View之流式布局FlowLayout

自定义View之流式布局FlowLayout 在我们往常的app设计中，对于一些搜索关键字的推荐，标签等，往往宽度都是不确定的，且当一行满之后会自动换行，类似下面这样，

小灰灰/ 2022年07月28日 04:21/ 0 赞/ 161 阅读

相关自定义viewgroup实现ArcMenu

最终效果如下 ![20140708171927953][] 实现思路通过效果图，会有几个问题： a、动画效果如何实现可以看出动画是从顶点外外发射的，可

冷不防/ 2022年07月24日 07:19/ 0 赞/ 174 阅读

相关 Android自定义ViewGroup实战-----流式布局

本文是参考了鸿神之后的文章之后做的一些修改与总结，添加了一些自己的笔记，增加对自定义ViewGroup的理解。文章后面会给出原文地址。首先，什么是流式布局（FlowLayo

以你之姓@/ 2022年07月17日 03:27/ 0 赞/ 193 阅读

相关自定义控件：流式布局

![SouthEast][] 实现代码 public class FlowLayout extends ViewGroup { private

落日映苍穹つ/ 2022年07月11日 05:36/ 0 赞/ 150 阅读

相关自定义ViewGroup—回顾

自定ViewGroup要比自定义View要复杂一点，因为自定义ViewGroup不仅测量自身还要测量子元素和及重写onLayout()来一次排列子View。下面这篇文章是关于自

浅浅的花香味﹌/ 2022年03月15日 03:22/ 0 赞/ 180 阅读

相关 ViewGroup2——自定义实现流式布局

Android中的线性布局LinearLayout，只能横向或纵向排列子控件，而且横向排列时不能自动换行。实际上，通过扩展ViewGroup就能够实现控件自动的往右添加，如果当

喜欢ヅ旅行/ 2021年09月22日 04:58/ 0 赞/ 290 阅读

相关 ViewGroup1——自定义布局

平时开发时，系统提供的几个布局基本就能满足我们的需求了。如果系统提供的布局无法满足需求，我们可以扩展ViewGroup类来实现自定义布局控件。先看下ViewGroup的继承图[

ゞ浴缸里的玫瑰/ 2021年09月22日 04:56/ 0 赞/ 278 阅读