前言
前面章节已经介绍过RecyclerView的基本使用,今天这章节将介绍如何使用RecyclerView实现多个复杂界面的列表布局。
效果图:
布局文件实现
编写之前先完成各项布局文件,如下是布局文件加效果图,
1、home_top__item_layout.xml
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://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="http://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="http://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="http://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="http://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;
}
}