Android自定义的FloatingActionButton效果

阳光穿透心脏的1/2处 2022-06-16 10:42 355阅读 0赞

# Android自定义的FloatingActionButton效果 #

### 现在Android的ActionBar功能已经很少人app使用了。但是有些页面还是需要这种按钮的操作（比如执行一些数据刷新或页面跳转的功能），就有了现在的悬浮效果的按钮，并且这个悬浮按钮可以设置在页面的任意位置！其实就是一个ImageButton，经过各种封装和处理后得到一个比较好看的效果。 ###

现在谷歌官方的Design包，已经右有FloatingActionButton这个类了，但是要求版本较高，所有现在很多编译器没法使用，我的也是，这里使用的是自定义的类。具体代码可以看源码，只有几个类，但是要添加一些资源文件。很多具体的属性可以自己修改。

### 效果（上下左右四种效果）： ###

![1][]

# 使用说明： #

## （一）包含的自定义类 ##

### 1.FloatingActionButton悬浮按钮的类 ###

是一个继承了IamgeButton的类，可以在布局中设置悬浮按钮的图片、文字、附带的文字等等数据

### 2.FloatingActionsMenu悬浮菜单，里面可以放多个悬浮按钮 ###

是一个继承了ViewGroup的容器类，里面可以放置多个悬浮按钮，可以指定按钮的方向，默认已经设置好了点击一次显示里面的悬浮按钮，第二次隐藏。  
悬浮菜单默认已经有一个悬浮按钮，即使里面不添加悬浮，按钮也是会默认显示一个。

### 3.继承了悬浮按钮的类，就加了一个mPlusColor属性，用来设置悬浮按钮的颜色，是用来扩展的吧？ ###

## （二）布局文件，及属性的详解 ##

使用的时候包名记得更改

## （三）java代码调用 ##

其实就是设置ImageButton的事件，单击事件就是onClick

### 这里展示下，右上角部分的逻辑代码： ###

package com.example.FloatingActionButton.activity;
    
    import android.app.Activity;
    import android.os.Bundle;
    import android.view.View;
    import android.widget.Toast;
    import com.example.FloatingActionButton.R;
    import com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton;
    import com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu;
    
    /**
     * 右上角的逻辑
     */
    public class RightTopActivity extends Activity {
        
    
        FloatingActionsMenu multiple_actions_down;
        FloatingActionButton removeAction;
        FloatingActionButton button_gone;
        FloatingActionButton action_enable;
    
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_right_top);
            initView();
            initData();
            initEvent();
        }
    
        private void initView() {
            multiple_actions_down = (FloatingActionsMenu) findViewById(R.id.multiple_actions_down);
            removeAction = (FloatingActionButton) findViewById(R.id.button_remove);
            button_gone = (FloatingActionButton) findViewById(R.id.button_gone);
            action_enable = (FloatingActionButton) findViewById(R.id.action_enable);
        }
    
        private void initData() {
            button_gone.setVisibility(View.GONE);
    
        }
    
        private void initEvent() {
            //监听点击事件
            removeAction.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    //删除某个对象，可以是自己
                    multiple_actions_down.removeButton(removeAction);
                    button_gone.setVisibility(View.VISIBLE);//刚开始隐藏的显示出来
                }
            });
    
            action_enable.setOnClickListener(new View.OnClickListener() {
                public void onClick(View v) {
                    Toast.makeText(RightTopActivity.this, "右边第二个按钮", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

### 它的布局文件： ###

### 上下左右四种效果，分开展示： ###

![2][]

后期，我对右上角部分页面资源文件进行了一点修改，效果：  
![3][]  
你也可以根据自己的需求，重新写一个style设置样式  
像下面图片的样式，还是不错的，写起来也不难，效果：  
![4][]

项目的源码：[https://github.com/liwenzhi/FloatingActionButton][https_github.com_liwenzhi_FloatingActionButton]  
大家包几个类和一些资源文件复制或下载下来就可以用了！

# 共勉： #

## 我们要学会狠忍静（很冷静） ##

### 狠：男人对自己狠一点才能有作为。 ###

### 忍：适当忍住一下欲望，你才能得到更多。 ###

### 静：静下心来才能好好想事情和做事情。 ###

![5][]

[1]: http://i.imgur.com/IOXrTnC.gif
[2]: http://i.imgur.com/zY7gln0.gif
[3]: http://i.imgur.com/BtD0WrO.png
[4]: http://i.imgur.com/UtfnaLD.png
[https_github.com_liwenzhi_FloatingActionButton]: https://github.com/liwenzhi/FloatingActionButton
[5]: http://i.imgur.com/y71nGfq.jpg