前言

前面章节已经介绍过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;

    }
}

qinxuexiang_blog

原创文章 29 获赞 1 访问量 9256

关注私信

RecyclerView 实现复杂列表页面布局

前言

布局文件实现

RecyclerView HomePagerAdapter实现

MainActivity实现

猜你喜欢