热门标签 | HotTags
当前位置:  开发笔记 > Android > 正文

Android中FloatingActionButton的显示与隐藏示例

FloatingActionButton简介 FloatingActionButton(FAB) 是Android 5.0 新特性——Ma

FloatingActionButton简介

FloatingActionButton(FAB) 是Android 5.0 新特性——Material Design 中的一个控件,是一种悬浮的按钮,并且是 ImageView 的子类,因此它具备ImageView的全部属性。一般FloatingActionButton 结合 CoordinatorLayout 使用,即可实现悬浮在任意控件的任意位置。

FloatingActionButton使用

本文主要实现的效果:Toolbar和FloatingActionButton根据页面列表的上下滑动来隐藏和显示。

效果图:


当我上滑列表时:隐藏Toolbar和FloatingActionButton


当我下滑列表的时:显示Toolbar和FloatingActionButton

实现方法(一)

监听页面列表(RecyclerView)的滑动回调事件,通过回调来决定Toolbar和FAB的显示和隐藏。

1)封装RecyclerView.OnScrollListener,封装的原因是为了让Activity显得没那么臃肿。

public class MyScrollListener extends RecyclerView.OnScrollListener {

  private HideAndShowListener mHideAndShowListener;
  private static final int THRESHOLD = 20;
  private int distance = 0;
  private boolean visible = true;


  public MyScrollListener(HideAndShowListener hideAndShowListener) {
    mHideAndShowListener = hideAndShowListener;
  }


  @Override
  public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    /**
     * dy:Y轴方向的增量
     * 有正和负
     * 当正在执行动画的时候,就不要再执行了
     */
    Log.i("tag","dy--->"+dy);
    if (distance > THRESHOLD && visible) {
      //隐藏动画
      visible = false;
      mHideAndShowListener.hide();
      distance = 0;
    } else if (distance <-20 && !visible) {
      //显示动画
      visible = true;
      mHideAndShowListener.show();
      distance = 0;
    }
    if (visible && dy > 0 || (!visible && dy <0)) {
      distance += dy;
    }
  }

  public interface HideAndShowListener {
    void hide();

    void show();
  }
}

主要在onScrolled方法计算判断FAB的显示和隐藏,然后设置HideAndShowListener回调,调用相应的显示和隐藏的方法即可。

2)RecyclerView添加OnScrollListener监听并且设置HideAndShowListener回调,通过HideAndShowListener的hide()和show()来设置FAB的隐藏和显示。

public class FABActivity extends AppCompatActivity {

  private RecyclerView mRecyclerView;
  private FloatingActionButton fab;
  private Toolbar toolbar;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_fab);
    toolbar = (Toolbar) findViewById(R.id.toolbar);
    mRecyclerView = (RecyclerView) findViewById(R.id.recyclerview);
    setSupportActionBar(toolbar);
    setTitle("FAB");

    fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View view) {
        Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
            .setAction("Action", null).show();
      }
    });

    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
    List list = new ArrayList<>();
    for (int i = 0; i <60; i++) {
      list.add("Item"+i);
    }
    FabRecyclerAdapter adapter = new FabRecyclerAdapter(list);
    mRecyclerView.setAdapter(adapter);
    setListener();

  }

  /**
   * 添加ScrollListener监听
   * 以及HideAndShowListener回调
   */
  private void setListener() {

    mRecyclerView.addOnScrollListener(new MyScrollListener(new MyScrollListener.HideAndShowListener() {
      @Override
      public void hide() {
        // 隐藏动画--属性动画
        toolbar.animate().translationY(-toolbar.getHeight()).setInterpolator(new AccelerateInterpolator(3));
        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();

        fab.animate().translationY(fab.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
      }

      @Override
      public void show() {
        // 显示动画--属性动画
        toolbar.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));

        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) fab.getLayoutParams();
        fab.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
      }
    }));
  }


}

在hide()和show()方法中,设置了FAB的隐藏和显示的动画。

