drakeet MultiType的使用

我们在日常使用recyclerview时，总会遇到各种比较复杂的布局，这时候仅仅是一个简单的item已经不能满足我们的要求，如何实现这些呢，目前主要有三种方式
1、嵌套
2、addView
3、使用type
这些方法虽然都可以实现我们想要的布局，但缺点都是比较明显的，耦合度特别大，每当我们需要修改时，不得不修改Adapter的内容，因此今天我们要谈一款能优雅、解耦的开源库来实现复杂的布局。
drakeet的MultiType就是为这而生的，其简单，高效，解耦的实现这些复杂的布局，地址传送门 MultiType。MultiType的作者也详细的介绍了该库的如何使用Effective-MultiType ,今天我们就针对具体的需求，如何使用该库。
很早之前就订阅了代码家的gank.io，一直很感谢大牛的无私奉献，每日为我们推送技术文章。因此最近使用代码家的api，开发了一款gank的客户端（应用宝：干货Gank），其中每日gank的数据是比较多的，涉及到Android、iOS、前端等多个领域。

如返回的数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
{
  "category": [
    "休息视频", 
    "瞎推荐", 
    "iOS", 
    "Android", 
    "福利"
  ], 
  "error": false, 
  "results": {
    "Android": [
      {
        "_id": "589d2bcd421aa9270bc7332c", 
        "createdAt": "2017-02-10T10:56:13.792Z", 
        "desc": "Android 信用卡提交效果。", 
        "images": [
          "http://img.gank.io/0df0d67f-6d39-4880-9a44-b2531ccb3a75"
        ], 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "Android", 
        "url": "https://github.com/adonixis/android-sumbit-credit-card-flow", 
        "used": true, 
        "who": "代码家"
      }, 
      {
        "_id": "589d2bed421aa92710db9613", 
        "createdAt": "2017-02-10T10:56:45.622Z", 
        "desc": "简洁优雅的网络状态提示。", 
        "images": [
          "http://img.gank.io/93211cbf-d4af-4bc4-ba76-621dfb1dfe40"
        ], 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "Android", 
        "url": "https://github.com/iammert/StatusView", 
        "used": true, 
        "who": "代码家"
      }
    ], 
    "iOS": [
      {
        "_id": "589d2af5421aa9270bc7332b", 
        "createdAt": "2017-02-10T10:52:37.898Z", 
        "desc": "Swift 发送邮件 📧", 
        "images": [
          "http://img.gank.io/41577a74-2e4b-4f20-9cee-5f5d3a2a2ce4"
        ], 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "iOS", 
        "url": "https://github.com/onevcat/Hedwig", 
        "used": true, 
        "who": "代码家"
      }, 
      {
        "_id": "589d2b9f421aa92710db9612", 
        "createdAt": "2017-02-10T10:55:27.144Z", 
        "desc": "弹出一个醒目而优雅的通知框。", 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "iOS", 
        "url": "https://github.com/candostdagdeviren/CDAlertView", 
        "used": true, 
        "who": "代码家"
      }
    ], 
    "休息视频": [
      {
        "_id": "58974706421aa970bed462c2", 
        "createdAt": "2017-02-05T23:38:46.879Z", 
        "desc": "不要给我讲理，我就是道理...也是说出了万千女生的心声...哈哈哈~真理都在女人嘴里，无法反驳...[笑cry][笑cry]", 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "休息视频", 
        "url": "http://weibo.com/tv/v/cf39d9a371f7329cb7736bd1b16293de?fid=1034:cf39d9a371f7329cb7736bd1b16293de", 
        "used": true, 
        "who": "lxxself"
      }
    ], 
    "瞎推荐": [
      {
        "_id": "589c0e76421aa92dbe257232", 
        "createdAt": "2017-02-09T14:38:46.687Z", 
        "desc": "阿里巴巴Java开发手册", 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "瞎推荐", 
        "url": "http://deadlion.cn/2017/02/05/Alibaba-Java-Code-Style.html", 
        "used": true, 
        "who": "wuzheng"
      }
    ], 
    "福利": [
      {
        "_id": "589d31a2421aa9270bc7332e", 
        "createdAt": "2017-02-10T11:21:06.747Z", 
        "desc": "2-10", 
        "publishedAt": "2017-02-10T11:38:22.122Z", 
        "source": "chrome", 
        "type": "福利", 
        "url": "http://7xi8d6.com1.z0.glb.clouddn.com/2017-02-10-16465759_171779496648995_128281069584646144_n.jpg", 
        "used": true, 
        "who": "代码家"
      }
    ]
  }
}

