FloatingActionButton 之實現衛星菜單

最近遇到了實現衛星菜單效果的需求，使用的是FloatingActionButton/FloatingActionMenu這個控件。總結一下使用心得。

先看大致的效果圖：

Demo地址：GitHub

總結一下FAB的使用方法：
一、首先引入一下library
需要這些：這個library在Demo中有

在工程的主Module中的build.gradle文件、工程目錄下的settings.gradle文件下添加：

// 在build.gradle中
compile project(':library')
// 在settings.gradle中
include ':library'

二、使用FAB/FAM
廢話不說，核心代碼：
1. 衛星菜單的中間按鈕
1> 初始化

    /** 1.初始化一箇中間按鈕的View，根據自己的需要進行佈局，這個佈局表示的是中間按鈕的樣式*/
    View centerView = 
    mInflater.inflate(R.layout.item_grid_apps, null);

    /** 2.初始化一個FAB控件*/
    FloatingActionButton centerButton = 
    (FloatingActionButton) mInflater.inflate(R.layout.apps_item_centerbutton, parent, false);

2> 對中間控件進行設置

    /** 1.關聯中間按鈕的View和中間按鈕控件*/
    centerButton.setContentView(centerView, contentParams);

    /** 2.設置中間按鈕的焦點selector*/
    centerButton.setBackgroundResource(R.drawable.button_action_selector);

    /** 3.設置中間按鈕的相對父控件位置
    centerButton.setPosition(FloatingActionButton.POSITION_CENTER, layoutParams);

• 值得注意的是，這其中的兩個Params變量都是FloatingActionButton.LayoutParams類型。一個表示設置中間View的尺寸，一個表示按鈕的尺寸。

2.衛星菜單的初始化
1>衛星菜單構造器的創建和設置

    /** 1.初始化衛星菜單構造器*/
    SubActionButton.Builder subBuilder = new SubActionButton.Builder(context);

    /** 2.設置衛星菜單的按鈕的焦點selector*/
    subBuilder.setBackgroundDrawable(context.getResources().getDrawable(R.drawable.unfocused_background));

2>準備一些子菜單的材料
主要是根據需要編寫衛星按鈕的佈局樣式並且膨脹出來
3> 初始化衛星菜單並進行設置

    /** 一口氣寫下去*/
    FloatingActionMenu childMenu = new FloatingActionMenu.Builder(context)
        // 這個方法主要是要添加衛星菜單的各個按鈕，這裏添加了四個SubActionButton
        // build方法是用來創建SubActionButton的，其中各自關聯了自己的View
        .addSubActionView(subBuilder.setContentView(Views.get(0)).build())
        .addSubActionView(subBuilder.setContentView(Views.get(1)).build())
        .addSubActionView(subBuilder.setContentView(Views.get(2)).build())
        .addSubActionView(subBuilder.setContentView(Views.get(3)).build())
        // 將衛星菜單附着在中間按鈕上
        .attachTo(centerButton)
        // 設置衛星菜單的第一個按鈕所在的角位置
        .setStartAngle(0)
        // 設置衛星菜單的最後一個按鈕所在的角位置，這樣設置爲0 360表示360度均布4個按鈕
        .setEndAngle(360)
        // 分方向(x和y軸)衛星按鈕到中間按鈕的中心的距離，就像是半徑一樣
        .setRadius(radiusX, radiusY)
        // 一定不能忘記這個！！
        .build();

4> 監聽和其他操作
主要用來你按下了衛星菜單的衛星按鈕時要做什麼反應，在這裏實現。

childMenu.setStateChangeListener(new FloatingActionMenu.MenuStateChangeListener() {
            @Override
            public void onMenuOpened(FloatingActionMenu menu) {
            }

            @Override
            public void onMenuClosed(FloatingActionMenu menu) {
            }
        });

好了完成了基本使用。

還可以根據自己的業務需要實現MenuAnimationHandler，可以設置自己的菜單彈出動畫。

———————-不怎麼華麗的分割線————————————