1. 程式人生 > >Android高仿京東淘寶商品列表佈局切換效果

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); 即可 點選開啟連結免費下載原始碼