RecyclerView（四）——用RecyclerView实现多种布局

  在显示列表时，我们需要的数据有可能需要不止一种item，对于有多种复杂数据的数据源，就需要以不同的样式显示出来，先看一下效果



  我们都知道，在ListView的Adapter中，我们可以通过重写

int getItemViewType(int position)

和

int getViewTypeCount()

这两个方法来实现定义多种布局的type。那么在RecyclerView的Adapter中，是否也有类似的方法呢？

  没错，是有的，就是

int getItemViewType(int position)

方法。

  接下来，直接看代码

MultipleItemsAdapter.xml

package com.zou.zohar.recyclerviewdemo.ui.adapter;

import android.content.Context;
import android.support.annotation.NonNull;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.zou.zohar.recyclerviewdemo.R;
import com.zou.zohar.recyclerviewdemo.ui.model.ImageItem;
import com.zou.zohar.recyclerviewdemo.ui.model.MultipleItem;
import com.zou.zohar.recyclerviewdemo.ui.model.TextImageItem;
import com.zou.zohar.recyclerviewdemo.ui.model.TextItem;

import java.util.List;

/**
* Created by Zohar on 2017/5/21.
* desc:多种Item布局的Adapter
*/
public class MultipleItemsAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
/**
* 定义三种Type
*/
private final int ITEM_TYPE_TEXT = 0;
private final int ITEM_TYPE_IMAGE = 1;
private final int ITEM_TYPE_TEXT_IMAGE = 2;

private Context mContext;
private List<MultipleItem> dataList;

public MultipleItemsAdapter(Context mContext, @NonNull List<MultipleItem> dataList) {
this.mContext = mContext;
this.dataList = dataList;
}

@Override
public RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
/**
* 根据不同的Type返回对应的ViewHolder
*/
View view;
if (viewType == ITEM_TYPE_TEXT) {
view = LayoutInflater.from(mContext).inflate(R.layout.multiple_item_layout_text, parent, false);
return new TextHolder(view);
} else if (viewType == ITEM_TYPE_IMAGE) {
view = LayoutInflater.from(mContext).inflate(R.layout.multiple_item_layout_image, parent, false);
return new ImageHolder(view);
} else if (viewType == ITEM_TYPE_TEXT_IMAGE) {
view = LayoutInflater.from(mContext).inflate(R.layout.multiple_item_layout_text_image, parent, false);
return new TextImageHolder(view);
}
return null;
}

@Override
public void onBindViewHolder(RecyclerView.ViewHolder holder, int position) {
/**
* 根据不同的Type，设置对应的ViewHolder
*/
switch (dataList.get(position).getItemType()) {
case TEXT:
TextItem textItem = (TextItem) dataList.get(position);
TextHolder textHolder = (TextHolder) holder;
textHolder.tvText.setText(textItem.getText());
break;
case IMAGE:
ImageItem imageItem = (ImageItem) dataList.get(position);
ImageHolder imageHolder = (ImageHolder) holder;
imageHolder.ivImage.setBackgroundResource(imageItem.getImageRes());
break;
case TEXT_IMAGE:
TextImageItem textImageItem = (TextImageItem) dataList.get(position);
TextImageHolder textImageHolder = (TextImageHolder) holder;
textImageHolder.tvTextImage.setText(textImageItem.getText());
textImageHolder.ivTextImage.setBackgroundResource(textImageItem.getImageRes());
break;
}
}

@Override
public int getItemCount() {
return dataList.size();
}

@Override
public int getItemViewType(int position) {
/**
* 根据某一个参数不同的值来返回对应的Type
*/
switch (dataList.get(position).getItemType()) {
case TEXT:
return ITEM_TYPE_TEXT;
case IMAGE:
return ITEM_TYPE_IMAGE;
case TEXT_IMAGE:
return ITEM_TYPE_TEXT_IMAGE;
}
return -1;
}

private class TextHolder extends RecyclerView.ViewHolder {
TextView tvText;

TextHolder(View itemView) {
super(itemView);
tvText = (TextView) itemView.findViewById(R.id.tv_text);
}
}

private class ImageHolder extends RecyclerView.ViewHolder {
ImageView ivImage;

ImageHolder(View itemView) {
super(itemView);
ivImage = (ImageView) itemView.findViewById(R.id.iv_image);
}
}

private class TextImageHolder extends RecyclerView.ViewHolder {
ImageView ivTextImage;
TextView tvTextImage;

TextImageHolder(View itemView) {
super(itemView);
ivTextImage = (ImageView) itemView.findViewById(R.id.iv_text_image);
tvTextImage = (TextView) itemView.findViewById(R.id.tv_text_image);
}
}
}

  简单来说，就是在

int getItemViewType(int position)

方法中根据对应的条件来定义好不同的itemType，然后在

RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)

和

void onBindViewHolder(RecyclerView.ViewHolder holder, int position)

这两个方法中分别根据不同的itemType去返回对应的ViewHolder和给对应的item控件赋值。实现起来还是挺简单的。

  以下是相关其他的代码

· 三种Item的布局xml

multiple_item_layout_text.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_height="46dp"
android:background="#3F51B5"
android:gravity="center_vertical">

<TextView
android:id="@+id/tv_text"

ddcb
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:textSize="18sp" />
</RelativeLayout>

multiple_item_layout_image.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_height="46dp"
android:background="#FF4081"
android:gravity="center">

<ImageView
android:id="@+id/iv_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerInParent="true"
android:scaleType="fitXY" />
</RelativeLayout>

multiple_item_layout_text_image.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_height="46dp"
android:background="@color/green"
android:gravity="center">

<ImageView
android:id="@+id/iv_text_image"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:scaleType="fitXY" />

<TextView
android:id="@+id/tv_text_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_toRightOf="@id/iv_text_image"
android:textSize="18sp" />
</RelativeLayout>

· Activity及其layoutXml代码

MultipleItemsActivity.java

package com.zou.zohar.recyclerviewdemo.ui.activity;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.DividerItemDecoration;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

import com.zou.zohar.recyclerviewdemo.R;
import com.zou.zohar.recyclerviewdemo.ui.adapter.MultipleItemsAdapter;
import com.zou.zohar.recyclerviewdemo.ui.model.ImageItem;
import com.zou.zohar.recyclerviewdemo.ui.model.MultipleItem;
import com.zou.zohar.recyclerviewdemo.ui.model.TextImageItem;
import com.zou.zohar.recyclerviewdemo.ui.model.TextItem;

import java.util.ArrayList;
import java.util.List;

/**
* Created by Zohar on 2017/5/21.
* desc:RecyclerView加载多种布局的小例子
*/
public class MultipleItemsActivity extends AppCompatActivity {

private RecyclerView recyclerView;
private List<MultipleItem> multipleItemList = new ArrayList<>();

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_multiple_items);

recyclerView = (RecyclerView) findViewById(R.id.rv);

recyclerView.setLayoutManager(new LinearLayoutManager(this, LinearLayoutManager.VERTICAL, false));
recyclerView.addItemDecoration(new DividerItemDecoration(this, DividerItemDecoration.VERTICAL));

initItems();
MultipleItemsAdapter adapter = new MultipleItemsAdapter(this, multipleItemList);
recyclerView.setAdapter(adapter);
}

private void initItems() {
multipleItemList.add(new TextItem());
multipleItemList.add(new TextItem());
multipleItemList.add(new ImageItem());
multipleItemList.add(new ImageItem());
multipleItemList.add(new TextImageItem());
multipleItemList.add(new TextImageItem());
}
}

activity_multiple_items.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_multiple_items"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.zou.zohar.recyclerviewdemo.ui.activity.MultipleItemsActivity">

<android.support.v7.widget.RecyclerView
android:id="@+id/rv"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>

· 相关实体类

MultipleItem.java

package com.zou.zohar.recyclerviewdemo.ui.model;

/**
* Created by zohar on 2017/5/21.
* desc:不同Item的通用接口
*/
public interface MultipleItem {

enum ItemType {
TEXT, IMAGE, TEXT_IMAGE
}

ItemType getItemType();

}

TextItem.java

package com.zou.zohar.recyclerviewdemo.ui.model;

/**
* Created by zohar on 2017/5/21.
* desc:
*/
public class TextItem implements MultipleItem {

public String getText() {
return "文字Item";
}

@Override
public ItemType getItemType() {
return ItemType.TEXT;
}
}

ImageItem.java

package com.zou.zohar.recyclerviewdemo.ui.model;

import com.zou.zohar.recyclerviewdemo.R;

/**
* Created by zohar on 2017/5/21.
* desc:
*/
public class ImageItem implements MultipleItem {

public int getImageRes() {
return R.mipmap.ic_launcher;
}

@Override
public ItemType getItemType() {
return ItemType.IMAGE;
}
}

TextImageItem.java

package com.zou.zohar.recyclerviewdemo.ui.model;

import com.zou.zohar.recyclerviewdemo.R;

/**
* Created by zohar on 2017/5/21.
* desc:
*/
public class TextImageItem implements MultipleItem {

public String getText() {
return "文字+图片Item";
}

public int getImageRes() {
return R.mipmap.ic_launcher;
}

@Override
public ItemType getItemType() {
return ItemType.TEXT_IMAGE;
}
}