android 实现FlowLayout 流线布局(自定义ViewGroup)
2016-10-19 15:57
597 查看
项目目的
1、深化自定义View的概念2、将MeasureSpec、View的绘制流程、Layoutparams等分散的知识点整合成一个demo。
项目灵感
笔者经验也是有限,此文章主要借鉴张鸿洋前辈的博客。原文地址:http://blog.csdn.net/lmj623565791/article/details/38352503
项目预览(源码附文章结尾)
主要涉及知识点以及相关链接
1、MeasureSpec
快速理解android View的测量onMeasure()与MeasureSpec2、Layoutparams以及MarginLayoutParams
Android开发:LayoutParams的用法MarginLayoutParams–一个可以在代码中直接设置margin的方法
3、View的绘制流程
Android视图绘制流程完全解析,带你一步步深入了解View(二)4、笔者自定View相关文章
给自定义View添加xml属性android 自定义控件(底部icon点击效果)
实现要点
1、重写onMeasure()方法,让FlowLayout能够根据子部局的大小来确定自己的大小。2、重写onLayout()方法,让FlowLayout中的子部局能够即正确的排版,即对其间的子View进行布局。
3、使用MarginLayoutParams,不仅能够获取到子部局的宽高,还能获取到子布局的margin参数。
主要代码
public class FlowLayout extends ViewGroup { private static final String TAG = "FlowLayout"; public FlowLayout(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); // 获得它的父容器为它设置的测量模式和大小 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); int modeWidth = MeasureSpec.getMode(widthMeasureSpec); int modeHeight = MeasureSpec.getMode(heightMeasureSpec); Log.e(TAG, sizeWidth + "," + sizeHeight); // 如果是warp_content情况下,记录宽和高 int width = 0; int height = 0; int lineWidth = 0;//每行的宽度 int lineHeight = 0;//每行的高度 int cCount = getChildCount(); // 遍历每个子元素 for (int i = 0; i < cCount; i++) { View child = getChildAt(i); // 测量每一个child的宽和高 measureChild(child, widthMeasureSpec, heightMeasureSpec); // 得到child的lp MarginLayoutParams lp = (MarginLayoutParams) child .getLayoutParams(); int childWidth = child.getMeasuredWidth() + lp.leftMargin + lp.rightMargin;// 当前子空间实际占据的宽度 int childHeight = child.getMeasuredHeight() + lp.topMargin + lp.bottomMargin;// 当前子空间实际占据的高度 //如果加入当前child,超出最大宽度,则增加高度 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 == cCount - 1) { width = Math.max(width, lineWidth); height += lineHeight; } } //设置布局宽高有三种情况 //如果是wrap_content,则根据所有子部局的大小来显示 //如果是确切值,就根据确切值的大小显示 //如果是match_parent,则显示父布局能显示的最大值 setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : width, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : height); } @Override protected void onLayout(boolean changed, int l, int t, int r, int b) { int width = getWidth(); int lineWidth = 0; int lineHeight = 0; // 获取孩子的个数 int cCount = getChildCount(); int left = 0; int top = 0; // 遍历所有的孩子, for (int i = 0; i < cCount; i++) { View child = getChildAt(i); MarginLayoutParams lp = (MarginLayoutParams) child .getLayoutParams(); int childWidth = child.getMeasuredWidth(); int childHeight = child.getMeasuredHeight(); // 如果已经需要换行 if (childWidth + lp.leftMargin + lp.rightMargin + lineWidth > width) { lineWidth = 0;// 重置行宽 left = 0; top += lineHeight; } //计算childView的left,top,right,bottom,并且设置每个View的位置 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; lineWidth += childWidth + lp.leftMargin + lp.rightMargin; lineHeight = Math.max(lineHeight, childHeight + lp.topMargin + lp.bottomMargin); } } }
源码下载:http://download.csdn.net/detail/double2hao/9657250
相关文章推荐
- Android 自定义ViewGroup 实现FlowLayout,动态添加布局
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- Android自定义ViewGroup自动换行实现滑动任意布局及事件处理效果
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现
- android之自定义ViewGroup和自动换行的布局的实现(支持按钮间隔)
- 【Android】 自定义ViewGroup 实战篇 -> 实现FlowLayout
- android自定义viewgroup实现等分格子布局
- android自定义viewgroup实现等分格子布局
- android自定义viewgroup实现等分格子布局
- Android 自定义ViewGroup 实战篇 -> 实现FlowLayout
- android自定义viewgroup实现等分格子布局
- Android 手把手教您自定义ViewGroup(二) 实战篇 -> 实现FlowLayout
- android之自定义ViewGroup和自动换行的布局的实现