Android中FloatingActionButton的顯示與隱藏示例

2019-10-22 18:25:38

字體：大中小

供稿：網(wǎng)友

FloatingActionButton簡(jiǎn)介

FloatingActionButton（FAB）是Android 5.0 新特性——Material Design 中的一個(gè)控件，是一種懸浮的按鈕，并且是 ImageView 的子類，因此它具備ImageView的全部屬性。一般FloatingActionButton 結(jié)合 CoordinatorLayout 使用，即可實(shí)現(xiàn)懸浮在任意控件的任意位置。

FloatingActionButton使用

本文主要實(shí)現(xiàn)的效果：Toolbar和FloatingActionButton根據(jù)頁(yè)面列表的上下滑動(dòng)來(lái)隱藏和顯示。

效果圖：

Android,顯示與隱藏,FloatingActionButton

當(dāng)我上滑列表時(shí)：隱藏Toolbar和FloatingActionButton

Android,顯示與隱藏,FloatingActionButton

當(dāng)我下滑列表的時(shí)：顯示Toolbar和FloatingActionButton

實(shí)現(xiàn)方法（一）

監(jiān)聽(tīng)頁(yè)面列表（RecyclerView）的滑動(dòng)回調(diào)事件，通過(guò)回調(diào)來(lái)決定Toolbar和FAB的顯示和隱藏。

