Android Jetpack - Android TV 應用開發教程

Android架構發表於2019-01-29

Android Jetpack - Android TV 應用開發教程

Android TV 應用開發介紹

目前,我們還沒有足夠的Android TV應用開發介紹。 在本系列教程中,我將介紹如何開發Android TV應用程式。 這篇文章的目的是瞭解Android“TV”特定的程式碼實現,特別是關注UI實現。

因為UI是Android手機應用和Android TV應用之間最大的區別之一。 我們需要使UI適合電視使用,例如我們應該製作一個應用程式,以便我們可以使用↑↓→←方向鍵導航應用程式,而不是觸控板導航。 因為使用者使用遙控器,並且不能用電視機使用“觸控式螢幕”功能。 為了實現這一要求,Android開源專案正在提供Leanback支援庫(android.support.v17.leanback),以便開發人員可以輕鬆實現滿足這些要求的UI,從而適合電視使用。 本教程主要講述了Leanback庫的用法。

這個帖子的目標是那些誰:

  • 之前開發過Android應用,但不熟悉Android TV應用。
  • 開發者 - 中級

Google從2015年底對Eclipse不再支援,所以請用Android studio用於IDE開發Android TV應用程式(如果你還沒有使用,請下載並安裝Android studio)。 請注意,這裡介紹的大部分程式碼來自AOSP android TV示例原始碼leanback。 本教程基本上只是這個示例原始碼的詳細說明。 讓我們開始。

開始編寫一個Android TV 應用

1.開啟Android studio

New Project

應用名稱: AndroidTVappTutoria

Android Jetpack - Android TV 應用開發教程

指定Android裝置

Android Jetpack - Android TV 應用開發教程

將activity新增到電視

Android Jetpack - Android TV 應用開發教程

選擇“Add No Activity”並完成

Android studio會自動生成原始碼。

此階段的原始碼上傳到github

2.新增activity

首先,讓我們開展活動。 右鍵單擊“com.corochann.androidtvapptutorial”,然後選擇

New -> Activity -> Blank activity

點選 “Launcher Activity”。

我將從空白活動開始,名為“MainActivity”。該Activity繼承Activity,而不是AppCompatActivity。

Android studio現在生成2個檔案,Java class&layout / activity_main.xml。 (我們不使用res / menu / menu_main.xml)

*注意:我們還發現有一個 “Android TV activity”選項。 當選擇它時,它將同時建立太多的檔案。 這是一個非常有用的參考,但很難理解每個檔案處理什麼樣的功能。 所以我將在這篇文章中從頭開始建立這些檔案,以便我們能夠理解每塊程式碼的責任。 這篇文章中的許多實現都是引用這個官方的示例程式。 接下來,我們要通過建立MainFragment來設計MainActivity的UI。

3.新增 fragment

右鍵單擊包名稱(在我這裡是com.corochann.androidtvapptutorial) New -> Java Class -> Name: MainFragment *除了上述過程,如果我們選擇New - > Fragment - > Blank fragment,請取消選中“Create layout XML?”,不取消的話會建立太多的樣例程式碼。 首先,修改activity_main.xml,如下所示,只顯示mainfragment。

<?xml version="1.0" encoding="utf-8"?>
<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_browse_fragment"
    android:name="com.corochann.androidtvapptutorial.MainFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    tools:context=".MainActivity" 
    tools:deviceIds="tv"
    tools:ignore="MergeRootFrame" />
複製程式碼

然後,修改MainFragment如下。

我們將這個MainFragment作為BrowseFragment的子類。

BrowseFragment類由Android SDK Leanback庫提供,它為Android TV應用程式建立了標準UI,我們將在本教程中看到。

package com.corochann.helloandroidtvfromscrach;

import android.os.Bundle;
import android.support.v17.leanback.app.BrowseFragment;
import android.util.Log;

public class MainFragment extends BrowseFragment {
    private static final String TAG = MainFragment.class.getSimpleName();

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.i(TAG, "onActivityCreated");
        super.onActivityCreated(savedInstanceState);

    }
}
複製程式碼

4.修改Android Mainifest檔案:

<?xml version="1.0" encoding="utf-8"?>
<manifest package="com.songwenju.androidtvapptutoria"
          xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- TV app need to declare touchscreen not required -->
    <uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false"/>

    <!--
     true:  your app runs on only TV
     false: your app runs on phone and TV -->
    <uses-feature
        android:name="android.software.leanback"
        android:required="true"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Leanback">
        <activity
            android:name=".MainActivity"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

                <category android:name="android.intent.category.LAUNCHER"/>
                <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
            </intent-filter>
        </activity>
    </application>

</manifest>
複製程式碼

有以下幾點注意事項: 1)這裡要設定touchscreen為false,即TV app 不需要觸控。

<uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false"/>
複製程式碼

2)設定依賴leanback庫相關。

<uses-feature
        android:name="android.software.leanback"
        android:required="true"/>
複製程式碼

僅僅在TV上執行設定為true,在TV和phone上執行設定為false。 application的主題

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Leanback">
複製程式碼

顯示Activity icon 在普通桌面和Leanback桌面。在 intent-filter中宣告。

  <category android:name="android.intent.category.LAUNCHER"/>
  <category android:name="android.intent.category.LEANBAC
複製程式碼

同時新增icon和logo在activity的tag上,

 <activity
            android:name=".MainActivity"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company">
            ...
複製程式碼

Android Jetpack - Android TV 應用開發教程

到此執行一下應用,執行結果如圖:

Android Jetpack - Android TV 應用開發教程

可以看到BrowseFragment由HeadersFragment&RowsFragment組成。 在這裡,可以在右側看到HeaderFragment(header)部分,在左側看到RowsFragment(contents)部分。 我們將在下面設計這個Header&Row組合。

在此之前,讓我們來實現這個應用程式的主要顏色和標題的UI。

5.在MainFragment.java上新增setupUIElements()

在MainFragment.java中新增setupUIElements()方法,以設定應用程式資訊。

 @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        LogUtil.i(this,"MainFragment.onActivityCreated.");
        super.onActivityCreated(savedInstanceState);
        setupUIElements();

    }

    private void setupUIElements() {

//        setBadgeDrawable(getActivity()
//                .getResources()
//                .getDrawable(R.drawable.app_icon_your_company));//展示在標題欄上的圖片(圖片會隱藏標題)

        setTitle("Hello Android TV!");  //設定title

        //HEADERS_ENABLED 顯示左側導航欄,HEADERS_DISABLED 不顯示 HEADERS_HIDDEN 隱藏,到邊緣按左鍵還能顯示
        setHeadersState(HEADERS_HIDDEN);
        setHeadersTransitionOnBackEnabled(true);

        // 設定快速導航(或 headers) 背景色
        setBrandColor(getResources().getColor(R.color.fastlane_background));
        // 設定搜尋的顏色
        setSearchAffordanceColor(getResources().getColor(R.color.search_opaque));
    }
複製程式碼

我們已經設定了

  • 應用的title或者圖示
  • 左側顏色

顏色資訊是從colors.xml引用的,我們還沒有提供。 右鍵單擊res / values並選擇

新建 - >values資原始檔 檔名:colors.xml - >“OK”

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="fastlane_background">#0096e6</color>
    <color name="search_opaque">#ffaa3f</color>
</resources>
複製程式碼

執行之後可以看到顏色發生了變化。

Android Jetpack - Android TV 應用開發教程

你也可以使用setBadgeDrawable()方法而不是setTitle()方法,如果使用了setBadgeDrawable(),標題將更改為logo(見下圖)。

Android Jetpack - Android TV 應用開發教程

相關文章