使用RecyclerView商品左右分类列表

最近自己想写一个购物类App 所以就模仿着网易严选的样式去写  今天刚好也写到分类这一块 看着这样的样式前面自己是想用两个LIstView去完成 后面想了想打算用 RecyclerView写 ，然后在百度上找了一些dome 。其实网上也有很多人写了这样的文章   自己为什么要写呢   第一自己写的话可以加深自己的理解第二如果哪天用到了可以直接来自己的博客上找

好了 其他也不做说明 下面看看我写出来的效果图

 

在使用RecyclerView 要在gradle上添加

compile 'com.android.support:design:25.1.1'

 首先我们使用的是 两个RecyclerView所以我们的布局是这样子的如果你使用的 linearLayout 布局的话记得加上android:orientation="horizontal"

    android:id="@+id/classify_left_list"
    android:layout_width="@dimen/two_fifty_six"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:background="@color/white"
    android:scrollbars="none" />

    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_weight="2">
            android:id="@+id/series_image"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:src="@mipmap/star_pager"
        />
            android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="@dimen/twenty_four"
        android:text="-- 列表 --"/>
            android:id="@+id/classify_right_list"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scrollbars="none" />

在接下来就是编写两个Adapter了 首先我们来写左边这个

public class ClassifyLeftAdapter extends RecyclerView.Adapter {
    private Context mContext;

    private List mList = new ArrayList<>();
    private MyItemClickListener mItemClickListener;
    private int mPosition;
    private static int TYPE_NORMAL = 101;
    private static int TYPE_SELECT = 102;

    public ClassifyLeftAdapter(Context mContext) {
        this.mContext = mContext;
        mPosition = 0;
    }

    public void setList(List list) {
        mList = list;
    }

    public List getList() {
        return mList;
    }

    public void setmItemClickListener(MyItemClickListener mItemClickListener) {
        this.mItemClickListener = mItemClickListener;
    }

    @Override
    public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        if (viewType == TYPE_SELECT) {
            final View view = LayoutInflater.from(mContext).inflate(R.layout.itme_calssifyleft, parent, false);
            return new ItemViewSelectHolder(view, mItemClickListener);
        } else {
            final View view = LayoutInflater.from(mContext).inflate(R.layout.itme_calssifyleft, parent, false);
            return new ItemViewHolder(view, mItemClickListener);
        }
    }

    @Override
    public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
        ItemViewHolder item = (ItemViewHolder) holder;
        item.mostLeftText.setText(mList.get(position));
    }

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

    @Override
    public int getItemViewType(int position) {
        if (position == mPosition) {
            return TYPE_SELECT;
        } else {
            return TYPE_NORMAL;
        }
    }

    public void setmPosition(int mPosition) {
        this.mPosition = mPosition;
    }

    public class ItemViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        private MyItemClickListener mListener;
         TextView mostLeftText;

        public ItemViewHolder(View itemView, MyItemClickListener listener) {
            super(itemView);
            this.mListener = listener;
            itemView.setOnClickListener(this);
            mostLeftText = ((TextView) itemView.findViewById(R.id.most_left_text));
        }

        @Override
        public void onClick(View v) {
            if (mListener != null) {
                mListener.onItemClick(v, getLayoutPosition());
            }
        }
    }

    public interface MyItemClickListener {
        void onItemClick(View view, int position);
    }

    private class ItemViewSelectHolder extends ItemViewHolder {
        public ItemViewSelectHolder(View view, MyItemClickListener listener) {
            super(view, listener);
         //   itemView.setBackgroundDrawable(mContext.getResources().getDrawable(R.mipmap.star_pager));
            mostLeftText.setTextColor(mContext.getResources().getColor(R.color.yellow));
        }
    }

然后右边的比较简单

public class ClassifyRightAdapter extends RecyclerView.Adapter {
    private Context mContext;
    private List mList = new ArrayList<>();
    private MyItemClickListener mItemClickListener;

    public ClassifyRightAdapter(Context context) {
        mContext = context;
    }

    public void setList(List list) {
        if (list!=null){
            mList = list;
        }

    }

    public void setOnItemClickListener(MyItemClickListener listener) {
        this.mItemClickListener = listener;
    }


