Android高仿京东淘宝商品列表布局切换效果

商品列表布局切换效果很常见,因为淘宝京东有的界面下面很多公司都会给风模仿

当然,我们公司也不例外,最近版本更新添加了这个功能;

在项目中直接使用RecyclerView实现切换功能;

如果不了解RecyclerView的可以先看下:  RecyclerView使用详解

使用RecyclerView可以非常简单的实现功能;

第一步:在adapter中重写getItemViewType()方法;添加setType(int type)方法

    //点击切换布局的时候通过这个方法设置type
    public void setType(int type) {
        this.type = type;
    }

    @Override
    //用来获取当前项Item是哪种类型的布局
    public int getItemViewType(int position) {
        return type;
    }
第二步:在点击布局切换图片时三步走
                if (goodsType==0){
                    ivGoodsType.setImageResource(R.mipmap.good_type_grid);
                    //1:设置布局类型
                    adapter.setType(1);
                    //2:设置对应的布局管理器
                    recyclerView.setLayoutManager(new GridLayoutManager(context,2));
                    //3:刷新adapter
                    adapter.notifyDataSetChanged();
                    goodsType=1;
                }else {
                    ivGoodsType.setImageResource(R.mipmap.good_type_linear);
                    adapter.setType(0);
                    recyclerView.setLayoutManager(new LinearLayoutManager(context));
                    adapter.notifyDataSetChanged();
                    goodsType=0;
                }
第三步:在adapter的onCreateViewHolder()方法中根据自己设置的布局类型切换item布局
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View baseView;
        if (viewType == 0) {
            baseView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_listview_goods_list, parent, false);
            LinearViewHolder linearViewHolder = new LinearViewHolder(baseView);
            return linearViewHolder;
        } else {
            baseView = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_gridview_goods_list, parent, false);
            GridViewHolder gridViewHolder = new GridViewHolder(baseView);
            return gridViewHolder;
        }
    }
简单的切换功能基本实现;接下来了解下滑动置顶位置出现置顶图片,点击图片实现RecyclerView置顶的功能;

置顶图片并非一直显示在屏幕上,而是通过监听滑动到一定距离才会显示;我们需要重写RecyclerView的滑动监听;

//设置滑动监听
        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                RecyclerView.LayoutManager layoutManager = recyclerView.getLayoutManager();
                if (layoutManager instanceof LinearLayoutManager) {
                    LinearLayoutManager linearManager = (LinearLayoutManager) layoutManager;
                    //获取第一个可见位置
                    int firstVisibleItemPosition = linearManager.findFirstVisibleItemPosition();
                    //当滑动到第十个以上时显示置顶图标
                    if (firstVisibleItemPosition>10) {
                        ivStick.setVisibility(View.VISIBLE);
                    }else {
                        ivStick.setVisibility(View.GONE);
                    }
                }
            }
        });
点击置顶图片是执行 RecyclerView.scrollToPosition(0); 即可


点击打开链接免费下载源码


  • 0
    点赞
  • 22
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值