（一）自定義ViewGroup繪制出菜單

      從網上學習了hyman大神的衛星菜單實現，自己特意親自又寫了一編代碼，對自定義ViewGroup的理解又深入了一點。我堅信只有自己寫出來的知識才會有更加好的的掌握。因此也在自己的博客中將這個衛星菜單的案例給實現了。廢話不多說，直接進入正題吧。

      該案例的完整代碼以及相關的圖片素材下載鏈接如下：

http://download.csdn.net/detail/fuyk12/9233573

 

一、效果展示

      首先上一張效果圖，如下：

 

       這是在模擬器上的運行效果，有點卡頓。在真機上，是會很流暢，而且動畫效果顯示的會更清晰。

      效果說明：紅色按鈕是菜單按鈕，點擊它，會彈出菜單選項。菜單選項會像一個四分之一圓一樣圍繞在菜單按鈕周圍。而菜單的彈出采用了動畫效果。如果點擊菜單，則同時菜單消失且會彈出一個提示框。更具體的細節效果，看上面的效果圖應該很明白了。

      所用的知識：（1）自定義ViewGroup。整個菜單的繪制就是一個自定義的ViewGroup。所以這其中要清楚理解view的繪制流程，還要掌握住自定義屬性等知識。

                        （2）android中的常用的補間動畫，例如菜單的彈出就是平移動畫和旋轉動畫的結合。而點擊菜單時，是縮放動畫和透明動畫的實現。

     難點：我們android的補間動畫實際上視覺上的一種錯覺，比如一個按鈕你看到它平移了，實際上它只是android在另外一個地方重新繪制了，並不是原來的按鈕，原來的按鈕還　　　　  在初始位置，因此你點擊它是沒有效果的。為了解決這個問題，android推出了屬性動畫。但是屬性動畫向下兼容性不是很好。為了解決這樣子的難點，我們依舊采用補                 間 動畫，但是在邏輯上做了一個巧妙的處理。具體的怎么處理，等到了這一步，再詳細說明。

     實現這個案例的思路：我們打算分這么幾步來實現這個衛星菜單。

                                 （1）首先將各個菜單以及按鈕給完整的繪制出來。即完成自定義ViewGroup。

                                 （2）完成菜單的彈出動畫。

                                 （3）完成菜單的點擊動畫。

                                 （4）完成菜單點擊事件的邏輯，比如彈出提示框。

       因此這是一個實戰的案例，不是基礎知識的講解。需要讀者具有相關的知識后才能很好的閱讀。那么本篇文章就來實現第一步，即將整個菜單給繪制出來。

二、自定義ViewGruop完成菜單繪制

       從菜單按鈕以及菜單選項，都是一個自定義的ViewGroup。從效果圖上可以看到，菜單選項以一個四分之一圓的方式圍繞菜單。因此這個自定義的ViewGroup需要具有圓的半徑這個屬性。效果圖中只展示了按鈕位於右下角的情況，其實那個加號按鈕完全可以放在左上，左下，右上。因此，我們給這個自定義的ViewGroup再添加一個屬性，為位置屬性。這樣子一來，用戶就可以放在四個角的其他位置了。這些分析，其實就是自定義屬性里面的內容。表現在代碼中，如下所示。

        新建項目，然后再res下的values文件下新建attrs.xml文件，其中的代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    
    <attr name="position">
        <enum name="left_top" value= "0"/>
        <enum name="left_bottom" value= "1"/>
        <enum name="right_top" value= "2"/>
        <enum name="right_bottom" value= "3"/>
    </attr>
    <attr name="radius" format="dimension"/>
    
    <declare-styleable name = "ArcMenu">
       <attr name="position"/>
        <attr name="radius"/>
    </declare-styleable>
    
</resources>

      從代碼中，可以看到我們定義了一個屬性集合“ArcMenu"，其中有兩個屬性"position"和"radius”，對應於自定義ViewGruop的位置和需要的半徑。其實ArcMenu就是我們自定義ViewGroup的名稱。我們先將其建立出來。

      新建類ArcMenu繼承自ViewGroup，代碼如下：

