recyclerView 实现类似支付宝应用页面 以及顶部增加viewPager轮播

这篇博客基于已有的recyclerView拖拽功能,增加了长按显示删除按钮的交互,并在顶部集成ViewPager实现轮播效果,模仿支付宝应用的页面设计。内容详细介绍了如何在MyItemTouchCallback类中添加相关接口来完成这一功能。
摘要由CSDN通过智能技术生成

 本文是在博文:http://blog.csdn.net/liaoinstan/article/details/51200618

的基础上进行添加。recyclerView拖拽分析,请参考该博文。

代码也是基于该博文源码进行修改。


在该文章中已经讲述了如何实现拖拽。现在在其基础上增加一个长按出现删除按钮。以及顶部有一个轮播图的功能。

删除按钮的增加:

在MyItemTouchCallback类中

增加两个接口方法(红色部分)

public interface OnDragListener {
    void onFinishDrag();
    void onFinishDrag(RecyclerView.ViewHolder viewHolder,RecyclerView.ViewHolder target);
    void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState);
}
item被选中的时候。具体在view类中去实现该方法,进行删除按钮显示

@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    if (actionState != ItemTouchHelper.ACTION_STATE_IDLE) {
        if (background == null && bkcolor == -1) {
            Drawable drawable = viewHolder.itemView.getBackground();
            if (drawable == null) {
                bkcolor = 0;
            } else {
                background = drawable;
            }
        }
        viewHolder.itemView.setBackgroundColor(Color.LTGRAY);
        if (onDragListener != null) {
            onDragListener.onSelectedChanged(viewHolder,actionState);
        }
    }
    super.onSelectedChanged(viewHolder, actionState);
}
Item被移动的时候,具体在view类中去实现该方法, 移动完成后,进行删除按钮显示
@Override
public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    int fromPosition = viewHolder.getAdapterPosition();//得到拖动ViewHolder的position
    int toPosition = target.getAdapterPosition();//得到目标ViewHolder的position
    itemTouchAdapter.onMove(fromPosition, toPosition);
    if (onDragListener != null) {
        onDragListener.onFinishDrag(viewHolder,target);
    }
    return true;
}

在实现类中
@Override
public void onFinishDrag(RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
    int fromPosition = viewHolder.getAdapterPosition();//得到拖动ViewHolder的position
    int toPosition = target.getAdapterPosition();//得到目标ViewHolder的position
    if (fromPosition == toPosition) {
        // do nothing
        return;
    }
    //  设置Item选中状态并刷新页面
    Item item = (Item) adapter.getItem(fromPosition);
    item.setIsDeleteState(false);
    adapter.setIsDeleteState(false);
    if (viewHolder instanceof HeaderRecyclerAdapter.MyViewHolder) {
        ((HeaderRecyclerAdapter.MyViewHolder) viewHolder).deleteView.setVisibility(View.GONE);
    }

}


@Override
public void onSelectedChanged(RecyclerView.ViewHolder viewHolder, int actionState) {
    int position = viewHolder.getAdapterPosition();
    Item item = (Item) adapter.getItem(position);
    //  设置Item选中状态并刷新页面
item.setIsDeleteState(true); adapter.setIsDeleteState(true); if (viewHolder instanceof HeaderRecyclerAdapter.MyViewHolder) { ((HeaderRecyclerAdapter.MyViewHolder) viewHolder).deleteView.setVisibility(View.VISIBLE); }}
这样就实现了长按后显示删除按钮,当拖动与其他item交换位置后删除按钮就会不显示。
在顶部增加轮播  主要在adapter中实现,类如下
public class HeaderRecyclerAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> implements MyItemTouchCallback.ItemTouchAdapter {

    private static final int UPTATE_VIEWPAGER = 0;
    private Context context;
    private int src;
    private List<Item> results;
    private List<Item> header;

    public List<Object> getDataSet() {
        return dataSet;
    }

    public void setDataSet(List<Object> dataSet) {
        this.dataSet = dataSet;
    }

    private List<Object> dataSet;

    public boolean isDeleteState() {
        return isDeleteState;
    }

    public void setIsDeleteState(boolean isDeleteState) {
        this.isDeleteState = isDeleteState;
    }

    private boolean isDeleteState = false;

    public HeaderRecyclerAdapter(int src, List<Item> results, List<Item> header) {
        this.results = results;
        this.header = header;
        this.src = src;
        initData();
    }

    public Object getItem(int position) {
        return dataSet.get(position);
    }

    private void initData() {
        dataSet = new ArrayList<>();
        dataSet.addAll(header);
        dataSet.addAll(results);
    }

