Android自定義ViewGroup實現流式佈局

2020-09-23 09:00:29

本文範例為大家分享了Android自定義ViewGroup實現流式佈局的具體程式碼，供大家參考，具體內容如下

1.概述

本篇給大家帶來一個範例,FlowLayout,什麼是FlowLayout,我們常在App 的搜尋介面看到熱門搜尋詞,就是FlowLayout,我們要實現的就是圖中的效果,就是根據容器的寬,往容器裡面新增元素,如果剩餘的控制元件不足時候,自行新增到下一行,FlowLayout也叫流式佈局,在開發中還是挺常用的.

2.對所有的子View進行測量

onMeasure方法的呼叫次數是不確定的,所以為了避免測量出錯,需要把總的List集合,清空一下,一個View的繪製,需要經過onMeasure方法的測量,和onLayout方法的排版才能顯示出來,在測量的方法中,我們把該ViewGroup中的所有子View遍歷出來,新增到一行中的List集合中,再把一行中的所有的元素集合新增到總的集合中去,並對每個子View元素進行測量,測量的引數,我們給0,或者未指定,,如果不是一行中的第一元素,並且通過 getUsablewWidth()方法獲取一行中可用的寬度,不夠容納下一元素,時就新建立一個集合,來裝一行中所有元素,再把所有的子View元素全部測量完成後,我們還需要通過setMeasuredDemoetion()方法把測量出來的寬和高儲存起來,儲存之後可以呼叫getMeasureWidth獲取測量之後的寬了.

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  allLines.clear();
  //測量容器的寬和高
  int containerMeasuredWidth = MeasureSpec.getSize(widthMeasureSpec);
  //這個集合用於儲存單行
  ArrayList<View> oneLine = null;
  for (int i = 0; i < getChildCount(); i++) {
   //獲取每一Chiledview
   View child = getChildAt(i);
    int UnspecifiedMeasureSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
   child.measure(UnspecifiedMeasureSpec, UnspecifiedMeasureSpec);//相當於傳了一個0,0;
   //如果是第1個view就new一個新行出來,或者View大於了可用的寬度,
   if (i == 0 || child.getMeasuredWidth() > getUsablewWidth(containerMeasuredWidth, oneLine,oneLine.size())) {
    oneLine = new ArrayList<View>();
    allLines.add(oneLine);
   }
   oneLine.add(child);
 
  }
 
  int lineNumber = allLines.size();
  int allLinesHeight = getChildAt(0).getMeasuredHeight() * lineNumber;
  int verticalTotalpadding = getPaddingBottom() + getPaddingTop();
  //垂直總的spcing
  int verticalTotalSpcing = 8 * (lineNumber - 1);
  //容器的高 = 所有View的高 + 垂直方向的Padding + 垂直總的spcing
  int containerMeasureHeight = allLinesHeight + verticalTotalpadding + verticalTotalSpcing;
  setMeasuredDimension(containerMeasuredWidth, containerMeasureHeight);
 }

3.獲取一行中可用的空間

獲取一行中可用的寬度,需要我們傳入容器的寬度,和一行元素的集合,和元素之間的間隔,,然後遍歷所有的元素,通過一個變數來儲存所有View測量出來寬度的總和,用容器的寬減去,子View寬度的總和減去水平方向的間隔,以及左右兩邊的Padding,得到一行中可用的寬度

private int getUsablewWidth(int containerMeasuredWidth, ArrayList<View> oneLine,int needSpacingCount) {
  int oneLineWidth = 0;
  for (View view : oneLine) {
   oneLineWidth += view.getMeasuredWidth();
  }
  //水平方向兩邊的padding
  int horizotalPadding = getPaddingLeft() + getPaddingRight();
  int horizontalTotalSpcing = horizotalPadding * needSpacingCount;
  int usablewWidth = containerMeasuredWidth - oneLineWidth - horizotalPadding - horizontalTotalSpcing;
  return usablewWidth;
 }

4.對所有的子View進行排版

還是遍歷每一行中的每一個元素,對該元素執行排版方法,通過child.getMeasuredWidth();和child.getMeasuredHeight();獲取測量後的View的寬和高,通過child.layout(l,t,r,b),對View進行位置的擺放,left就是上個元素的Rigth,Top,就是上一行元素的Bootom,Rigth就是Left+View自身的寬度,Bottom是Top+View自身的高度,最後,因為我們手動把TextView的寬改變了，跟測量時的寬不一樣了,重新呼叫測量即可

protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int tempRight = 0;//儲存一行中上一個View的Right
  int tempBottom = 0;//儲存上一行View的Bottom位置
  ///遍歷第一排
  for (int row = 0; row < allLines.size(); row++) {
   ArrayList<View> oneLines = allLines.get(row);
   //計算一行中每個Veiw可以分到的平均寬度
   int totalUsableWidth= getUsablewWidth(getMeasuredWidth(), oneLines,oneLines.size()-1);
   int averageUsablewWidth = totalUsableWidth/oneLines.size();
   //遍歷的是一行的內容
   for (int column = 0; column < oneLines.size(); column++) {
    View child = oneLines.get(column);
    //獲取測量的寬高
    int measuredWidth = child.getMeasuredWidth();
    int measuredHeight = child.getMeasuredHeight();
    //如果是一行中的第一個View則排在第0個位置
    int left = column == 0 ? getPaddingLeft() : tempRight + 8;
    //如果是第1行Top座標是PaddingTop的位置,否則就上一個View的bottom位置
    int top = row == 0 ? getPaddingTop() : tempBottom + 8;
    int right = left + measuredWidth ;//+ averageUsablewWidth;
    
    int bootom = top + measuredHeight;
    child.layout(left, top, right, bootom);
    tempRight = right;
    
    int WidthMeasureSpec = MeasureSpec.makeMeasureSpec(child.getWidth(), MeasureSpec.EXACTLY);
    int HeightMakeMeasureSpec = MeasureSpec.makeMeasureSpec(child.getHeight(), MeasureSpec.EXACTLY);
    child.measure(WidthMeasureSpec,HeightMakeMeasureSpec);
   }
   tempBottom = oneLines.get(0).getBottom();
  }
 }

5.Activity

public class MainActivity extends Activity {
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 FlowLayout flowLayout = new FlowLayout(this);
 flowLayout.setPadding(6, 6, 6, 6);
 
 for (String text : list) {
    TextView textView = new TextView(this);
    textView.setBackgroundResource(R.drawable.bg_text);
    textView.setGravity(Gravity.CENTER);
    textView.setPadding(6, 6, 6, 6);
    textView.setText(text);
    textView.setTextSize(20);
    flowLayout.addView(textView);
   }
 
 setContentView(flowLayout);
 } 
 }

6.TextView 的背景

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
 android:shape="rectangle">
 <stroke android:width="1dp"
  android:color="#5000" />
 <corners android:radius="6dp"/>
</shape>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Android自定義ViewGroup實現流式佈局

熱門文章