package com.example.menu;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.ViewGroup;

public class ArcMenu extends ViewGroup {
    
    
    public ArcMenu(Context context) {
        this(context,null);
    }
    public ArcMenu(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }
    public ArcMenu(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        
        }
    
}

      代碼很簡單，我們沒有做任何操作。下面要做的就是把這個自定義的ViewGroup添加到布局中，並向里面添加控件，即我們的菜單。

      修改activity_main.xml中的代碼，如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:kun="http://schemas.android.com/apk/res/com.example.menu"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <com.example.menu.ArcMenu
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        kun:position="right_bottom"
        kun:radius="200dp">
        <RelativeLayout 
               android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/composer_button" >
            <ImageView 
                android:id="@+id/id_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                 android:layout_centerInParent="true"
                android:src="@drawable/composer_icn_plus"/>
        </RelativeLayout>
         <ImageView 
               android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/composer_camera"
                android:tag="Camera"/>
         <ImageView 
               android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                android:src="@drawable/composer_music"
                android:tag="Music"/>
         <ImageView 
               android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                android:src="@drawable/composer_place"
                android:tag="Place"/>
         <ImageView 
               android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                android:src="@drawable/composer_sleep"
                android:tag="Sleep"/>
          <ImageView 
               android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                android:src="@drawable/composer_thought"
                android:tag="Thought"/>
          <ImageView 
                android:layout_width="wrap_content"
                  android:layout_height="wrap_content"
                android:src="@drawable/composer_with"
                android:tag="People"/>
        
    </com.example.menu.ArcMenu>

  
</LinearLayout>

         大體是一個線性布局。然后在里面放入了自定義的ViewGroup，即ArcMenu。注意在第11行和第12行我們為ArcMenu指定了位置為右下，半徑為200dp。你可以完全指定不同的位置和大小。而且我們在ArcMenu里面放入了好幾個ImageView，這些ImageView就是我們的菜單，至於圖片資源可以單擊文章開頭的鏈接下載。ImageView的個數，你完全可以自己來定，在這里我們放入了6個,，也就是有6個菜單選項。並且為每一個ImageView都指定了tag。這有什么用呢，先不用管它。你或許會有疑問，這些ImageView是怎么擺放的啊？所以接下來，趕快修改ArcMenu中的代碼，將這個控件都擺放好。

 

         ArcMenu中的代碼先貼出來吧，然后再解釋，如下：

package com.example.menu;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.ViewGroup;

public class ArcMenu extends ViewGroup implements  OnClickListener {
    /**
     * 菜單按鈕
     */
    private View mCBMenu;
    /**
     * 菜單的位置，為枚舉類型
     * @author fuly1314
     *
     */
    private enum Position
    {
        LEFT_TOP,LEFT_BOTTOM,RIGHT_TOP,RIGHT_BOTTOM
    }
    /**
     * 菜單的狀態
     * @author fuly1314
     *
     */
    private enum Status
    {
        OPEN,CLOSE
    }
    /**
     * 菜單為當前位置，默認為RIGHT_BOTTOM，在后面我們可以獲取到
     */
    private Position mPosition = Position.RIGHT_BOTTOM;
    /**
     * 菜單的當前狀態,默認為開啟
     */
    private Status mCurStatus = Status.OPEN;
    