1）封裝RecyclerView.OnScrollListener，封裝的原因是為了讓Activity顯得沒(méi)那么臃腫。

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軸方向的增量     * 有正和負(fù)     * 當(dāng)正在執(zhí)行動(dòng)畫(huà)的時(shí)候，就不要再執(zhí)行了     */    Log.i("tag","dy--->"+dy);    if (distance > THRESHOLD && visible) {      //隱藏動(dòng)畫(huà)      visible = false;      mHideAndShowListener.hide();      distance = 0;    } else if (distance < -20 && !visible) {      //顯示動(dòng)畫(huà)      visible = true;      mHideAndShowListener.show();      distance = 0;    }    if (visible && dy > 0 || (!visible && dy < 0)) {      distance += dy;    }  }  public interface HideAndShowListener {    void hide();    void show();  }}

主要在onScrolled方法計(jì)算判斷FAB的顯示和隱藏，然后設(shè)置HideAndShowListener回調(diào)，調(diào)用相應(yīng)的顯示和隱藏的方法即可。

2）RecyclerView添加OnScrollListener監(jiān)聽(tīng)并且設(shè)置HideAndShowListener回調(diào)，通過(guò)HideAndShowListener的hide()和show()來(lái)設(shè)置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<String> list = new ArrayList<>();    for (int i = 0; i < 60; i++) {      list.add("Item"+i);    }    FabRecyclerAdapter adapter = new FabRecyclerAdapter(list);    mRecyclerView.setAdapter(adapter);    setListener();  }  /**   * 添加ScrollListener監(jiān)聽(tīng)   * 以及HideAndShowListener回調(diào)   */  private void setListener() {    mRecyclerView.addOnScrollListener(new MyScrollListener(new MyScrollListener.HideAndShowListener() {      @Override      public void hide() {        // 隱藏動(dòng)畫(huà)--屬性動(dòng)畫(huà)        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() {        // 顯示動(dòng)畫(huà)--屬性動(dòng)畫(huà)        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()方法中，設(shè)置了FAB的隱藏和顯示的動(dòng)畫(huà)。

接下來(lái)給出RecyclerView的Adapter

public class FabRecyclerAdapter extends RecyclerView.Adapter {  private List<String> list;  public FabRecyclerAdapter(List<String> 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文件

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="vertical" >  <Button    android:id="@+id/btn"    android:layout_margin="5dp"    android:layout_width="match_parent"    android:layout_height="wrap_content"    /></LinearLayout>

Activity的布局文件

<?xml version="1.0" encoding="utf-8"?><RelativeLayout  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="com.main.fab.FABActivity">  <android.support.v7.widget.RecyclerView    android:id="@+id/recyclerview"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:clipChildren="false"    android:clipToPadding="false"    android:paddingTop="?attr/actionBarSize"    />  <android.support.v7.widget.Toolbar    android:id="@+id/toolbar"    android:layout_width="match_parent"    android:layout_height="?attr/actionBarSize"    android:background="?attr/colorPrimary"/>  <android.support.design.widget.FloatingActionButton    android:id="@+id/fab"    android:layout_width="58dp"    android:layout_height="58dp"    android:layout_alignParentBottom="true"    android:layout_alignParentRight="true"    android:layout_margin="16dp"    /></RelativeLayout>

以上就是實(shí)現(xiàn)Toolbar和FloatingActionButton根據(jù)頁(yè)面列表的上下滑動(dòng)來(lái)隱藏和顯示方法一的這個(gè)過(guò)程。

實(shí)現(xiàn)方法（二）

通過(guò)封裝CoordinatorLayout.Behavior，通過(guò)它的onNestedScroll方法計(jì)算判斷顯示和隱藏，同時(shí)給Toolbar和FAB設(shè)置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;//是否可見(jiàn)  @Override  public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, View child, View directTargetChild, View target, int nestedScrollAxes) {    //被觀察者（RecyclerView）發(fā)生滑動(dòng)的開(kāi)始的時(shí)候回調(diào)的    //nestedScrollAxes:滑動(dòng)關(guān)聯(lián)軸，現(xiàn)在只關(guān)心垂直的滑動(dòng)。    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);    //被觀察者滑動(dòng)的時(shí)候回調(diào)的    if (dyConsumed > 0 && visible) {      //show      visible = false;      onHide(child);    } else if (dyConsumed < 0) {      //hide      visible = true;      onShow(child);    }  }  public void onHide(View view) {    // 隱藏動(dòng)畫(huà)--屬性動(dòng)畫(huà)    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) {    // 顯示動(dòng)畫(huà)--屬性動(dòng)畫(huà)    ViewCompat.animate(view).translationY(0).setInterpolator(new DecelerateInterpolator(3));  }}

onStartNestedScroll：列表（RecyclerView）剛開(kāi)始滑動(dòng)時(shí)候會(huì)回調(diào)該方法，需要在方法內(nèi)設(shè)置滑動(dòng)關(guān)聯(lián)軸。這里只需要垂直方向上的滑動(dòng)即可。

onNestedScroll：滑動(dòng)的時(shí)候不斷的回調(diào)該方法，通過(guò)dyConsumed來(lái)判斷是上滑還是下滑。

2）Toolbar和FAB設(shè)置app:layout_behavior

<?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="com.main.behavior.BehaviorActivity">  <android.support.v7.widget.RecyclerView    android:id="@+id/recyclerview"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:clipChildren="false"    android:clipToPadding="false"    android:paddingTop="?attr/actionBarSize"    />  <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_behavior="com.main.behavior.FabBehavior"/>  <android.support.design.widget.FloatingActionButton    android:id="@+id/fab"    android:layout_width="58dp"    android:layout_height="58dp"    android:layout_gravity="bottom|end"    android:layout_margin="16dp"    android:src="@mipmap/ic_launcher"    app:layout_behavior="com.main.behavior.FabBehavior"/></android.support.design.widget.CoordinatorLayout>

在布局文件中給Toolbar和FAB直接設(shè)置app:layout_behavior即可。

BehaviorActivity.java

/** * FloatActionButton * 滑動(dòng)顯示與隱藏 */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<String> list = new ArrayList<>();    for (int i = 0; i < 60; i++) {      list.add("Item"+i);    }    FabRecyclerAdapter adapter = new FabRecyclerAdapter(list);    mRecyclerView.setAdapter(adapter);  }}

這樣就可以使用該方案實(shí)現(xiàn)Toolbar和FloatingActionButton根據(jù)頁(yè)面列表的上下滑動(dòng)來(lái)隱藏和顯示。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VEVB武林網(wǎng)。

注：相關(guān)教程知識(shí)閱讀請(qǐng)移步到Android開(kāi)發(fā)頻道。

上一篇：Android開(kāi)發(fā)實(shí)現(xiàn)拍照功能的方法實(shí)例解析

下一篇：android 跳轉(zhuǎn)到應(yīng)用通知設(shè)置界面的示例