前言

前面章节已经介绍过RecyclerView的基本使用，今天这章节将介绍如何使用RecyclerView实现多个复杂界面的列表布局。

效果图：

布局文件实现

编写之前先完成各项布局文件，如下是布局文件加效果图，

1、home_top__item_layout.xml

 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_marginBottom="5dp"     android:layout_height="wrap_content">     <TextView         android:textStyle="bold"         android:layout_marginBottom="5dp"         android:textSize="20sp"         android:id="@+id/tv_title"         android:text="一起奋进"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />     <LinearLayout         android:layout_below="@+id/tv_title"         android:orientation="horizontal"         android:layout_width="wrap_content"         android:layout_height="wrap_content">         <TextView             android:layout_marginLeft="10dp"             android:textColor="#f00"             android:text="置顶"             android:layout_width="wrap_content"             android:layout_height="wrap_content" />         <TextView             android:layout_marginLeft="10dp"             android:text="火星日报"             android:layout_width="wrap_content"             android:layout_height="wrap_content" />         <TextView             android:layout_marginLeft="10dp"             android:text="2516评论"             android:layout_width="wrap_content"             android:layout_height="wrap_content" />     </LinearLayout>  </RelativeLayout> 

2.home_ad_item_layout.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:orientation="vertical"     android:layout_height="wrap_content"     android:layout_marginBottom="5dp">     <TextView         android:paddingBottom="5dp"         android:paddingTop="5dp"         android:textColor="#000"         android:textSize="18sp"         android:text="双地铁楼盘特惠，8.8元抵12.8万元"         android:layout_width="match_parent"         android:layout_height="wrap_content" />     <ImageView         android:scaleType="fitXY"         android:src="@drawable/house"         android:layout_width="match_parent"         android:layout_height="200dp" /> </LinearLayout> 

3.home_image__item_layout.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_marginBottom="5dp"     android:orientation="vertical"     android:layout_height="wrap_content">     <TextView         android:paddingBottom="5dp"         android:paddingTop="5dp"         android:textColor="#000"         android:textSize="18sp"         android:text="陈翔六点半，新电影上线了，期待大家一起去电影院观看"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />     <LinearLayout         android:orientation="horizontal"         android:layout_width="wrap_content"         android:layout_height="wrap_content">         <ImageView             android:layout_marginRight="5dp"             android:layout_weight="1"             android:src="@drawable/moku"             android:layout_width="wrap_content"             android:layout_height="130dp" />         <ImageView             android:layout_marginRight="5dp"             android:layout_weight="1"             android:src="@drawable/runtu"             android:layout_width="wrap_content"             android:layout_height="130dp"  />         <ImageView             android:layout_weight="1"             android:src="@drawable/jiujiu"             android:layout_width="wrap_content"             android:layout_height="130dp"  />     </LinearLayout> </LinearLayout> 

4.home_video__item_layout.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:orientation="vertical"     android:layout_marginBottom="5dp"     android:layout_height="wrap_content">     <TextView         android:paddingBottom="5dp"         android:paddingTop="5dp"         android:textColor="#000"         android:textSize="18sp"         android:text="陈翔六点半，新电影上线了，期待大家一起去电影院观看"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />     <FrameLayout         android:layout_width="wrap_content"         android:layout_height="wrap_content">         <ImageView             android:scaleType="fitXY"             android:src="@drawable/chenxiang"             android:layout_width="match_parent"             android:layout_height="200dp" />         <ImageView             android:layout_gravity="center"             android:src="@drawable/ic_play_circle_filled_black_24dp"             android:layout_width="60dp"             android:layout_height="60dp" />     </FrameLayout> </LinearLayout> 

6.home_txt__item_layout.xml

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:paddingLeft="10dp"     android:paddingRight="10dp"     android:layout_marginBottom="5dp"     android:orientation="vertical"     android:layout_height="wrap_content">     <TextView         android:paddingBottom="5dp"         android:paddingTop="5dp"         android:textColor="#000"         android:textSize="18sp"         android:text="陈翔六点半，新电影上线了，期待大家一起去电影院观看"         android:layout_width="wrap_content"         android:layout_height="wrap_content" />  </LinearLayout> 

RecyclerView HomePagerAdapter实现