我们想要每日gank的页面简单好看 ，能区分类别。如下图

从图中可以看我我们需要三种类别，分别是最上面的福利图片，技术文章的类别和文章。

如何使用

通过学习MultiType，必然需要三个ItemViewProvider，对应三种布局。
1.顶部的图片
2.分类标题
3.文章

顶部图片的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class FuliViewProvider extends ItemViewProvider<FuliBean, FuliViewProvider.ViewHolder> {
    @NonNull
    @Override
    protected ViewHolder onCreateViewHolder(@NonNull LayoutInflater inflater, @NonNull ViewGroup parent) {
        View root = inflater.inflate(R.layout.item_fuli, parent, false);
        return new ViewHolder(root);
    }
    @Override
    protected void onBindViewHolder(@NonNull ViewHolder holder, @NonNull FuliBean fuliBean) {
        Glide.with(holder.image.getContext()).load(fuliBean.getUrl()).crossFade().centerCrop().into(holder.image);
        SimpleDateFormat df = new SimpleDateFormat("yyyy/MM/dd");
        holder.time.setText(df.format(fuliBean.getPublishedAt()));
    }
    static class ViewHolder extends RecyclerView.ViewHolder {
        private ImageView image;
        private TextView time;
        ViewHolder(View itemView) {
            super(itemView);
            image = (ImageView) itemView.findViewById(R.id.image);
            time = (TextView) itemView.findViewById(R.id.text);
        }
    }
}
`

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="150dp">
    <ImageView
        android:id="@+id/image"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true" />
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        android:layout_marginBottom="15dp"
        android:layout_marginRight="15dp"
        android:textColor="#00ff00"
        android:textSize="20sp" />
</FrameLayout>

分类标题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
public class HeaderViewProvider extends ItemViewProvider<HeaderBean, HeaderViewProvider.ViewHolder> {
    @NonNull
    @Override
    protected ViewHolder onCreateViewHolder(@NonNull LayoutInflater inflater, @NonNull ViewGroup parent) {
        View root = inflater.inflate(R.layout.item_header, parent, false);
        return new ViewHolder(root);
    }
    @Override
    protected void onBindViewHolder(@NonNull ViewHolder holder, @NonNull HeaderBean headerBean) {
        holder.content.setText(headerBean.getTitle());
    }
    static class ViewHolder extends RecyclerView.ViewHolder {
        private TextView content;
        ViewHolder(View itemView) {
            super(itemView);
            content = (TextView) itemView.findViewById(R.id.text);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:textColor="#000"
        android:textSize="18sp"
        android:textStyle="bold" />
</LinearLayout>

技术文章

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class ImageViewProvider extends ItemViewProvider<ImgDataBean,ImageViewProvider.ViewHolder> {
    @NonNull
    @Override
    protected ViewHolder onCreateViewHolder(@NonNull LayoutInflater inflater, @NonNull ViewGroup parent) {
        View root = inflater.inflate(R.layout.item_image, parent, false);
        return new ViewHolder(root);
    }
    @Override
    protected void onBindViewHolder(@NonNull ViewHolder holder, @NonNull ImgDataBean dataBean) {
        holder.content.setText(dataBean.getDesc());
        if(dataBean.getImages()!=null&&dataBean.getImages().size()>0){
            holder.image.setVisibility(View.VISIBLE);
            Glide.with(holder.image.getContext()).load(dataBean.getImages().get(0)).crossFade().centerCrop().into(holder.image);
        }else{
            holder.image.setVisibility(View.GONE);
        }
    }
    static class ViewHolder extends RecyclerView.ViewHolder {
        private TextView content;
        private ImageView image;
        ViewHolder(View itemView) {
            super(itemView);
            content = (TextView) itemView.findViewById(R.id.text);
            image = (ImageView) itemView.findViewById(R.id.image);
        }
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:orientation="vertical">
    <TextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <ImageView
        android:id="@+id/image"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:src="@mipmap/ic_launcher" />
</LinearLayout>

这样我们在Activity或其他地方，注册register这些都可以了。
具体代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 @Override
 protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
	  ...
    GankData gank = new Gson().fromJson(Data.Gank, GankData.class);
    recyclerView = (RecyclerView) findViewById(R.id.recyclerView);
    LinearLayoutManager layoutManager = new LinearLayoutManager(this);
    layoutManager.setOrientation(LinearLayoutManager.VERTICAL);
    recyclerView.setLayoutManager(layoutManager);
    items = new Items();
    adapter = new MultiTypeAdapter();
    adapter.register(FuliBean.class, new FuliViewProvider());
    adapter.register(HeaderBean.class, new HeaderViewProvider());
    adapter.register(ImgDataBean.class, new ImageViewProvider());
    recyclerView.setAdapter(adapter);
    Gson gson = new Gson();
    if (gank.getResults() != null) {
        if (gank.getResults().get福利() != null && gank.getResults().get福利().size() > 0) {
            ImgDataBean img = gank.getResults().get福利().get(0);
            FuliBean bean = gson.fromJson(gson.toJson(img), FuliBean.class);
            items.add(bean);
        }
        if (gank.getResults().getAndroid() != null && gank.getResults().getAndroid().size() > 0) {
            items.add(new HeaderBean("Android"));
            items.addAll(gank.getResults().getAndroid());
        }
        if (gank.getResults().getiOS() != null && gank.getResults().getiOS().size() > 0) {
            items.add(new HeaderBean("iOS"));
            items.addAll(gank.getResults().getiOS());
        }
        if (gank.getResults().get前端() != null && gank.getResults().get前端().size() > 0) {
            items.add(new HeaderBean("前端"));
            items.addAll(gank.getResults().get前端());
        }
        if (gank.getResults().get瞎推荐() != null && gank.getResults().get瞎推荐().size() > 0) {
            items.add(new HeaderBean("瞎推荐"));
            items.addAll(gank.getResults().get瞎推荐());
        }
        if (gank.getResults().get拓展资源() != null && gank.getResults().get拓展资源().size() > 0) {
            items.add(new HeaderBean("拓展资源"));
            items.addAll(gank.getResults().get拓展资源());
        }
        if (gank.getResults().get休息视频() != null && gank.getResults().get休息视频().size() > 0) {
            items.add(new HeaderBean("休息视频"));
            items.addAll(gank.getResults().get休息视频());
        }
    }
    adapter.setItems(items);
    adapter.notifyDataSetChanged();
}

如果需要需改，我们只需要修改对应的ItemViewProvider，或添加ItemViewProvider，是不是很方便呢。当然我们还可以结合cardview实现圆角的边距，让布局更加的优雅。

具体如何实现，可看我的github地址MultiTypeDemo。

最后

本文通过gank的每日数据来具体的使用MultiType，本文仅仅只是粗略的讲解了使用的方式，让读者明白MultiType的优点。更多的使用请参考drakeet的讲解。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

董庆&lt;/br&gt;2014年毕业&lt;</br&gt>;Android程序猿一枚。