Android自定义View —流式布局FlowLayout
流式布局FlowLayout
源码地址:案例源码
1.应用背景及说明
现在大部分商城类app都要用到流式布局,就是对不规则的子view进行布局排列。
自定义流式布局不外乎两点,重写onMeasure方法和onLayout方法。大部分代码我都写了注释,但还是有一些比较细节的地方,我还会抽取出来重点讲。
废话不多说,先上图。
2.代码架构
结构比较简单,几个类而已,就不写了,直接上图吧!
3.代码分析
(1). FlowLayout.java
都写了详细注释,重点讲一下易错和需要注意的地方。
package com.example.flowlayout.widget;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;
import android.view.ViewGroup;
import android.widget.LinearLayout;
import java.util.ArrayList;
import java.util.List;
public class FlowLayout extends ViewGroup {
private static final String TAG = "FlowLayout";
//统一设置间隔,比较方便
private int horizontalSpace = dip_2px(16);
private int verticalSpace = dip_2px(8);
private int dip_2px(int dpValue) {
float scale = getResources().getDisplayMetrics().density;
return (int) (scale * dpValue + 0.5f);
}
//每次添加整行的view,相当于一个二维表
List<List<View>> widList;
//每一行的行高
List<Integer> heiList = new ArrayList<>();
//一行的view
List<View> lineList;
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 onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int selWidth = MeasureSpec.getSize(widthMeasureSpec);
int selHeight = MeasureSpec.getSize(heightMeasureSpec);
//目前宽高
int curWidth = 0;
int curHeight = 0;
//如果他写在外面,就会多一倍的行数,因为onMeasure方法要执行两次,但应该是能解决这个测量优化问题
widList = new ArrayList<>();
//记录一行的view
lineList = new ArrayList<>();
int childCount = getChildCount();
//爸爸的padding
int PLeft = getPaddingLeft();
int PTop = getPaddingTop();
int PRight = getPaddingRight();
int PBottom = getPaddingBottom();
//儿子需要的最大长宽,当模式为AT_MOST时,就需要用到这个变量。
int childMostWidth = 0;
int childMostHeight = 0;
for (int i = 0; i < childCount; i++) {
View childView = getChildAt(i);
MarginLayoutParams lp = (MarginLayoutParams) childView.getLayoutParams();
//第二个参数:父View左右(上下)Padding+子View左右(上下)Margin, 源码也没说详细, 但是你能看系统布局的源码(LinearLayout),
// 最好不设置padding。
//感觉不太好操作
int childWidMeasureSpec = getChildMeasureSpec(widthMeasureSpec, lp.leftMargin + lp.rightMargin
+ PLeft + PRight, lp.width);
int childHeiMeasureSpec = getChildMeasureSpec(heightMeasureSpec, lp.topMargin + lp.bottomMargin
+ PTop + PBottom, lp.width);
Log.d(TAG, "onMeasure: " + lp.leftMargin + "---" + PLeft);
childView.measure(childWidMeasureSpec, childHeiMeasureSpec);
//得到子view的长宽
int childWidth = childView.getMeasuredWidth();
int childHeight = childView.getMeasuredHeight() ;
//换行操作
if (curWidth + childWidth + horizontalSpace> selWidth) {
//添加这一行的view及行高
widList.add(lineList);
heiList.add(curHeight);
//记录最大的行宽及行高
childMostWidth = Math.max(childMostWidth, curWidth + horizontalSpace);
childMostHeight += curHeight + verticalSpace;
//清空,重新记录
lineList = new ArrayList<>();
curHeight = 0;
curWidth = 0;
Log.d(TAG, "onMeasure: " + 1);
}
//添加每个子view,这个需要放在第二个if的上方,
lineList.add(childView);
//当前行的宽度及高度
curWidth += childWidth + horizontalSpace;
curHeight = Math.max(curHeight, childHeight );
//最后一行执行的操作,因为他不可能执行第一个if语句
if (curWidth < selWidth && i == childCount - 1) {
widList.add(lineList);
heiList.add(curHeight);
Log.d(TAG, "onMeasure: " + 2);
childMostWidth = Math.max(childMostWidth, curWidth);
childMostHeight += curHeight + verticalSpace;
}
}
//模式
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int heightMode = MeasureSpec.getMode(heightMeasureSpec);
//模式,打个log就知道是爸爸的还是儿子的模式了
//onMeasure: 宽的mode:MeasureSpec.AT_MOST
Log.d(TAG, "onMeasure: 宽的mode:" + (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.AT_MOST?
"MeasureSpec.AT_MOST": "MeasureSpec.UNSPECIFIED"));
int finallyWidth = (widthMode == MeasureSpec.EXACTLY ? selWidth : childMostWidth);
int finallyHeight = (heightMode == MeasureSpec.EXACTLY ? selHeight : childMostHeight);
setMeasuredDimension(finallyWidth, finallyHeight);
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int curL = 0 ;
int curT = 0;
for (int i = 0; i < widList.size(); i++) {
List<View> lineView = widList.get(i);
Log.d(TAG, "onLayout: " + widList.size() + "---" + lineView.size());
for (int j = 0; j < lineView.size(); j++) {
View childView = lineView.get(j);
int left = curL ;
int top = curT ;
if (j == 0) {
left = curL + horizontalSpace;
}
int right = left + childView.getMeasuredWidth();
int bottom = top + childView.getMeasuredHeight();
//如是是把 widList = new ArrayList<>()写在onMeasure 外 ,会有4行
// 那么第一行和第三行的数据相同,所以相当于重新layout了, 所以第一行就为空了,就会出现这种情况
childView.layout(left, top, right, bottom);
curL = right + horizontalSpace;
}
curL = 0;
curT = curT + heiList.get(i) + verticalSpace;
lineView.clear();
}
//直接clear
widList.clear();
heiList.clear();
lineList.clear();
}
@Override
public LayoutParams generateLayoutParams(AttributeSet attrs) {
return new MarginLayoutParams(getContext(), attrs);
}
}
1.关于间隔的设置,建议统一设置间隔,比较方便。不要在xml中设置,可能会引起间隔不统一,就不好看了。
2.如果把这两个参数放外面,先看下面的图
//儿子需要的最大长宽,当模式为AT_MOST时,就需要用到这两个变量。
int childMostWidth = 0;
int childMostHeight = 0;
怎么解释呢?emmm…要结合第三点,即onMeasure方法的二次测量,如果放在里面,childMostHeight
每次onMeasure都会置0,也就是高度的问题,它只能观察两行。
但放在外面就不同。childMostHeight
一直在增加,重新onMeasure,并没有赋为0,他就能观察到四行。
3.关于onMeasure方法的二次测量的问题。就是说onMeasure方法会执行两次。但是这会造成一些问题。
比如:如果你把用来记录数据的变量放在onMeasure外面且在外面初始化,就会造成数据翻倍的问题。比如说这个变量: widList
//每次添加整行的view,相当于一个二维数组
List<List> widList;
解决方法:当然就是需要我们在onMeasure方法中进行成员变量的初始化。
尽管我们测量了多次,但每次测量前我们都将它初始化了
关于第二三点,如果childMostHeight 放在onMeasure方法外面,且 widList在onMeasure方法外面初始化,那么,就是这个图
4 . 当然,可能有人会有疑问,为什么是两空行,不应该是四行都有数据吗?
我们需要知道的是,1,3两行, 2,4两行数据是一样的。
在onLayout方法中,
在layout时,因为childView一样,同一个childView进行layout,你说会怎么办?总不可能一个childView layout在不同的地方吧!当然是第一行的数据会定位到第三行,第一行就会为空了。
以上几点都是易错点,并对有些现象,我对其做出了解答
上一篇: jsp自定义标签
下一篇: php header函数实现代码