Android TV APP Introduction

Arthas Tseng
8 min readNov 15, 2019

--

Android Tv Home Launcher

近年來,因為互聯網(Internet)服務跟傳輸速度的提升,讓Over-The-Top-Services在各國開始熱門了起來,Over-The-Top-Service 又簡稱為OTT Services。簡單來說OTT Services是一種透過網際網路直接向觀眾提供內容的串流媒體服務。於是搭上OTT Services的風潮 ,Android TV的開發也開始熱了起來

Android TV :

Android TV 是由Google 專為數位電視所設計的Android系統,他提供簡單影視內容以及語音搜尋的使用者介面,並且能夠整合來自不同媒體以及其應用內容,而且也能夠與Google其他的產品做整合以及聯動,例如 Google Cast , Google智慧助理等等。Android TV 目前在商業上常常搭配智慧電視機以及機上盒(Set-Top-Box)一起做搭配販售,所以有興趣的讀者們可以去找這些裝置或是有提供機上盒服務的廠商去洽詢囉。

Android Leanback Library :

Leanback由字面上即是靠著看的意思,Google希望這套library推出可以讓使用Android TV的使用者們輕鬆且愜意地靠在沙發使用Android TV觀賞使用者們喜歡的影音服務。

想使用Android Leanback開發Android TV可以透過android.support.v17.leanback 所提供的API來輕鬆地打造您心目中的Android TV 應用程式。

在Leanback library中,有提供許多元件讓開發者可以快速的開發出Android TV,更詳細來說,Leanback library提供了很好的模組化設計讓開發者可以更簡易的使用Leanback library中所提供的module來組出開發者想要的Android TV 產品。 Leanback library到底端出什麼東西讓開發者使用呢? 讓我們繼續看下去。

Leanback Library Components :

Android Leanback Library Components

Leanback library 提供了許多Fragment元件,以下舉例幾個比較常用到的元件

  1. BrowseFragment
  2. RowFragment
  3. DetailsFragment
  4. VerticalGridFragment
  5. SearchFragment
  6. GuildedStepFragment

讓我們一個一個慢慢介紹這些Fragment的用途是什麼吧

Android Leanback BrowsFragment

BrowsFragment :

首先,先來聊聊BrowsFragment。顧名思義,Brows 以字面上來看就是讓使用者容易快速瀏覽影音內容的頁面設計,通常我們會將之設計為進入Android TV App的首頁,也就是一個產品的門面。一個BrowsFragment是由左邊的側選單再加上右側的畫面來組成,左邊的Sidebar通常都是使用HeadersFragment加上右側的RowFragment來組成,通常HeadersFragment上方的選項與右側RowFragment的聯動方式如下圖。

HeaderFragment and RowsFragment

開發者可以客製化為一個HeaderItem搭配一行Row來進行內容的更換,當然的,也可以是一個HeaderItem右邊一整個RowFragment的內容更換,有點像是Category Tab的概念。

RowFragment :

RowsFragment on Youtube App

RowFragment概念上就是一個頁面,他可以擺上裝有影片內容的集合以Row的方式擺放在畫面上,RowsFragment並沒有行數上的限制,有再多的內容放上去都是可行的。不用擔心會有OOM(Out Of Memory)的問題存在,因為他是一個大型的VerticalGridView來裝下這一行一行的Row,他有著view reuse的機制存在。RowFragment有更多的方式可以去客製化以及調整每一行Row上的Item樣式,此篇文章我先介紹個概觀,之後會有更細部的如何去客製化的文章再寫出來分享給大家。

DetailsFragment :

DetailsFragment

DetailsFragment常常被用於呈現一部影片的相關內容,例如:播放時間,演員資訊,預告影片,影片內容概述以及影片的售價。在這裡會有一部影片所有詳細的資訊並且可以客製化要呈現的資訊,但是以我長期的觀察,通常OTT服務廠商也會在DetailsFragment加上推薦清單。

VerticalGridFragment :

VerticalGridFragment

想像RowFragment上放的是擁有上百部Episode的影集,當然的,開發者不可能在一行Row上放了上百個Item讓使用者選擇或是瀏覽。這時候VerticalGridFragment就派上用場了。他利用Grid的方式去呈現N*N的內容擺設,這可以讓使用者更方便的快速找到以及瀏覽想看的影視影片。

SearchFragment :

SearchFragment

SearchFragment提供了語音搜尋功能以及文字搜尋兩部分,另外搜尋回來的結果也可以搭配Row或是Grid方式呈現,在上面的圖片中沒有提到可以做關鍵字列舉,這個牽涉到Leanback客製化的問題,我會再寫另外一篇文章來好好的介紹SearchFragment。搜尋回來的內容item呈現的方式也是可以透過Presenter去做客製化,並且內容item可客製化的程度還蠻高的,說到內容item的樣式客製化客製化的程度很高,在我做專案的過程中並沒有遇到客戶想要的樣式我做不出來的窘境。

GuildedStepFragment :

GuildedStepFragment

GuildedStepFragment通常被使用在引導使用者作設定或是影片的購買流程等等場景可以使用。他可以做成Step by Step的setup flow或是purchase flow或是各種flow都可以利用它來實現。 GuildedStepFragment畫面分成兩部分,左側為GuidanceSectionView,右側為ActionSectionView。左側的GuidanceSectionView區域可以任意的實作出想呈現的方式,右側的ActionSection上的按鈕也是可以做客製化。開發者可以任意的定義Action Button的外觀以及行為。實作上會是一個Activity承載了好幾頁的 GuildedStepFragment,頁數決定於想要步驟化的操作流程切分的細膩度,越多步驟的設定也不用擔心。

總結:

每個Fragment都可以做一定程度的客製化,除非是很特殊超乎常人想像的UX設計,但是基本上是可以應付大多數Android TV的UI/UX設計。但是有一句話必須跟大家分享那就是...

要做好Android TV 就要好好的搞定View的Focus的問題,因為Android TV不像Mobile Phone一樣可以觸控,Android TV都是使用control pad 來做操作,以上言論不包括有觸控功能的電視

之後會開始寫各個Fragment的實作以及細部分享文再來跟大家分享...

參考文件:

https://developer.android.com/training/tv/start/start

https://github.com/googlearchive/leanback-showcase

https://www.youtube.com/watch?v=72K1VhjoL98

--

--