Android TV Leanback (五)（使用leanback創(chuàng)建UI）

創(chuàng)建瀏覽目錄

創(chuàng)建瀏覽布局

leanback庫的BrowseFragment允許您創(chuàng)建一個主要布局硕盹，以最少的代碼瀏覽媒體項的類別和行爱榔。
代碼示例如下：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main_frame"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:name="com.example.android.tvleanback.ui.MainFragment"
        android:id="@+id/main_browse_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</FrameLayout>

在activity中設(shè)置布局：

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }
...

BrowseFragment 用視頻數(shù)據(jù)和UI元素填充視圖蓝翰，并設(shè)置布局參數(shù)涎跨，如圖標邑彪、標題以及是否啟用了類別標題铭段。
setUIElements 用于設(shè)置UI元素
setHeadersState 設(shè)置類別標題狀態(tài)

應(yīng)用程序的子類實現(xiàn)BrowseFragment 的方法骤宣，為UI元素設(shè)置事件監(jiān)聽，準備背景管理器等序愚，代碼示例如下：

public class MainFragment extends BrowseFragment implements
        LoaderManager.LoaderCallbacks<HashMap<String, List<Movie>>> {
    ...
    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        loadVideoData();

        prepareBackgroundManager();
        setupUIElements();
        setupEventListeners();
    }
...
    private void prepareBackgroundManager() {
        mBackgroundManager = BackgroundManager.getInstance(getActivity());
        mBackgroundManager.attach(getActivity().getWindow());
        mDefaultBackground = getResources()
            .getDrawable(R.drawable.default_background);
        mMetrics = new DisplayMetrics();
        getActivity().getWindowManager().getDefaultDisplay().getMetrics(mMetrics);
    }

    private void setupUIElements() {
        setBadgeDrawable(getActivity().getResources()
            .getDrawable(R.drawable.videos_by_google_banner));
        // Badge, when set, takes precedent over title
        setTitle(getString(R.string.browse_title));
        setHeadersState(HEADERS_ENABLED);
        setHeadersTransitionOnBackEnabled(true);
        // set headers background color
        setBrandColor(getResources().getColor(R.color.fastlane_background));
        // set search icon color
        setSearchAffordanceColor(getResources().getColor(R.color.search_opaque));
    }

    private void loadVideoData() {
        VideoProvider.setContext(getActivity());
        mVideosUrl = getActivity().getResources().getString(R.string.catalog_url);
        getLoaderManager().initLoader(0, null, this);
    }

    private void setupEventListeners() {
        setOnSearchClickedListener(new View.OnClickListener() {

            @Override
            public void onClick(View view) {
                Intent intent = new Intent(getActivity(), SearchActivity.class);
                startActivity(intent);
           }
        });

        setOnItemViewClickedListener(new ItemViewClickedListener());
        setOnItemViewSelectedListener(new ItemViewSelectedListener());
    }
...

設(shè)置UI元素

browse.png

setBadgeDrawable() 將指定的圖片放置到browse fragment的右上角憔披，如圖UI_Element.png。當調(diào)用setTitle()時爸吮，字符串將替換圖片活逆。
setTitle() 設(shè)置標題并顯示在fragment的右上角，除非調(diào)用了setBadgeDrawable()拗胜。
setHeadersState()和setHeadersTransitionOnBackEnabled() 隱藏或不使用分類標題蔗候。
setBrandColor() 設(shè)置分類標題區(qū)塊的背景顏色。
setSearchAffordanceColor() 設(shè)置搜索圖標的背景顏色埂软。

自定義分類標題的視圖

你可以自定義包括更多視圖的復雜布局锈遥。
自定義布局如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/header_icon"
        android:layout_width="32dp"
        android:layout_height="32dp" />
    <TextView
        android:id="@+id/header_label"
        android:layout_marginTop="6dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

使用Presenter實現(xiàn)抽象方法：create，bind勘畔，unbind 所灸，如下：

