Kongzue.FastBanner 技術(shù)解析

前言

輪播圖框架確實有些爛大街了,實現(xiàn)原理也比較簡單瞻润,但在快速集成實現(xiàn)和可定制化上又有著不可調(diào)和的矛盾,有些框架集成容易,但卻可能會因為無法做到足夠的自由定制化而無法滿足我們的需求庭呜,而有些框架功能相當(dāng)豐富,但卻十分臃腫犀忱,加個框架整個程序大了好幾兆募谎,十分無奈。

最近新接了一個項目阴汇,要求如下圖所示的復(fù)雜布局Banner一份数冬,而App的內(nèi)部詳情頁還有一個簡單無需客制化布局純圖片的Banner,這就讓我在框架的選擇上有些頭疼了搀庶,畢竟手頭已有的Banner框架并沒有合適的拐纱。

Banner設(shè)計稿

自定義布局的CustomBanner

于是就突然萌生自己寫一個的想法了,想搞一個不那么大哥倔,又能滿足需求的Banner秸架,輪播圖的原理很簡單,基本就是首尾拼接尾首的Viewpager咆蒿,然后在用戶滑動到最首或最尾的一頁時瞬間不帶動畫切換到尾或首頁东抹,以實現(xiàn)“無線循環(huán)”的效果蚂子,具體代碼如下:

addItem(imageUrls.get(imageUrls.size() - 1));       //先添加一個尾部的圖
for (String url : imageUrls) {                      //正常添加所有的輪播圖
    addItem(url);
}
addItem(imageUrls.get(0));                          //最后添加第一頁的圖

考慮到快速實現(xiàn)自定義Banner布局以及綁定自定義布局中的組件,并實現(xiàn)相應(yīng)的自定義內(nèi)容缭黔,我嘗試使用了一個接口來實現(xiàn)食茎。BindView接口允許傳入一個泛型用于確定輪播圖用到的數(shù)據(jù)類型,一般可以是Map馏谨,也可以是自定義的Bean别渔,而后在執(zhí)行時會將生成好的根布局rootView回傳出去,用戶可以根據(jù)rootView.findViewById(resId)來實現(xiàn)組件的綁定田巴,以及事件的設(shè)置:

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);
    }
}

如上基本就完成了輪播圖組件的主體部分钠糊,剩下的也就是自動輪播、指示器和屬性設(shè)置壹哺,詳情可以前往Github開源庫查看抄伍。

快速簡單的SimpleBanner

另外重點來說一下對于普通Banner如何實現(xiàn)的問題,相比于上邊的自定義布局Banner管宵,普通Banner反而要更難截珍,為什么呢?原因在于自定義布局Banner的子界面布局是用戶自己去設(shè)計和定義的箩朴,存放在資源layout中岗喉,我們繞過了用戶會使用什么圖片顯示框架這一個問題,即炸庞,用戶可能用ImageView來實現(xiàn)圖片顯示钱床,也可能會使用Fresco的SimpleDraweeView來實現(xiàn)圖片的顯示,而在普通Banner中埠居,我們要實例化的布局直接就是用戶所要用的圖片顯示框架查牌,但這對于Banner來說是未知的。

反復(fù)思考后我決定用依然泛型來實現(xiàn)此功能滥壕,在普通Banner的BindView中給出一個泛型用于設(shè)置圖片顯示組件的類型纸颜,然后在Banner創(chuàng)建時將其實例化,添加到viewpager中绎橘,那么重點難題就是如何將泛型實例化胁孙。

泛型之所以為“泛型”,即不確定類型称鳞,不確定類型就基本無法實例化對象了涮较,所以這里需要繞一步來實現(xiàn)。在SimpleBanner中胡岔,我嘗試將接口BindView改變?yōu)榱顺橄箢怋indData法希,在其中實現(xiàn)了一個方法用來實現(xiàn)泛型的實例化:

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的初始化方法至少需要一個參數(shù)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);
    }
}

創(chuàng)建對象V后就可以顯示到viewpager里了,至此SimpleBanner最難的地方基本也就攻克了怨咪。

總結(jié)