    @Override
    public ItemViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
         View view = LayoutInflater.from(mContext).inflate(R.layout.itme_calssifyright, parent, false);
        return new ItemViewHolder(view, mItemClickListener);
    }

    @Override
    public void onBindViewHolder(ItemViewHolder holder, int position) {
        holder.mostRightName.setText(mList.get(position).getName());
        holder.series_price.setText(mList.get(position).getPrice());
        holder.itemView.setTag(mList.get(position));
    }


    @Override
    public int getItemCount() {

        return mList == null ? 0 : mList.size();
    }

    public interface MyItemClickListener {
        void onItemClick(View view, int postion);
    }

    public class ItemViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener {
        private  MyItemClickListener mListener;
        private  TextView mostRightName;
        private  TextView series_price;
        public ItemViewHolder(View itemView, MyItemClickListener listener) {
            super(itemView);
            this.mListener = listener;
            itemView.setOnClickListener(this);
            mostRightName= ((TextView) itemView.findViewById(R.id.series_name));
            series_price= ((TextView) itemView.findViewById(R.id.series_price));
        }

        @Override
        public void onClick(View v) {
            if (mListener != null) {
                mListener.onItemClick(v, getLayoutPosition());
            }
        }
    }

然后再是java代码

private void initData() {
    LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
    layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
    leftAdapter=new ClassifyLeftAdapter(getActivity());
    leftListView.setLayoutManager(layoutManager);
    leftListView.setAdapter(leftAdapter);

  //  LinearLayoutManager layoutManager1 = new LinearLayoutManager(getActivity());
    //设置分隔
    //  rightListView.setLayoutManager(layoutManager1);
    rightListView.setLayoutManager(new StaggeredGridLayoutManager(4,StaggeredGridLayoutManager.VERTICAL));
    rightAdapter=new ClassifyRightAdapter(getActivity());
    rightListView.setAdapter(rightAdapter);
    rightAdapter.setOnItemClickListener(new ClassifyRightAdapter.MyItemClickListener() {
        @Override
        public void onItemClick(View view, int postion) {
            Logger.i(postion+"");
        }
    });
    getLeftName();
}

//设置左边数据源
private void getLeftName() {

    for (int i = 0; i < 5; i++) {
        ClassifyLeftEntity bean = new ClassifyLeftEntity();
        if (i == 1) {
            bean.setName("懒洋洋");
        }
        if (i == 2) {
            bean.setName("喜洋洋");
        }
        if (i == 3) {
            bean.setName("美洋洋");
        }
        if (i == 4) {
            bean.setName("喜洋洋");
        }
        if (i == 0) {
            bean.setName("懒洋洋");
        }
        mPriceList.add(bean);
    }

    List prices = new ArrayList<>();
    for (ClassifyLeftEntity priceBean : mPriceList) {
        prices.add(priceBean.getName());
    }
    leftAdapter.setList(prices);
    //默认根据left的第一项数据去加载右边得数据
    requestRightData(0);
    leftAdapter.notifyDataSetChanged();
    leftAdapter.setmItemClickListener(new ClassifyLeftAdapter.MyItemClickListener() {
        @Override
        public void onItemClick(View view, int position) {
            //设置position，根据position的状态刷新
            leftAdapter.setmPosition(position);
            leftAdapter.notifyDataSetChanged();
            requestRightData(position);
        }
    });
}


private void requestRightData(int position) {
    //这里为了方便，直接更改左边的数据为右边加载的数据了，实际开发中改为所传参数即可
    String category = leftAdapter.getList().get(position);
    List list = new ArrayList<>();
    ClassifyEntity beans = new ClassifyEntity();
    for (int i=0;i<5;i++){
        beans.setName(category+i);
        beans.setPrice("2000$"+i);
        list.add(beans);
    }
    getRightData(list);

}

private void getRightData(List beans) {
    rightAdapter.setList(beans);
    rightAdapter.notifyDataSetChanged();
}

requestRightData方法里面可以做一些其他操作 比如网络请求什么的   至于其他一些itme就不贴出来了 

总结下自己出现的那些问题  第一就是布局上面出了一些小差错 还有一个最让自己无语的就是在设置第二个RecyclerView 显示格式的时候//  LinearLayoutManager layoutManager1 = new LinearLayoutManager(getActivity());
        //设置分隔
        //  rightListView.setLayoutManager(layoutManager1);

把这个方法也写进去了  导致右边那个RecyclerView一直只加载一个布局  在这个上面耽搁了一点时间。

还是那句话 只是记录本人自己项目开发  不喜勿喷   /调皮/调皮/调皮