How to make scrolling effect like GooglePlay’s homepage

Reece Cheng
91APP Android Engineer
loveuph114@gmail.com

UX
Hey！Reece！
你能不能把我們的⾸首⾴頁做成跟
GooglePlay 的⾸首⾴頁⼀一樣？

RD
簡單！
⽤用 CoordinatorLayout 就好了了

因為底層 NestedScrollView 的 Fling 機制有問題
造成 Fling 無法傳給 AppBarLayout
以致於無法正確滑動

FlingBehavior
smooth-app-bar-layout

⼿手指往上滑時
1. Header 會被內容推上去，並推到螢幕外
2. Tab 會被內容推上去，並卡在畫⾯面最上
3. 當 Tab 往上移動碰到 Toolbar 時，Too
要被 Tab 推上去
⼿手指往下滑時
1. Tab 與 Toolbar 要被拉下來來，並卡在最
2. 等內容滑到最頂端時，Header 與 Tab
下來來，並回到原本的位⼦子

Screen / RecyclerView
Decoration
Tab
Toolbar

ViewPager
Header
Tab
Toolbar
Fragment
Parent Child+

<FrameLayout>
<ViewPager />
<RelativeLayout>
<ImageView />
<SlidingTabLayout />
</RelativeLayout>
<Toolbar />
</FrameLayout>
Parent.xml

IScrollingParent Child+IScrolling
scrolling
header translation, switch child

public interface IScrollingParent {
void onChildScrolled(ScrollingView scrollingView, int pagePosition, int scrollY, int dy);
}
IScrollingParent
監聽 Child 的滑動，並且根據 scrollY 與 dy 移動 Header 與 Toolbar

public interface IScrollingChild {
void adjustScroll(float headerTranslationY, boolean isHeaderExpanded);
void setScrollingParent(IShopHomeScrollingParent scrolling);
void setPagePosition(int position);
}
IScrollingChild
滑動時通知 Parent，並根據 Parent 的狀狀態與事件調整 Child 的畫⾯面

public class ScrollingChildFragment implements IScrollingChild {
private IScrollingParent mScrollingParent;
private int mPagePosition;
@Override
public void adjustScroll(float headerTranslationY, boolean isHeaderExpanded) {
}
@Override
public void setScrollingParent(IScrollingParent scrolling) {
mScrollingParent = scrolling;
}
@Override
public void setPagePosition(int position) {
mPagePosition = position;
}
}
ChildFragment

mRecyclerView.addOnScrollListener(mScrollListener);
}
@Override
}
@Override
}
@Override
}
class ScrollingOnScrollListener extends RecyclerView.OnScrollListener {
private int mScrollY = 0;
@Override
public void onScrolled(RecyclerView view, int dx, int dy) {
mScrollY += dy;
mScrollingParent.onChildScrolled(view, mPagePosition, mScrollY, dy);
}
public int getScrollY() {
return mScrollY;
}
}
}
ChildFragment

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState){
mRecyclerView.addOnScrollListener(new ScrollingOnScrollListener());
}
@Override
}
@Override
}
@Override
}
class ScrollingOnScrollListener extends RecyclerView.OnScrollListener {
private int mScrollY = 0;
@Override
public void onScrolled(RecyclerView view, int dx, int dy) {
mScrollY += dy;
mScrollingParent.onChildScrolled(view, mPagePosition, mScrollY, dy);
ChildFragment

public class ParentAdapter extends FragmentPagerAdapter {
private final ArrayList<Fragment> mFragments = new ArrayList<>();
public ParentAdapter(FragmentManager fm) {
super(fm);
}
}
ParentAdapter

super(fm);
}
public void setIScrollingParent(IScrollingParent parent) {
mScrollingParent = parent;
}
}
ParentAdapter

super(fm);
}
}
public void addPageFragment(Fragment fragment) {
mFragments.add(fragment);
if(fragment instanceof IScrollingChild) {
int position = mFragments.indexOf(fragment);
IScrollingChild child = (IScrollingChild) fragment;
child.setPagePosition(position);
if (mScrollingParent != null) {
child.setScrollingParent(mScrollingParent);
}
}
}
}
ParentAdapter

