我们可以利用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); } }