Android自定义的FloatingActionButton效果

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

Android自定义的FloatingActionButton效果

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

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

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

1

使用说明：

（一）包含的自定义类

1.FloatingActionButton悬浮按钮的类

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

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

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

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

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

使用的时候包名记得更改

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.                 xmlns:fab="http://schemas.android.com/apk/res-auto"  //命名空间的进入
  3.                 android:background="@color/background"
  4.                 android:layout_width="match_parent"
  5.                 android:layout_height="match_parent">
  6.    <!--一组悬浮按钮，里面可以有多个悬浮按钮-->
  7.     <com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu //悬浮菜单
  8.             android:id="@+id/multiple_actions_down"
  9.             android:layout_width="wrap_content"
  10.             android:layout_height="wrap_content"
  11.             android:layout_alignParentRight="true"
  12.             android:layout_alignParentEnd="true"
  13.             android:layout_alignParentTop="true"
  14.             fab:fab_addButtonColorNormal="@color/white"             //菜单按钮正常的背景颜色   
  15.             fab:fab_addButtonColorPressed="@color/white_pressed"    //菜单按钮按下的背景颜色
  16.             fab:fab_addButtonSize="mini"                            //菜单按钮的大小，normal表示56dp，mini表示40dp
  17.             fab:fab_addButtonPlusIconColor="@color/half_black"      //图像的颜色，区分背景，图像旁边空白的地方就是背景  
  18.             fab:fab_expandDirection="down"                          //显示悬浮按钮的方向，up表示向上（默认），down表示向下，left表示向左，right表示向右
  19.             fab:fab_labelStyle="@style/menu_labels_style"           //设置标签文本的风格，默认是灰色背景，白色字体
  20.             android:layout_marginTop="16dp"                         //android的属性就不解释了！！
  21.             android:layout_marginRight="16dp"
  22.             android:layout_marginEnd="16dp">
  24.         <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton     //悬浮按钮
  25.                 android:id="@+id/action_enable"
  26.                 android:layout_width="wrap_content"
  27.                 android:layout_height="wrap_content"            
  28.                 fab:fab_colorNormal="@color/white"                  //正常的颜色
  29.                 fab:fab_title="Set bottom menu enabled/disabled"    //标签文本显示的内容
  30.                 fab:fab_icon="@drawable/icon_add"                   //显示的图标
  31.                 fab:fab_colorPressed="@color/white_pressed"         //悬浮按钮按下时显示的颜色
  32.         />
  34.         <com.example.FloatingActionButton.floatingactionbutton.AddFloatingActionButton  //另一种悬浮按钮
  35.                 android:id="@+id/semi_transparent"
  36.                 android:layout_width="wrap_content"
  37.                 android:layout_height="wrap_content"
  38.                 fab:fab_plusIconColor="@color/red"                              //图像的颜色 
  39.                 fab:fab_colorNormal="@color/blue_transparent"                   //悬浮按钮正常的颜色
  40.                 fab:fab_colorPressed="@color/blue_transparent_pressed"          //悬浮按钮按下的颜色
  41.                 android:layout_centerHorizontal="true"
  42.                 android:layout_marginBottom="16dp"/>
  44.     </com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu>
  47. </RelativeLayout>

（三）java代码调用

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

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

  1. package com.example.FloatingActionButton.activity;
  3. import android.app.Activity;
  4. import android.os.Bundle;
  5. import android.view.View;
  6. import android.widget.Toast;
  7. import com.example.FloatingActionButton.R;
  8. import com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton;
  9. import com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu;
  11. /**
  12.  * 右上角的逻辑
  13.  */
  14. public class RightTopActivity extends Activity {
  17.     FloatingActionsMenu multiple_actions_down;
  18.     FloatingActionButton removeAction;
  19.     FloatingActionButton button_gone;
  20.     FloatingActionButton action_enable;
  22.     protected void onCreate(Bundle savedInstanceState) {
  23.         super.onCreate(savedInstanceState);
  24.         setContentView(R.layout.activity_right_top);
  25.         initView();
  26.         initData();
  27.         initEvent();
  28.     }
  30.     private void initView() {
  31.         multiple_actions_down = (FloatingActionsMenu) findViewById(R.id.multiple_actions_down);
  32.         removeAction = (FloatingActionButton) findViewById(R.id.button_remove);
  33.         button_gone = (FloatingActionButton) findViewById(R.id.button_gone);
  34.         action_enable = (FloatingActionButton) findViewById(R.id.action_enable);
  35.     }
  37.     private void initData() {
  38.         button_gone.setVisibility(View.GONE);
  40.     }
  42.     private void initEvent() {
  43.         //监听点击事件
  44.         removeAction.setOnClickListener(new View.OnClickListener() {
  45.             @Override
  46.             public void onClick(View v) {
  47.                 //删除某个对象，可以是自己
  48.                 multiple_actions_down.removeButton(removeAction);
  49.                 button_gone.setVisibility(View.VISIBLE);//刚开始隐藏的显示出来
  50.             }
  51.         });
  53.         action_enable.setOnClickListener(new View.OnClickListener() {
  54.             public void onClick(View v) {
  55.                 Toast.makeText(RightTopActivity.this, "右边第二个按钮", Toast.LENGTH_SHORT).show();
  56.             }
  57.         });
  58.     }
  59. }

