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

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


效果圖

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

愛奇藝主界面.png
hejunlin2013TVSample.png
google sample.png

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

比較常見的 Home 界面風格應該是第一張和第二張的形式阱持,這兩種的 ui 實現(xiàn)也不一樣夭拌,因此我就想搞懂這兩種界面分別是如何實現(xiàn)的Dа衷咽!

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

分析

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

Tab標簽欄.png

這個是 Tab 標簽欄唤衫,選中不同的 Tab,內(nèi)容區(qū)會顯示不同的視頻列表绵脯,這里的實現(xiàn)應該是 TabLayout + Fragment 的形式佳励,或者 TabLayout + ViewPager,但 ViewPager 在 Tv 上使用好像會出很多坑。

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

這個是內(nèi)容區(qū)域即可左右滑動又可上下滑動的視頻列表區(qū)域蛆挫,主頁最復雜的實現(xiàn)應該就是這個地方了赃承。要我實現(xiàn)的話,思路就是 RecyclerView 嵌套 RecyclerView 來實現(xiàn)悴侵,先不談 RecyclerView 這種滑動的控件在 Tv 上會出問題瞧剖,嵌套這個坑就足夠你填的了。

在 Tv 上可免,可以用 HorizontalGridView 和 VerticalGridView 替代 RecyclerView 使用筒繁。但要實現(xiàn)左右單行滑動,上下整體滑動的效果巴元,我只能想到上下用 VerticalGridView 來實現(xiàn)毡咏,每一行是它 itemView,而每一行的實現(xiàn)則用 HorizontalGridView 來實現(xiàn)逮刨。也就是 1 個 VerticalGridView + 多個 HorizontalGridView 來實現(xiàn)呕缭。

但這樣的嵌套仍會有許多問題出現(xiàn),比如快速移動時的焦點丟失修己、性能問題恢总、每一行的 View 如何緩存、復用等睬愤。

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

使用

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

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

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

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

簡單的Home界面.png

首先堪置,界面顯示的數(shù)據(jù)都存在 ArrayObjectAdapter 里面,在 RecyclerView 時我們是存在 ArrayList 里:

相關代碼.png

初始化 ArrayObjectAdapter 對象時需傳入一個 Presenter 進去张惹,這里跟 RecyclerView 的使用有些不同舀锨,在 RecyclerView 里,我們是將 List 對象傳給 Adapter宛逗,讓 Adapter 去將數(shù)據(jù)和 itemView 綁定坎匿。這里雖然反過來將 Adapter(Presenter) 傳入 List(ArrayObjectAdapter) 里,但其實作用也差不多雷激,也是將兩者關聯(lián)起來替蔬。只是多了一個步驟,通過一個橋梁類 ItemBridgeAdapter 來將 ArrayObjectAdapter 里的數(shù)據(jù)傳給 Presenter 屎暇。之后 Presenter 的工作就跟 RecyclerView.Adapter 一樣了承桥。

前面說了 Presenter 作用類似于 Adapter,它是個抽象類根悼,繼承它的之類需要實現(xiàn)三個方法:onCreateViewHolder()凶异、onBindViewHolder()、onUnbindViewHolder()挤巡,同 RecyclerView.Adapter 一樣剩彬,在 onCreateViewHolder() 里面創(chuàng)建 itemView,然后在 onBindViewHolder() 里面將數(shù)據(jù)和 itemView 綁定矿卑,比如:

GridItemPresenter.png

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

思考

  1. 學會初步使用 Leanback 實現(xiàn)一個簡單的 Home 界面后,你會發(fā)現(xiàn)勤讽,我們只需要提供每一行的數(shù)據(jù)蟋座,以及每行自己 itemView 的布局和數(shù)據(jù)綁定方式即可。但這完全沒有涉及到 HorizontalGridView 和 VerticalGridView 脚牍,那么它內(nèi)部的實現(xiàn)原理又是什么呢向臀?

  2. 如果你運行了 Google 官方 Tv sample 或者自己利用 Leanback 實現(xiàn)了簡單的 Home 界面的話,你會發(fā)現(xiàn)诸狭,我們焦點在某個 item 上時券膀,這個 item 會放大,焦點離開又恢復正常驯遇,這個 Leacback 又是怎么實現(xiàn)的呢芹彬?

  3. 如果你運行了愛奇藝的 Tv 應用,你會發(fā)現(xiàn)叉庐,它焦點在移動到邊界時 item 會有抖動的效果舒帮,這又要如何實現(xiàn)呢?

