文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Android中Fab(FloatingActionButton)实现上下滑动的渐变效果

2022-06-06 04:29

关注

前言

Promoted Actions是指一种操作按钮,它不是放在actionbar中,而是直接在可见的UI布局中(当然这里的UI指的是setContentView所管辖的范围)。因此它更容易在代码中被获取到(试想如果你要在actionbar中获取一个菜单按钮是不是很难?),Promoted Actions往往主要用于一个界面的主要操作,比如在email的邮件列表界面,promoted action可以用于接受一个新邮件。promoted action在外观上其实就是一个悬浮按钮,更常见的是漂浮在界面上的圆形按钮,一般我直接将promoted action称作悬浮按钮,英文名称Float Action Button 简称(FAB,不是FBI哈)。

系统自带的 Fab 也会随着页面上下滚动,但是淡出或者进入的效果太不自然。

这里记录一个小知识点,Fab 随着页面的 RecyclerView 上下滚动而渐变的动画效果。

包含 Fab 控件的布局如下:


<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:app="http://schemas.android.com/apk/res-auto"
 xmlns:tools="http://schemas.android.com/tools"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".view.activity.MainActivity">
 <android.support.design.widget.AppBarLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:theme="@style/AppTheme.AppBarOverlay">
 <android.support.v7.widget.Toolbar
  android:id="@+id/toolbar"
  android:layout_width="match_parent"
  android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary"
  app:layout_scrollFlags="scroll|enterAlways"
  app:popupTheme="@style/AppTheme.PopupOverlay" />
 <android.support.design.widget.TabLayout
  android:id="@+id/tab_layout"
  app:tabIndicatorColor="#FFFFFF"
  android:layout_width="match_parent"
  android:layout_height="wrap_content">
 </android.support.design.widget.TabLayout>
 </android.support.design.widget.AppBarLayout>
 <include layout="@layout/content_main" />
 <android.support.design.widget.FloatingActionButton
 android:id="@+id/fab"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_margin="@dimen/fab_margin"
 android:src="@android:drawable/ic_dialog_email"
 app:layout_behavior="com.wu.allen.zhuanlan.util.ScrollAwareFABBehavior"/>
</android.support.design.widget.CoordinatorLayout>

实现的 Java 代码如下:


public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior {
 private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator();
 private boolean mIsAnimatingOut = false;
 public ScrollAwareFABBehavior(Context context, AttributeSet attrs) {
 super();
 }
 @Override
 public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
     final View directTargetChild, final View target, final int nestedScrollAxes) {
 // Ensure we react to vertical scrolling
 return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
  || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes);
 }
 @Override
 public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child,
    final View target, final int dxConsumed, final int dyConsumed,
    final int dxUnconsumed, final int dyUnconsumed) {
 super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
 if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) {
  // User scrolled down and the FAB is currently visible -> hide the FAB
  animateOut(child);
 } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
  // User scrolled up and the FAB is currently not visible -> show the FAB
  animateIn(child);
 }
 }
 // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits
 private void animateOut(final FloatingActionButton button) {
 if (Build.VERSION.SDK_INT >= 14) {
  ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer()
   .setListener(new ViewPropertyAnimatorListener() {
   public void onAnimationStart(View view) {
    ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
   }
   public void onAnimationCancel(View view) {
    ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
   }
   public void onAnimationEnd(View view) {
    ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
    view.setVisibility(View.GONE);
   }
   }).start();
 } else {
  Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out);
  anim.setInterpolator(INTERPOLATOR);
  anim.setDuration(200L);
  anim.setAnimationListener(new Animation.AnimationListener() {
  public void onAnimationStart(Animation animation) {
   ScrollAwareFABBehavior.this.mIsAnimatingOut = true;
  }
  public void onAnimationEnd(Animation animation) {
   ScrollAwareFABBehavior.this.mIsAnimatingOut = false;
   button.setVisibility(View.GONE);
  }
  @Override
  public void onAnimationRepeat(final Animation animation) {
  }
  });
  button.startAnimation(anim);
 }
 }
 // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters
 private void animateIn(FloatingActionButton button) {
 button.setVisibility(View.VISIBLE);
 if (Build.VERSION.SDK_INT >= 14) {
  ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F)
   .setInterpolator(INTERPOLATOR).withLayer().setListener(null)
   .start();
 } else {
  Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in);
  anim.setDuration(200L);
  anim.setInterpolator(INTERPOLATOR);
  button.startAnimation(anim);
 }
 }
}

fab_in.xml 文件如下(fab_out.xml 同理),当然要改变淡出或者进入的样式,一般修改这里的 XML 文件就可以了 :


<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <alpha android:fromAlpha="0.0"
 android:toAlpha="1.0"/>
 <scale android:fromXScale="0.0"
 android:fromYScale="0.0"
 android:toXScale="1.0"
 android:toYScale="1.0"
 android:pivotX="50%"
 android:pivotY="50%"/>
</set>

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
 <alpha android:fromAlpha="1.0"
 android:toAlpha="0.0"/>
 <scale android:fromXScale="1.0"
 android:fromYScale="1.0"
 android:toXScale="0.0"
 android:toYScale="0.0"
 android:pivotX="50%"
 android:pivotY="50%"/>
</set>

大致效果就像上面。

总结

好了,以上就是这篇文章的全部内容了,希望本文的内容对各位Android开发者们能带来一定的帮助,如果有疑问大家可以留言交流。

您可能感兴趣的文章:Android仿知乎悬浮功能按钮FloatingActionButton效果Android自定义可拖拽的悬浮按钮DragFloatingActionButton修改Android FloatingActionButton的title的文字颜色及背景颜色实例详解Android中FloatingActionButton实现悬浮按钮实例Android悬浮按钮点击返回顶部FloatingActionButtonAndroid自定义FloatingActionButton滑动行为只隐藏不出现的问题小结Android 中FloatingActionButton(悬浮按钮)实例详解Android中FloatingActionButton的显示与隐藏示例Android自定义APP全局悬浮按钮Android开发悬浮按钮 Floating ActionButton的实现方法Android开发之FloatingActionButton悬浮按钮基本使用、字体、颜色用法示例


阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