    /**
     * 菜單的半徑，默認為120dp
     */
    private int mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150,
            getResources().getDisplayMetrics());

    
    
    public ArcMenu(Context context) {
        this(context,null);
    }
    public ArcMenu(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }
    public ArcMenu(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ArcMenu, defStyle, 0);
        //獲取到菜單設置的位置
        int position = ta.getInt(R.styleable.ArcMenu_position, 3);
        
        switch(position){
        case 0:
            mPosition = Position.LEFT_TOP;
            break;
        case 1:
            mPosition = Position.LEFT_BOTTOM;
            break;
        case 2:
            mPosition = Position.RIGHT_TOP;
            break;
        case 3:
            mPosition = Position.RIGHT_BOTTOM;
            break;
        }
        
        //獲取到菜單的半徑
        mRadius = (int) ta.getDimension(R.styleable.ArcMenu_radius,
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120,
                        getResources().getDisplayMetrics()));            
        ta.recycle();
        
    }
    
    
    
    /**
     * 測量各個子View的大小
     */
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
    {
        int count = getChildCount();//獲取子view的數量
        
        for(int i=0;i<count;i++)
        {
            //測量子view的大小
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 擺放各個子view的位置
     */
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
        if(changed)//如果發生了改變，就重新布局
        {
            layoutMainMenu();//菜單按鈕的布局
            
        }

        
    }
    /**
     * 菜單按鈕的布局
     */
    private void layoutMainMenu() {
        
         mCBMenu = getChildAt(0);//獲得主菜單按鈕
         
         mCBMenu.setOnClickListener(this);
        
        int left=0;
        int top=0;
        
        switch(mPosition)
        {
        case LEFT_TOP:
            left = 0;
            top = 0;
            break;
        case LEFT_BOTTOM:
            left = 0;
            top = getMeasuredHeight() - mCBMenu.getMeasuredHeight();
            break;
        case RIGHT_TOP:
            left = getMeasuredWidth() - mCBMenu.getMeasuredWidth();
            top = 0;
            break;
        case RIGHT_BOTTOM:
            left = getMeasuredWidth() - mCBMenu.getMeasuredWidth();
            top = getMeasuredHeight() - mCBMenu.getMeasuredHeight();
            break;
        }
        
        mCBMenu.layout(left, top, left+mCBMenu.getMeasuredWidth(), top+mCBMenu.getMeasuredHeight());
    }
    /**
     * 菜單按鈕的點擊事件
     * @param v
     */
    public void onClick(View v) {
        //為菜單按鈕設置點擊動畫
        RotateAnimation rAnimation = new RotateAnimation(0f, 720f, Animation.RELATIVE_TO_SELF, 0.5f, 
                Animation.RELATIVE_TO_SELF, 0.5f);
        
        rAnimation.setDuration(300);
        
        rAnimation.setFillAfter(true);
        
        v.startAnimation(rAnimation);
        
    }

}

       代碼有點長，但是很簡單。首先是成員變量，我們需要知道當前菜單按鈕的位置，是放在右下了還是左上，還需要當前菜單的狀態，菜單已經折疊了還是已經打開了，更需要知道半徑，這樣才好設定菜單的位置啊，因此才有了這些成員變量。再然后就是在構造方法中獲取我們在布局中的給ArcMenu設定的位置屬性和半徑屬性，從而將成員變量初始化。

接着在onMeasure方法，對放進ArcMenu中的每個子view進行測量，這樣子就知道了每一個子view的大小，代碼很簡單，measureChild一下即可。然后就可以執行onLayout方法來擺放每一個子view的位置了。這里我們先擺放菜單按鈕的位置，因為它比較簡單。菜單，即布局中的ImageView先不管。然后又給菜單按鈕添加了點擊事件，即點擊的時候，要它自身旋轉一下。好了，代碼很簡單，看注釋很容易理解。我們運行下，看看效果。如下：

      右下角有個紅色的按鈕，點擊還有旋轉（由於貼出來的不是動態圖，因此旋轉效果小伙伴可以在自己的實驗中看到）。好了，菜單按鈕我們布局算是成功了。下面就開始布局那些菜單吧。

       關於這些菜單，即這些ImageView的布局，牽涉到簡單的數學知識。下面有一張我繪制的圖片，簡單來說明一下。

       假設菜單按鈕放在左上角，圍繞它的菜單如上圖，紅色的圈圈為代表。其中線段AB就是我們所設定的半徑的長度，用radius來表示。現在我們如果想求A點的坐標（其中A是對應菜單的頂點坐標），根據簡單的數學知識，就會得到如下結果：

