欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Android自定義ViewGroup之實(shí)現(xiàn)FlowLayout流式布局

 更新時間：2020年09月23日 07:39:55   作者：可樂淘  
這篇文章主要為大家詳細(xì)介紹了Android自定義ViewGroup之實(shí)現(xiàn)FlowLayout流式布局的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下

整理總結(jié)自鴻洋的博客，希望可以幫到大家。

一、FlowLayout介紹

所謂FlowLayout，就是控件根據(jù)ViewGroup的寬，自動的往右添加，如果當(dāng)前行剩余空間不足，則自動添加到下一行。有點(diǎn)像所有的控件都往左飄的感覺，第一行滿了，往第二行飄~所以也叫流式布局。Android并沒有提供流式布局，但是某些場合中，流式布局還是非常適合使用的，比如關(guān)鍵字標(biāo)簽，搜索熱詞列表等，比如下圖： 

github上已有現(xiàn)成的FlowLayout，本文是從無到有去制作。

二、制作分析 

1、對于FlowLayout，需要指定的LayoutParams，我們目前只需要能夠識別margin即可，即使用MarginLayoutParams.
2、onMeasure中計(jì)算所有childView的寬和高，然后根據(jù)childView的寬和高，計(jì)算自己的寬和高。（當(dāng)然，如果不是wrap_content，直接使用父ViewGroup傳入的計(jì)算值即可）
3、onLayout中對所有的childView進(jìn)行布局。 

三、代碼 

1、MainActivity.java

 public class MainActivity extends Activity {

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

 2、CustomViewGroup.java

public class CustomViewGroup extends ViewGroup {

 private final String TAG = getClass().getSimpleName();

 public CustomViewGroup(Context context) {
 super(context);
 }

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

 public CustomViewGroup(Context context, AttributeSet attrs, int defStyleAttr) {
 super(context, attrs, defStyleAttr);
 }

 /**
 * 一、重寫generateLayoutParams，確定該ViewGroup的LayoutParams
 * 返回MarginLayoutParams的實(shí)例，這樣就為我們的ViewGroup指定了其LayoutParams為MarginLayoutParams
 */
 @Override
 public LayoutParams generateLayoutParams(AttributeSet attrs) {
 return new MarginLayoutParams(getContext(), attrs);
 }

 /**
 * 二、計(jì)算所有ChildView的寬度和高度 然后根據(jù)ChildView的計(jì)算結(jié)果，設(shè)置自己的寬和高
 */
 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 //1、獲得此ViewGroup上級容器為其推薦的寬和高，以及計(jì)算模式
 int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec);
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec);

 // 2、如果ViewGroup布局是wrap_content時，根據(jù)childView的尺寸，計(jì)算容器的寬和高
 int width = 0;//ViewGroup的寬度
 int height = 0;//ViewGroup的高度
 int lineWidth = 0;//childView所占據(jù)的當(dāng)前行總寬度
 int lineHeight = 0;//childView所占據(jù)的各行總高度
 int cCount = getChildCount();////childView的數(shù)量
 for(int i=0; i<cCount; i++){//遍歷每個childView
  View childView = getChildAt(i);
  measureChild(childView, widthMeasureSpec, heightMeasureSpec);// 測量當(dāng)前child的寬和高
  MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
  int cWidth = childView.getMeasuredWidth() + mlp.leftMargin + mlp.rightMargin;
  int cHeight = childView.getMeasuredHeight() + mlp.topMargin + mlp.bottomMargin;
  if(lineWidth + cWidth > sizeWidth){//如果加入當(dāng)前childView后超出最大寬度，width取最大高度，累加lineHeight，然后開啟新行
  width = Math.max(lineWidth, cWidth);
  height += lineHeight;
  lineWidth = cWidth;
  }else{//如果加入當(dāng)前childView后小于最大寬度，則累加lineWidthheight lineHeight取最大高度
  lineWidth += cWidth;
  height = Math.max(lineHeight, cHeight);
  }
  if(i == cCount-1){// 如果是最后一個childView，則將當(dāng)前記錄的最大寬度和當(dāng)前l(fā)ineWidth做比較
  width = Math.max(lineWidth, cWidth);
  height += lineHeight;
  }
 }

 //3、如果是wrap_content設(shè)置為我們計(jì)算的值;否則直接設(shè)置為父容器計(jì)算的值
 setMeasuredDimension(
  (widthMode == MeasureSpec.EXACTLY) ? sizeWidth : width,
  (heightMode == MeasureSpec.EXACTLY) ? sizeHeight : height
 );
 }

 /**
 * 三、重寫onLayout，對其所有childView進(jìn)行定位（設(shè)置childView的繪制區(qū)域）
 */
 private List<List<View>> allChildViews = new ArrayList<List<View>>();//存儲所有的childView，按行記錄
 private List<Integer> maxLineHeight = new ArrayList<Integer>();//存儲每行的最大高度值
 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 allChildViews.clear();
 maxLineHeight.clear();

 int width = getWidth();//每行的最大寬度
 int lineWidth = 0;//每行的即時寬度
 int lineHeight = 0;//每行的即時高度

 List<View> lineChildViews = new ArrayList<View>();//存儲每行所有的childView

 int cCount = getChildCount();
 for(int i=0; i<cCount; i++){//遍歷所有childView
  View childView = getChildAt(i);
  MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
  int cWidth = childView.getMeasuredWidth();
  int cHeight = childView.getMeasuredHeight();
  if(lineWidth + cWidth + mlp.leftMargin + mlp.rightMargin > width){//如果需要換行
  maxLineHeight.add(lineHeight);// 存儲這一行最大高度
  allChildViews.add(lineChildViews);// 將當(dāng)前行的childView保存，然后開啟新的ArrayList保存下一行的childView
  lineChildViews = new ArrayList<View>();
  lineWidth = 0;// 重置行寬
  }else{//如果不需要換行
  lineWidth += cWidth + mlp.leftMargin + mlp.rightMargin;//即時寬度累加
  lineHeight = Math.max(lineHeight,cHeight + mlp.topMargin + mlp.bottomMargin );//即時高度取最大值
  lineChildViews.add(childView);//把當(dāng)前childView存入這一行的集合
  }
 }
 // 記錄最后一行
 maxLineHeight.add(lineHeight);
 allChildViews.add(lineChildViews);

 int left = 0;//左坐標(biāo)
 int top = 0;//上坐標(biāo)
 int lineNums = allChildViews.size();// 得到總行數(shù)
 for (int i = 0; i < lineNums; i++) {
  lineChildViews = allChildViews.get(i);// 取得每一行的所有的views
  lineHeight = maxLineHeight.get(i);// 取得當(dāng)前行的最大高度

  Log.e(TAG, "第" + i + "行 ：" + lineChildViews.size() + " , " + lineChildViews);
  Log.e(TAG, "第" + i + "行， ：" + lineHeight);

  // 遍歷當(dāng)前行所有的View 
  for (int j = 0; j < lineChildViews.size(); j++) {
  View childView = lineChildViews.get(j);//取得childView
  if (childView.getVisibility() == View.GONE) {
   continue;
  }
  MarginLayoutParams mlp = (MarginLayoutParams) childView.getLayoutParams();
  //計(jì)算childView的left,top,right,bottom
  int lc = left + mlp.leftMargin;
  int tc = top + mlp.topMargin;
  int rc = lc + childView.getMeasuredWidth();
  int bc = tc + childView.getMeasuredHeight();

  Log.e(TAG, childView + " , l = " + lc + " , t = " + t + " , r =" + rc + " , b = " + bc);

  childView.layout(lc, tc, rc, bc);//設(shè)置這個childView的位置
  left += childView.getMeasuredWidth() + mlp.rightMargin + mlp.leftMargin;//左坐標(biāo)累加
  }
  left = 0;//開始新的一行，左坐標(biāo)重置
  top += lineHeight;//開始新的一行，上坐標(biāo)累加
 }
 }
}

 3、activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#E1E6F6"
 android:orientation="vertical">

 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">

 <TextView
  style="@style/text_flag_01"
  android:text="Welcome" />

 <TextView
  style="@style/text_flag_01"
  android:text="IT工程師" />

 <TextView
  style="@style/text_flag_01"
  android:text="學(xué)習(xí)ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="戀愛ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="掙錢ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="努力ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="I thick i can" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

