RecycleView是个很常用的控件,很多APP中都可以看到它的身影,同时它也是个很难用的控件,主要就难在多种布局的实现。
在《第一行代码—Android》这本书里边有个RecycleView实现的聊天界面布局,左右两种布局写在了同一个文件中,如果是发送来的消息,就隐藏右侧布局,反之隐藏左侧布局,这种方式对于比较简单的、只有两种Item的界面是可行的,假如我们的Item有多种布局,那么这种方式就显得很笨重。对于多种布局,我们可以使用工厂模式来实现。
Github:https://github.com/imcloudfloating/DesignApp
1.首先看看效果(GIF一直上传失败,只好传JPG了):
这里的LayoutManager使用GridLayoutManager,设置为6列,然后在Adapter类中根据不同的类型来设置所占列数,具体见Adapter类的setSpanCount方法。
2.然后是类图:
3.Adapter类:
适配器的代码很短,设置数据和绑定View的代码都写在了ItemHolder的子类里面;
List<Item>储存三种类型的Item数据,如果需要增加新的类型,只要实现Item接口就可以了;
在onBindViewHolder方法中调用ItemHolder的setData()方法来设置数据;
public class MultiListAdapter extends RecyclerView.Adapter<ItemHolder> { private List<Item> mDataList; public MultiListAdapter(List<Item> dataList) {
mDataList = dataList;
} @NonNull
@Override
public ItemHolder onCreateViewHolder(@NonNull ViewGroup viewGroup, int type) {
return ItemHolderFactory.getItemHolder(viewGroup, type);
} @Override
public void onBindViewHolder(@NonNull ItemHolder viewHolder, int i) {
//设置 Holder 数据
viewHolder.setData(mDataList.get(i));
} @Override
public int getItemViewType(int position) {
return mDataList.get(position).getType();
} @Override
public int getItemCount() {
return mDataList.size();
} public void setSpanCount(GridLayoutManager layoutManager) {
layoutManager.setSpanSizeLookup(new GridLayoutManager.SpanSizeLookup() {
@Override
public int getSpanSize(int i) {
int type = getItemViewType(i);
switch (type) {
default:
case ItemHolderFactory.ITEM_LARGE:
return 3;
case ItemHolderFactory.ITEM_SMALL:
return 2;
case ItemHolderFactory.ITEM_TITLE_BAR:
return 6;
}
}
});
}
}
4.ItemHolder抽象类:
setData方法用来设置Item布局的数据
public abstract class ItemHolder extends RecyclerView.ViewHolder {
public ItemHolder(View item) {
super(item);
} public abstract void setData(Item itemData);
}
5.LargeItemHolder类:
另外两个类似
public class LargeItemHolder extends ItemHolder { private ImageView mItemImage;
private TextView mTitle;
private TextView mSubTitle; public LargeItemHolder(View item) {
super(item);
mItemImage = item.findViewById(R.id.item_image);
mTitle = item.findViewById(R.id.item_title);
mSubTitle = item.findViewById(R.id.item_sub_title);
} @Override
public void setData(Item itemData) {
ItemLarge item = (ItemLarge) itemData;
mItemImage.setImageBitmap(item.getImage());
mTitle.setText(item.getTitle());
mSubTitle.setText(item.getSubTitle());
}
}
6.Item接口:
public interface Item {
int getType();
}
7.ItemLarge类(一个图片、一个标题和一个副标题):
另外两个类似
public class ItemLarge implements Item { private Bitmap mImage;
private String mTitle;
private String mSubTitle; public ItemLarge(Bitmap bitmap, String title, String subTitle) {
mImage = bitmap;
mTitle = title;
mSubTitle = subTitle;
} public Bitmap getImage() {
return mImage;
} public String getTitle() {
return mTitle;
} public String getSubTitle() {
return mSubTitle;
} @Override
public int getType() {
return ItemHolderFactory.ITEM_LARGE;
}
}
8.工厂类ItemHolderFactory:
三个常量表示不同的布局类型,通过getItemHolder来创建ViewHolder。
public class ItemHolderFactory { public static final int ITEM_LARGE = 0;
public static final int ITEM_SMALL = 1;
public static final int ITEM_TITLE_BAR = 2; @IntDef({
ITEM_LARGE,
ITEM_SMALL,
ITEM_TITLE_BAR
})
@interface ItemType {} static ItemHolder getItemHolder(ViewGroup parent, @ItemType int type) {
switch (type) {
default:
case ITEM_LARGE:
return new LargeItemHolder(LayoutInflater
.from(parent.getContext()).inflate(R.layout.item_large, parent, false));
case ITEM_SMALL:
return new SmallItemHolder(LayoutInflater
.from(parent.getContext()).inflate(R.layout.item_small, parent, false));
case ITEM_TITLE_BAR:
return new TitleBarItemHolder(LayoutInflater
.from(parent.getContext()).inflate(R.layout.item_title_bar, parent, false));
}
}
}
9.ListActivity类:
public class ListActivity extends AppCompatActivity { List<Item> itemList = new ArrayList<>(); @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_list); initData(); GridLayoutManager layoutManager = new GridLayoutManager(this, 6);
MultiListAdapter adapter = new MultiListAdapter(itemList);
adapter.setSpanCount(layoutManager); RecyclerView recyclerView = findViewById(R.id.recycle_view);
recyclerView.setLayoutManager(layoutManager);
recyclerView.setAdapter(adapter);
} private void initData() {
//添加数据
itemList.add(new ItemTitleBar("Hot New", null));
itemList.add(new ItemLarge(
BitmapFactory.decodeResource(getResources(), R.drawable.img_1),
"One More Light",
"Linkin Park"));
itemList.add(new ItemLarge(
BitmapFactory.decodeResource(getResources(), R.drawable.img_2),
"Let Go ",
"Avril Lavigne"));
itemList.add(new ItemTitleBar("Recommended", null));
itemList.add(new ItemSmall(
BitmapFactory.decodeResource(getResources(), R.drawable.img_3),
"Bridge to Terabithia"));
itemList.add(new ItemSmall(
BitmapFactory.decodeResource(getResources(), R.drawable.img_4),
"Life Is Beautiful"));
itemList.add(new ItemSmall(
BitmapFactory.decodeResource(getResources(), R.drawable.img_5),
"A Violent Flame"));
itemList.add(new ItemTitleBar("Top Rated", null));
itemList.add(new ItemLarge(
BitmapFactory.decodeResource(getResources(), R.drawable.img_6),
"Furious 7: Original Motion Picture Soundtrack",
"Various Artists"));
itemList.add(new ItemLarge(
BitmapFactory.decodeResource(getResources(), R.drawable.img_7),
"Halo 5: Guardians (Original Soundtrack)",
"Kazuma Jinnouchi"));
}
}
10.布局文件(item_large.xml):
layout_width用match_parent是为了Item在网格中居中,此处match_parent相当于宽度为Item所占的列数。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="4dp"
android:background="#ffffff"
android:elevation="2dp"> <ImageView
android:contentDescription="@id/item_title"
android:id="@+id/item_image"
android:layout_width="match_parent"
android:layout_height="170dp"
android:scaleType="centerCrop"
tools:src="@drawable/img_7" /> <TextView
android:id="@+id/item_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:lines="1"
android:ellipsize="end"
android:textColor="#000000"
android:textSize="18sp"
tools:text="Item Title" /> <TextView
android:id="@+id/item_sub_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:paddingStart="8dp"
android:paddingEnd="8dp"
android:lines="1"
android:ellipsize="end"
android:textSize="14sp"
tools:text="Sub Title" /> </LinearLayout>