點擊后弧形展開的炫酷菜單--第三方開源-- CircularFloatingActionMenu（一）

 

 

 

CircularFloatingActionMenu在github上項目主頁地址：https://github.com/oguzbilgener/CircularFloatingActionMenu

代碼結構圖：

 

測試代碼：

package com.zzw.testcircularfloatingactionmenu;

import com.oguzdev.circularfloatingactionmenu.library.FloatingActionButton;
import com.oguzdev.circularfloatingactionmenu.library.FloatingActionMenu;
import com.oguzdev.circularfloatingactionmenu.library.FloatingActionMenu.MenuStateChangeListener;
import com.oguzdev.circularfloatingactionmenu.library.SubActionButton;

import android.animation.ObjectAnimator;
import android.animation.PropertyValuesHolder;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;

/**
 * 一個FloatingActionButton有一個FloatingActionMenu，FloatingActionMenu添加動畫彈出的子菜單。
 * FloatingActionButton的按鈕點擊事件將觸發、彈出FloatingActionMenu中包含的子菜單。
 * FloatingActionMenu使用attachTo方法附着在一個FloatingActionButton上。
 * FloatingActionMenu在attachTo到一個FloatingActionButton后，兩者之間發生關聯。
 * FloatingActionMenu在添加子菜單時候，首先需要一個SubActionButton.Builder，該SubActionButton.
 * Builder通過setContentView(ImageView
 * image).build()把一個ImageView創建生產一個SubActionButton ,
 * 然后通過FloatingActionMenu.Builder的add方法把前面生成的SubActionButton添加進去。
 * 
 * 按鈕的旋轉動畫在onMenuOpened和onMenuClosed中做。
 * 
 */

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        rightLowerButton();

        leftCenterButton();
    }

    // 右下角的菜單
    private void rightLowerButton() {
        final ImageView fabIconNew = new ImageView(this);
        // 設置菜單按鈕Button的圖標
        fabIconNew.setImageResource(R.drawable.ic_action_new_light);
        final FloatingActionButton rightLowerButton = new FloatingActionButton.Builder(
                this).setContentView(fabIconNew).build();

        SubActionButton.Builder rLSubBuilder = new SubActionButton.Builder(this);

        ImageView rlIcon1 = new ImageView(this);
        ImageView rlIcon2 = new ImageView(this);
        ImageView rlIcon3 = new ImageView(this);
        ImageView rlIcon4 = new ImageView(this);
        // 設置彈出菜單的圖標
        rlIcon1.setImageResource(R.drawable.ic_launcher);
        rlIcon2.setImageResource(R.drawable.ic_launcher);
        rlIcon3.setImageResource(R.drawable.ic_launcher);
        rlIcon4.setImageResource(R.drawable.ic_launcher);

        final FloatingActionMenu rightLowerMenu = new FloatingActionMenu.Builder(
                this)
                .addSubActionView(rLSubBuilder.setContentView(rlIcon1).build())
                .addSubActionView(rLSubBuilder.setContentView(rlIcon2).build())
                .addSubActionView(rLSubBuilder.setContentView(rlIcon3).build())
                .addSubActionView(rLSubBuilder.setContentView(rlIcon4).build())
                .attachTo(rightLowerButton).build();

        rightLowerMenu.setStateChangeListener(new MenuStateChangeListener() {

            @Override
            public void onMenuOpened(FloatingActionMenu menu) {
                // 逆時針旋轉90°
                fabIconNew.setRotation(0);
                PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat(
                        View.ROTATION, -90);

                ObjectAnimator animation = ObjectAnimator
                        .ofPropertyValuesHolder(fabIconNew, pvhR);
                animation.start();
            }

            @Override
            public void onMenuClosed(FloatingActionMenu menu) {
                // 順時針旋轉90°
                fabIconNew.setRotation(-90);
                PropertyValuesHolder pvhR = PropertyValuesHolder.ofFloat(
                        View.ROTATION, 0);
                ObjectAnimator animation = ObjectAnimator
                        .ofPropertyValuesHolder(fabIconNew, pvhR);
                animation.start();

            }
        });
    }

    //左邊中心位置的菜單
    private void leftCenterButton() {
        int redActionButtonSize = getResources().getDimensionPixelSize(
                R.dimen.red_action_button_size);
        int redActionButtonMargin = getResources().getDimensionPixelOffset(
                R.dimen.action_button_margin);
        int redActionButtonContentSize = getResources().getDimensionPixelSize(
                R.dimen.red_action_button_content_size);
        int redActionButtonContentMargin = getResources()
                .getDimensionPixelSize(R.dimen.red_action_button_content_margin);

        int redActionMenuRadius = getResources().getDimensionPixelSize(
                R.dimen.red_action_menu_radius);
        int blueSubActionButtonSize = getResources().getDimensionPixelSize(
                R.dimen.blue_sub_action_button_size);
        int blueSubActionButtonContentMargin = getResources()
                .getDimensionPixelSize(
                        R.dimen.blue_sub_action_button_content_margin);

        ImageView fabIconStar = new ImageView(this);
        fabIconStar.setImageResource(R.drawable.star);

        // 設置菜單按鈕Button的寬、高，邊距
        FloatingActionButton.LayoutParams starParams = new FloatingActionButton.LayoutParams(
                redActionButtonSize, redActionButtonSize);
        starParams.setMargins(redActionButtonMargin, redActionButtonMargin,
                redActionButtonMargin, redActionButtonMargin);
        fabIconStar.setLayoutParams(starParams);

        // 設置菜單按鈕Button里面圖案的寬、高，邊距
        FloatingActionButton.LayoutParams fabIconStarParams = new FloatingActionButton.LayoutParams(
                redActionButtonContentSize, redActionButtonContentSize);
        fabIconStarParams.setMargins(redActionButtonContentMargin,
                redActionButtonContentMargin, redActionButtonContentMargin,
                redActionButtonContentMargin);

        final FloatingActionButton leftCenterButton = new FloatingActionButton.Builder(
                this).setContentView(fabIconStar, fabIconStarParams)
                .setBackgroundDrawable(R.drawable.button_action_red_selector)
                .setPosition(FloatingActionButton.POSITION_LEFT_CENTER)
                .setLayoutParams(starParams).build();

        SubActionButton.Builder lCSubBuilder = new SubActionButton.Builder(this);
        lCSubBuilder.setBackgroundDrawable(getResources().getDrawable(
                R.drawable.button_action_blue_selector));

        //設置菜單中圖標的參數
        FrameLayout.LayoutParams blueContentParams = new FrameLayout.LayoutParams(
                FrameLayout.LayoutParams.MATCH_PARENT,
                FrameLayout.LayoutParams.MATCH_PARENT);
        blueContentParams.setMargins(blueSubActionButtonContentMargin,
                blueSubActionButtonContentMargin,
                blueSubActionButtonContentMargin,
                blueSubActionButtonContentMargin);
        
        lCSubBuilder.setLayoutParams(blueContentParams);  
        
        //設置布局參數
        FrameLayout.LayoutParams blueParams = new FrameLayout.LayoutParams(blueSubActionButtonSize,  
                blueSubActionButtonSize);  
        lCSubBuilder.setLayoutParams(blueParams); 
        
        ImageView lcIcon1 = new ImageView(this);  
        ImageView lcIcon2 = new ImageView(this);  
        ImageView lcIcon3 = new ImageView(this);  
        ImageView lcIcon4 = new ImageView(this);  
        ImageView lcIcon5 = new ImageView(this);  
        
        lcIcon1.setImageResource(R.drawable.ic_launcher);
        lcIcon2.setImageResource(R.drawable.ic_launcher);
        lcIcon3.setImageResource(R.drawable.ic_launcher);
        lcIcon4.setImageResource(R.drawable.ic_launcher);
        lcIcon5.setImageResource(R.drawable.ic_launcher);
        
        //setStartAngle(70).setEndAngle(-70)設置擴展菜單的位置
        final FloatingActionMenu leftCenterMenu=new FloatingActionMenu.Builder(this)
        .addSubActionView(lCSubBuilder.setContentView(lcIcon1, blueContentParams).build())
        .addSubActionView(lCSubBuilder.setContentView(lcIcon2, blueContentParams).build())
        .addSubActionView(lCSubBuilder.setContentView(lcIcon3, blueContentParams).build())
        .addSubActionView(lCSubBuilder.setContentView(lcIcon4, blueContentParams).build())
        .addSubActionView(lCSubBuilder.setContentView(lcIcon5, blueContentParams).build())
        .setRadius(redActionMenuRadius).setStartAngle(70).setEndAngle(-70)
        .attachTo(leftCenterButton).build();  
    }

}

需要的具體xml見demo