实现思路：前面章节我们只是实现了recyclerview的的一种布局，如果需要显示多个不同布局，我们可以根据ViewType的值创建不同的ViewHolder，并传入不同的布局文件，绑定数据需要转换为不同的ViewHolder,再绑定数据。

 public class HomePagerAdapte extends RecyclerView.Adapter<RecyclerView.ViewHolder> {     public static final int TYPE_TOP = 1;     public static final int TYPE_REAL_TIME = 2;     public static final int TYPE_IMAGE = 3;     public static final int TYPE_VIDEO = 4;     public static final int TYPE_AD = 5;     public static final int TYPE_TXT = 6;     private List<HomePageBean> mData;      @NonNull     @Override     public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {         switch (viewType) {             case TYPE_TOP:                 return new TopViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.home_top__item_layout, null));             case TYPE_REAL_TIME:                 return new RealTimeViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.home_realtime_item_layout, null));             case TYPE_IMAGE:                 return new ImageViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.home_image__item_layout, null));             case TYPE_VIDEO:                 return new VideoViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.home_video__item_layout, null));             case TYPE_AD:                 return new AdViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.home_ad_item_layout, null));             case TYPE_TXT:                 return new TextViewHolder(LayoutInflater.from(viewGroup.getContext()).inflate(R.layout.home_txt__item_layout, null));         }         return null;      }      @Override     public void onBindViewHolder(@NonNull RecyclerView.ViewHolder viewHolder, int position) {         int viewType = getItemViewType(position);         switch (viewType) {             case TYPE_TOP:                 TopViewHolder topViewHolder = (TopViewHolder) viewHolder;                 //绑定数据                 break;             case TYPE_REAL_TIME:                 RealTimeViewHolder realTimeViewHolder = (RealTimeViewHolder) viewHolder;                 //绑定数据                 break;             case TYPE_IMAGE:                 ImageViewHolder imageViewHolder = (ImageViewHolder) viewHolder;                 //绑定数据                 break;             case TYPE_VIDEO:                 VideoViewHolder videoViewHolder= (VideoViewHolder) viewHolder;                 //绑定数据                 break;             case TYPE_AD:                 AdViewHolder adViewHolder= (AdViewHolder) viewHolder;                 //绑定数据                 break;             case TYPE_TXT:                 TextViewHolder textViewHolder= (TextViewHolder) viewHolder;                 //绑定数据                 break;         }     }      @Override     public int getItemViewType(int position) {         return mData.get(position).getType();     }      @Override     public int getItemCount() {         return mData.size();     }      public void setData(List<HomePageBean> mData) {         this.mData = mData;     }      public static class TopViewHolder extends RecyclerView.ViewHolder {          public TopViewHolder(@NonNull View itemView) {             super(itemView);         }     }      public static class RealTimeViewHolder extends RecyclerView.ViewHolder {          public RealTimeViewHolder(@NonNull View itemView) {             super(itemView);         }     }      public static class ImageViewHolder extends RecyclerView.ViewHolder {          public ImageViewHolder(@NonNull View itemView) {             super(itemView);         }     }      public static class VideoViewHolder extends RecyclerView.ViewHolder {          public VideoViewHolder(@NonNull View itemView) {             super(itemView);         }     }      public static class AdViewHolder extends RecyclerView.ViewHolder {          public AdViewHolder(@NonNull View itemView) {             super(itemView);         }     }      public static class TextViewHolder extends RecyclerView.ViewHolder {          public TextViewHolder(@NonNull View itemView) {             super(itemView);         }     } }

MainActivity实现

 public class MainActivity extends AppCompatActivity {     private RecyclerView recyclerView;     private HomePagerAdapte homePagerAdapte;     private List<HomePageBean> mData;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);         recyclerView=findViewById(R.id.recyclerView);         LinearLayoutManager manager=new LinearLayoutManager(this);         recyclerView.setLayoutManager(manager);         mData=getHomeBeanData();         homePagerAdapte=new HomePagerAdapte();         homePagerAdapte.setData(mData);         recyclerView.setAdapter(homePagerAdapte); // 设置分割线         recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));     }      private List<HomePageBean> getHomeBeanData() {         //为了方便展示，自己构建的数据，实际开发这部分数据是从网络上读取的         List<HomePageBean> homePageBeans = new ArrayList<>();         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_TOP));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_TOP));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_REAL_TIME));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_AD));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_IMAGE));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_VIDEO));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_TXT));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_VIDEO));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_IMAGE));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_IMAGE));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_AD));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_VIDEO));         homePageBeans.add(new HomePageBean(HomePagerAdapte.TYPE_TXT));         return homePageBeans;      } }