Android 進階自定義 ViewGroup 自定義布局

前言

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

再運行一下看看：

成功了有木有！

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

最后，祝大家編程愉快！