一. 序
剛入職的產品小姐姐，正在主導一款新的 Android TV App。最近在跟進內容的平面海報圖效果，要確定標準尺寸之後，提交給設計師出圖，問了我一個關於海報適配的問題。
產品小姐姐：在 1920x1080 的電視上，1:1 出的海報圖，爲什麼在電視上會糊？例如：設計搞上視覺效果 100x100 的效果，出了 100x100 的海報。
答：放大 2 倍就清晰了。例如：設計圖視覺效果 100x100 的海報，實際要出 200x200 的海報。
Waiting......
產品小姐姐：糊倒是不糊了，但是爲什麼要放大 2 倍？還有爲什麼手機上不糊？
答：電視和手機不一樣，而且這不是設計師的事兒嗎？你讓她按 2 倍出就好了。
產品小姐姐：雖然圖是設計師出，但我要定標準啊，而且要有理有據的定標準。
答：有追求！原理是這樣的 balabalabal…
產品小姐姐：哦，原來如此。
答：你現在已經是掌握了 TV 端海報適配核心技術的產品了。
產品小姐姐：哈哈哈，晚上有空嗎？一起吃個飯？
產品小姐姐成功的掌握了海報適配的核心技術了。
其實如果是手機端，正常按最大的視覺效果，按 1:1 的比例出海報，就不會糊。按正常的思路，如果圖片存在模糊問題，只要保證圖片寬高比例不變的情況下，儘可能的將其尺寸放大，就可以達到清晰的效果。
但是爲什麼 TV 上，1:1 會模糊？同時，爲什麼是 2 倍，不是 3、4 倍呢？
請看下文分解。
二. TV 的海報尺寸的問題
大多數情況下，我們工程師需要時候關心的只是 UI 效果，在不同設備上，對設計稿的還原度是否滿意。
其實在手機 App 的場景下，海報圖的尺寸，只要和設計稿的尺寸一致，就不會出現問題，但是 Android TV 上，卻有點不一樣。
爲什麼在 Android TV 上，使用獲取屏幕尺寸的 API 得到的尺寸是 1920x1080，但是在電視上爲了保證海報不模糊，需要放大 2 倍？
這麼說，有點不太清晰，舉個例子，下面是一款常見的視頻類 TV App 的佈局原型效果。
通過 Android 提供的 API，獲取到設備尺寸爲 1920x1080，如果我們的設計稿也是 1920x1080，那麼如上圖所示，假如填充海報的控件在設計稿上的尺寸 600x280，實際上我們只需要 1:1 的尺寸輸出海報就可以滿足，因爲它最大就是這麼大。
但是不好意思，在 TV 端上，它需要被放大 2 倍才能保證不模糊。
設計規範一定要確定好，市場和運營們，纔可以按照規範出圖，達到最好的視覺效果。這裏的規範尺寸，就是 1200x560，而不是 600x280。
三. TV 端的海報怎麼才能不糊？
當我們談到 Android UI 適配的時候，大部分時候要達到的效果，都是對設計稿的還原，如何在不同的設備上，還原一致的效果。
在這個過程中，涉及到的參數，就是屏幕尺寸（分辨率），例如我們常說的 1920x1080，以及 density 值，例如我們常說的 1倍、2倍、3倍，其實就是由 density 或者叫 densityDpi 來決定的。
多數時候，屏幕尺寸和 density 是相關的，類似一種慣例。例如一個我的測試機是 1920x1080 的，它的 density 是 480，就是我們常說的三倍機，大多數時候都是遵循這個慣例。具體可以通過 adb shell wm size 和 adb shell wm density 查看設備的參數。
但是這兩組參數，並不是絕對相關，尤其是在電視上，如果你關注過這一塊的數據，可以找到很多設備的屏幕尺寸是 1920x1080，但是 density 卻是 320，也就是 2 倍。
不止於此，我還找到了一張別人收集的尺寸截圖，年份比較早了，但是也側面反應了 Android TV 屏幕的亂像。
Android TV 的參數這麼亂，還要怎麼適配？
Android 的 UI 適配，網上的資料很多，其實發展到現在，最靠譜的思路就是按比例去適配，其他的思路，在不同的設備上，都會有各種問題。
所有按比例來做適配的方案，都適用於 Android TV 端，可以直接忽略掉這些不同機型的參數差異，得到對設計圖的高保真和高還原度。
例如早年間我們自己實現的一套按 1920x1080 的設計圖，等比計算尺寸的方案，以及現在今日頭條開源的，通過修改 density 來達到等比適配的方案，在 TV 端都是 OK 的。
這裏不展開說了，繼續回到主題。
爲什麼 TV 端上的海報，需要按設計圖再放大 2 倍。
在前文中我說到設備屏幕尺寸的時候，沒有直接說它是分辨率，其實就是爲了在這裏做個區分。
在電商平臺隨便找一個手機的屏幕參數，裏面的分辨率就等於我這裏說的屏幕尺寸，但是在電視上，並非如此。
舉個例子，在電商網站上，找小米一款銷量靠前的智能電視。
可以看到，這是一個 4K 超高清的電視，分辨率是 3840x2160，如果你用 Android 的 API 查看一下電視的參數，你會發現它的屏幕尺寸是 1920x1080。
正好是 2:1 的關係，這就是爲什麼需要再放大兩倍的原因。等同於我們在 Android 適配的一個重要的參數屏幕尺寸，其實被放大了。也就是原本的一個像素，被放大成了 4 個像素，這就是它模糊的原因。
可以簡單的理解爲，TV 屏幕的渲染效果，其實是 Android 的一個投影，會被按比例放大。
可能你還有疑問，我爲了讓產品小姐姐理解，專門畫了一個圖（是不是很貼心？），相信你看到此圖，就能理解了。
這裏按真實的 Android TV 尺寸參數舉例子，最終投射的是一臺 4K 超清電視屏幕。
這就是爲什麼要放大 2 倍的原因，因爲 4K 的分辨率 3840x2180，正好是我們設計稿 1920x1080 的 2 倍。雖然現在已經有超過 4K 的屏幕，但是再清晰一些，肉眼已經無法分辨出區別，所以再大些，意義並不大。
四. 小結時刻
其實關於圖片尺寸到多少的問題，看到最後一張圖其實就已經清楚了，沒有什麼高深的概念。
這裏簡單小結一下：
1. Android TV 的屏幕分辨率，並不等於 Android App 中獲取到的屏幕尺寸。
2. 4K 電視的屏幕分辨率，正好是設計稿尺寸的 2 倍，所以海報圖應該按設計稿放大 2 倍的效果輸出。
3. Android TV 上，和適配相關的參數很亂，常規適配代價太大，最靠譜的方案就是按比例適配的方案，推薦今日頭條開源的 UI 適配方案。
就說到這裏，有疑問歡迎留言，我要和小姐姐吃飯去了。
本文對你有幫助嗎？留言、轉發、點好看是最大的支持，謝謝！
「聯機圓桌」????推薦我的知識星球，一年 50 個優質問題，上桌聯機學習。
公衆號後臺回覆成長『成長』，將會得到我準備的學習資料，也能回覆『加羣』，一起學習進步。
