仿淘宝商品列表一列和两列排点击转换

我们可以利用Recyclerview可以单列和多列显示的特性，来实现仿淘宝商品列表单列和两列显示的效果。以下是我实现的单列和两列截图：

单列：

两列：

实现步骤：

1.准备adapter:

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    Context context;
    LayoutInflater inflater;
    List<ProductBean> list;
    boolean isVertial=true;//true为1列的情况，false为2列的情况


    public MyAdapter(Context context, List<ProductBean> list) {
        this.context = context;
        this.list = list;
        this.inflater = LayoutInflater.from(context);
    }
    public MyAdapter(Context context, List<ProductBean> list,boolean isVertial) {
        this.context = context;
        this.list = list;
        this.isVertial=isVertial;
        this.inflater = LayoutInflater.from(context);
    }
    @NonNull
    @Override
    public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {

        View view =null;
        if(isVertial){
            view = inflater.inflate(R.layout.adapter_item_layout, null, false);

        }else{
            view = inflater.inflate(R.layout.adapter_item_hori_layout, null, false);

        }

        ViewHolder viewHolder = new ViewHolder(view);

        return viewHolder;
    }

    @Override
    public void onBindViewHolder(@NonNull ViewHolder holder, int position) {
        ProductBean bean=list.get(position);
        String name=bean.getPname();
        if((name!=null)&&(!name.equals(""))){
            holder.name.setText(name);
        }

    }

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

    class ViewHolder extends RecyclerView.ViewHolder {
        @BindView(R.id.name)
        TextView name;
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            ButterKnife.bind(this,itemView);
        }
    }


}

其中的layout,我分开写了两个，一个是1列的时候的layout,另外是2列的时候的layout:

（1）1列：R.layout.adapter_item_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:padding="10dp"
    >
    <ImageView
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:src="@mipmap/ic_launcher"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="10dp"
        android:text="222"
        android:textColor="@color/black"
        android:id="@+id/name"
        android:textSize="15sp"

        />
</LinearLayout>

（2）2列：R.layout.adapter_item_hori_layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="10dp"
    android:gravity="center_horizontal"
    >
    <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:src="@mipmap/ic_launcher"
        />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="222"
        android:textColor="@color/black"
        android:id="@+id/name"
        android:textSize="15sp"

        />
</LinearLayout>

2.主activity的布局layout （R.layout.vercial_and_hori_activity_layout）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:padding="10dp"
        android:gravity="center"
        android:background="@color/white"
        >
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="综合"
            android:gravity="center"
            android:id="@+id/tt1"
            android:textColor="@color/black"
            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="销量"
            android:gravity="center"
            android:id="@+id/tt2"
            android:textColor="@color/black"
            />
        <ImageView
            android:layout_width="25dp"
            android:layout_height="25dp"
            android:src="@mipmap/vvicon"
            android:gravity="center"
            android:id="@+id/iv_choose"

            />
        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="筛选"
            android:gravity="center"
            android:id="@+id/tt4"
            android:textColor="@color/black"
            />
    </LinearLayout>
    <androidx.recyclerview.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/review"

        />
</LinearLayout>

3.主activity代码：

public class VercialAndHoriActivity extends AppCompatActivity {


    @BindView(R.id.tt1)
    TextView tt1;
    @BindView(R.id.tt2)
    TextView tt2;
    @BindView(R.id.iv_choose)
    ImageView ivChoose;
    @BindView(R.id.tt4)
    TextView tt4;
    @BindView(R.id.review)
    RecyclerView review;

    MyAdapter adapter;
    List<ProductBean> list=new ArrayList<ProductBean>();
    boolean isVercial=true;//true为1列 false 为2列
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.vercial_and_hori_activity_layout);
        ButterKnife.bind(this);
         for(int i=0;i<5;i++){
             ProductBean bean=new ProductBean();
             bean.setPname("儿童精美贴纸");
             list.add(bean);
         }
        for(int i=0;i<5;i++){
            ProductBean bean=new ProductBean();
            bean.setPname("儿童高级精美贴纸");
            list.add(bean);
        }

        setAdapterData();
        ivChoose.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                isVercial=!isVercial;//点击的时候改变该值
                if(isVercial){
                    ivChoose.setImageResource(R.mipmap.vvicon);//更改成1列图标
                }else{
                    ivChoose.setImageResource(R.mipmap.hhicon);//更改成2列图标

                }
                setAdapterData();
            }
        });

    }


   void setAdapterData(){
       adapter=new MyAdapter(VercialAndHoriActivity.this,list,isVercial);
       if(isVercial){
           LinearLayoutManager manager=new LinearLayoutManager(VercialAndHoriActivity.this);//1列
           review.setLayoutManager(manager);
       }else{
           GridLayoutManager manager1=new GridLayoutManager(VercialAndHoriActivity.this,2);//2列
           review.setLayoutManager(manager1);


       }
       review.setAdapter(adapter);

   }

}