Android TV開發總結（二）構建一個TV Metro界面（仿泰捷視頻TV版）

前言：上篇是介紹構建TV app前要知道的一些事兒，開發Android TV和手機本質上沒有太大的區別，屏大，焦點處理，按鍵處理，是有別於有手機和Pad的實質區別。今天來介紹TV中Metro UI風格，並結合實例說明。

Android TV發展離不開Metro UI,先看最新的泰捷TV的會員區效果，屬於典型的Metro風格，如下：

什麼是Metro UI:

Metro的設計意念來源於交通局巴士站站牌機場和地鐵的指示牌給了微軟設計團隊靈感，設計團隊說Metro是來源於美國華盛頓州金縣都會交通局（King County Metro）的標識設計，其風格大量采用大字體，能吸引受眾之注意力。微軟認為Metro設計[2] 主題應該是：“光滑、快、現代”。Metro的圖標設計也會不同於Android和iOS。

Metro UI軟件

Metro是微軟為了方便開發者編寫Metro風格的程序而提供的一個開發平台，可以調用微軟WinRT暴露出來的接口編寫Metro風格的程序。 而Metro風格的控件[3] 拓展Win8標准控件方法和屬性,實現一些新的功能,如Component One Studio for WinRT XAML，Component One Studio for WinJS。在Windows8中開放的Windows應用程序市場也使用並推薦采用Metro風格界面的應用程序.

Metro 界面，開機後首先映入眼簾的第一個界面，個人感覺主要是為了觸屏設備而設計的，但是在TV中使用起來也一樣的方便。我們在Desktop中安裝的程序以及 在應用商店中下載的程序都會在Metro中展現出來，所以我們要定期或不定期的對其進行分組、排序、整理，以方便我們的操作以及界面的美觀。Metro界面同時提供了便捷的選項，使操作更加方便。

案例效果

今天來仿照並實現這個Metro界面，以下是我實現的效果圖：

gif圖：(TV上沒有好的錄屏工具，盒子系統一般低於5.0，有些廠商已經升到5.0，我用的是i71，很老的盒子，基於API 17, 4.2.2的系統)

 <喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMyBpZD0="源碼分析">源碼分析

看下其中一個MetroItem的布局：

每一個MetroItemFrameLayout下包含一些子View,ImageView就是對應圖片，CornerVew表示上下左右的的角標，TextView表示下方的描述，這些可視具體情況進行選擇。



?其他相關代碼，下篇博客具體分析。案例已開源到Github,對應鏈接：https://github.com/hejunlin2013/TVSample。喜歡可以star.

 

License

Copyright (C) 2016 hejunlin

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.