Android RecycleView多種布局實現（工廠模式）

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>