Android 使用 ViewPager+RecyclerView+SmartRefreshLayout 實現頂部圖片下拉視差效果
阿新 • • 發佈:2019-02-16
既然這位兄弟已經實現了該功能,我為什麼還要另寫一篇文章呢?
第一是,因為我笨啊,這兄弟的程式碼功底很強,我模仿不出他實現的效果(我不是懶,真的)。
第二也是,我專案中沒用到NestedScrollView
,也沒那麼多的滑動衝突,所以實現起來相對也就簡單些。
實現這個效果主要就是用到了SmartRefreshLayout 庫,該庫真的是很良心,不僅實現了很多酷炫的下拉重新整理效果,而且寫的例子也很到位,上文提到的作者應該也是參考了該庫中的微博首頁例子
,非常感謝作者!
再次感謝以上兩位作者!
廢話不多說,直接上程式碼!
實現第一步肯定是引入該庫:
//1.1.0 API改動過大,老使用者升級需謹慎
compile 'com.scwang.smartrefresh:SmartRefreshLayout:1.1.0-alpha-7'
compile 'com.scwang.smartrefresh:SmartRefreshHeader:1.1.0-alpha-7'//沒有使用特殊Header,可以不加這行
compile 'com.android.support:appcompat-v7:25.3.1'//版本 23以上(必須)
接著就是寫
xml佈局了,貼一下我的大概佈局吧:
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
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"
android:fitsSystemWindows="true">
// 頂部可拉伸的圖片
<ImageView
android:id ="@+id/parallax"
android:layout_width="match_parent"
android:layout_height="670dp"
android:layout_marginTop="-200dp"
android:adjustViewBounds="true"
android:scaleType="centerCrop"
android:src="@drawable/預設背景圖"
app:layout_collapseMode="parallax"/>
// 載入庫
<com.scwang.smartrefresh.layout.SmartRefreshLayout
android:id="@+id/refreshLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:srlEnablePreviewInEditMode="false"
android:fitsSystemWindows="true">
// 載入的頭部
<com.scwang.smartrefresh.layout.header.ClassicsHeader
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:srlAccentColor="@android:color/white"/>
<android.support.design.widget.CoordinatorLayout
android:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent">
// 裡面是 AppBarLayout + CollapsingToolbarLayout 組成的頂部 以及兩個 fragment 對應的tab
<include layout="@layout/頂部的佈局"/>
// ViewPager 中新增兩個 fragment
<android.support.v4.view.ViewPager
android:id="@+id/view_pager"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#E0E0E0"
app:layout_behavior="@string/appbar_scrolling_view_behavior"
/>
</android.support.design.widget.CoordinatorLayout>
</com.scwang.smartrefresh.layout.SmartRefreshLayout>
<!--右下角的釋出按鈕-->
<include layout="@layout/釋出加號佈局"/>
</FrameLayout>
再在程式碼中監聽滑動就OK了,程式碼如下:
private int mOffset = 0;
private int mScrollY = 0;
refreshLayout.setOnMultiPurposeListener(new SimpleMultiPurposeListener() {
@Override
public void onRefresh(@NonNull RefreshLayout refreshLayout) {
// 做重新整理操作
}
@Override
public void onHeaderMoving(RefreshHeader header, boolean isDragging, float percent, int offset, int headerHeight, int maxDragHeight) {
// 下拉後的操作,這裡只是做了平移效果`setTranslationY`,當然你可以做很多酷炫的效果
mOffset = offset / 2;
parallax.setTranslationY(mOffset - mScrollY);
toolbar.setAlpha(1 - Math.min(percent, 1));
}
});
OK,收工!