Android進階教程之ViewGroup自定義佈局

這篇文章主要給大家介紹了關於Android進階教程之ViewGroup自定義佈局的相關資料,文中通過示例代碼介紹的非常詳細,對各位Android開發者們具有一定的參考學習價值,需要的朋友們下面來一起學習學習吧

前言

在我們的實際應用中, 經常需要用到自定義控件,比如自定義圓形頭像,自定義計步器等等。但有時我們不僅需要自定義控件,舉個例子,FloatingActionButton 大家都很常用,所以大家也很經常會有一種需求,點擊某個 FloatingActionButton 彈出更多 FloatingActionButton ,這個需求的一般思路是寫 n 個 button 然後再一個個的去設置動畫效果。但這實在是太麻煩了,所以網上有個 FloatingActionButtonMenu 這個開源庫,這就是利用到了自定義佈局 「ViewGroup」,現在就讓我給他家介紹下,如何自定義佈局 「layout」。

難點

相比於自定義 View ,自定義 ViewGroup 的難點在於,子控件位置的確定和佈局大小的確定。不像 單個 View 子要花粉好模式,測量好寬度就搞定了,ViewGroup 的長寬根據子 View 的數量和單個的大小變化而變化。這就是最大的坎,所以該如何確定 ViewGroup 的大小呢?

步驟

這裏 我爲大家設計一個 類似 LinearLayout 線性佈局的 ViewGroup 作爲範例。

首先,如果是一個 LinearLayout 那麼當設置 wrap_content 時,他就會以子空間中最寬的那個爲它的寬度。同時在高度方面會是所有子控件高度的總和。所以我們先寫兩個方法,分別用於測量 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;
 }

對於 ViewGroup 而言我們可以粗略的分爲兩種模式:固定長寬模式(match_parent),自適應模式(wrap_content),根據這兩種模式,就可以對 ViewGroup 的繪製進行劃分。這裏關於 measureChildren 這個方法,他是用於將所有的子 View 進行測量,這會觸發每個子 View 的 onMeasure 函數,但是大家要注意要與 measureChild 區分,measureChild 是對單個 view 進行測量

 @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

整完上面這些東西,我們的佈局大小七十九已經出來了,然我們在活動的佈局文件裏面加上它,並添加上幾個子 View 然後運行一下,先看看效果:

 <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>

運行效果如下:


我們看見佈局出來了,大小好像也沒啥問題,但是子 View 呢??! 這麼沒看見子 View 在看看代碼,系統之前然我們重寫的 onLayout() 還是空着的呀!!也就是說,子 View 的大小和位置根本就還沒有進行過設定!讓我們來重寫下 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;
  }
 }

再運行一下看看:


成功了有木有!

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對神馬文庫的支持。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章