我们这次要实现一个类似探探主界面的程序 。
Screenshot_2019-06-13-18-41-46-787_com.p1.mobile..png
看到这界面也许有很多人回收直接找个三方的控件不就好了吗，对于开发来说是这样的但是我们也不能不加以研究毕竟不是三方的所有要求都是符合我们自己的UI的要求。毕竟如果面试去问道***界面是怎们实现的 我们不能只说用了第三方就行了吧。
所以在这里我们实现一个自己的控件，并弄明白其原理就好了。
在实现的过程中我们先去决定使用什么控件比较合适 在这里使用的RecycleView
使用原因：第一，RecyclerView 的Item View 自带缓存机制
第二，RecyclerView 实现方便解耦
然后是我们把实现的步骤区分开
（1）首先我们我们要实现的第一步是实现静态显示的叠层效果
我们要自定义一个LayoutManager
第一步实现重写generateDefaultLayoutParams() 方法
@Override
public RecyclerView.LayoutParams generateDefaultLayoutParams() {
return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
第二步重写 onLayoutChildren（）方法
该方法是LayoutManager的入口。它会在如下情况下被调用：
1 在RecyclerView初始化时，会被调用两次。
2 在调用adapter.notifyDataSetChanged()时，会被调用。
3 在调用setAdapter替换Adapter时,会被调用。
4 在RecyclerView执行动画时，它也会被调用。
即RecyclerView 初始化 、 数据源改变时 都会被调用。
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
// 先移除所有view
removeAllViews();
// 在布局之前，将所有的子 View 先 Detach 掉，放入到 Scrap 缓存中
detachAndScrapAttachedViews(recycler);
//获取条目数量
int itemCount = getItemCount();
if (itemCount < 1) {
return;
}
//定义边界 防止数组越界
int lastPosition;
if (itemCount < CardConfig.DEFAULT_COUNT) {
lastPosition = 0;
} else {
lastPosition = itemCount - CardConfig.DEFAULT_COUNT;
}
//从看见层的底层一次网上添加
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设置水平居中
layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 4,
widthSpace / 2 + getDecoratedMeasuredWidth(view),
heightSpace / 4+ getDecoratedMeasuredHeight(view));
//获取当前的层数
int level = itemCount - position - 1;
//设置每层的Scale和translationY
if(level>0){
//不是第一层
//设置每一层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));
}
}
}
}
这就已经实现了叠层的效果
QQ图片20190614133808.png
（2）静态效果实现后 我们就添加条目的Touch效果
添加条用touch动画一共也是分成两部分
第一部分是除了第一层的Scale 和TranslationY
第二部分是第一层左右ImageView的alpha；
具体实现
（1）不管是那个方形的滑动判断是够移除都是有一个阈值打的
//设置移除的阈值
public float getThreshold(RecyclerView.ViewHolder viewHolder) {
return mRv.getWidth() * 0.5f;
}
（2）为了方便测试 在 onSwiped中最条目进行复位 是recycleView可以循环出现
@Override
public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
//实现条目的循环
Object remove = mDatas.remove(viewHolder.getLayoutPosition());
mDatas.add(0, remove);
mAdapter.notifyDataSetChanged();
//探探只是第一层加了rotate & alpha的操作
//对rotate进行复位
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放法中进行动画的的判断
@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);
//先根据滑动的dxdy 算出现在动画的比例系数fraction
double swipValue = Math.sqrt(dX * dX + dY * dY);
double fraction = swipValue / getThreshold(viewHolder);
//边界修正
if (fraction > 1) {
fraction = 1;
}
int childCount = recyclerView.getChildCount();
//对每个ChildView 进行位移
for (int i = 0; i < childCount; i++) {
View child = recyclerView.getChildAt(i);
//获取层数
int level = childCount - i - 1;
if (level > 0) {
//在这里进行非第一层的动画
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 {
//不进行动画
}
} 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);
}
}
}
}
}
最终实现的效果
2019-06-14_14_57_04_Trim.gif
