本篇介绍交互效果很6的Floating Action Button(以下简称FAB)和FloatingActionMenu(FAM),浮动与屏幕上方的按钮和菜单。Google只是提出了符合MD规范的这两个控件,但是自身实现的不是很彻底,因此我们直接介绍较强大的第三方实现库。
Github:https://github.com/Clans/FloatingActionButton
引用:
dependencies {
implementation 'com.github.clans:fab:1.6.4'
}
Floating action button
效果图:
布局代码:
<com.github.clans.fab.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
app:fab_size="normal"//有normal和mini两种size
android:src="@drawable/ic_print"//24dp的矢量图
fab:fab_colorNormal="@color/colorPrimary"//正常颜色
fab:fab_colorPressed="@color/colorPrimaryDark"//按下去颜色
fab:fab_colorRipple="@color/colorAccent"/>//水纹颜色
添加监听事件与普通Button一样:
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
}
});
以下是FAB的全部属性:
<com.github.clans.fab.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginBottom="8dp"
android:layout_marginRight="8dp"
android:src="@drawable/your_icon_drawable"
app:fab_colorNormal="#DA4336"
app:fab_colorPressed="#E75043"
app:fab_colorRipple="#99FFFFFF"
app:fab_showShadow="true"
app:fab_shadowColor="#66000000"
app:fab_shadowRadius="4dp"
app:fab_shadowXOffset="1dp"
app:fab_shadowYOffset="3dp"
app:fab_size="normal"
app:fab_showAnimation="@anim/fab_scale_up"
app:fab_hideAnimation="@anim/fab_scale_down"
app:fab_label=""
app:fab_progress_color="#FF009688"
app:fab_progress_backgroundColor="#4D000000"
app:fab_progress_indeterminate="false"
app:fab_progress_max="100"
app:fab_progress="0"
app:fab_progress_showBackground="true"/>
带滚动条的FAB
图中展示了几种常用滚动条样式:
- 持续滚动
- 向前滚动
- 向后滚动
- 是否带背景色
布局样式与普通的FAB一样,主要根据业务逻辑通过代码来控制滚动条。主要方法如下:
fab_progress = (FloatingActionButton) findViewById(R.id.fab_progress);
fab_progress.setMax(mMaxProgress);//设置滚动条的最大值,例如:100
fab_progress.setShowProgressBackground(true);//滚动条是否有背景色
fab_progress.setIndeterminate(true);//是否持续滚动
fab_progress.hideProgress();//隐藏滚动条/停止滚动
fab_progress.setIndeterminate(false);
fab_progress.setProgress(70, true);//滚动至70
fab_progress.setProgress(70, true);//滚动至30,实现回滚效果
Floating Action Menu
布局代码:
<com.github.clans.fab.FloatingActionMenu
android:id="@+id/menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_marginRight="80dp"
android:layout_marginBottom="8dp"
fab:menu_fab_size="normal"//有normal(56dp)和mini(40dp)两种sieze
fab:menu_colorNormal="#DA4336"
fab:menu_colorPressed="#E75043"
fab:menu_colorRipple="#99FFFFFF"
fab:menu_icon="@drawable/fab_add"
fab:menu_labels_showAnimation="@anim/fab_slide_in_from_right"
fab:menu_labels_hideAnimation="@anim/fab_slide_out_to_right"
fab:menu_labels_padding="8dp"
fab:menu_labels_textColor="#FFFFFF"
fab:menu_labels_colorNormal="#333333"
fab:menu_labels_colorPressed="#444444"
fab:menu_labels_colorRipple="#66FFFFFF"
fab:menu_openDirection="up"//menu展开方向,有上下左右4种
fab:menu_backgroundColor="@android:color/transparent"
fab:menu_fab_label="说明文字"//可以为空,即只有图标
fab:menu_fab_show_animation="@anim/fab_slide_in_from_left"
fab:menu_fab_hide_animation="@anim/fab_slide_in_from_right">
<com.github.clans.fab.FloatingActionButton
android:id="@+id/menu_item1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_print"
fab:fab_size="mini"
fab:fab_label="" />
<com.github.clans.fab.FloatingActionButton
android:id="@+id/menu_item2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_print"
fab:fab_size="mini"
fab:fab_label="" />
</com.github.clans.fab.FloatingActionMenu>
Activity代码:
//动态添加button
menu.addMenuButton(FloatingActionButton);
//控制收起或展开
if(menu!=null && menu.isOpened()) {
menu.close(true);
}