简介
写这个项目是因为某个晚上在网上瞎逛，无意间看到 Aribnb 工程师的 这篇博客 。虽然年代久远，但觉得里面的交互很有意思，于是就学习一下，并决定自己动手实现出来。n(≧▽≦)n
首先看效果图：
ParallaxViewPager 包括一个可折叠的顶部图片，一个固定在折叠图片底部的 tab 栏，和图片下方的 viewpager。viewpager 向上滑动时，顶部图片折叠，直到 tab 栏固定在 toolbar 下方。viewpager 下滑时，顶部图片展开。
本项目的难点有二：
- 让图片跟随 viewpager 的上滑折叠
- 让 viewpager 中的内容（scrollview 、listview 或 recyclerview）在左右滑动或切换 tab 中保持最上方第一个 item 与 viewpager 顶部契合。
下面就为大家分析一下如何解决这两点，实现所需滑动效果。
折叠图片
布局
布局上采用 relativeLayout 为根布局，一个 relativeLayout 嵌套顶部图片和 tab 栏，viewpager 占满屏幕。
这里让 viewpager 占满屏幕是为了配合实现折叠图片的效果。我们为每个 fragment 的布局中添加一个和顶部图片等高的空白 header， 这样 viewpager 每个 fragment 包含的 scrollview ， listview 或 recyclerview ， 在 viewpager 上滑时可以跟随顶部图片一起滑动。
主界面布局如下：
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/nb_mainView"
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/nb_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RelativeLayout
android:id="@+id/nb_header"
android:layout_width="match_parent"
android:layout_height="200dp">
<ImageView
android:id="@+id/nb_imageView"
android:layout_width="match_parent"
android:layout_height="200dp"
android:scaleType="centerCrop"
android:src="@drawable/nb_bg" />
<android.support.design.widget.TabLayout
android:id="@+id/nb_tab_layout"
android:layout_width="match_parent"
android:layout_height="50dp"
android:background="@color/bgGray"
android:alpha="0.5"
android:layout_alignParentBottom="true" />
</RelativeLayout>
</RelativeLayout>
在包含 scrollview 的 fragment 里我们在 scrollview 内的 LinearLayout 中添加一个与顶部图片等高(本例中为 200dp) 的 header。在 listview 中用 addHeaderView 添加头部， 在 recyclerview 中则把 position 为 0 的 item 设置为头部。
折叠
要实现折叠效果，需要监听每个 fragment 中内容的滑动，得到滑动距离，并把距离值传到主界面中，让顶部图片滑动相应的距离。
首先我们创建一个接口 HostView
public interface HostView {
void onScrollingContentScroll(int scrollY, int pagePosition);
}
在每个 fragment 监听滑动的方法中调用，把滑动距离传入。
scrollContent
这里我们写了一个 ResponseScrollView 继承自 ScrollView ， 重写其中的 onScrollChanged 方法，并暴露出一个接口。
public class ResponseScrollView extends ScrollView {
public interface OnScrollChangedListener {
void onScrollChanged(View view, int l, int t, int oldl, int oldt);
}
private OnScrollChangedListener mOnScrollChangedListener;
public ResponseScrollView(Context context) {
super(context);
}
public ResponseScrollView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public ResponseScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
super.onScrollChanged(l, t, oldl, oldt);
if (mOnScrollChangedListener != null) {
mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);
}
}
public void setOnScrollChangedListener(OnScrollChangedListener onScrollChangedListener) {
this.mOnScrollChangedListener = onScrollChangedListener;
}
}
mScrollView 通过自定义的 listener 监听滑动，并把自身滑动的距离传给 mHostView onScrollingContentScroll 的第一个参数
mScrollView.setOnScrollChangedListener(new ResponseScrollView.OnScrollChangedListener() {
@Override
public void onScrollChanged(View view, int l, int t, int oldl, int oldt) {
mHostView.onScrollingContentScroll(view.getScrollY(), mPosition);
}
});
recyclerContent
这里 mScrollY 即 recyclerview 的滑动距离
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
mScrollY += dy;
if (mHostView != null) {
mHostView.onScrollingContentScroll(mScrollY, mPosition);
}
}
});
listContent
这里 listview 占满屏幕，所以 listview 的 headerview 的顶部与屏幕顶部齐平， getTop() 即 listview 滑动距离
mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
}
@Override
public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
mHostView.onScrollingContentScroll(-mListHeaderView.getTop(), mPosition);
}
});
如上三种情况，把滑动的距离传入。然后在主界面中实现 HostView 接口，让顶部图片滑动。
public class MainActivity extends AppCompatActivity implements HostView {
tabHeight = 50dp
mHeaderHeight = 200dp
mMaxHeaderTranslation = -mHeaderHeight + tabHeight;
...
@Override
public void onScrollingContentScroll(int scrollY, int pagePosition) {
if (mViewPager.getCurrentItem() == pagePosition) {
float translationY = Math.max(-scrollY, mMaxHeaderTranslation);
mHeader.setTranslationY(translationY);
mImageView.setTranslationY(-translationY / 3);
}
}
}
其中 mMaxHeaderTranslation 是顶部图片可折叠的最大值， 即图片高度和 tab 高度的差值。当滑动距离超过最大值后， 顶部图片不再滑动。
上文说到，用 relativeLayout 包裹顶部图片和 tab 栏， 上面的代码中，让此 relativeLayout (即 mHeader) 上滑， 而其中的图片下滑， 就可实现图片折叠的视差效果。
左右滑动
在 viewpager 上滑过程中， 切换 viewpager ，需要让切换到的 fragment 中顶部内容和 fragment 高度相契合。为实现此效果，我们进行以下操作。
1. 创建 TabHolerScrollingContent 接口供 fragment 实现
public interface TabHolderScrollingContent {
void adjustScroll(int scrollTranslation);
}
其中的 scrollTranslation 记录主界面中顶部图片上滑的距离。
接着在每个不同的 fragement 中实现该接口。
2. scrollContent 实现该接口
切换到包含 scrollview 的 fragment 时，scrollview 进行相应滑动，和顶部图片滑动的距离保持一致
public class ScrollViewFragment implements TabHolderScrollingContent {
...
@Override
public void adjustScroll(int scrollTranslation) {
if (mScrollView == null) {
return;
}
mScrollView.scrollTo(0, -scrollTranslation);
}
}
3. listContent 实现该接口
这里 scrollTranslation 为负数， mHeaderHeight 为 listview 的 headerview 高度，本例为 200dp。以下代码中把高度减去移动距离，算出的是 listview 中 position 为 1 的 item（即第一个有效数据）所需要移动到的位置。
public class ListViewFragment implements TabHolderScrollingContent {
...
@Override
public void adjustScroll(int scrollTranslation) {
if (mListView == null) {
return;
}
int scrollHeight = scrollTranslation + mHeaderHeight;
if (scrollHeight == 0 && mListView.getFirstVisiblePosition() >= 1) {
return;
}
mListView.setSelectionFromTop(1, scrollHeight);
}
}
4. recyclerContent 实现该接口
recyclerview 滑动相应距离
public class RecyclerViewFragment implements TabHolderScrollingContent {
private LinearLayoutManager mLayoutMgr;
private void setRecyclerView() {
mLayoutMgr = new LinearLayoutManager(getActivity());
mRecyclerView.setLayoutManager(mLayoutMgr);
...
}
...
@Override
public void adjustScroll(int scrollTranslation) {
if (mRecyclerView == null) {
return;
}
mScrollY = -scrollTranslation;
mLayoutMgr.scrollToPositionWithOffset(0, scrollTranslation);
}
}
5. 在 viewpager 的左右滑动和点击 tab 切换中调用该接口的方法
mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
int currentItem = mViewPager.getCurrentItem();
if (positionOffsetPixels > 0) {
SparseArrayCompat<TabHolderScrollingContent> scrollTabHolders = mAdapter.getScrollTabHolders();
TabHolderScrollingContent fragmentContent;
if (position < currentItem) {
fragmentContent = scrollTabHolders.valueAt(position);
} else {
fragmentContent = scrollTabHolders.valueAt(position + 1);
}
fragmentContent.adjustScroll((int) mHeader.getTranslationY());
}
}
@Override
public void onPageSelected(int position) {
SparseArrayCompat<TabHolderScrollingContent> scrollTabHolders = mAdapter.getScrollTabHolders();
if (scrollTabHolders == null || scrollTabHolders.size() != mNumFragments) {
return;
}
TabHolderScrollingContent currentHolder = scrollTabHolders.valueAt(position);
currentHolder.adjustScroll((int) mHeader.getTranslationY());
}
});
如此，大功告成。
总结
通过完成这个项目，加深了对listview、scrollview、recyclerview滑动的理解，更意识到 技术是复杂。希望将来还能不断努力，学到更复杂的技术知识，写出更好的代码。
另外，这是本人第一次写技术博客，欢迎大家多多吐槽、交流。
最后，附上源码地址：https://github.com/Newbeeee/NbParallaxViewpager
看官若看的顺眼，不吝 star ，n(≧▽≦)n
网友评论