Material Design系列之Behavior上滑顯示返回頂部按鈕
效果預(yù)覽
源碼在文章末尾。
引文
有時(shí)候我們的頁(yè)面內(nèi)容過(guò)長(zhǎng)的時(shí)候，滑動(dòng)到頁(yè)面底部用戶再滑動(dòng)到頂部很麻煩，Android不像iOS可以點(diǎn)擊statusBar回到頂部，一般都是雙擊Toolbar/ActionBar或者在底部放一個(gè)按鈕。
今天就底部放一個(gè)回到頂部按鈕這個(gè)效果來(lái)做一個(gè)基于Behavior的實(shí)現(xiàn)。那么我們傳統(tǒng)的方式來(lái)做就是監(jiān)聽(tīng)這個(gè)滑動(dòng)View，比如：ScrollView/ListView/RecyclerView/GridView等，那么如果我們使用了CoordinatorLayout，那么一切將會(huì)變得非常so easy。
今天我們就利用自定義Behavior來(lái)實(shí)現(xiàn)這個(gè)回到頂部按鈕的漸顯的動(dòng)畫(huà)效果。如果對(duì)我的Behavior博文感興趣的，那么看官可以在文章頂部找到我其它關(guān)于Behavior的博文。
自定義Bahavior的實(shí)現(xiàn)？
我們選中CoordinatorLayout.Behavior后ctrl + t后發(fā)現(xiàn)有很多實(shí)現(xiàn)類，哪么我們選用哪個(gè)呢？這里就要看我們要操作（顯示/隱藏）的按鈕是誰(shuí)了，到底能不能用系統(tǒng)已經(jīng)實(shí)現(xiàn)了的基類？所以又拋出了以下問(wèn)題。
自定義Behavior繼承系統(tǒng)的哪個(gè)BaseBahavior？
這個(gè)問(wèn)題其實(shí)就so easy了，只要接觸過(guò)MD的人肯定聽(tīng)過(guò)一個(gè)FAB吧，也就是我們的FloatingActionButton了，所以我們這里也使用的是FloatingActionButton，所以我們自定義的Behavior也是基于FloatingActionButton的。
因此我們從中CoordinatorLayout.Behavior后ctrl + t的里面看到一個(gè)FloatingActionButton.Behavior，這個(gè)家伙就是我們要繼承的，利用它來(lái)控制FloatingActionButton的顯示和隱藏動(dòng)畫(huà)。
ScaleUpShowBehavior的實(shí)現(xiàn)
因?yàn)槭窍蛏匣瑒?dòng)手指，出現(xiàn)下面部分的頁(yè)面，顯示Button是，所以我們暫且把它叫ScaleUpShowBehavior的實(shí)現(xiàn)。
接下來(lái)一大波代碼來(lái)襲，首先我們要繼承FloatingActionButton.Behavior：
public class ScaleUpShowBehavior extends FloatingActionButton.Behavior {
public ScaleUpShowBehavior(Context context, AttributeSet attrs) {
super();
}
}
接下來(lái)實(shí)現(xiàn)這里面重要的三個(gè)方法：
// 頁(yè)面開(kāi)始滑動(dòng)。 onStartNestedScroll(); // 頁(yè)面正在滑動(dòng)。 onNestedScroll(); // 頁(yè)面停止滑動(dòng)。 onStopNestedScroll();
第一個(gè)方法onStartNestedScroll：
onStartNestedScroll望文生義啊，開(kāi)始嵌套滾動(dòng)的時(shí)候被調(diào)用，那么這個(gè)方法有一個(gè)boolean的返回值，是需要我們告訴CoordinatorLayout我這個(gè)Behavior要監(jiān)聽(tīng)的滑動(dòng)方向，因?yàn)槲覀兪巧舷禄瑒?dòng)時(shí)顯示/隱藏FAB，所以這里我們返回return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL;。
第二個(gè)方法onNestedScroll：
嗯，你猜的沒(méi)錯(cuò)，這個(gè)方法在滑動(dòng)期間被調(diào)用，也就是正在滑動(dòng)了。so，我們?cè)谶@里控制view的動(dòng)畫(huà)。經(jīng)過(guò)我的測(cè)試發(fā)現(xiàn)了一下規(guī)則：
if (dyConsumed > 0 && dyUnconsumed == 0) {
System.out.println("上滑中。。。");
}
if (dyConsumed == 0 && dyUnconsumed > 0) {
System.out.println("到邊界了還在上滑。。。");
}
if (dyConsumed < 0 && dyUnconsumed == 0) {
System.out.println("下滑中。。。");
}
if (dyConsumed == 0 && dyUnconsumed < 0) {
System.out.println("到邊界了，還在下滑。。。");
}
因此我們?cè)诘臅r(shí)候上滑，也就是用戶需要看頁(yè)面的下部分的時(shí)候顯示FAB：
if (((dyConsumed > 0 && dyUnconsumed == 0) || (dyConsumed == 0 && dyUnconsumed > 0))
&& child.getVisibility() != View.VISIBLE) {// 顯示
AnimatorUtil.scaleShow(child, null);
}
那么相反的，在用戶手指下滑，顯示頁(yè)面上半部分的時(shí)候隱藏FAB：
if (((dyConsumed < 0 && dyUnconsumed == 0) || (dyConsumed == 0 && dyUnconsumed < 0))
&& child.getVisibility() != View.GONE && !isAnimatingOut) {
AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);
}
那么這里的完整的代碼就是：
@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionButton child, View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
// if (dyConsumed > 0 && dyUnconsumed == 0) {
// System.out.println("上滑中。。。");
// }
// if (dyConsumed == 0 && dyUnconsumed > 0) {
// System.out.println("到邊界了還在上滑。。。");
// }
// if (dyConsumed < 0 && dyUnconsumed == 0) {
// System.out.println("下滑中。。。");
// }
// if (dyConsumed == 0 && dyUnconsumed < 0) {
// System.out.println("到邊界了，還在下滑。。。");
// }
if (((dyConsumed > 0 && dyUnconsumed == 0) || (dyConsumed == 0
&& dyUnconsumed > 0)) && child.getVisibility() != View.VISIBLE) {// 顯示
AnimatorUtil.scaleShow(child, null);
} else if (((dyConsumed < 0 && dyUnconsumed == 0) || (dyConsumed == 0
&& dyUnconsumed < 0)) && child.getVisibility() != View.GONE && !isAnimatingOut) {
AnimatorUtil.scaleHide(child, viewPropertyAnimatorListener);
}
}
動(dòng)畫(huà)的與FAB顯示隱藏的實(shí)現(xiàn)
眼尖的人肯定看到了，我們上面冒出來(lái)的幾票未知代碼：
AnimatorUtil.scaleShow(); AnimatorUtil.scaleHide(); isAnimatingOut; viewPropertyAnimatorListener;
這是什么鬼呢？
AnimatorUtil.scaleShow()用來(lái)動(dòng)畫(huà)漸顯FAB，這個(gè)不是系統(tǒng)的，而是我們自定義的：
// 顯示view
public static void scaleShow(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {
view.setVisibility(View.VISIBLE);
ViewCompat.animate(view)
.scaleX(1.0f)
.scaleY(1.0f)
.alpha(1.0f)
.setDuration(800)
.setListener(viewPropertyAnimatorListener)
.setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)
.start();
}
AnimatorUtil.scaleHide()用來(lái)漸漸隱藏FAB，當(dāng)然也是我們自定義的動(dòng)畫(huà)啦：
// 隱藏view
public static void scaleHide(View view, ViewPropertyAnimatorListener viewPropertyAnimatorListener) {
ViewCompat.animate(view)
.scaleX(0.0f)
.scaleY(0.0f)
.alpha(0.0f)
.setDuration(800)
.setInterpolator(FAST_OUT_SLOW_IN_INTERPOLATOR)
.setListener(viewPropertyAnimatorListener)
.start();
}
viewPropertyAnimatorListener和isAnimatingOut用來(lái)監(jiān)聽(tīng)隱藏動(dòng)畫(huà)的執(zhí)行，當(dāng)動(dòng)畫(huà)執(zhí)行完畢后才view.setVisibility(View.GONE);了，這就是套路啊哈哈：
private boolean isAnimatingOut = false;
ViewPropertyAnimatorListener viewPropertyAnimatorListener = new ViewPropertyAnimatorListener() {
@Override
public void onAnimationStart(View view) {
isAnimatingOut = true;
}
@Override
public void onAnimationEnd(View view) {
isAnimatingOut = false;
view.setVisibility(View.GONE);
}
@Override
public void onAnimationCancel(View arg0) {
isAnimatingOut = false;
}
};
ScaleUpShowBehavior的使用
首先我們學(xué)系統(tǒng)一樣在String.xml中定義一個(gè)值：
然后在xml布局中使用：
<android.support.design.widget.FloatingActionButton android:id="@+id/fab" ... app:layout_behavior="@string/scale_up_show_behavior" />
當(dāng)然你也完全在xml布局中直接寫(xiě)這個(gè)類的全類名，但是這樣子不利于以后修改這個(gè)類所在的包：
app:layout_behavior="com.yanzhenjie.definebehavior.behavior.ScaleUpShowBehavior"
好了，瑣碎的扯完了，把這個(gè)布局的完整代碼擼上來(lái)：
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<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"
app:popupTheme="@style/AppTheme.PopupOverlay" />
</android.support.design.widget.AppBarLayout>
<android.support.v7.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_margin="16dp"
android:src="@mipmap/abc_ic_ab_back_top"
app:layout_behavior="@string/scale_up_show_behavior"
app:layout_scrollFlags="scroll|enterAlways|snap" />
</android.support.design.widget.CoordinatorLayout>
然后給RecyclerView隨便給點(diǎn)數(shù)據(jù)，跑起來(lái)看看哈哈，是不是完美??？
對(duì)了，有的同學(xué)在activity一運(yùn)行起來(lái)就看到了這個(gè)FAB，所以我們需要在onWindowFocusChanged()中隱藏下：
private boolean isInitializeFAB = false;
@Override
public void onWindowFocusChanged(boolean hasFocus) {
super.onWindowFocusChanged(hasFocus);
if (!isInitializeFAB) {
isInitializeFAB = true;
hideFAB();
}
}
private void hideFAB() {
FAB.postDelayed(new Runnable() {
@Override
public void run() {
AnimatorUtil.scaleHide(FAB, new ViewPropertyAnimatorListener() {
@Override
public void onAnimationStart(View view) {
}
@Override
public void onAnimationEnd(View view) {
FAB.setVisibility(View.GONE);
}
@Override
public void onAnimationCancel(View view) {
}
});
}
}, 500);
}
完美啊!
源碼下載：http://xiazai.jb51.net/201609/yuanma/AndroidBehavior(jb51.net).rar
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 學(xué)習(xí)使用Material Design控件（三）使用CardView實(shí)現(xiàn)卡片效果
- 學(xué)習(xí)使用Material Design控件（二）使用DrawerLayout實(shí)現(xiàn)側(cè)滑菜單欄效果
- 學(xué)習(xí)使用Material Design控件（一）
- 微信小程序之MaterialDesign--input組件詳解
- Material Design系列之Behavior實(shí)現(xiàn)Android知乎首頁(yè)
- Material Design系列之Behavior實(shí)現(xiàn)支付密碼彈窗和商品屬性選擇效果
- Material Design系列之自定義Behavior支持所有View
- Android5.0中Material Design的新特性
- Android App仿QQ制作Material Design風(fēng)格沉浸式狀態(tài)欄
- 學(xué)習(xí)使用Material Design控件（四）Android實(shí)現(xiàn)標(biāo)題欄自動(dòng)縮放、放大效果
相關(guān)文章
Kotlin基礎(chǔ)學(xué)習(xí)之Deprecated與Suppress注解使用
這篇文章主要給大家介紹了關(guān)于Kotlin基礎(chǔ)學(xué)習(xí)之Deprecated與Suppress注解使用的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Kotlin具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
Android開(kāi)發(fā)VR實(shí)戰(zhàn)之播放360度全景視頻
這篇文章主要為大家詳細(xì)介紹了Android開(kāi)發(fā)VR實(shí)戰(zhàn)之播放360度全景視頻，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Android仿微信通訊錄導(dǎo)航分組列表，使用ItemDecoration為RecyclerView打造帶懸停頭部的分組列表，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
這篇文章主要為大家詳細(xì)介紹了android倒計(jì)時(shí)控件示例，感興趣的小伙伴們可以參考一下2016-03-03
Android自定義view實(shí)現(xiàn)電影票在線選座功能
這篇文章主要為大家詳細(xì)介紹了Android自定義view實(shí)現(xiàn)選座功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-11-11
Android 懸浮窗權(quán)限各機(jī)型各系統(tǒng)適配大全（總結(jié)）
這篇文章主要介紹了Android 懸浮窗權(quán)限各機(jī)型各系統(tǒng)適配大全（總結(jié)），具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
Android入門之讀寫(xiě)本地文件的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Android如何實(shí)現(xiàn)讀寫(xiě)本地文件的功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Android有一定的幫助，需要的可以參考一下2022-12-12
這篇文章主要為大家詳細(xì)介紹了Android之Drawable的使用方法，幫助大家系統(tǒng)的學(xué)習(xí)一下Drawable的使用，感興趣的小伙伴們可以參考一下2016-06-06
Flutter自定義下拉刷新時(shí)的loading樣式的方法詳解
Flutter中的下拉刷新,我們通常RefreshIndicator,可以通過(guò)color或strokeWidth設(shè)置下拉刷新的顏色粗細(xì)等樣式,但如果要自定義自己的widget,RefreshIndicator并沒(méi)有暴露出對(duì)應(yīng)的屬性,那如何修改呢,文中給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
Android中Intent傳遞對(duì)象的3種方式詳解
這篇文章給大家介紹了Android中Intent傳遞對(duì)象的3種方式，分別是Serializable 方式、Parcelable 方式以及JSON 方式，有需要的朋友們可以一起參考借鑒，下面來(lái)一起看看吧。2016-09-09