本系列梳理博客大概就是要理清上面的問題陡叠,后兩個比較簡單玩郊,看了 Leanback 的源碼,已基本明白枉阵。所以難啃的點還是在于 Home 界面的 ui 實現(xiàn)原理译红,目前只能大體上明白每一行是一個 HorizontalGridView,上下滑動是由什么實現(xiàn)還沒啃透兴溜。下一篇等啃得差不多了临庇,再來梳理一下。


QQ圖片20180316094923.jpg

最近剛開通了公眾號昵慌,想激勵自己堅持寫作下去假夺,初期主要分享原創(chuàng)的Android或Android-Tv方面的小知識,感興趣的可以點一波關注斋攀,謝謝支持~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末已卷,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子淳蔼,更是在濱河造成了極大的恐慌侧蘸,老刑警劉巖裁眯,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異讳癌,居然都是意外死亡穿稳,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門晌坤,熙熙樓的掌柜王于貴愁眉苦臉地迎上來逢艘,“玉大人,你說我怎么就攤上這事骤菠∷模” “怎么了?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵商乎,是天一觀的道長央拖。 經(jīng)常有香客問我,道長鹉戚,這世上最難降的妖魔是什么鲜戒? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮抹凳,結(jié)果婚禮上袍啡,老公的妹妹穿的比我還像新娘。我一直安慰自己却桶,他們只是感情好境输,可當我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著颖系,像睡著了一般嗅剖。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上嘁扼,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天信粮,我揣著相機與錄音,去河邊找鬼趁啸。 笑死强缘,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的不傅。 我是一名探鬼主播旅掂,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼访娶!你這毒婦竟也來了商虐?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎秘车,沒想到半個月后典勇,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡叮趴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年割笙,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片眯亦。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡伤溉,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出搔驼,到底是詐尸還是另有隱情谈火,我是刑警寧澤侈询,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布舌涨,位于F島的核電站,受9級特大地震影響扔字,放射性物質(zhì)發(fā)生泄漏囊嘉。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一革为、第九天 我趴在偏房一處隱蔽的房頂上張望扭粱。 院中可真熱鬧,春花似錦震檩、人聲如沸琢蛤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽博其。三九已至,卻和暖如春迂猴,著一層夾襖步出監(jiān)牢的瞬間慕淡,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工沸毁, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留峰髓,地道東北人。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓息尺,卻偏偏與公主長得像携兵,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子搂誉,可洞房花燭夜當晚...
    茶點故事閱讀 44,592評論 2 353

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

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,072評論 25 707
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點贊按鈕進度條TabLayout圖標下拉刷新...
    皇小弟閱讀 46,755評論 22 665
  • 曾經(jīng)我是這樣的人眉孩,別人對我好一點我立馬就會受寵若驚。不管是同學還是同事朋友,甚至是素不相識的銀行或手機業(yè)務柜臺的工...
    瑪莉隨心記閱讀 912評論 0 0
  • 看來我是真的不會寫文章浪汪,至少目前是巴柿。在手機APP上寫東西,時間久了死遭,眼睛會花掉广恢,并且手指會受不了,不僅如此呀潭,通篇觀...
    王飛V閱讀 242評論 0 1
  • (超詳細)第一次寫干貨钠署,只是想把自己的一些學習經(jīng)驗分享給大家糠聪。 高中英語真的是拉分科目啊,看著好多理科生理綜特好谐鼎,...
    靜水姑娘閱讀 3,937評論 2 13