public class ScrollingParentFragment {
@Override
ParentAdapter adapter = new ParentAdapter(getFragmentManager());
adapter.addPageFragment(getChildFragment(1));
mViewPager.setAdapter(pagerAdapter);
}
}
ParentFragment

public class ScrollingParentFragment implements IScrollingParent {
@Override
ParentAdapter adapter = new ParentAdapter(getFragmentManager());
mViewPager.setAdapter(pagerAdapter);
}
@Override
public void onChildScrolled(ScrollingView view, int pagePosition, int scrollY, int dy) {
mHeader.setTranslationY(-scrollY);
}
}
ParentFragment

...
class ScrollingDecoration extends RecyclerView.ItemDecoration {
private int mHeaderHeight;
public ShopHomeScrollingDecoration(height) {
super();
mHeaderHeight = height;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if(parent.getChildAdapterPosition(view) == 0) {
outRect.top = mHeaderHeight;
}
}
}
}
ChildFragment

...
@Override
mRecyclerView.addItemDecoration(new ScrollingDecoration(getHeaderHeight()));
}
...
class ScrollingDecoration extends RecyclerView.ItemDecoration {
private int mHeaderHeight;
public ShopHomeScrollingDecoration(height) {
super();
mHeaderHeight = height;
}
@Override
public void getItemOffsets(Rect outRect, View view, RecyclerView parent, RecyclerView.State state) {
if(parent.getChildAdapterPosition(view) == 0) {
outRect.top = mHeaderHeight;
}
}
}
}
ChildFragment

Answer
其他 Child 不知道⽬目前 Child 與 Header 的滑動狀狀況

public interface IScrollingChild {
void adjustScroll(float headerTranslationY, boolean isHeaderExpanded);
void setScrollingParent(IShopHomeScrollingParent scrolling);
void setPagePosition(int position);
}

private SparseArrayCompat<IScrollingChild> mIScrollingChildList;
super(fm);
mIScrollingChildList = new SparseArrayCompat<>();
}
}
public IScrollingChild getIScrollingChild(int position) {
return mIScrollingChildList.get(position);
}
public void addPageFragment(Fragment fragment) {
mFragments.add(fragment);
if(fragment instanceof IScrollingChild) {
int position = mFragments.indexOf(fragment);
IScrollingChild child = (IScrollingChild) fragment;
child.setPagePosition(position);
mIScrollingChildList.put(position, child);
if (mScrollingParent != null) {
child.setScrollingParent(mScrollingParent);
}
ParentAdapter

public class ScrollingParentFragment implements ISCrollingParent {
...
ViewPager.OnPageChangeListener mOnPageChangeListener = new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
if (positionOffsetPixels > 0) {
IScrollingChild scrolling = mPagerAdapter.getIScrollingChild(position);
if(scrolling != null) {
scrolling.adjustScroll(mHeader.getTranslationY());
}
}
}
@Override
public void onPageSelected(int position) {
}
}
@Override
public void onPageScrollStateChanged(int state) {}
};
}
ParentFragment

public class ScrollingParentFragment implements ISCrollingParent {
...
@Override
...
mViewPager.setOnPageChangeListener(mOnPageChangeListener);
}
...
@Override
}
}
}
@Override
ParentFragment

protected RecyclerView mRecyclerView;
ScrollingOnScrollListener mScrollListener;
@Override
mRecyclerView.addItemDecoration(new ScrollingDecoration(getHeaderHeight()));
}
@Override
int scrollY = mOnScrollListener.getScrollY();
mRecyclerView.scrollBy(0, -scrollY);
mRecyclerView.scrollBy(0, (int) -headerTranslationY);
}
@Override
}
@Override
}
ChildFragment

Scrolling Effect Detail
Finger swipe up
Finger swipe down
IsPageChanging

Finger swipe up
• Header 會被內容推上去，並推到螢幕外
• Tab 會被內容推上去，並卡在畫⾯面最上⽅方
• 當 Tab 往上移動碰到 Toolbar 時，Toolbar 要被 Tab 推上去

Tab
Header
mHeaderTopLimit
Tab
Header
= HeaderHeight - TabHeight
100
400

