现在谷歌官方的Design包,已经右有FloatingActionButton这个类了,但是要求版本较高,所有现在很多编译器没法使用,我的也是,这里使用的是自定义的类。具体代码可以看源码,只有几个类,但是要添加一些资源文件。很多具体的属性可以自己修改。
是一个继承了IamgeButton的类,可以在布局中设置悬浮按钮的图片、文字、附带的文字等等数据
是一个继承了ViewGroup的容器类,里面可以放置多个悬浮按钮,可以指定按钮的方向,默认已经设置好了点击一次显示里面的悬浮按钮,第二次隐藏。
悬浮菜单默认已经有一个悬浮按钮,即使里面不添加悬浮,按钮也是会默认显示一个。
使用的时候包名记得更改
"http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto" //命名空间的进入
android:background="@color/background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu //悬浮菜单
android:id="@+id/multiple_actions_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
fab:fab_addButtonColorNormal="@color/white" //菜单按钮正常的背景颜色
fab:fab_addButtonColorPressed="@color/white_pressed" //菜单按钮按下的背景颜色
fab:fab_addButtonSize="mini" //菜单按钮的大小,normal表示56dp,mini表示40dp
fab:fab_addButtonPlusIconColor="@color/half_black" //图像的颜色,区分背景,图像旁边空白的地方就是背景
fab:fab_expandDirection="down" //显示悬浮按钮的方向,up表示向上(默认),down表示向下,left表示向左,right表示向右
fab:fab_labelStyle="@style/menu_labels_style" //设置标签文本的风格,默认是灰色背景,白色字体
android:layout_marginTop="16dp" //android的属性就不解释了!!
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp">
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton //悬浮按钮
android:id="@+id/action_enable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white" //正常的颜色
fab:fab_title="Set bottom menu enabled/disabled" //标签文本显示的内容
fab:fab_icon="@drawable/icon_add" //显示的图标
fab:fab_colorPressed="@color/white_pressed" //悬浮按钮按下时显示的颜色
/>
<com.example.FloatingActionButton.floatingactionbutton.AddFloatingActionButton //另一种悬浮按钮
android:id="@+id/semi_transparent"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_plusIconColor="@color/red" //图像的颜色
fab:fab_colorNormal="@color/blue_transparent" //悬浮按钮正常的颜色
fab:fab_colorPressed="@color/blue_transparent_pressed" //悬浮按钮按下的颜色
android:layout_centerHorizontal="true"
android:layout_marginBottom="16dp"/>
com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu>
其实就是设置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();
}
});
}
}
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
android:background="@color/background"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu
android:id="@+id/multiple_actions_down"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
fab:fab_addButtonColorNormal="@color/red"
fab:fab_addButtonColorPressed="@color/red_pressed"
fab:fab_addButtonSize="mini"
fab:fab_addButtonPlusIconColor="@color/menu_plus"
fab:fab_expandDirection="down"
fab:fab_labelStyle="@style/labels_style_orange"
android:layout_marginTop="16dp"
android:layout_marginRight="16dp"
android:layout_marginEnd="16dp">
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/red_pressed"
fab:fab_size="mini"/>
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
android:id="@+id/button_remove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_colorPressed="@color/white_pressed"
fab:fab_icon="@drawable/ic_fab_star"
fab:fab_title="Click to remove"/>
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
android:id="@+id/button_gone"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_icon="@drawable/icon_delete"
fab:fab_colorPressed="@color/white_pressed"/>
<com.example.FloatingActionButton.floatingactionbutton.FloatingActionButton
android:id="@+id/action_enable"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:fab_colorNormal="@color/white"
fab:fab_title="Set bottom menu enabled/disabled"
fab:fab_icon="@drawable/icon_add"
fab:fab_colorPressed="@color/white_pressed"/>
com.example.FloatingActionButton.floatingactionbutton.FloatingActionsMenu>
RelativeLayout>
后期,我对右上角部分页面资源文件进行了一点修改,效果:
你也可以根据自己的需求,重新写一个style设置样式
像下面图片的样式,还是不错的,写起来也不难,效果:
项目的源码:https://github.com/liwenzhi/FloatingActionButton
大家包几个类和一些资源文件复制或下载下来就可以用了!