FastBanner提供兩個組件屋剑,即SimpleBanner用于快速實現(xiàn)普通輪播圖,而CustomBanner用于快速實現(xiàn)自定義布局的輪播圖诗眨,僅需要簡單配置即可滿足絕大多數(shù)需要使用輪播圖的場景唉匾。

實際使用方式以及說明,請移駕 Github 查看匠楚。

有任何疑問或建議歡迎在 Github.issues 頁面提交巍膘,也歡迎Star&Fork

寫文章不易,如果覺得好還勞煩點個贊吧芋簿!

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末峡懈,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子与斤,更是在濱河造成了極大的恐慌肪康,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,110評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撩穿,死亡現(xiàn)場離奇詭異磷支,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)食寡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,443評論 3 395
  • 文/潘曉璐 我一進(jìn)店門雾狈,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人抵皱,你說我怎么就攤上這事善榛。” “怎么了叨叙?”我有些...
    開封第一講書人閱讀 165,474評論 0 356
  • 文/不壞的土叔 我叫張陵锭弊,是天一觀的道長。 經(jīng)常有香客問我擂错,道長味滞,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,881評論 1 295
  • 正文 為了忘掉前任钮呀,我火速辦了婚禮剑鞍,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘爽醋。我一直安慰自己蚁署,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,902評論 6 392
  • 文/花漫 我一把揭開白布蚂四。 她就那樣靜靜地躺著光戈,像睡著了一般哪痰。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上久妆,一...
    開封第一講書人閱讀 51,698評論 1 305
  • 那天晌杰,我揣著相機(jī)與錄音,去河邊找鬼筷弦。 笑死肋演,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的烂琴。 我是一名探鬼主播爹殊,決...
    沈念sama閱讀 40,418評論 3 419
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼奸绷!你這毒婦竟也來了梗夸?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,332評論 0 276
  • 序言:老撾萬榮一對情侶失蹤健盒,失蹤者是張志新(化名)和其女友劉穎绒瘦,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體扣癣,經(jīng)...
    沈念sama閱讀 45,796評論 1 316
  • 正文 獨居荒郊野嶺守林人離奇死亡惰帽,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,968評論 3 337
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了父虑。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片该酗。...
    茶點故事閱讀 40,110評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖士嚎,靈堂內(nèi)的尸體忽然破棺而出呜魄,到底是詐尸還是另有隱情,我是刑警寧澤莱衩,帶...
    沈念sama閱讀 35,792評論 5 346
  • 正文 年R本政府宣布爵嗅,位于F島的核電站,受9級特大地震影響笨蚁,放射性物質(zhì)發(fā)生泄漏睹晒。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,455評論 3 331
  • 文/蒙蒙 一括细、第九天 我趴在偏房一處隱蔽的房頂上張望伪很。 院中可真熱鬧,春花似錦奋单、人聲如沸锉试。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,003評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽呆盖。三九已至拖云,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間絮短,已是汗流浹背江兢。 一陣腳步聲響...
    開封第一講書人閱讀 33,130評論 1 272
  • 我被黑心中介騙來泰國打工昨忆, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留丁频,地道東北人。 一個月前我還...
    沈念sama閱讀 48,348評論 3 373
  • 正文 我出身青樓邑贴,卻偏偏與公主長得像席里,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子拢驾,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,047評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫奖磁、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 12,107評論 4 62
  • Android UI相關(guān)開源項目庫匯總OpenDigg 抽屜菜單MaterialDrawer ★7337 - 安卓...
    黃海佳閱讀 8,720評論 3 77
  • 一繁疤、簡歷準(zhǔn)備 1咖为、個人技能 (1)自定義控件、UI設(shè)計稠腊、常用動畫特效 自定義控件 ①為什么要自定義控件躁染? Andr...
    lucas777閱讀 5,211評論 2 54
  • 跑馬燈 MarqueeView★1568 - 垂直翻頁公告 MarqueeViewDemo★896 - 跑馬燈Vi...
    8ba406212441閱讀 5,795評論 1 75
  • 感恩上師三寶和諸佛菩薩護(hù)佑加持,感恩佛光普照個大地架忌。 感恩歷代宗親的傳承吞彤,感恩父母的養(yǎng)育之恩,感恩媽媽有健康的身體...
    cy_9402閱讀 195評論 0 0