</LinearLayout>

4、activity_main2.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:background="#E1E6F6"
 android:orientation="vertical">

 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content">

 <TextView
  style="@style/text_flag_01"
  android:text="Welcome" />

 <TextView
  style="@style/text_flag_01"
  android:text="IT工程師" />

 <TextView
  style="@style/text_flag_01"
  android:text="學(xué)習(xí)ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="戀愛ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="掙錢ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="努力ing" />

 <TextView
  style="@style/text_flag_01"
  android:text="I thick i can" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>


 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp">

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="Welcome"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="IT工程師"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="學(xué)習(xí)ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="戀愛ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="掙錢ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="努力ing"
  android:textColor="#888888" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_02"
  android:text="I thick i can"
  android:textColor="#888888" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

 <com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_marginTop="20dp">

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="Welcome"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="IT工程師"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="學(xué)習(xí)ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="戀愛ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="掙錢ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="努力ing"
  android:textColor="#43BBE7" />

 <TextView
  style="@style/text_flag_01"
  android:background="@drawable/flag_03"
  android:text="I thick i can"
  android:textColor="#43BBE7" />
 </com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

</LinearLayout>

 5、activity_main3.xml

<com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="200dp"
 android:layout_height="wrap_content"
 android:background="#FFFFFF">

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="Welcome"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="IT工程師"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="學(xué)習(xí)ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="戀愛ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="掙錢ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="努力ing"
 android:textColor="#323232" />

 <TextView
 style="@style/text_flag_01"
 android:background="@drawable/flag_04"
 android:text="I thick i can"
 android:textColor="#323232" />

</com.cctvjiatao.customviewgroupflowlayout.view.CustomViewGroup>

 以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評論