摘要
第一次看見堆疊卡片的效果是在“探探app”上，網上也有很多實現。前段時間由於工作需要，我也實現了一個。趁此總結一下自己的心路歷程，也希望對控制元件感興趣的童鞋有所幫助。
效果圖
功能
- 自定義卡片的堆疊效果
- 自定義卡片移除動畫
- 支援載入更多
原始碼及使用方式
實現步驟
Adapter: 提供View
盜用了RecyclerView的方式，於是我們可以這麼使用：mStackLayout.setAdapter(...);
public class StackLayout extends FrameLayout {
private Adapter mAdapter;
public void setAdapter(Adapter adapter) {
mAdapter = adapter;
onSetAdapter(adapter);
}
private void onSetAdapter(Adapter adapter) {...}
public static abstract class Adapter<VH extends ViewHolder>{
public abstract VH onCreateViewHolder(ViewGroup parent, int position);
public abstract void onBindViewHolder(VH holder, int position);
public abstract int getItemCount();
private VH getViewHolder(ViewGroup parent, int position){
VH viewHolder = onCreateViewHolder(parent, position);
onBindViewHolder(viewHolder, position);
return viewHolder;
}
}
public static abstract class ViewHolder {
public final View itemView;
public ViewHolder(View itemView) {
this.itemView = itemView;
}
}
}複製程式碼DataSetObserver: 觀察者，重新整理View
同樣盜用了RecyclerView的方式，於是我們可以這麼使用：mAdapter.notifyDataSetChanged();
public class StackLayout extends FrameLayout {
private void onSetAdapter(Adapter adapter) {
adapter.registerDataSetObserver(mItemObserver);
mItemObserver.dataChanged(adapter);
}
ItemObserver mItemObserver = new ItemObserver();
private class ItemObserver extends DataSetObserver {
@Override public void onChanged() { dataChanged(mAdapter); }
@Override public void onInvalidated() { dataChanged(mAdapter); }
private void dataChanged(Adapter adapter) {
// 移除先前的 view, 並從 adapter 裡拿到新的 view。
StackLayout.this.removeAllViews();
for(int i=getCurrentItem(); i<adapter.getItemCount(); i ++) {
ViewHolder viewHolder = adapter.getViewHolder(StackLayout.this, i);
StackLayout.this.addView(viewHolder.itemView, 0);
}
}
}
public static abstract class Adapter<VH extends ViewHolder>{
...
private final DataSetObservable mObservable = new DataSetObservable();
public void notifyDataSetChanged() {
mObservable.notifyChanged();
}
public void registerDataSetObserver(DataSetObserver observer) {
mObservable.registerObserver(observer);
}
public void unregisterDataSetObserver(DataSetObserver observer) {
mObservable.unregisterObserver(observer);
}
}
}複製程式碼到此為止，我們擁有一個可以重新整理資料的FrameLayout，且所有的子View重疊在一個位置。如圖：
ViewDragHelper: 卡片滑動事件
ViewDragHelper 實乃神器，能實現所有的滑動需求。主要的邏輯在它的Callback裡。
public class StackLayout extends FrameLayout {
private ViewDragHelper mViewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback(){
private ScrollManager mScrollManager;
private View mParent = StackLayout.this;
// 僅捕獲 topChild, 即 最頂上的卡片 可拖動
@Override
public boolean tryCaptureView(View child, int pointerId) {
return mViewDragHelper.getViewDragState() == ViewDragHelper.STATE_IDLE // 空閒狀態
&& ViewHolder.getPosition(child) == getCurrentItem(); // 且是最上面的卡片, 才可捕獲
}
...
// 手指釋放的時候回撥
@Override
public void onViewReleased(final View releasedChild, float xvel, float yvel) {
final int totalRange = mParent.getWidth();
final int left = releasedChild.getLeft();
if(Math.abs(left - 0) < totalRange/2) { // 移動 < 半屏，回到原位
getScrollManager().smoothScrollTo(releasedChild, 0, 0, new ScrollManager.Callback() {...});
}else { // 移動 > 半屏，移除卡片
getScrollManager().smoothScrollTo(releasedChild, totalRange * (left < 0 ? -1 : 1), releasedChild.getTop(), new ScrollManager.Callback() {
@Override
public void onComplete(View view) {
removeView(view);
setCurrentItem(getCurrentItem() + 1);
}
});
}
}
});
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
return getViewDragHelper().shouldInterceptTouchEvent(event); // 轉發事件給 ViewDragHelper
}
@Override
public boolean onTouchEvent(MotionEvent event) {
getViewDragHelper().processTouchEvent(event); // 轉發事件給 ViewDragHelper
return true;
}
}複製程式碼到此為止，已經實現了60%了。
PageTransformer: 堆疊卡片
堆疊效果，這應該是該控制元件最難處理的一部分了，當時也是bug不斷，除錯了好久。實現方式借鑑了ViewPager.PageTransformer，外面可以這樣呼叫mStackLayout.addPageTransformer(...);
public class StackLayout extends FrameLayout {
private ViewDragHelper mViewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback(){
...
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
int totalRange = mParent.getWidth();
float position = (1.0f * (left - 0))/totalRange;
transformPage(position, left < 0); // 在 view 為止變化的時候，回撥動畫介面
}
}
private List<PageTransformer> mPageTransformerList = new ArrayList<>();
public void addPageTransformer(PageTransformer... pageTransformerList) {
mPageTransformerList.addAll(Arrays.asList(pageTransformerList));
}
/**
* 卡片滑動動畫介面, 類似 {@link ViewPager.PageTransformer}
*/
public static abstract class PageTransformer {
/**
* 根據 position 做相應的動畫, 其中 position:
* [-1, -1] -> 完全移出螢幕, 待remove狀態
* (-1, 0) -> 手指拖動狀態
* [0, 棧內頁面數) -> 棧中狀態
* [棧內頁面數, 總頁面數) -> 顯示不下, 待顯示狀態
*
* @param page 各卡片的根佈局, 即 {@link ViewHolder#itemView }
* @param position 各卡片的位置
* @param isSwipeLeft 向左滑動
*/
public abstract void transformPage(View page, float position, boolean isSwipeLeft);
}
private void transformPage(float topPagePos, boolean isSwipeLeft) {
List<PageTransformer> list = new ArrayList<>(mPageTransformerList); // 保護性複製, 防止汙染原來的list
if(list.isEmpty())
list.add(new StackPageTransformer()); // default PageTransformer
int itemCount = mAdapter.getItemCount();
for(int i=0; i<itemCount; i++) {
View page = getChildAt(i);
if(page == null)
return ;
for (PageTransformer pageTransformer : list) {
pageTransformer.transformPage(page, -Math.abs(topPagePos) + ViewHolder.getPosition(page) - getCurrentItem(), isSwipeLeft);
}
}
}
}複製程式碼正如ViewPager.PageTransformer對於position分了4段(-INF, -1)、[-1, 0]、(0, 1]、(1, INF)。我們也分了相應的幾個狀態：
| position | 狀態 |
|---|---|
| [-1, -1] | 完全移出螢幕, 待remove狀態 |
| (-1, 0) | 手指拖動狀態 |
| [0, 棧內頁面數) | 棧中狀態 |
| [棧內頁面數, 總頁面數) | 顯示不下, 待顯示狀態 |
注意到，PageTransformer是一個介面，通過實現它，我們給出堆疊效果的真正邏輯。通過view.setTranslationY()和view.setScale()調整卡片的位置和大小，使之堆疊在一起。
外面可以這樣呼叫
mStackLayout.addPageTransformer(new StackPageTransformer());
public final class StackPageTransformer extends StackLayout.PageTransformer {
private float mMinScale; // 棧底: 最小頁面縮放比
private float mMaxScale; // 棧頂: 最大頁面縮放比
private int mStackCount; // 棧內頁面數
private float mPowBase; // 基底: 相鄰兩 page 的大小比例
public StackPageTransformer(float minScale, float maxScale, int stackCount) {
mMinScale = minScale;
mMaxScale = maxScale;
mStackCount = stackCount;
if(mMaxScale < mMinScale)
throw new IllegalArgumentException("The Argument: maxScale must bigger than minScale !");
mPowBase = (float) Math.pow(mMinScale/mMaxScale, 1.0f/mStackCount);
}
public StackPageTransformer() {
this(0.8f, 0.95f, 5);
}
public final void transformPage(View view, float position, boolean isSwipeLeft) {
View parent = (View) view.getParent();
int pageWidth = parent.getMeasuredWidth();
int pageHeight = parent.getMeasuredHeight();
view.setPivotX(pageWidth/2);
view.setPivotY(pageHeight);
float bottomPos = mStackCount-1;
if (view.isClickable())
view.setClickable(false);
if (position == -1) { // [-1]: 完全移出螢幕, 待刪除
view.setVisibility(View.GONE);
} else if (position < 0) { // (-1,0): 拖動中
view.setVisibility(View.VISIBLE);
view.setTranslationX(0);
view.setScaleX(mMaxScale);
view.setScaleY(mMaxScale);
} else if (position <= bottomPos) { // [0, mStackCount-1]: 堆疊中
int index = (int)position; // 整數部分
float minScale = mMaxScale * (float) Math.pow(mPowBase, index+1);
float maxScale = mMaxScale * (float) Math.pow(mPowBase, index);
float curScale = mMaxScale * (float) Math.pow(mPowBase, position);
view.setVisibility(View.VISIBLE);
// 從上至下, 調整堆疊位置
view.setTranslationY(- pageHeight * (1-mMaxScale) * (bottomPos-position) / bottomPos);
// 從上至下, 調整卡片大小
float scaleFactor = minScale + (maxScale - minScale) * (1 - Math.abs(position - index));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// 只有最上面一張可點選
if(position == 0){
if(!view.isClickable())
view.setClickable(true);
}
} else { // (mStackCount-1, +Infinity]: 待顯示(堆疊中展示不下)
view.setVisibility(View.GONE);
}
}
}複製程式碼你也可以仿照這個類，實現自定義的堆疊效果。
PageTransformer: 側滑動畫效果
估計你也猜到了，滑動動畫還是由它實現的。看一下內建的漸變動畫:
public final class AlphaTransformer extends StackLayout.PageTransformer {
private float mMinAlpha = 0f;
private float mMaxAlpha = 1f;
public AlphaTransformer(float minAlpha, float maxAlpha) {
mMinAlpha = minAlpha;
mMaxAlpha = maxAlpha;
}
public AlphaTransformer() {
this(0f, 1f);
}
@Override
public void transformPage(View view, float position, boolean isSwipeLeft) {
if (position > -1 && position <= 0) { // (-1,0]
view.setVisibility(View.VISIBLE);
view.setAlpha(mMaxAlpha - (mMaxAlpha-mMinAlpha) * Math.abs(position));
} else{
view.setAlpha(mMaxAlpha);
}
}
}複製程式碼外面則這麼使用：
mStackLayout.addPageTransformer(
new StackPageTransformer(), // 堆疊
new AlphaTransformer(), // 漸變
...
);複製程式碼到此為止，已經實現了90%，再對外提供一個移除狀態回撥。
OnSwipeListener: 移除狀態回撥
當卡片被移除觸發回撥，可以在此時區分左滑和右滑，以及決定是否載入更多。
public class StackLayout extends FrameLayout {
private ViewDragHelper mViewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback(){
// 手指釋放的時候回撥
@Override
public void onViewReleased(final View releasedChild, float xvel, float yvel) {
if(Math.abs(left - 0) < totalRange/2) {
...
}else {
getScrollManager().smoothScrollTo(releasedChild, totalRange * (left < 0 ? -1 : 1), releasedChild.getTop(), new ScrollManager.Callback() {
@Override public void onComplete(View view) {
...
mOnSwipeListener.onSwiped(view, ViewHolder.getPosition(view), left < 0, mAdapter.getItemCount() - getCurrentItem());
}
});
}
}
});
private OnSwipeListener mOnSwipeListener;
public static abstract class OnSwipeListener{
/**
* 已被移除螢幕時回撥. 另外, 可以根據 itemLeft, 決定何時載入更多.
*
* @param swipedView 被移除螢幕的view
* @param swipedItemPos swipedView 對應的 AdapterPos
* @param isSwipeLeft 往左滑動
* @param itemLeft 當前剩餘的item個數 (棧中的 + 待顯示的)
*/
public abstract void onSwiped(View swipedView, int swipedItemPos, boolean isSwipeLeft, int itemLeft);
}
}複製程式碼其他細節
- 在
dataChanged()中，注意在重新整理資料延遲到上一次動畫結束之後。 - 在上一次動畫完全結束之前，不可滑動下一張卡片。
- 某些時候，
view.getWidth()可能為0。
總結，Api設計上基本上致敬了RecyclerView和ViewPager。總的來說，自己也有很大的收穫。