Android中FloatingActionButton的顯示與隱藏示例
FloatingActionButton簡介
FloatingActionButton(FAB) 是Android 5.0 新特性——Material Design 中的一個控件,是一種懸浮的按鈕,并且是 ImageView 的子類,因此它具備ImageView的全部屬性。一般FloatingActionButton 結合 CoordinatorLayout 使用,即可實現(xiàn)懸浮在任意控件的任意位置。
FloatingActionButton使用
本文主要實現(xiàn)的效果:Toolbar和FloatingActionButton根據(jù)頁面列表的上下滑動來隱藏和顯示。
效果圖:

當我上滑列表時:隱藏Toolbar和FloatingActionButton

當我下滑列表的時:顯示Toolbar和FloatingActionButton
實現(xiàn)方法(一)
監(jiān)聽頁面列表(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軸方向的增量
* 有正和負
* 當正在執(zhí)行動畫的時候,就不要再執(zhí)行了
*/
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監(jiān)聽并且設置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<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)聽
* 以及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<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>
以上就是實現(xiàn)Toolbar和FloatingActionButton根據(jù)頁面列表的上下滑動來隱藏和顯示方法一的這個過程。
實現(xiàn)方法(二)
通過封裝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)發(fā)生滑動的開始的時候回調的
//nestedScrollAxes:滑動關聯(lián)軸,現(xiàn)在只關心垂直的滑動。
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)剛開始滑動時候會回調該方法,需要在方法內(nèi)設置滑動關聯(lián)軸。這里只需要垂直方向上的滑動即可。
onNestedScroll:滑動的時候不斷的回調該方法,通過dyConsumed來判斷是上滑還是下滑。
2)Toolbar和FAB設置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直接設置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<String> list = new ArrayList<>();
for (int i = 0; i < 60; i++) {
list.add("Item"+i);
}
FabRecyclerAdapter adapter = new FabRecyclerAdapter(list);
mRecyclerView.setAdapter(adapter);
}
}
這樣就可以使用該方案實現(xiàn)Toolbar和FloatingActionButton根據(jù)頁面列表的上下滑動來隱藏和顯示。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android仿知乎懸浮功能按鈕FloatingActionButton效果
- Android自定義可拖拽的懸浮按鈕DragFloatingActionButton
- 修改Android FloatingActionButton的title的文字顏色及背景顏色實例詳解
- Android中FloatingActionButton實現(xiàn)懸浮按鈕實例
- Android懸浮按鈕點擊返回頂部FloatingActionButton
- Android自定義FloatingActionButton滑動行為只隱藏不出現(xiàn)的問題小結
- Android 中FloatingActionButton(懸浮按鈕)實例詳解
- Android中Fab(FloatingActionButton)實現(xiàn)上下滑動的漸變效果
- Android自定義APP全局懸浮按鈕
- Android開發(fā)懸浮按鈕 Floating ActionButton的實現(xiàn)方法
- Android開發(fā)之FloatingActionButton懸浮按鈕基本使用、字體、顏色用法示例
相關文章
Android嵌套滾動和協(xié)調滾動的多種實現(xiàn)方法
嵌套的滾動主要方式就是這些,這些簡單的效果我們用協(xié)調滾動,如?CoordinatorLayout?也能實現(xiàn)同樣的效果,這篇文章主要介紹了Android嵌套滾動和協(xié)調滾動的多種實現(xiàn)方法,需要的朋友可以參考下2022-06-06
解析Android開發(fā)中多點觸摸的實現(xiàn)方法
多點觸摸(MultiTouch),指的是允許計算機用戶同時通過多個手指來控制圖形界面的一種技術。與多點觸摸技術相對應的就是單點觸摸,單點觸摸的設備已經(jīng)有很多年了,小尺寸的有觸摸式的手機,大尺寸的最常見的就是銀行里的ATM機和排隊查詢機等等2013-05-05
Android實現(xiàn)listview滑動時漸隱漸現(xiàn)頂部欄實例代碼
android中實現(xiàn)listview滑動時漸隱漸現(xiàn)頂部欄只是在獲取listview的滑動距離上可能沒法直接獲取,需要動態(tài)的去計算。感興趣的朋友一起看看吧2016-10-10
詳解android 中animation-list 動畫的應用
本篇文章主要介紹了詳解android 中animation-list 動畫的應用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-12-12
Android繼承現(xiàn)有控件拓展實現(xiàn)自定義控件textView
這篇文章主要介紹了Android繼承現(xiàn)有控件拓展實現(xiàn)自定義控件textView的相關資料,需要的朋友可以參考下2016-04-04

