我們這次要實(shí)現(xiàn)一個(gè)類似探探主界面的程序 。
看到這界面也許有很多人回收直接找個(gè)三方的控件不就好了嗎，對(duì)于開(kāi)發(fā)來(lái)說(shuō)是這樣的但是我們也不能不加以研究畢竟不是三方的所有要求都是符合我們自己的UI的要求。畢竟如果面試去問(wèn)道***界面是怎們實(shí)現(xiàn)的 我們不能只說(shuō)用了第三方就行了吧。
所以在這里我們實(shí)現(xiàn)一個(gè)自己的控件，并弄明白其原理就好了。
在實(shí)現(xiàn)的過(guò)程中我們先去決定使用什么控件比較合適 在這里使用的RecycleView
使用原因：第一，RecyclerView 的Item View 自帶緩存機(jī)制
第二，RecyclerView 實(shí)現(xiàn)方便解耦
然后是我們把實(shí)現(xiàn)的步驟區(qū)分開(kāi)
（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的入口。它會(huì)在如下情況下被調(diào)用：
1 在RecyclerView初始化時(shí)，會(huì)被調(diào)用兩次。
2 在調(diào)用adapter.notifyDataSetChanged()時(shí)，會(huì)被調(diào)用。
3 在調(diào)用setAdapter替換Adapter時(shí),會(huì)被調(diào)用。
4 在RecyclerView執(zhí)行動(dòng)畫時(shí)，它也會(huì)被調(diào)用。
即RecyclerView 初始化 、 數(shù)據(jù)源改變時(shí) 都會(huì)被調(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;
}
//從看見(jiàn)層的底層一次網(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(jué)方向的縮小
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動(dòng)畫一共也是分成兩部分
第一部分是除了第一層的Scale 和TranslationY
第二部分是第一層左右ImageView的alpha；
具體實(shí)現(xiàn)
（1）不管是那個(gè)方形的滑動(dòng)判斷是夠移除都是有一個(gè)閾值打的
//設(shè)置移除的閾值
public float getThreshold(RecyclerView.ViewHolder viewHolder) {
return mRv.getWidth() * 0.5f;
}
（2）為了方便測(cè)試 在 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的操作
//對(duì)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)行動(dòng)畫的的判斷
@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ù)滑動(dòng)的dxdy 算出現(xiàn)在動(dòng)畫的比例系數(shù)fraction
double swipValue = Math.sqrt(dX * dX + dY * dY);
double fraction = swipValue / getThreshold(viewHolder);
//邊界修正
if (fraction > 1) {
fraction = 1;
}
int childCount = recyclerView.getChildCount();
//對(duì)每個(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)行非第一層的動(dòng)畫
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)行動(dòng)畫
}
} else {
//第一層添加的動(dòng)畫
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)的效果