接下来给出RecyclerView的Adapter

public class FabRecyclerAdapter extends RecyclerView.Adapter {


  private List list;

  public FabRecyclerAdapter(List list) {
    this.list = list;
  }

  @Override
  public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_item, parent, false);
    return new MyViewHolder(view);
  }

  @Override
  public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
    String str = list.get(position);
    MyViewHolder hd = (MyViewHolder) holder;
    hd.mButton.setText(str);
  }

  @Override
  public int getItemCount() {
    if (list != null) {
      return list.size();
    }
    return 0;
  }


  class MyViewHolder extends RecyclerView.ViewHolder {

    private Button mButton;

    public MyViewHolder(View itemView) {
      super(itemView);
      mButton = (Button) itemView.findViewById(R.id.btn);
    }

  }

}

MyViewHolder的xml文件

<&#63;xml version="1.0" encoding="utf-8"&#63;>

  

Activity的布局文件

<&#63;xml version="1.0" encoding="utf-8"&#63;>


  

  

  


以上就是实现Toolbar和FloatingActionButton根据页面列表的上下滑动来隐藏和显示方法一的这个过程。

实现方法(二)

通过封装CoordinatorLayout.Behavior,通过它的onNestedScroll方法计算判断显示和隐藏,同时给Toolbar和FAB设置app:layout_behavior,该属性指定使用封装的CoordinatorLayout.Behavior即可。

1)封装CoordinatorLayout.Behavior

public class FabBehavior extends CoordinatorLayout.Behavior {

  public FabBehavior() {
  }

  public FabBehavior(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  private boolean visible = true;//是否可见


  @Override
  public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {
    //被观察者(RecyclerView)发生滑动的开始的时候回调的
    //nestedScrollAxes:滑动关联轴,现在只关心垂直的滑动。
    return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild,
        target, nestedScrollAxes);
  }


  @Override
  public void onNestedScroll(CoordinatorLayout coordinatorLayout, View child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
    super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed);
    //被观察者滑动的时候回调的
    if (dyConsumed > 0 && visible) {
      //show
      visible = false;
      onHide(child);
    } else if (dyConsumed <0) {
      //hide
      visible = true;
      onShow(child);
    }
  }

  public void onHide(View view) {
    // 隐藏动画--属性动画
    if (view instanceof Toolbar){
      ViewCompat.animate(view).translationY(-(view.getHeight() * 2)).setInterpolator(new AccelerateInterpolator(3));
    }else if (view instanceof FloatingActionButton){
      ViewCompat.animate(view).translationY(view.getHeight() * 2).setInterpolator(new AccelerateInterpolator(3));
    }else{

    }

  }

  public void onShow(View view) {
    // 显示动画--属性动画
    ViewCompat.animate(view).translationY(0).setInterpolator(new DecelerateInterpolator(3));

  }


}

onStartNestedScroll:列表(RecyclerView)刚开始滑动时候会回调该方法,需要在方法内设置滑动关联轴。这里只需要垂直方向上的滑动即可。

onNestedScroll:滑动的时候不断的回调该方法,通过dyConsumed来判断是上滑还是下滑。

2)Toolbar和FAB设置app:layout_behavior

<&#63;xml version="1.0" encoding="utf-8"&#63;>



  

  

  



在布局文件中给Toolbar和FAB直接设置app:layout_behavior即可。

BehaviorActivity.java

/**
 * FloatActionButton
 * 滑动显示与隐藏
 */

public class BehaviorActivity extends AppCompatActivity {

  private RecyclerView mRecyclerView;
  private Toolbar toolbar;
  private FloatingActionButton fab;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_behavior);

    mRecyclerView = (RecyclerView)findViewById(R.id.recyclerview);
    fab = (FloatingActionButton)findViewById(R.id.fab);
    toolbar = (Toolbar)findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
    setTitle("FAB");

    mRecyclerView.setLayoutManager(new LinearLayoutManager(this));
    List list = new ArrayList<>();
    for (int i = 0; i <60; i++) {
      list.add("Item"+i);
    }
    FabRecyclerAdapter adapter = new FabRecyclerAdapter(list);
    mRecyclerView.setAdapter(adapter);

  }
}

