AndroidTv Home界面實現原理(一)——Leanback 庫的使用


本篇文章已授權微信公眾號 dasu_Android(大蘇)獨家發布

接下去應該是梳理一下 Android Tv 主界面實現原理及解析的一個系列博客了,大體上的安排是先介紹 Google 官方提供的 Leanback 庫的使用,如何使用該庫來實現簡單的 Home 界面,然后再去分析 Leanback 主界面實現的相關源碼,了解完 Google 是如何實現之后就可以扔掉 Leanback 自己來嘗試實現,畢竟 Leanback 的可定制不高。


效果圖

首先貼幾張常見的 Home 界面效果:

愛奇藝主界面.png

hejunlin2013TVSample.png

google sample.png

第一張是愛奇藝 Tv 應用的 Home 界面,第二張是一個開源 Demo 的 Home 界面,第三張是 Google 官方 Tv Sample 的 Home 界面

比較常見的 Home 界面風格應該是第一張和第二張的形式,這兩種的 ui 實現也不一樣,因此我就想搞懂這兩種界面分別是如何實現的!!

目前重點研究第一張的實現方式吧,畢竟 Google 的 Leanback 庫實現出來的效果跟第一張有一些共同點,因此可以從 Leanback 入手來學習它是如何實現的。而至於第二張的實現原理,目前還沒有思路,也暫時找不到相關資料來學習,Github 上面的 demo 都是忽悠人,控件全都是在 xml 中直接寫死的,所以第二張圖的 Home 界面實現原理以后再慢慢研究吧,或者有讀者可以指點一二,非常感激。

分析

先大概的來分析一下第一張愛奇藝 Home 界面的實現:

Tab標簽欄.png

這個是 Tab 標簽欄,選中不同的 Tab,內容區會顯示不同的視頻列表,這里的實現應該是 TabLayout + Fragment 的形式,或者 TabLayout + ViewPager,但 ViewPager 在 Tv 上使用好像會出很多坑。

可左右上下滑動的視頻列表.png

這個是內容區域即可左右滑動又可上下滑動的視頻列表區域,主頁最復雜的實現應該就是這個地方了。要我實現的話,思路就是 RecyclerView 嵌套 RecyclerView 來實現,先不談 RecyclerView 這種滑動的控件在 Tv 上會出問題,嵌套這個坑就足夠你填的了。

在 Tv 上,可以用 HorizontalGridView 和 VerticalGridView 替代 RecyclerView 使用。但要實現左右單行滑動,上下整體滑動的效果,我只能想到上下用 VerticalGridView 來實現,每一行是它 itemView,而每一行的實現則用 HorizontalGridView 來實現。也就是 1 個 VerticalGridView + 多個 HorizontalGridView 來實現。

但這樣的嵌套仍會有許多問題出現,比如快速移動時的焦點丟失、性能問題、每一行的 View 如何緩存、復用等。

有大佬清楚解決方案,或者有其他實現思路的小伙伴們歡迎指點一下,實在沒有,那就只能自己慢慢去啃 Leanback 的相關源碼,然后再來梳理一下了。

使用

不出意外,接下去的空閑時間應該就是啃 Leanback Home 界面實現的相關源碼,在此之前,先了解一下 Leanback 如何使用,哪些類是重點,后面分析時才方便入手。

以下是我覺得應該理解的類:

  • BrowerFragment:用來展示可左右上下滑動的視頻列表界面
  • ArrayObjectAdapter:作用類似於 List,可以用於裝每一行的數據,也可以用於裝一行里的每一個 item 數據
  • ListRowPresenter:Leanback 庫中的 Presenter 作用都有些類似於 RecyclerView.Adapter
  • ListRow:可以理解成一個 Mode,也就是把每一行抽象封裝成一個 ListRow

用法跟 RecyclerView 很像,就是可能單獨從命名上來理解會有些亂。只要你自己嘗試去利用 Leanback 去實現個最簡單的 Home 界面,大體就能理解了。比如,要實現下面這個 Home 界面:

簡單的Home界面.png

首先,界面顯示的數據都存在 ArrayObjectAdapter 里面,在 RecyclerView 時我們是存在 ArrayList 里:

相關代碼.png

初始化 ArrayObjectAdapter 對象時需傳入一個 Presenter 進去,這里跟 RecyclerView 的使用有些不同,在 RecyclerView 里,我們是將 List 對象傳給 Adapter,讓 Adapter 去將數據和 itemView 綁定。這里雖然反過來將 Adapter(Presenter) 傳入 List(ArrayObjectAdapter) 里,但其實作用也差不多,也是將兩者關聯起來。只是多了一個步驟,通過一個橋梁類 ItemBridgeAdapter 來將 ArrayObjectAdapter 里的數據傳給 Presenter 。之后 Presenter 的工作就跟 RecyclerView.Adapter 一樣了。

前面說了 Presenter 作用類似於 Adapter,它是個抽象類,繼承它的之類需要實現三個方法:onCreateViewHolder()、onBindViewHolder()、onUnbindViewHolder(),同 RecyclerView.Adapter 一樣,在 onCreateViewHolder() 里面創建 itemView,然后在 onBindViewHolder() 里面將數據和 itemView 綁定,比如:

GridItemPresenter.png

最后調用 BrowerFragment 的 setAdapter() 將總的 ArrayObjectAdapter 對象設置進去,就可以了。使用很簡單,如果你第一次接觸,然后直接來看這篇,也許看不懂,建議你去看看這篇博客,或者自己去看一下 Google 官方的 Tv demo,然后再回來看,相信你理解就會跟深刻了。

思考

  1. 學會初步使用 Leanback 實現一個簡單的 Home 界面后,你會發現,我們只需要提供每一行的數據,以及每行自己 itemView 的布局和數據綁定方式即可。但這完全沒有涉及到 HorizontalGridView 和 VerticalGridView ,那么它內部的實現原理又是什么呢?

  2. 如果你運行了 Google 官方 Tv sample 或者自己利用 Leanback 實現了簡單的 Home 界面的話,你會發現,我們焦點在某個 item 上時,這個 item 會放大,焦點離開又恢復正常,這個 Leacback 又是怎么實現的呢?

  3. 如果你運行了愛奇藝的 Tv 應用,你會發現,它焦點在移動到邊界時 item 會有抖動的效果,這又要如何實現呢?

本系列梳理博客大概就是要理清上面的問題,后兩個比較簡單,看了 Leanback 的源碼,已基本明白。所以難啃的點還是在於 Home 界面的 ui 實現原理,目前只能大體上明白每一行是一個 HorizontalGridView,上下滑動是由什么實現還沒啃透。下一篇等啃得差不多了,再來梳理一下。


QQ圖片20180316094923.jpg
最近剛開通了公眾號,想激勵自己堅持寫作下去,初期主要分享原創的Android或Android-Tv方面的小知識,感興趣的可以點一波關注,謝謝支持~~


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM