思考：
打开淘宝首页，布局显示头，轮播图，网格布局，列表...各种布局在一起滑动还流畅到不行，羡慕嫉妒恨啊。或许有人说用scrollview一层层写呗，不用羡慕。但是当你知道只用RecyclerView就可以实现这样的复杂布局，是不是惊呆了。不用慌，阿里已经开源了，https://github.com/alibaba/vlayout。我们就来看一看多视图布局的简单实现。
开撸：
首先看一下你有没有依赖RecyclerView，不然就很尴尬， 在build.gradle中添加：
implementation 'com.android.support:design:28.0.0-rc02'
或者
implementation 'com.android.support:recyclerview-v7:28.0.0-rc02'
RecyclerView的列表基本实现相信大家都会的，主要讲一下adapter适配器。
新建一个实体类，用于布局数据：
public class FourData {
private int viewType;
private String title;
public FourData(int viewType, String title) {
this.viewType = viewType;
this.title = title;
}
public int getViewType() {
return viewType;
}
public void setViewType(int viewType) {
this.viewType = viewType;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
}
新建适配器类继承RecyclerView.Adapter<RecyclerView.ViewHolder>。然后创建不同的ViewHolder继承RecyclerView.ViewHolder，用于在onCreateViewHolder中装载不同的布局，如下：
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
View view;
switch (viewType) {
case TYPE_TEXT:
view = LayoutInflater.from(mContext).inflate(R.layout.item_four, viewGroup, false);
return new TextViewHolder(view);
case TYPE_IMAGE:
view = LayoutInflater.from(mContext).inflate(R.layout.item_image, viewGroup, false);
return new ImageViewHolder(view);
case TYPE_COLOR:
view = LayoutInflater.from(mContext).inflate(R.layout.item_color, viewGroup, false);
return new ColorViewHolder(view);
default:
return null;
}
}
根据传入数据的类型不同，加载不同的布局，从而实现多视图列表，最后在onBindViewHolder中处理数据，点击事件。
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
FourData fourData = mData.get(position);
switch (fourData.getViewType()) {
case TYPE_TEXT:
TextViewHolder textViewHolder = (TextViewHolder) holder;
textViewHolder.mTextView.setText(fourData.getTitle());
break;
case TYPE_IMAGE:
ImageViewHolder imageViewHolder = (ImageViewHolder) holder;
break;
case TYPE_COLOR:
ColorViewHolder colorViewHolder = (ColorViewHolder) holder;
break;
default:
break;
}
}
建立数据模版：
fourData.add(new FourData(TYPE_TEXT, "我是第" + i + "调数据"));
这样你就可以实现一个简单的多视图布局。下面是完整代码：
public class FourActivity extends AppCompatActivity {
private RecyclerView mRvFour;
private List<FourData> fourData;
private FourAdapter fourAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_four);
initView();
initData();
}
private void initView() {
mRvFour = findViewById(R.id.rv_four);
LinearLayoutManager layoutManager = new LinearLayoutManager(this);
mRvFour.setLayoutManager(layoutManager);
fourData = new ArrayList<>();
fourAdapter = new FourAdapter(this, fourData);
mRvFour.setAdapter(fourAdapter);
}
private void initData() {
for (int i = 0; i < 20; i++) {
if (i == 0) {
fourData.add(new FourData(TYPE_IMAGE, null));
} else if (i == 1) {
fourData.add(new FourData(TYPE_COLOR, null));
} else {
fourData.add(new FourData(TYPE_TEXT, "我是第" + i + "调数据"));
}
}
}
}
public class FourAdapter extends RecyclerView.Adapter<RecyclerView.ViewHolder> {
public static final int TYPE_TEXT = 0;
public static final int TYPE_IMAGE = 1;
public static final int TYPE_COLOR = 2;
private List<FourData> mData;
private Context mContext;
public FourAdapter(Context mContext, List<FourData> mData) {
this.mContext = mContext;
this.mData = mData;
}
@NonNull
@Override
public RecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int viewType) {
View view;
switch (viewType) {
case TYPE_TEXT:
view = LayoutInflater.from(mContext).inflate(R.layout.item_four, viewGroup, false);
return new TextViewHolder(view);
case TYPE_IMAGE:
view = LayoutInflater.from(mContext).inflate(R.layout.item_image, viewGroup, false);
return new ImageViewHolder(view);
case TYPE_COLOR:
view = LayoutInflater.from(mContext).inflate(R.layout.item_color, viewGroup, false);
return new ColorViewHolder(view);
default:
return null;
}
}
@Override
public int getItemViewType(int position) {
return mData.get(position).getViewType();
}
@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
FourData fourData = mData.get(position);
switch (fourData.getViewType()) {
case TYPE_TEXT:
TextViewHolder textViewHolder = (TextViewHolder) holder;
textViewHolder.mTextView.setText(fourData.getTitle());
break;
case TYPE_IMAGE:
ImageViewHolder imageViewHolder = (ImageViewHolder) holder;
break;
case TYPE_COLOR:
ColorViewHolder colorViewHolder = (ColorViewHolder) holder;
break;
default:
break;
}
}
@Override
public int getItemCount() {
return mData.size();
}
class TextViewHolder extends RecyclerView.ViewHolder {
TextView mTextView;
public TextViewHolder(@NonNull View itemView) {
super(itemView);
mTextView = itemView.findViewById(R.id.tv_title);
}
}
class ImageViewHolder extends RecyclerView.ViewHolder {
ImageView mIvImage;
public ImageViewHolder(@NonNull View itemView) {
super(itemView);
mIvImage = itemView.findViewById(R.id.iv_image);
}
}
class ColorViewHolder extends RecyclerView.ViewHolder {
public ColorViewHolder(@NonNull View itemView) {
super(itemView);
}
}
}
结束语：
RecyclerView的使用远远不止这样，RecyclerView能够解决很多复杂的布局问题，大家一定要多动手，多思考。
GitHub：https://github.com/DaveSally/MyDemo
欢迎大家关注我的公众号：受伤的粽子
