我們這次要實(shí)現(xiàn)一個(gè)類似探探主界面的程序 颈畸。
看到這界面也許有很多人回收直接找個(gè)三方的控件不就好了嗎伊佃，對于開發(fā)來說是這樣的但是我們也不能不加以研究畢竟不是三方的所有要求都是符合我們自己的UI的要求响蕴。畢竟如果面試去問道***界面是怎們實(shí)現(xiàn)的 我們不能只說用了第三方就行了吧骤铃。
所以在這里我們實(shí)現(xiàn)一個(gè)自己的控件拉岁，并弄明白其原理就好了。
在實(shí)現(xiàn)的過程中我們先去決定使用什么控件比較合適 在這里使用的RecycleView
使用原因：第一惰爬，RecyclerView 的Item View 自帶緩存機(jī)制
第二喊暖，RecyclerView 實(shí)現(xiàn)方便解耦
然后是我們把實(shí)現(xiàn)的步驟區(qū)分開
（1）首先我們我們要實(shí)現(xiàn)的第一步是實(shí)現(xiàn)靜態(tài)顯示的疊層效果
我們要自定義一個(gè)LayoutManager
第一步實(shí)現(xiàn)重寫generateDefaultLayoutParams() 方法
@Override
public RecyclerView.LayoutParams generateDefaultLayoutParams() {
return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
第二步重寫 onLayoutChildren（）方法
該方法是LayoutManager的入口。它會在如下情況下被調(diào)用：
1 在RecyclerView初始化時(shí)撕瞧，會被調(diào)用兩次陵叽。
2 在調(diào)用adapter.notifyDataSetChanged()時(shí)，會被調(diào)用丛版。
3 在調(diào)用setAdapter替換Adapter時(shí),會被調(diào)用巩掺。
4 在RecyclerView執(zhí)行動畫時(shí)，它也會被調(diào)用硼婿。
即RecyclerView 初始化 锌半、 數(shù)據(jù)源改變時(shí) 都會被調(diào)用。
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
// 先移除所有view
removeAllViews();
// 在布局之前寇漫，將所有的子 View 先 Detach 掉刊殉，放入到 Scrap 緩存中
detachAndScrapAttachedViews(recycler);
//獲取條目數(shù)量
int itemCount = getItemCount();
if (itemCount < 1) {
return;
}
//定義邊界 防止數(shù)組越界
int lastPosition;
if (itemCount < CardConfig.DEFAULT_COUNT) {
lastPosition = 0;
} else {
lastPosition = itemCount - CardConfig.DEFAULT_COUNT;
}
//從看見層的底層一次網(wǎng)上添加
for (int position = lastPosition; position < itemCount; position++) {
View view = recycler.getViewForPosition(position);
addView(view);
measureChildWithMargins(view, 0, 0);
int widthSpace = getWidth() - getDecoratedMeasuredWidth(view);
int heightSpace = getHeight() - getDecoratedMeasuredHeight(view);
//將childView設(shè)置水平居中
layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 4,
widthSpace / 2 + getDecoratedMeasuredWidth(view),
heightSpace / 4+ getDecoratedMeasuredHeight(view));
//獲取當(dāng)前的層數(shù)
int level = itemCount - position - 1;
//設(shè)置每層的Scale和translationY
if(level>0){
//不是第一層
//設(shè)置每一層X方向的縮小
view.setScaleX(1-CardConfig.DEFAULT_SCALE*level);
if(level<CardConfig.DEFAULT_COUNT-1){
//Y需要縮小的和位移
view.setTranslationY(CardConfig.DEFAULT_TRANS_Y * level);
view.setScaleY(1 - CardConfig.DEFAULT_SCALE * level);
}else{
//不需要縮小和位移只需要和前一層保持一致
view.setTranslationY(CardConfig.DEFAULT_TRANS_Y * (level - 1));
view.setScaleY(1 - CardConfig.DEFAULT_SCALE * (level - 1));
}
}
}
}
這就已經(jīng)實(shí)現(xiàn)了疊層的效果
（2）靜態(tài)效果實(shí)現(xiàn)后 我們就添加條目的Touch效果
添加條用touch動畫一共也是分成兩部分
第一部分是除了第一層的Scale 和TranslationY
第二部分是第一層左右ImageView的alpha；
具體實(shí)現(xiàn)
（1）不管是那個(gè)方形的滑動判斷是夠移除都是有一個(gè)閾值打的
//設(shè)置移除的閾值
public float getThreshold(RecyclerView.ViewHolder viewHolder) {
return mRv.getWidth() * 0.5f;
}
（2）為了方便測試 在 onSwiped中最條目進(jìn)行復(fù)位 是recycleView可以循環(huán)出現(xiàn)
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
//實(shí)現(xiàn)條目的循環(huán)
Object remove = mDatas.remove(viewHolder.getLayoutPosition());
mDatas.add(0, remove);
mAdapter.notifyDataSetChanged();
//探探只是第一層加了rotate & alpha的操作
//對rotate進(jìn)行復(fù)位
viewHolder.itemView.setRotation(0);
if (viewHolder instanceof ViewHolder) {
ViewHolder holder = (ViewHolder) viewHolder;
holder.setAlpha(R.id.iv_love, 0);
holder.setAlpha(R.id.iv_del, 0);
}
}
（3）在onChildDraw放法中進(jìn)行動畫的的判斷
@Override
public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
//先根據(jù)滑動的dxdy 算出現(xiàn)在動畫的比例系數(shù)fraction
double swipValue = Math.sqrt(dX * dX + dY * dY);
double fraction = swipValue / getThreshold(viewHolder);
//邊界修正
if (fraction > 1) {
fraction = 1;
}
int childCount = recyclerView.getChildCount();
//對每個(gè)ChildView 進(jìn)行位移
for (int i = 0; i < childCount; i++) {
View child = recyclerView.getChildAt(i);
//獲取層數(shù)
int level = childCount - i - 1;
if (level > 0) {
//在這里進(jìn)行非第一層的動畫
child.setScaleX((float) (1 - CardConfig.DEFAULT_SCALE * level + fraction * CardConfig.DEFAULT_SCALE));
if (level < CardConfig.DEFAULT_COUNT - 1) {
child.setScaleY((float) (1 - CardConfig.DEFAULT_SCALE * level + fraction * CardConfig.DEFAULT_SCALE));
child.setTranslationY((float) (CardConfig.DEFAULT_TRANS_Y * level - fraction * CardConfig.DEFAULT_TRANS_Y));
} else {
//不進(jìn)行動畫
}
} else {
//第一層添加的動畫
float xFraction = dX / getThreshold(viewHolder);
//邊界修正 最大為1
if (xFraction > 1) {
xFraction = 1;
} else if (xFraction < -1) {
xFraction = -1;
}
if (viewHolder instanceof ViewHolder) {
ViewHolder holder = (ViewHolder) viewHolder;
if (dX > 0) {
//露出左邊州胳，比心
holder.setAlpha(R.id.iv_love, xFraction);
} else if (dX < 0) {
//露出右邊记焊，滾犢子
holder.setAlpha(R.id.iv_del, -xFraction);
} else {
holder.setAlpha(R.id.iv_love, 0);
holder.setAlpha(R.id.iv_del, 0);
}
}
}
}
}
最終實(shí)現(xiàn)的效果
