Tumblr炫酷的可滑动的悬浮按钮SpringFloatingActionBar

有幸了解到Tumblr这个应用，他的发布信息按钮是一个可以滑动的悬浮按钮，tumblr效果及demo实现效果如下：

• 按钮拖动到一个地方后，它会自动的返回右下角
• tumblr点击按钮后是一种动画效果
• demo有两种动画效果，第一种与tumblr相同，第二种是将这些按钮平铺

 

      

 

在github里，找到了实现此功能的两位大神，然后自己将两种都实现了一遍，高手二支持依赖引用，对于其他的开发者非常有帮助，这里只对这种效果实现。

 

思路一：https://github.com/xmuSistone/android-snake-menu（可以在github那找到大神的样例下载预览）

• （新建几个类来辅助实现）
• 使用ViewDragHelper
• 使用谷歌的rebound
• （高手实现了动画效果，但没有实现静止按钮的单击操作）

 

思路二：https://github.com/lusccc/SpringFloatingActionMenu（可以在github那找到大神的样例下载预览）

• 添加依赖：compile 'com.tiancaicc.springfloatingactionmenu:library:0.0.2'
• 在MainActivity里实现自己的效果
• （高手封装了两种动画类型，实现了图二的两种效果）
• （需要使用自己的ToolBar，定义全屏效果，这样也比较好看）
• 可以自定义按钮的大背景颜色、每个按钮的背景颜色

思路二的Mainactivity代码（资源文件在github寻找）

package com.easy.snakemenu2;

import android.content.Intent;
import android.content.res.Resources;
import android.graphics.drawable.AnimationDrawable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import com.melnykov.fab.FloatingActionButton;
import com.tiancaicc.springfloatingactionmenu.MenuItemView;
import com.tiancaicc.springfloatingactionmenu.OnMenuActionListener;
import com.tiancaicc.springfloatingactionmenu.SpringFloatingActionMenu;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private static int[] frameAnimRes = new int[]{
            R.mipmap.compose_anim_1,
            R.mipmap.compose_anim_2,
            R.mipmap.compose_anim_3,
            R.mipmap.compose_anim_4,
            R.mipmap.compose_anim_5,
            R.mipmap.compose_anim_6,
            R.mipmap.compose_anim_7,
            R.mipmap.compose_anim_8,
            R.mipmap.compose_anim_9,
            R.mipmap.compose_anim_10,
            R.mipmap.compose_anim_11,
            R.mipmap.compose_anim_12,
            R.mipmap.compose_anim_13,
            R.mipmap.compose_anim_14,
            R.mipmap.compose_anim_15,
            R.mipmap.compose_anim_15,
            R.mipmap.compose_anim_16,
            R.mipmap.compose_anim_17,
            R.mipmap.compose_anim_18,
            R.mipmap.compose_anim_19
    };
    private Button btn;
    private SpringFloatingActionMenu springFloatingActionMenu;
    private int frameDuration = 20;
    private AnimationDrawable frameAnim;
    private AnimationDrawable frameReverseAnim;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        createFabFrameAnim();
        createFabReverseFrameAnim();

        btn = (Button) findViewById(R.id.another_animation);//跳转到第二个界面
        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Intent intent = new Intent(MainActivity.this, SecondActivity.class);
                startActivity(intent);
            }
        });
        //必须手动创建FAB, 并设置属性
        final FloatingActionButton fab = new FloatingActionButton(this);
        fab.setType(FloatingActionButton.TYPE_NORMAL);
        fab.setImageDrawable(frameAnim);
        //ab.setImageResource(android.R.drawable.ic_dialog_email);
        fab.setColorPressedResId(R.color.colorPrimary);
        fab.setColorNormalResId(R.color.fab);
        fab.setColorRippleResId(R.color.text_color);
        fab.setShadow(true);
        springFloatingActionMenu = new SpringFloatingActionMenu.Builder(this)
                .fab(fab)
                //添加菜单按钮参数依次是背景颜色,图标,标签,标签的颜色,点击事件
                .addMenuItem(R.color.photo, R.mipmap.ic_messaging_posttype_photo, "Photo", R.color.text_color, this)
                .addMenuItem(R.color.link, R.mipmap.ic_messaging_posttype_link, "Link", R.color.text_color, this)
                .addMenuItem(R.color.chat, R.mipmap.ic_messaging_posttype_chat, "Chat", R.color.text_color, this)
                .addMenuItem(R.color.audio, R.mipmap.ic_messaging_posttype_audio, "Audio", R.color.text_color, this)
                .addMenuItem(R.color.video, R.mipmap.ic_messaging_posttype_video, "Video", R.color.text_color, this)
                .addMenuItem(R.color.text, R.mipmap.ic_messaging_posttype_text, "Text", R.color.text_color, this)
                .addMenuItem(R.color.quote, R.mipmap.ic_messaging_posttype_quote, "Quote", R.color.text_color, this)
                .animationType(SpringFloatingActionMenu.ANIMATION_TYPE_TUMBLR)//设置动画类型
                .revealColor(R.color.colorPrimary)//设置reveal效果的颜色
                .gravity(Gravity.RIGHT | Gravity.BOTTOM)//设置FAB的位置,只支持底部居中和右下角的位置
                .onMenuActionListner(new OnMenuActionListener() {
                    @Override
                    public void onMenuOpen() {//设置FAB的icon当菜单打开的时候
                        fab.setImageDrawable(frameAnim);
                        frameReverseAnim.stop();
                        frameAnim.start();
                    }

                    @Override
                    public void onMenuClose() {//设置回FAB的图标当菜单关闭的时候
                        fab.setImageDrawable(frameReverseAnim);
                        frameAnim.stop();
                        frameReverseAnim.start();
                    }
                })
                .build();

//        Toolbar mToolbar = (Toolbar) findViewById(R.id.toolbar);
//        setSupportActionBar(mToolbar);
//        setTitle("SpringFloatingActionMenu");
    }

    private void createFabFrameAnim() {
        frameAnim = new AnimationDrawable();
        frameAnim.setOneShot(true);
        Resources resources = getResources();
        for (int res : frameAnimRes) {
            frameAnim.addFrame(resources.getDrawable(res), frameDuration);
        }
    }

    private void createFabReverseFrameAnim() {
        frameReverseAnim = new AnimationDrawable();
        frameReverseAnim.setOneShot(true);
        Resources resources = getResources();
        for (int i = frameAnimRes.length - 1; i >= 0; i--) {
            frameReverseAnim.addFrame(resources.getDrawable(frameAnimRes[i]), frameDuration);
        }
    }

    @Override
    public void onBackPressed() {
        if (springFloatingActionMenu.isMenuOpen()) {
            springFloatingActionMenu.hideMenu();
        } else {
            super.onBackPressed();
        }
    }

    @Override
    public void onClick(View v) {
        Log.d("TAG eg", "onclick");
        MenuItemView menuItemView = (MenuItemView) v;
        Toast.makeText(this, menuItemView.getLabelTextView().getText(), Toast.LENGTH_SHORT).show();
    }
}