任何事情，你想做就有方法，不想做就有借口，你有选择的自由，也有承担后果的义务。
本节给大家带来Recyclerview的多布局的实现。这种效果在开发中很常见，其实实现方法也很简单，跟listview的多布局实现方式差不多。废话不多说，先上图看看recyclerVeiw中常见的多布局开发实例。
recyvlerview多布局的实现.gif
实现要领
- setSpanSizeLookup（）方法的使用
- getItemViewType（ ）//该方法实现多布局
具体看看代码
MainActivity中的代码
public class MultiItemActivity extends AppCompatActivity {
private RecyclerView mRecyclerview;
private MultipleItemQuickAdapter multipleItemAdapter;
private GridLayoutManager manager;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_mult);
mRecyclerview = (RecyclerView) findViewById(R.id.recyclerview);
final List<MultipleItem> data = getMultipleItemData();
manager = new GridLayoutManager(this, 2);
mRecyclerview.setLayoutManager(manager);
multipleItemAdapter = new MultipleItemQuickAdapter(this, data);
// 该方法主要是决定每个item的跨度
manager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int position) {
return data.get(position).getSpanSize();
}
});
mRecyclerview.setAdapter(multipleItemAdapter);
// mRecyclerview.addOnScrollListener(listener);
}
public static List<MultipleItem> getMultipleItemData() {
List<MultipleItem> list = new ArrayList<>();
for (int i = 0; i <= 4; i++) {
list.add(new MultipleItem(MultipleItem.TEXT, MultipleItem.IMG, "横排", R.mipmap.apple));
list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.IMG, "hellow", R.mipmap.apple));
list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.IMG, "nihao", R.mipmap.apple));
list.add(new MultipleItem(MultipleItem.TEXT, MultipleItem.IMG, "竖排", R.mipmap.apple));
list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.TEXT, "hellow", R.mipmap.apple));
list.add(new MultipleItem(MultipleItem.IMG_TEXT, MultipleItem.TEXT, "nihao", R.mipmap.apple));
}
return list;
}
}
接下来看看adapter的实现吧
public class MultipleItemQuickAdapter extends RecyclerView.Adapter<MultipleItemQuickAdapter.MyViewHolders>{
public Context mContext;
List<MultipleItem> data;
private LayoutInflater mInflater;
public MultipleItemQuickAdapter(Context mContext, List<MultipleItem> datas) {
this.mContext = mContext;
this.data = datas;
mInflater = LayoutInflater.from(mContext);
}
@Override
public int getItemViewType(int position) {
if (data.get(position).getItemType() == MultipleItem.IMG) {
return MultipleItem.IMG;
} else if(data.get(position).getItemType()==MultipleItem.IMG_TEXT){
return MultipleItem.IMG_TEXT;
}else {
return MultipleItem.TEXT;
}
}
@Override
public MyViewHolders onCreateViewHolder(ViewGroup parent, int viewType) {
// if (viewType==MultipleItem.IMG){
// return new MyViewHolders(mInflater.inflate(R.layout.item_img_text,parent,false),viewType);
// }else
if (viewType==MultipleItem.IMG_TEXT){
return new MyViewHolders(mInflater.inflate(R.layout.item_img_text,parent,false),viewType);
}else {
return new MyViewHolders(mInflater.inflate(R.layout.item_channel_title,parent,false),viewType);
}
}
@Override
public void onBindViewHolder(MyViewHolders holder, int position) {
switch (holder.viewType){
case MultipleItem.TEXT:
holder.tvTitle.setText(data.get(position).getContent());
break;
case MultipleItem.IMG_TEXT:
holder.fruit_name.setText(data.get(position).getContent());
Glide.with(mContext).load(data.get(position).getImgsource()).into(holder.fruit_image);
break;
}
}
@Override
public int getItemCount() {
return data.size();
}
class MyViewHolders extends RecyclerView.ViewHolder{
int viewType;
TextView tvTitle;
TextView fruit_name;
ImageView fruit_image;
public MyViewHolders(View itemView,int viewtype) {
super(itemView);
this.viewType=viewtype;
switch (viewtype){
case MultipleItem.TEXT:
tvTitle= (TextView) itemView.findViewById(R.id.tvTitle);
break;
case MultipleItem.IMG_TEXT:
fruit_name= (TextView) itemView.findViewById(R.id.fruit_name);
fruit_image= (ImageView) itemView.findViewById(R.id.fruit_image);
break;
}
}
}
}
j接下来提供两个布局的实现
- item_img_text
<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="4dp">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/fruit_image"
android:layout_width="match_parent"
android:layout_height="100dp"
android:scaleType="centerCrop" />
<TextView
android:id="@+id/fruit_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="5dp"
android:textSize="16sp" />
</LinearLayout>
</android.support.v7.widget.CardView>
布局
- item_channel_title
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="5dp"
>
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="我的频道"
/>
</LinearLayout>
注意
通过以上的实现就能实现：这里要说一下这个数据格式。因为这里处理是将标题也作为一个item的，只是这个标题的item的type跟正常的数据的item类型不同。
如果后台的的格式是如下的格式
{
"code": 0,
"msg": "请求成功",
"data": [
{
"groupName": "车型",
"groupDesc": "无",
"groupData": [
{
"childName": "不限"
},
{
"childName": "微型车"
},
{
"childName": "小型车"
},
{
"childName": "紧凑车"
},
{
"childName": "中型车"
},
{
"childName": "跑车"
}
]
},
{
"groupName": "车龄",
"groupDesc": "/单位：年",
"groupData": [
{
"childName": "不限"
},
{
"childName": "1年内"
},
{
"childName": "3年内"
},
{
"childName": "5年内"
},
{
"childName": "5年以上"
}
]
},
{
"groupName": "里程",
"groupDesc": "/单位：万公里",
"groupData": [
{
"childName": "不限"
},
{
"childName": "1万公里内"
},
{
"childName": "3万公里内"
},
{
"childName": "5万公里内"
},
{
"childName": "5万公里以上"
}
]
}
]
}
而要实现如下图的样式
s01.jpg
这里就要将group跟child的数据转换到同一个list中,同时给这两种数据加不同的type，即可实现上图的效果。
具体这种数据的参考代码
https://github.com/fishyer/GroupRecyclerView/blob/master/image/s01.jpg
网友评论