RecyclerView 實現複雜列表頁面佈局

前言

前面章節已經介紹過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;

    }
}