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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
/**
 * Created by zzs on 20/01/16.
 * 流式布局
 */
public class FlowLayoutView extends ViewGroup{
 public FlowLayoutView(Context context) {
  super(context);
 }

 public FlowLayoutView(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

  //或ViewGroup中所有子元素的属性
 //否则只获取ViewGroup 的属性
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
  return new MarginLayoutParams(getContext(),attrs);
 }


 /**
  * 测量控件本身的大小 宽和高 根据子内容获取
  * @param widthMeasureSpec
  * @param heightMeasureSpec
  */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);

  //获取父布局的模式和尺寸
  int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
  int modeWidth = MeasureSpec.getMode(widthMeasureSpec);
  int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);
  int modeHeight = MeasureSpec.getMode(heightMeasureSpec);

  //记录Wrap_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);
   //测量每一个子元素
   measureChild(child,widthMeasureSpec,heightMeasureSpec);
   //获取每个子元素的属性
   MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();

   //获取当前子元素的宽和高
   int childWidth = child.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
   int childHeight = child.getMeasuredHeight()+layoutParams.bottomMargin+layoutParams.topMargin;


      if(lineWidth+childWidth>getWidth()-getPaddingLeft()-getPaddingRight()){//换行
    width = Math.max(lineWidth,childWidth);
    lineWidth = childWidth;//重新开一行 当前行的宽度
    //叠加之前的高度
    height += lineHeight;
    //重新开一行 这个新行的高度
    lineHeight = childHeight;
   }else{//不换行
    //记录当前行的宽
    lineWidth += childWidth;
    //记录一行中的高度
    lineHeight = Math.max(lineHeight,childHeight);
   }

   if(i ==cCount-1){//判断是否是最后一个元素
    width = Math.max(width,lineWidth);
    height += lineHeight;
   }
   //设置ViewGrop最终宽高
   setMeasuredDimension(modeWidth==MeasureSpec.EXACTLY?sizeWidth:width+getPaddingRight()+getPaddingLeft(),
        modeHeight==MeasureSpec.EXACTLY?sizeHeight:height+getPaddingBottom()+getPaddingTop());
  }

 }

 //记录所有子元素 按行存取
 List<List<View>> mAllViews = new ArrayList<>();
 //记录每一行中最大的高度
 private List<Integer> mLineHeight = new ArrayList<>();

 //摆放子View ???????????????
 @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;

  //记录一行中的 View
  List<View> lineView = new ArrayList<>();

  //获取子元素的个数
  int cCount = getChildCount();
  Log.e("AAA","==AAAA=>"+cCount);
  //遍历所有子元素
  for(int i=0;i<cCount;i++){

   View child = getChildAt(i);
   //获取每个子元素的属性
   MarginLayoutParams layoutParams = (MarginLayoutParams) child.getLayoutParams();

   //获取当前子元素的宽和高
   int childWidth = child.getMeasuredWidth()+layoutParams.leftMargin+layoutParams.rightMargin;
   int childHeight = child.getMeasuredHeight()+layoutParams.bottomMargin+layoutParams.topMargin;

   if(lineWidth+childWidth>width-getPaddingLeft()-getPaddingRight()){//判断是否换行
    //记录一行的高 和一行中的View
    mLineHeight.add(lineHeight);
    mAllViews.add(lineView);

    Log.e("AAA","==>VVV===>"+mAllViews.size());
    //让数据重置
    lineWidth = 0;
    lineView = new ArrayList<>();
   }else{
    //记录一行中的宽 高 view
    lineWidth += childWidth;
    lineHeight = Math.max(lineHeight,childHeight);
    lineView.add(child);
   }



  }
//处理元素 数据以每行的形式处理
  mLineHeight.add(lineHeight);
  mAllViews.add(lineView);


  //获取每个View的padding
  int left = getPaddingLeft();
  int top = getPaddingTop();
  //获取有多少行
  int lineNum = mAllViews.size();
  Log.e("AAA","=BBB=>"+lineNum);
  //展示每一行
  for(int i=0;i<lineNum;i++){
   lineHeight = mLineHeight.get(i);
   lineView = mAllViews.get(i);
   //遍历每一行
   // 取出 每一行的 所有的View
   lineView = mAllViews.get(i);
   lineHeight = mLineHeight.get(i);
   // 循环遍历 每一行的View
   for(int j=0;j<lineView.size();j++){
    View child = lineView.get(j);
    MarginLayoutParams lp = (MarginLayoutParams) child.getLayoutParams();

    int lc = left+lp.leftMargin;
    int tc = top+lp.topMargin;
    int rc = lc+child.getMeasuredWidth();
    int bc = tc+child.getMeasuredHeight();
    //摆放 子View的位置
    child.layout(lc, tc, rc, bc);
    //叠加 前一个View 的 实际宽度
    left += child.getMeasuredWidth()+lp.leftMargin+lp.rightMargin;
   }
   //换行了 重置
   left = getPaddingLeft();
   top+=lineHeight;

  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
public class MainActivity extends AppCompatActivity {
 private FlowLayoutView flowLayoutView;
 private String[] titils = {"sds", "da", "aa", "fff", "gggggg",
   "hhgghg", "jjhhhh", "aaaaaaaaaaaaaaaaaaaaaaaaaaa", "fff", "gggggg", "hhgghg", "jjhhhh",
   "sds", "da", "aa", "fff", "gggggg", "sds", "da", "aa", "fff", "gggggg"};

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);

  flowLayoutView = findViewById(R.id.flowLayoutView);

  for (int i = 0; i < titils.length; i++) {
   TextView tv = (TextView) LayoutInflater.from(MainActivity.this)
     .inflate(R.layout.lv_item, flowLayoutView, false);
   tv.setText(titils[i]);
   flowLayoutView.addView(tv);
  }
 }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="vertical"
 tools:context=".MainActivity">

 <com.zzs.polygon.FlowLayoutView
  android:id="@+id/flowLayoutView"
  android:layout_width="match_parent"
  android:layout_height="wrap_content" />
</LinearLayout>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:background="@drawable/tv_shape"
 android:paddingLeft="10dp"
 android:paddingTop="5dp"
 android:paddingRight="10dp"
 android:paddingBottom="5dp"
 android:layout_marginLeft="10dp"
 android:layout_marginBottom="5dp"
 android:layout_marginRight="10dp"
 android:layout_marginTop="5dp"
 android:text="AAA"
 android:textColor="#ff0000">

</TextView>

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

 <corners android:radius="30dp"></corners>
 <solid android:color="#8800ff00"></solid>
 <padding
  android:left="10dp"
  android:right="10dp"
  android:top="10dp"
  android:bottom="10dp"
  ></padding>
</shape>
</TextView>