这样就可以使用该方案实现Toolbar和FloatingActionButton根据页面列表的上下滑动来隐藏和显示。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


推荐阅读
  • 本文介绍如何使用布局文件在Android应用中排列多行TextView和Button,使其占据屏幕的特定比例,并提供示例代码以帮助理解和实现。 ... [详细]
  • 本文介绍了Android开发中Intent的基本概念及其在不同Activity之间的数据传递方式,详细展示了如何通过Intent实现Activity间的跳转和数据传输。 ... [详细]
  • 优化 Android 按钮状态下的背景和文本颜色变化
    本文介绍如何通过 Android 的 Selector 实现按钮在不同状态下(如按压)的背景和文本颜色动态变化。我们将详细讲解实现步骤,并提供完整的代码示例。 ... [详细]
  • 本文详细介绍超文本标记语言(HTML)的基本概念与语法结构。HTML是构建网页的核心语言,通过标记标签描述页面内容,帮助开发者创建结构化、语义化的Web页面。 ... [详细]
  • 本文介绍了如何通过设置背景形状来轻松地为 Android 的 TextView 添加圆形边框。我们将详细讲解 XML 代码的配置,包括圆角、描边和填充等属性。 ... [详细]
  • 本文探讨了在Windows Server 2008环境下配置Tomcat使用80端口时遇到的问题,包括端口被占用、多项目访问失败等,并提供详细的解决方法和配置建议。 ... [详细]
  • 本文介绍了多个关于JavaScript的书籍资源、实用工具和编程实例,涵盖从入门到进阶的各个阶段,帮助读者全面提升JavaScript编程能力。 ... [详细]
  • 分享一个简化版的Silverlight链接图项目:Link Map Simplified
    本文介绍了一个使用Silverlight开发的可视化工具,主要用于展示和操作复杂的实体关系图(Graph)。该工具在犯罪调查系统中得到了广泛应用,帮助用户直观地获取和理解相关信息。 ... [详细]
  • 探讨如何从数据库中按分组获取最大N条记录的方法,并分享新年祝福。本文提供多种解决方案,适用于不同数据库系统,如MySQL、Oracle等。 ... [详细]
  • 本文介绍了ArcXML配置文件的分类及其在不同服务中的应用,详细解释了地图配置文件的结构和功能,包括其在Image Service、Feature Service以及ArcMap Server中的使用方法。 ... [详细]
  • 本文详细介绍如何利用已搭建的LAMP(Linux、Apache、MySQL、PHP)环境,快速创建一个基于WordPress的内容管理系统(CMS)。WordPress是一款流行的开源博客平台,适用于个人或小型团队使用。 ... [详细]
  • 本文详细介绍了 RosPack 类的功能和用法,探讨了其在 ROS 系统中的重要作用。RosPack 类提供了类似于终端命令 rospack 的功能,能够方便地查询和管理 ROS 包的相关信息。 ... [详细]
  • 本文探讨了如何使用自增和自减运算符遍历二维数组中的元素。通过实例详细解释了指针与二维数组结合使用的正确方法,并解答了常见的错误用法。 ... [详细]
  • Struts与Spring框架的集成指南
    本文详细介绍了如何将Struts和Spring两个流行的Java Web开发框架进行整合,涵盖从环境配置到代码实现的具体步骤。 ... [详细]
  • 本文介绍如何将自定义项目设置为Tomcat的默认访问项目,使得通过IP地址访问时直接展示该自定义项目。提供了三种配置方法:修改项目路径、调整配置文件以及使用WAR包部署。 ... [详细]
author-avatar
mobiledu2502931077
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有