前言

在我們的實際應用中， 經常需要用到自定義控制元件，比如自定義圓形頭像，自定義計步器等等。但有時我們不僅需要自定義控制元件，舉個例子，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;
        }
    }

再執行一下看看：

成功了有木有！

由於本文是自己學習過程的總結，如果文中有錯誤，希望大家能在評論區指出

最後，祝大家程式設計愉快