    @Override
    public int getItemViewType(int position) {
        Item item = (Item) dataSet.get(position);
        return item.getType();
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        this.context = parent.getContext();
        View itemView = LayoutInflater.from(parent.getContext()).inflate(src, parent, false);
        switch (viewType) {
            case 1:
                itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.viewpager_header, parent, false);
                return new HeaderViewHolder(itemView);
            default:
                return new MyViewHolder(itemView);
        }
    }

    @Override
    public void onBindViewHolder(final RecyclerView.ViewHolder holder, final int position) {
        final Item item = (Item) dataSet.get(position);
        if (holder instanceof MyViewHolder) {
            if (isDeleteState()) {
                if (item.isDeleteState()) {
                    ((MyViewHolder) holder).deleteView.setVisibility(View.VISIBLE);
                }
            }
            ((MyViewHolder) holder).imageView.setImageResource(item.getImg());
            ((MyViewHolder) holder).textView.setText(item.getName());
        } else if (holder instanceof HeaderViewHolder) {
            // 顶部的轮播图
            List<View> views = new ArrayList<>();
            for (int i = 0; i < 4; i++) {
                View v = getGridChildView(i);
                views.add(v);
            }

            setViewPager(((HeaderViewHolder) holder).mViewPager, ((HeaderViewHolder) holder).bottomLayout, views);
        }
    }

    private void setViewPager(final ViewPager viewPager, LinearLayout bottomLayout, List<View> views) {
        final ImageAdapter adapter = new ImageAdapter(views);
        viewPager.setAdapter(adapter);
        final Handler mHandler = new Handler(new Handler.Callback() {
            @Override
            public boolean handleMessage(Message msg) {
                switch (msg.what) {
                    case UPTATE_VIEWPAGER:
                        if (msg.arg1 != 0) {
                            viewPager.setCurrentItem(msg.arg1);
                        } else {
                            //false 当从末页调到首页时,不显示翻页动画效果,
                            viewPager.setCurrentItem(msg.arg1, false);
                        }
                        break;
                }
                return true;
            }
        });
        //下面是设置动画切换的样式
//        viewPager.setPageTransformer(true, new RotateUpTransformer());
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            //图片左右滑动时候,将当前页的圆点图片设为选中状态
            @Override
            public void onPageSelected(int position) {

                currentIndex = position;
            }

            @Override
            public void onPageScrolled(int position, float v, int i) {

            }

            @Override
            public void onPageScrollStateChanged(int state) {
  
            }
        });


        //设置自动轮播图片,5s后执行,周期是5s

        Timer timer = new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                int count = adapter.getCount();
                if (count > 1) { // 多于1个,才循环
                    int index = viewPager.getCurrentItem();
                    index = (index + 1) % count;
                    Message message = new Message();
                    message.what = UPTATE_VIEWPAGER;
                    message.arg1 = index;
                    mHandler.sendMessage(message);
                }
            }
        }, 6000, 6000);

    }

    //设置当前 第几个图片 被选中
    private int currentIndex = 0;

    /**
     * 获取表情的gridview的子view
     *
     * @param i
     * @return
     */
    private View getGridChildView(int i) {
        View view = View.inflate(context, R.layout.item_viewpager, null);
        ImageView imageView = (ImageView) view.findViewById(R.id.image);
        if (i == 0) {
            imageView.setImageResource(R.drawable.takeout_ic_category_brand);
        } else if (i == 1) {
            imageView.setImageResource(R.drawable.takeout_ic_category_flower);
        } else if (i == 2) {
            imageView.setImageResource(R.drawable.takeout_ic_category_fruit);
        } else if (i == 3) {
            imageView.setImageResource(R.drawable.takeout_ic_category_medicine);
        }
        return view;
    }

    public void clearDeleteState() {
        isDeleteState = false;
        for (int i = 0; i < results.size(); i++) {
            Item item = results.get(i);
            item.setIsDeleteState(false);
        }
    }

    @Override
    public int getItemCount() {
        return dataSet.size();
    }

    @Override
    public void onMove(int fromPosition, int toPosition) {
        if (fromPosition == dataSet.size() - 1 || toPosition == dataSet.size() - 1) {
            return;
        }
        if (fromPosition == 0 || toPosition == 0) {
            return;
        }
        if (fromPosition < toPosition) {
            for (int i = fromPosition; i < toPosition; i++) {
                Collections.swap(dataSet, i, i + 1);
            }
        } else {
            for (int i = fromPosition; i > toPosition; i--) {

                Collections.swap(dataSet, i, i - 1);
            }
        }
//        initData();
        notifyItemMoved(fromPosition, toPosition);
    }

    @Override
    public void onSwiped(int position, RecyclerView.ViewHolder holder) {
        results.remove(position);
        notifyItemRemoved(position);
    }

    public class MyViewHolder extends RecyclerView.ViewHolder {

        public TextView textView;
        public ImageView imageView;
        public ImageView deleteView;

        public MyViewHolder(View itemView) {
            super(itemView);
            WindowManager wm = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
            int width = wm.getDefaultDisplay().getWidth();
            ViewGroup.LayoutParams layoutParams = itemView.getLayoutParams();
            layoutParams.height = width / 4;
            itemView.setLayoutParams(layoutParams);
            textView = (TextView) itemView.findViewById(R.id.item_text);
            imageView = (ImageView) itemView.findViewById(R.id.item_img);
            deleteView = (ImageView) itemView.findViewById(R.id.delete);
        }
    }

    public class HeaderViewHolder extends RecyclerView.ViewHolder {

        public ViewPager mViewPager;
        public LinearLayout bottomLayout;

        public HeaderViewHolder(View itemView) {
            super(itemView);
            mViewPager = (ViewPager) itemView.findViewById(R.id.vp_hottest);
            bottomLayout = (LinearLayout) itemView.findViewById(R.id.ll_hottest_indicator);
        }
    }
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值