快捷導(dǎo)航

Android進(jìn)階教程之ViewGroup自定義布局

更新時(shí)間：2019年06月23日 09:15:02 作者：水中魚之1999

這篇文章主要給大家介紹了關(guān)于Android進(jìn)階教程之ViewGroup自定義布局的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)各位Android開發(fā)者們具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

前言

在我們的實(shí)際應(yīng)用中，經(jīng)常需要用到自定義控件，比如自定義圓形頭像，自定義計(jì)步器等等。但有時(shí)我們不僅需要自定義控件，舉個(gè)例子，F(xiàn)loatingActionButton 大家都很常用，所以大家也很經(jīng)常會(huì)有一種需求，點(diǎn)擊某個(gè) FloatingActionButton 彈出更多 FloatingActionButton ，這個(gè)需求的一般思路是寫 n 個(gè) button 然后再一個(gè)個(gè)的去設(shè)置動(dòng)畫效果。但這實(shí)在是太麻煩了，所以網(wǎng)上有個(gè) FloatingActionButtonMenu 這個(gè)開源庫(kù)，這就是利用到了自定義布局「ViewGroup」，現(xiàn)在就讓我給他家介紹下，如何自定義布局「layout」。

難點(diǎn)

相比于自定義 View ，自定義 ViewGroup 的難點(diǎn)在于，子控件位置的確定和布局大小的確定。不像單個(gè) View 子要花粉好模式，測(cè)量好寬度就搞定了，ViewGroup 的長(zhǎng)寬根據(jù)子 View 的數(shù)量和單個(gè)的大小變化而變化。這就是最大的坎，所以該如何確定 ViewGroup 的大小呢？

步驟

這里我為大家設(shè)計(jì)一個(gè) 類似 LinearLayout 線性布局的 ViewGroup 作為范例。

首先，如果是一個(gè) LinearLayout 那么當(dāng)設(shè)置 wrap_content 時(shí)，他就會(huì)以子空間中最寬的那個(gè)為它的寬度。同時(shí)在高度方面會(huì)是所有子控件高度的總和。所以我們先寫兩個(gè)方法，分別用于測(cè)量 ViewGroup 的寬度和高度。

 private int getMaxWidth(){
  int count = getChildCount();
  int maxWidth = 0;
  for (int i = 0 ; i < count ; i ++){
   int currentWidth = getChildAt(i).getMeasuredWidth();
   if (maxWidth < currentWidth){
    maxWidth = currentWidth;
   }
  }
  return maxWidth;
 }
 
 private int getTotalHeight(){
  int count = getChildCount();
  int totalHeight = 0;
  for (int i = 0 ; i < count ; i++){
   totalHeight += getChildAt(i).getMeasuredHeight();
  }
  return totalHeight;
 }

對(duì)于 ViewGroup 而言我們可以粗略的分為兩種模式：固定長(zhǎng)寬模式（match_parent），自適應(yīng)模式（wrap_content），根據(jù)這兩種模式，就可以對(duì) ViewGroup 的繪制進(jìn)行劃分。這里關(guān)于 measureChildren 這個(gè)方法，他是用于將所有的子 View 進(jìn)行測(cè)量，這會(huì)觸發(fā)每個(gè)子 View 的 onMeasure 函數(shù)，但是大家要注意要與 measureChild 區(qū)分，measureChild 是對(duì)單個(gè) view 進(jìn)行測(cè)量

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 
  measureChildren(widthMeasureSpec, heightMeasureSpec);
 
  int widthMode = MeasureSpec.getMode(widthMeasureSpec);
  int width  = MeasureSpec.getSize(widthMeasureSpec);
  int heightMode= MeasureSpec.getMode(heightMeasureSpec);
  int height = MeasureSpec.getSize(heightMeasureSpec);
 
  if (widthMode == MeasureSpec.AT_MOST && heightMode == MeasureSpec.AT_MOST){
   int groupWidth = getMaxWidth();
   int groupHeight= getTotalHeight();
 
   setMeasuredDimension(groupWidth, groupHeight);
  }else if (widthMode == MeasureSpec.AT_MOST){
   setMeasuredDimension(getMaxWidth(), height);
  }else if (heightMode == MeasureSpec.AT_MOST){
   setMeasuredDimension(width, getTotalHeight());
  }
 }

重寫 onLayout

整完上面這些東西，我們的布局大小七十九已經(jīng)出來(lái)了，然我們?cè)诨顒?dòng)的布局文件里面加上它，并添加上幾個(gè)子 View 然后運(yùn)行一下，先看看效果：

 <com.entry.android_view_user_defined_first.views.MyLinearLayout
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:background="@color/colorAccent">
 
  <Button
   android:layout_width="100dp"
   android:layout_height="50dp"
   android:text="qwe"/>
 
  <Button
   android:layout_width="250dp"
   android:layout_height="150dp"
   android:text="qwe"/>
 
  <Button
   android:layout_width="200dp"
   android:layout_height="75dp"
   android:text="qwe"/>
 
 </com.entry.android_view_user_defined_first.views.MyLinearLayout>

運(yùn)行效果如下：

我們看見布局出來(lái)了，大小好像也沒啥問題，但是子 View 呢？？！這么沒看見子 View 在看看代碼，系統(tǒng)之前然我們重寫的 onLayout() 還是空著的呀??！也就是說(shuō)，子 View 的大小和位置根本就還沒有進(jìn)行過(guò)設(shè)定！讓我們來(lái)重寫下 onLayout() 方法。

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
  int count = getChildCount();
  int currentHeight = 0;
  for (int i = 0 ; i < count ; i++){
   View view = getChildAt(i);
   int height = view.getMeasuredHeight();
   int width = view.getMeasuredWidth();
   view.layout(l, currentHeight, l + width, currentHeight + height);
   currentHeight += height;
  }
 }

再運(yùn)行一下看看：