public class IconHeaderItemPresenter extends Presenter {
    @Override
    public ViewHolder onCreateViewHolder(ViewGroup viewGroup) {
        LayoutInflater inflater = (LayoutInflater) viewGroup.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        View view = inflater.inflate(R.layout.icon_header_item, null);

        return new ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(ViewHolder viewHolder, Object o) {
        HeaderItem headerItem = ((ListRow) o).getHeaderItem();
        View rootView = viewHolder.view;

        ImageView iconView = (ImageView) rootView.findViewById(R.id.header_icon);
        Drawable icon = rootView.getResources().getDrawable(R.drawable.ic_action_video, null);
        iconView.setImageDrawable(icon);

        TextView label = (TextView) rootView.findViewById(R.id.header_label);
        label.setText(headerItem.getName());
    }

    @Override
    public void onUnbindViewHolder(ViewHolder viewHolder) {
    // no op
    }
}

這個例子展示了如何定義一個多視圖的復雜的presenter。然而炫七，有種更簡單的方式結(jié)合TextView和圖片爬立，通過使用TextView.drawableLeft屬性。這種方式就不需要Imageview万哪。

在fragment中顯示侠驯，如下：

setHeaderPresenterSelector(new PresenterSelector() {
    @Override
    public Presenter getPresenter(Object o) {
        return new IconHeaderItemPresenter();
    }
});

設(shè)置標題區(qū)塊的顯示狀態(tài)

使用BrowseFragment.setHeadersState()設(shè)置標題區(qū)塊的狀態(tài)抡秆。

HEADERS_ENABLED 當Fragment被創(chuàng)建時，默認可用并顯示吟策；
HEADERS_HIDDEN 當Fragment被創(chuàng)建時儒士，默認隱藏；
HEADERS_DISABLED 當Fragment被創(chuàng)建時檩坚，默認不可用并絕不顯示着撩。

顯示媒體列表

BrowseFragment允許你使用Adapter和Presenter定義并顯示可瀏覽的媒體內(nèi)容類別和項目。Adapter可以連接到包含媒體目錄信息的本地或在線數(shù)據(jù)源匾委。Adapter使用Presenter創(chuàng)建視圖并綁定數(shù)據(jù)以顯示到屏幕上拖叙。
實現(xiàn)presenter，如下：

public class StringPresenter extends Presenter {
    private static final String TAG = "StringPresenter";

    public ViewHolder onCreateViewHolder(ViewGroup parent) {
        TextView textView = new TextView(parent.getContext());
        textView.setFocusable(true);
        textView.setFocusableInTouchMode(true);
        textView.setBackground(
            parent.getContext().getResources().getDrawable(R.drawable.text_bg));
        return new ViewHolder(textView);
    }

    public void onBindViewHolder(ViewHolder viewHolder, Object item) {
        ((TextView) viewHolder.view).setText(item.toString());
    }

    public void onUnbindViewHolder(ViewHolder viewHolder) {
        // no op
    }
}

構(gòu)造Adapter使用Presenter來顯示類別和項目：

private ArrayObjectAdapter mRowsAdapter;
private static final int NUM_ROWS = 4;

@Override
protected void onCreate(Bundle savedInstanceState) {
    ...

    buildRowsAdapter();
}

private void buildRowsAdapter() {
    mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());

    for (int i = 0; i < NUM_ROWS; ++i) {
        ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(
                new StringPresenter());
        listRowAdapter.add("Media Item 1");
        listRowAdapter.add("Media Item 2");
        listRowAdapter.add("Media Item 3");
        HeaderItem header = new HeaderItem(i, "Category " + i);
        mRowsAdapter.add(new ListRow(header, listRowAdapter));
    }

    mBrowseFragment.setAdapter(mRowsAdapter);
}

更新背景

使用 BackgroundManager改變activity的背景赂乐，如下：

protected void updateBackground(Drawable drawable) {
    BackgroundManager.getInstance(this).setDrawable(drawable);
}

根據(jù)用戶的當前選擇自動更新背景：

protected void clearBackground() {
    BackgroundManager.getInstance(this).setDrawable(mDefaultBackground);
}

protected OnItemViewSelectedListener getDefaultItemViewSelectedListener() {
    return new OnItemViewSelectedListener() {
        @Override
        public void onItemSelected(Object item, Row row) {
            if (item instanceof Movie ) {
                Drawable background = ((Movie)item).getBackdropDrawable();
                updateBackground(background);
            } else {
                clearBackground();
            }
        }
    };
}