Kongzue.FastBanner 技术解析

最新推荐文章于 2024-08-10 07:40:21 发布

weixin_34357962

最新推荐文章于 2024-08-10 07:40:21 发布

阅读量82

点赞数

原文链接：https://juejin.im/post/5c8350475188257ea64cea5e

版权

前言

轮播图框架确实有些烂大街了，实现原理也比较简单，但在快速集成实现和可定制化上又有着不可调和的矛盾，有些框架集成容易，但却可能会因为无法做到足够的自由定制化而无法满足我们的需求，而有些框架功能相当丰富，但却十分臃肿，加个框架整个程序大了好几兆，十分无奈。

最近新接了一个项目，要求如下图所示的复杂布局Banner一份，而App的内部详情页还有一个简单无需客制化布局纯图片的Banner，这就让我在框架的选择上有些头疼了，毕竟手头已有的Banner框架并没有合适的。

自定义布局的CustomBanner

于是就突然萌生自己写一个的想法了，想搞一个不那么大，又能满足需求的Banner，轮播图的原理很简单，基本就是首尾拼接尾首的Viewpager，然后在用户滑动到最首或最尾的一页时瞬间不带动画切换到尾或首页，以实现“无线循环”的效果，具体代码如下：

addItem(imageUrls.get(imageUrls.size() - 1));       //先添加一个尾部的图
for (String url : imageUrls) {                      //正常添加所有的轮播图
    addItem(url);
}
addItem(imageUrls.get(0));                          //最后添加第一页的图
复制代码

考虑到快速实现自定义Banner布局以及绑定自定义布局中的组件，并实现相应的自定义内容，我尝试使用了一个接口来实现。BindView接口允许传入一个泛型用于确定轮播图用到的数据类型，一般可以是Map，也可以是自定义的Bean，而后在执行时会将生成好的根布局rootView回传出去，用户可以根据rootView.findViewById(resId)来实现组件的绑定，以及事件的设置：

public interface BindView<D> {
    void bind(D data, View rootView);
}
复制代码

addItem方法的代码如下：

private void addItem(D data) {
    View item = LayoutInflater.from(context).inflate(customLayoutResId, null, false);
    if (item != null) {
        bindView.bind(data, item);
        views.add(item);
    }
}
复制代码

如上基本就完成了轮播图组件的主体部分，剩下的也就是自动轮播、指示器和属性设置，详情可以前往Github开源库查看。

快速简单的SimpleBanner

另外重点来说一下对于普通Banner如何实现的问题，相比于上边的自定义布局Banner，普通Banner反而要更难，为什么呢？原因在于自定义布局Banner的子界面布局是用户自己去设计和定义的，存放在资源layout中，我们绕过了用户会使用什么图片显示框架这一个问题，即，用户可能用ImageView来实现图片显示，也可能会使用Fresco的SimpleDraweeView来实现图片的显示，而在普通Banner中，我们要实例化的布局直接就是用户所要用的图片显示框架，但这对于Banner来说是未知的。

反复思考后我决定用依然泛型来实现此功能，在普通Banner的BindView中给出一个泛型用于设置图片显示组件的类型，然后在Banner创建时将其实例化，添加到viewpager中，那么重点难题就是如何将泛型实例化。

泛型之所以为“泛型”，即不确定类型，不确定类型就基本无法实例化对象了，所以这里需要绕一步来实现。在SimpleBanner中，我尝试将接口BindView改变为了抽象类BindData，在其中实现了一个方法用来实现泛型的实例化：

public abstract static class BindData<V> {
    
    public abstract void bind(String url, V imageView);
    
    public Class<V> getEntityClass() {
        Type type = getClass().getGenericSuperclass();
        ParameterizedType pType = (ParameterizedType) type;
        Type[] params = pType.getActualTypeArguments();
        @SuppressWarnings("unchecked")
        Class<V> c = (Class<V>) params[0];
        return c;
    }
}
复制代码

尝试实例化V，并将其添加至viewpager，这里需要助于的是对象V的初始化方法至少需要一个参数context，是不可以直接class.newInstance()的：

private void addItem(String url) {
    V item;
    try {
        Constructor con = bindData.getEntityClass().getConstructor(Context.class);
        item = (V) con.newInstance(context);
    } catch (Exception e) {
        e.printStackTrace();
        return;
    }
    if (item != null) {
        bindData.bind(url, item);
        views.add(item);
    }
}
复制代码

创建对象V后就可以显示到viewpager里了，至此SimpleBanner最难的地方基本也就攻克了。