它的布局文件：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.                 xmlns:fab="http://schemas.android.com/apk/res-auto"
  3.                 android:background="@color/background"
  4.                 android:layout_width="match_parent"
  5.                 android:layout_height="match_parent">
  8.     <!--右上角那组按钮-->
  9.     <com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu
  10.             android:id="@+id/multiple_actions_down"
  11.             android:layout_width="wrap_content"
  12.             android:layout_height="wrap_content"
  13.             android:layout_alignParentRight="true"
  14.             android:layout_alignParentEnd="true"
  15.             android:layout_alignParentTop="true"
  16.             fab:fab_addButtonColorNormal="@color/red"
  17.             fab:fab_addButtonColorPressed="@color/red_pressed"
  18.             fab:fab_addButtonSize="mini"
  19.             fab:fab_addButtonPlusIconColor="@color/menu_plus"
  20.             fab:fab_expandDirection="down"
  21.             fab:fab_labelStyle="@style/labels_style_orange"
  22.             android:layout_marginTop="16dp"
  23.             android:layout_marginRight="16dp"
  24.             android:layout_marginEnd="16dp">
  25.         <!--没有任何操作的按钮，右边那组最下面那个-->
  26.         <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
  27.                 android:layout_width="wrap_content"
  28.                 android:layout_height="wrap_content"
  29.                 fab:fab_colorNormal="@color/white"
  30.                 fab:fab_colorPressed="@color/red_pressed"
  31.                 fab:fab_size="mini"/>
  32.         <!--右上角第三个（倒数第二个），单击可消失的！-->
  33.         <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
  34.                 android:id="@+id/button_remove"
  35.                 android:layout_width="wrap_content"
  36.                 android:layout_height="wrap_content"
  37.                 fab:fab_colorNormal="@color/white"
  38.                 fab:fab_colorPressed="@color/white_pressed"
  39.                 fab:fab_icon="@drawable/ic_fab_star"
  40.                 fab:fab_title="Click to remove"/>
  41.         <!--一开始就消失的按钮-->
  42.         <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
  43.                 android:id="@+id/button_gone"
  44.                 android:layout_width="wrap_content"
  45.                 android:layout_height="wrap_content"
  46.                 fab:fab_colorNormal="@color/white"
  47.                 fab:fab_icon="@drawable/icon_delete"
  48.                 fab:fab_colorPressed="@color/white_pressed"/>
  49.         <!--右上角第二个-->
  50.         <com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
  51.                 android:id="@+id/action_enable"
  52.                 android:layout_width="wrap_content"
  53.                 android:layout_height="wrap_content"
  54.                 fab:fab_colorNormal="@color/white"
  55.                 fab:fab_title="Set bottom menu enabled/disabled"
  56.                 fab:fab_icon="@drawable/icon_add"
  57.                 fab:fab_colorPressed="@color/white_pressed"/>
  59.     </com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu>
  62. </RelativeLayout>

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

2

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

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

共勉：

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

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

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

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

5

发表评论

表情：
评论列表 （有 0 条评论，443人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Android自定义饼状图效果

           为什么会想着去实现饼状图的效果呢，其实之前是用MpChart库里面的饼状图的，但是当几个比较小的比例靠的比较近的时候显示比例的文字会重叠在一起达不到我们预期效果。

    心已赠人心已赠人/ 0 赞/ 296 阅读