x = radius * cos(a)
y = radius * sin(a)

      那么同樣的道理，對於第 i 個菜單，它的頂點坐標就如下可求：

x = radius * cos(a*i)
y = radius * sin(a*i）

     好了，現在回到我們的程序中來。要知道，在代碼中，你要注意以下問題：

（1）遍歷的子view的坐標是從0開始的。
（2）遍歷的子view包括菜單按鈕，因為我們要出去它。
（3）a的值應該是90除以菜單個數

      注意到上面的問題，再結合我們前面分析到的數學知識，很容易可以得到每一個子view的頂點坐標了，代碼如下：

for(int i=0;i<count-1;i++)
            {
                View childView = getChildAt(i+1);//注意這里過濾掉菜單按鈕，只要菜單選項view
                
                int left = (int) (mRadius*Math.cos(Math.PI/2/(count-2)*i));
                int top = (int) (mRadius*Math.sin(Math.PI/2/(count-2)*i));
                
                switch(mPosition)
                {
                
                case LEFT_TOP:
                    break;
                case LEFT_BOTTOM:
                    top = getMeasuredHeight() - top-childView.getMeasuredHeight();
                    break;
                case RIGHT_TOP:
                    left = getMeasuredWidth() - left-childView.getMeasuredWidth();
                    break;
                case RIGHT_BOTTOM:
                    left = getMeasuredWidth() - left-childView.getMeasuredWidth();
                    top = getMeasuredHeight() - top-childView.getMeasuredHeight();
                    break;
                }
}

       怎么會多出switch語句呢？這是因為比如菜單按鈕位於右下，則頂點坐標的高度應該是整體高度去掉控件本身的高度以及頂點高度。如下圖所示：

      swtich的其他語句相信小伙伴仔細想想應該很快就會明白為什么這么計算了吧。道理是一樣的。拿個本子，用筆畫畫就知道了

      講了那么多，我們就將上面我們所講的整合到代碼中。那么修改ArcMenu，擺放我們的菜單吧！代碼如下：

package com.example.menu;

import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.Animation;
import android.view.animation.RotateAnimation;
import android.view.ViewGroup;

public class ArcMenu extends ViewGroup implements OnClickListener{
    /**
     * 菜單按鈕
     */
    private View mCBMenu;
    /**
     * 菜單的位置，為枚舉類型
     * @author fuly1314
     *
     */
    private enum Position
    {
        LEFT_TOP,LEFT_BOTTOM,RIGHT_TOP,RIGHT_BOTTOM
    }
    /**
     * 菜單的狀態
     * @author fuly1314
     *
     */
    private enum Status
    {
        OPEN,CLOSE
    }
    /**
     * 菜單為當前位置，默認為RIGHT_BOTTOM，在后面我們可以獲取到
     */
    private Position mPosition = Position.RIGHT_BOTTOM;
    /**
     * 菜單的當前狀態,默認為開啟
     */
    private Status mCurStatus = Status.OPEN;
    
    /**
     * 菜單的半徑，默認為120dp
     */
    private int mRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 150,
            getResources().getDisplayMetrics());

    
    
    public ArcMenu(Context context) {
        this(context,null);
    }
    public ArcMenu(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }
    public ArcMenu(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.ArcMenu, defStyle, 0);
        //獲取到菜單設置的位置
        int position = ta.getInt(R.styleable.ArcMenu_position, 3);
        
        switch(position){
        case 0:
            mPosition = Position.LEFT_TOP;
            break;
        case 1:
            mPosition = Position.LEFT_BOTTOM;
            break;
        case 2:
            mPosition = Position.RIGHT_TOP;
            break;
        case 3:
            mPosition = Position.RIGHT_BOTTOM;
            break;
        }
        
        //獲取到菜單的半徑
        mRadius = (int) ta.getDimension(R.styleable.ArcMenu_radius,
                TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 120,
                        getResources().getDisplayMetrics()));            
        ta.recycle();
        
    }
    
    
    
    /**
     * 測量各個子View的大小
     */
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) 
    {
        int count = getChildCount();//獲取子view的數量
        
        for(int i=0;i<count;i++)
        {
            //測量子view的大小
            measureChild(getChildAt(i), widthMeasureSpec, heightMeasureSpec);
        }
        
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    /**
     * 擺放各個子view的位置
     */
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        
        if(changed)//如果發生了改變，就重新布局
        {
            layoutMainMenu();//菜單按鈕的布局
            /**
             * 下面的代碼為菜單的布局
             */
            int count = getChildCount();
            
120             for(int i=0;i<count-1;i++)
121             {
122                 View childView = getChildAt(i+1);//注意這里過濾掉菜單按鈕，只要菜單選項view
123                 
124                 int left = (int) (mRadius*Math.cos(Math.PI/2/(count-2)*i));
125                 int top = (int) (mRadius*Math.sin(Math.PI/2/(count-2)*i));
126                 
127                 switch(mPosition)
128                 {
129                 
130                 case LEFT_TOP:
131                     break;
132                 case LEFT_BOTTOM:
133                     top = getMeasuredHeight() - top-childView.getMeasuredHeight();
134                     break;
135                 case RIGHT_TOP:
136                     left = getMeasuredWidth() - left-childView.getMeasuredWidth();
137                     break;
138                 case RIGHT_BOTTOM:
139                     left = getMeasuredWidth() - left-childView.getMeasuredWidth();
140                     top = getMeasuredHeight() - top-childView.getMeasuredHeight();
141                     break;
142                 }
143                 
144                 childView.layout(left, top, left+childView.getMeasuredWidth(),
145                         top+childView.getMeasuredHeight());
146             }
147         }
148 
        
    }
    /**
     * 菜單按鈕的布局
     */
    private void layoutMainMenu() {
        
         mCBMenu = getChildAt(0);//獲得主菜單按鈕
         
         mCBMenu.setOnClickListener(this);
        
        int left=0;
        int top=0;
        
        switch(mPosition)
        {
        case LEFT_TOP:
            left = 0;
            top = 0;
            break;
        case LEFT_BOTTOM:
            left = 0;
            top = getMeasuredHeight() - mCBMenu.getMeasuredHeight();
            break;
        case RIGHT_TOP:
            left = getMeasuredWidth() - mCBMenu.getMeasuredWidth();
            top = 0;
            break;
        case RIGHT_BOTTOM:
            left = getMeasuredWidth() - mCBMenu.getMeasuredWidth();
            top = getMeasuredHeight() - mCBMenu.getMeasuredHeight();
            break;
        }
        
        mCBMenu.layout(left, top, left+mCBMenu.getMeasuredWidth(), top+mCBMenu.getMeasuredHeight());
    }
    /**
     * 菜單按鈕的點擊事件
     * @param v
     */
    public void onClick(View v) {
        //為菜單按鈕設置點擊動畫
        RotateAnimation rAnimation = new RotateAnimation(0f, 720f, Animation.RELATIVE_TO_SELF, 0.5f, 
                Animation.RELATIVE_TO_SELF, 0.5f);
        
        rAnimation.setDuration(300);
        
        rAnimation.setFillAfter(true);
        
        v.startAnimation(rAnimation);
        
    }

}

      注意紅色部分的代碼，這樣子我們就把每一個菜單擺放到位了。那么是不是呢？快運行一下程序，看看效果。如下：

       效果還不錯哈。至此，ArcMenu每一個子view都繪制出來了。我們下面要出來的就是菜單的動畫效果了。保存好現在的代碼，快快進入下一節中吧。《實現菜單彈出動畫》