Android 卡片层叠效果

卡片层叠效果的实现:比如探探上的左滑右滑切换图片。
而现在我们要实现的卡片层叠以及滑动删除是通过RecyclerView的ItemTouchHelper工具来实现的,ItemTouchHelper这个工具是对RecyclerView列表的拖动排序和滑动删除进行了处理。ItemTouchHelper是继承了RecyclerView.ItemDecoration,我们可以发现ItemTouchHelper源码构造传递一个CallBack这个参数源码告诉用户需要控制视图的动作行为,所以就需要重新定义这个CallBack。

重新定义CallBack:

package zhangtao.bwie.com.recyclerveiw_cards;
import android.graphics.Canvas;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;
import android.util.Log;
import android.view.View;
import java.util.List;
import Bean.SwipeCardBean;

public class SwipeCardCallBack extends ItemTouchHelper.SimpleCallback{
    private List alist;
    private UniversalAdapter madapter;
    private RecyclerView mrecy;

    public SwipeCardCallBack(List alist, UniversalAdapter universalAdapter, RecyclerView recy_card) {
         //即我们对哪些方向操作关心。如果我们关心用户向上拖动,可以将
         //填充swipeDirs参数为LEFT | RIGHT 。0表示从不关心。
 super(0, ItemTouchHelper.LEFT | ItemTouchHelper.UP | ItemTouchHelper.RIGHT | ItemTouchHelper.DOWN); this.alist = alist; this.madapter = universalAdapter; this.mrecy = recy_card; } @Override public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) { return false; } @Override public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) { //当已经滑动删除了的时候会被回掉--删除数据,循环的效果 SwipeCardBean remove = alist.remove(viewHolder.getLayoutPosition()); Log.d("zzz","card:data:"+remove.toString()); alist.add(0, remove); madapter.notifyDataSetChanged(); } @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); //监听话滑动的距离--控制动画的执行程度 //灵界点 double maxDistance = recyclerView.getWidth() * 0.5f; double distance = Math.sqrt(dX * dX); //动画执行的百分比 double fraction = distance / maxDistance; if (fraction > 1) { fraction = 1; } int itemcount = recyclerView.getChildCount(); for (int i = 0; i < itemcount; i++) { //执行 View view = recyclerView.getChildAt(i); //几个view层叠的效果,错开的效果--便宜动画+缩放动画 int level = itemcount - i - 1; if (level > 0) { if (level < CardConfig.MAX_SHOW_COUNT - 1) { view.setTranslationY((float) (1 - CardConfig.TRANS_V_GAP * level + fraction * CardConfig.TRANS_V_GAP)); view.setScaleX((float) (1 - CardConfig.SCALE_GAP * level + fraction * CardConfig.SCALE_GAP)); view.setTranslationY((float) (1 - CardConfig.SCALE_GAP * level + fraction * CardConfig.SCALE_GAP)); } } } }}
 然后实现RecyclerView的Item进行叠加,需要重写RecyclerView的LayoutManager来控制布局。 
  
package zhangtao.bwie.com.recyclerveiw_cards;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.util.TypedValue;
import android.view.View;
import android.view.ViewGroup;

public class SwipeCardLayoutManager extends RecyclerView.LayoutManager{
    private Context context;
    private int TRANS_Y_GAP;

    public SwipeCardLayoutManager(MainActivity mainActivity) {
        this.context = mainActivity;
        TRANS_Y_GAP = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,15,
                context.getResources().getDisplayMetrics());
    }
    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        super.onLayoutChildren(recycler, state);
        //1.如何实现层叠效果--cardView.layout(l,t,r,b)
        //2.如何让8个条目中的4个展示在RecylerView里面
        //1在布局layout之前,将所有的子View先全部detach掉,然后放到Scrap集合里面缓存。
        detachAndScrapAttachedViews(recycler);
        //2)只将最上面4个view添加到RecylerView容器里面
        int itemCount=getItemCount();//8个
        int bottomPosition;
        if(itemCount<4){
            bottomPosition=0;
        }else{
            bottomPosition=itemCount-4;
        }

        for(int i=bottomPosition;i0){
                if(level
然后就是主界面了:
package zhangtao.bwie.com.recyclerveiw_cards;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.RecyclerView;
import android.support.v7.widget.helper.ItemTouchHelper;
import android.view.View;
import android.widget.Toast;
import java.util.ArrayList;
import java.util.List;
import Bean.SwipeCardBean;

public class MainActivity extends AppCompatActivity {
    private List alist = new ArrayList<>();
    private RecyclerView recy_card;
    private UniversalAdapter universalAdapter;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        recy_card = findViewById(R.id.reyc_card);
        initData();
        setAdapter_Card();
    }
    private void initData() {
        int[] intimage = {R.drawable.img1,R.drawable.img2,R.drawable.img3,R.drawable.img4,R.drawable.img5};
        for (int i = 0; i < 5; i++) {
            SwipeCardBean swpe = new SwipeCardBean();
            swpe.resouimage = intimage[i];
            swpe.title = "美丽" + i;
            alist.add(swpe);
        }
    }
    private void setAdapter_Card() {
        SwipeCardLayoutManager swmanamger = new SwipeCardLayoutManager(this);
        recy_card.setLayoutManager(swmanamger);
        universalAdapter = new UniversalAdapter(alist, this);
        recy_card.setAdapter(universalAdapter);
        CardConfig.initConfig(this);
        ItemTouchHelper.Callback callback = new SwipeCardCallBack(alist, universalAdapter, recy_card);
        ItemTouchHelper helper = new ItemTouchHelper(callback);
        helper.attachToRecyclerView(recy_card);
        universalAdapter.setOnItemClick(new UniversalAdapter.onItemcliek() {
            @Override
            public void OnItemClick(View v, int position) {
                Toast.makeText(MainActivity.this,"hhhhhh",Toast.LENGTH_SHORT).show();
            }
        });
    }
}
XML布局:
主界面布局:



    

RecyclerView的Item布局:


    
        
        
    


这个就是RecyclerView的Item的一个叠加,同时也可以左右滑进行删除。

Android 卡片层叠效果_第1张图片







你可能感兴趣的:(Android 卡片层叠效果)