@Override
}
@Override
int headerTranslationY = Math.abs((int) mHeader.getTranslationY());
if (dy > 0) {
// Finger swipe up
if (headerTranslationY < mHeaderTopLimit) {
int scroll = Math.min(headerTranslationY + dy, mHeaderTopLimit);
mHeader.setTranslationY(-scroll);
}
}
}
@Override
scrolling.adjustScroll(mHeaderHeight, mHeader.getTranslationY(), mIsHeaderExpanded);
}
ParentFragment

Tab
ToolbarTab
Toolbar
freeSpace
freeSpace = HeaderHeight
- (TabHeight + ToolbarHeight)

@Override
}
@Override
if (dy > 0) {
// Finger swipe up
if(scroll > freeSpaceBeforePushToolbar) {
int toolbarTranslationY = Math.abs((int) mToolbar.getTranslationY());
int toolbarScroll = Math.min(toolbarTranslationY + dy, toolbarHeight);
mToolbar.setTranslationY(-toolbarScroll);
}
}
}
}
...
@Override
ParentFragment

Finger swipe down
• Tab 與 Toolbar 要被拉下來來，並卡在最上⾯面
• 內容滑到最頂端時，Header 與 Tab 要被拉下來來，並回到原本的位⼦子

Tab
Toolbar

@Override
}
@Override
if (dy > 0) {
// Finger swipe up
...
} else {
// Finger swipe down
if(toolbarTranslationY > 0) {
int scroll = Math.max(toolbarTranslationY + dy, 0);
mToolbar.setTranslationY(-scroll);
}
}
}
ParentFragment

@Override
}
@Override
if (dy > 0) {
// Finger swipe up
...
} else {
int move = toolbarTranslationY - scroll;
int headerScroll = headerTranslationY - move;
mHeader.setTranslationY(-headerScroll);
}
}
}
ParentFragment

Tab
Toolbar
Tab
Toolbar
freeSpace

@Override
}
@Override
if (dy > 0) {
// Finger swipe up
...
} else {
}
if (scrollY < freeSpaceBeforePushToolbar) {
}
}
}
ParentFragment

onPageScrolled() / onPageSelected()
adjustScroll()
onChildScrolled()

}
}
}
}
@Override
}
}
}
@Override
}
}
@Override
public void onPageScrollStateChanged(int state) {
mIsPageChanging = state != ViewPager.SCROLL_STATE_IDLE;
}
};
}
ParentFragment

@Override
}
@Override
if(mIsPageChanging) {
return;
}
if (dy > 0) {
// Finger swipe up
}
}
ParentFragment

Parallax
Toolbar background animation
Polished

}
}
}else {
}
}
}
}
private void scrollHeader(int scroll) {
mMainImage.setTranslationY((scroll * 2/3));
}
@Override
}
}
}
ParentFragment

return;
}
if (dy > 0) {
// Finger swipe up
scrollHeader(scroll);
}
}
}else {
scrollHeader(headerScroll);
}
scrollHeader(scroll);
}
}
}
ParentFragment

@Override
}
@Override
if(mIsPageChanging) {
return;
}
...
int newHeaderTranslationY = Math.abs(mHeader.getTranslationY());
if(newHeaderTranslationY < freeSpaceBeforePushToolbar) {
if(!mIsHeaderExpanded) {
mIsHeaderExpanded = true;
doHeaderBackgroundAnimation(true);
}
} else {
if(mIsHeaderExpanded) {
mIsHeaderExpanded = false;
doHeaderBackgroundAnimation(false);
}
}
}
private void scrollHeader(int scroll, IScrollingChild childScrolling) {
ParentFragment

Tab
Toolbar
IScrollingParent
- onChildScrolled()
IScrollingChild
- adjustScroll()
- onHeaderTranslation()

How to make scrolling effect like GooglePlay’s homepage

Recommended

Recommended

More Related Content

Similar to How to make scrolling effect like GooglePlay’s homepage

Similar to How to make scrolling effect like GooglePlay’s homepage (20)

Recently uploaded

Recently uploaded (20)

How to make scrolling effect like GooglePlay’s homepage