高仿山寨版bilibili

(logo)

Github鏈接:(https://github.com/BoxingWoo/bilibili)

前言

本項目的所有數(shù)據(jù)均使用Charles抓包所得,使用MVVM+RAC模式進行編寫。

項目展示

首頁


視頻播放界面


直播界面


項目描述


Based

這里面包括了tabbarController、navigationController、webViewController、basedViewModel、viewModelRouter

navigationController,項目中只有一級界面顯示tabbar,二級界面push的時候都會隱藏,需要自定制返回按鈕,所以重寫了push和pop方法。另外還新增了一個替換視圖控制器的方法。

webViewController,內(nèi)部封裝了webView的自定義網(wǎng)頁視圖控制器,重寫了webView的幾個代理方法,如果檢測到網(wǎng)頁上的視頻會自動跳轉(zhuǎn)到客戶端自帶的視頻播放界面進行播放。

basedViewModel,視圖模型基類,所有的視圖控制器都帶有一個viewModel,視圖間push或present的都是viewModel而不是viewController,所以這個類里面包含了一些用于控制跳轉(zhuǎn)的屬性和構(gòu)造方法。另外還添加了一個UIViewController+DdViewModel的分類用于為視圖控制器添加viewModel屬性以及MVVM的核心Bind(綁定)方法。

viewModelRouter,路由器,自定義本地路由表,從根視圖控制器遞歸獲取當前視圖控制器并根據(jù)viewModel或者數(shù)據(jù)模型的URL進行界面跳轉(zhuǎn)。

Vendor

按功能創(chuàng)建的各種工具類:

AppInfo 主要是應用的一些相關(guān)信息。

DdFormatter 應用的文本格式化輸出工具。

DdHTTPSessionManager 網(wǎng)絡(luò)請求類,基于AFHTTPSessionManager的二次封裝,帶有數(shù)據(jù)緩存功能,可以配置不同的數(shù)據(jù)緩存策略,還可以選擇多種便于開發(fā)的數(shù)據(jù)打印模式。

DdImageManager 圖片處理工具,用于圖片的調(diào)整、裁剪、合成和濾鏡添加。

YYFPSLabel、YPPlayerFPSLabel 幀速率監(jiān)測工具。

項目實現(xiàn)

視頻列表


視頻列表使用的是collectionView,viewController里只對collectionView進行了創(chuàng)建和配置,還有負責界面之間的跳轉(zhuǎn),collectionViewCell、sectionHeader、sectionFooter的配置和數(shù)據(jù)請求都交給了viewModel來實現(xiàn)。


直播視頻列表跟推薦視頻列表的實現(xiàn)類似,因為本人不喜歡嵌套(譬如一個tableViewCell里嵌套一個collectionView),這里使用了自定義的流式布局來添加與tableView類似的HeaderView和FooterView。由于數(shù)據(jù)量比較小,布局的運算是一次完成的,并沒有考慮性能問題(據(jù)說一般是使用二叉樹算法)。

視頻預覽圖的請求和處理使用的是YYKit里的類,相比于大家常用的SDWebImage,YYKit除了提供圖片的請求方法之外還包含了很多圖片的處理方法,真的非常人性化。此外,圖片請求方法還多了一個transform的block用于在圖片請求完成之后加載之前對圖片進行異步處理并可以緩存到硬盤,有著非常優(yōu)秀的性能體驗。


原圖


效果圖

[normalCell.coverImageView setImageWithURL:[NSURL URLWithString:model.cover] placeholder:[DdImageManager cover_placeholderImageBySize:CGSizeMakeEx(146.0, 92.0)] options:YYWebImageOptionSetImageWithFadeAnimation progress:NULL transform:^UIImage*_Nullable(UIImage*_Nonnull image,NSURL*_Nonnull url) {return [DdImageManager transformImage:image size:normalCell.coverImageView.size cornerRadius:kCoverCornerRadius style:DdImageDarkGradient];} completion:NULL];

視頻播放


視頻播放器使用的是bilibili的開源框架IJKMediaFramework,而媒體控制器是防bilibili自定制UI和功能實現(xiàn),分為豎屏方向的DdPortraitMediaControl,橫屏方向的DdLandscapeMediaControl,雖然兩者在功能上有部分重疊,但是為了方便實現(xiàn)而分成了兩個控件。有一點是不可否認的,復制黏貼要比抽象封裝來得快也舒服。兩個控件的實現(xiàn)并不復雜,但是要同時集成播放設(shè)置、彈幕設(shè)置、彈幕發(fā)送、播放控制、媒體控制器自動隱藏、進度監(jiān)控等諸多功能,代碼量可謂驚為天人。此外還自定制了快進快退指示器和緩沖指示器等一些小控件。


媒體控制器功能模塊(部分)

彈幕的渲染和發(fā)送使用了一個第三方框架BarrageRenderer,使用簡單并擁有以下特性:1、提供過場彈幕(4種方向)與懸浮彈幕(2種方向)支持; 支持圖片彈幕與文字彈幕.2、彈幕字體可定義: 顏色,邊框,圓角,背景,字體等皆可定制.3、自動軌道搜尋算法,新發(fā)彈幕會根據(jù)相同方向的同種彈幕獲取最佳運動軌道.4、支持延時彈幕,為反復播放彈幕提供可能;支持與外界的時間同步.5、獨立的動畫時間系統(tǒng), 可以統(tǒng)一調(diào)整動畫速度.6、特制的動畫引擎,播放彈幕更流暢,可承接持續(xù)的10條/s的彈幕流速.7、豐富的擴展接口, 實現(xiàn)了父類的接口就可以自定義彈幕動畫.8、可以為任意UIView綁定彈幕,當然彈幕內(nèi)容需要創(chuàng)建控件輸入。

直播

關(guān)于直播這一塊并不打算多做介紹,網(wǎng)上有很多關(guān)于直播實現(xiàn)的教程,具體實現(xiàn)可以參照這篇博客http://www.itdecent.cn/p/bd42bacbe4cc。項目中使用的是來瘋直播的框架LFLiveKit。

結(jié)束語

以上是對這個項目的幾個重點模塊的解說還有一些技術(shù)要點實現(xiàn)的闡述,整個項目還有很多細節(jié)沒有提及,大家可以去看我的代碼,里面有比較詳細的注釋。最后,歡迎大家對我的項目進行批評指正?。≒S:本項目是基于bilibili客戶端4.0版本實現(xiàn)的,目前已經(jīng)更新到了5.0版本,界面布局和功能實現(xiàn)有著相當?shù)牟町悾?/p>

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容