Copyright notice: This article is the original translation of the blogger, please indicate the source.

Recommendation: welcome attention I create Android TV Jane books project, regularly to share some AndroidTv related content: www.jianshu.com/c/37efc6e97…


All in all,

ArrayObjectAdapter (RowsAdapter) ← A Group of ListRow ListRow = HeaderItem + ArrayObjectAdapter (RowAdapter) ArrayObjectAdapter (RowAdapter) ← Set of Objects (CardInfo/Item) ###Presenter Class The design of the card is determined by the Presenter class. Presenter defines how to display/display cardInfo. The Presenter class is itself an abstract class, so you need to extend it to fit the UI design of your application. When extending Presenter, you need to cover at least three methods.

OnCreateViewHolder (Viewgroup parent) onBindViewHolder (ViewHolder ViewHolder, Object cardInfo/item onUnbindViewHolder (ViewHolder ViewHolder)Copy the code

Similar to RecyclerView onCreateViewHolder and onBindViewHolder. Presenter has the inner class ViewHolder, which has a reference to the View. The View can be accessed via the viewHolder in a listener callback method for a specific event (onBind, onUnbind, etc.). Here, we’re going to implement the GridItemPresenter class. In this sample application, Object (CardInfo/item) is of type String, and the viewHolder holds the TextView reference to display this String.

The layout of the view is defined in onCreateViewHolder (). OnBindViewHolder (), which gives us access to the viewHolder created by onCreateViewHolder and the Object (CardInfo/item) that stores the card information (in this case, just a String).

    private class GridItemPresenter extends Presenter {
        @Override
        public ViewHolder onCreateViewHolder(ViewGroup parent) {
            TextView view = new TextView(parent.getContext());
            view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH, GRID_ITEM_HEIGHT));
            view.setFocusable(true);
            view.setFocusableInTouchMode(true);
            view.setBackgroundColor(getResources().getColor(R.color.default_background));
            view.setTextColor(Color.WHITE);
            view.setGravity(Gravity.CENTER);
            return new ViewHolder(view);
        }

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

        @Override
        public void onUnbindViewHolder(ViewHolder viewHolder) {

        }
    }

}
Copy the code

After defining your own Presenter, you only need to set up the RowsAdapter at the start of your Activity. You can do this in onActivityCreated () in MainFragment,

    @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        Log.i(TAG, "onActivityCreated"); super.onActivityCreated(savedInstanceState); setupUIElements(); loadRows(); }... private voidloadRows() {
        mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());

        /* GridItemPresenter */
        HeaderItem gridItemPresenterHeader = new HeaderItem(0, "GridItemPresenter");

        GridItemPresenter mGridPresenter = new GridItemPresenter();
        ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(mGridPresenter);
        gridRowAdapter.add("ITEM 1");
        gridRowAdapter.add("ITEM 2");
        gridRowAdapter.add("ITEM 3"); mRowsAdapter.add(new ListRow(gridItemPresenterHeader, gridRowAdapter)); / *set* /setAdapter(mRowsAdapter);
    }
Copy the code

So the full source code for MainFragment will be:

package com.songwenju.androidtvapptutoria; import android.graphics.Color; import android.os.Bundle; import android.support.v17.leanback.app.BrowseFragment; import android.support.v17.leanback.widget.ArrayObjectAdapter; import android.support.v17.leanback.widget.HeaderItem; import android.support.v17.leanback.widget.ListRow; import android.support.v17.leanback.widget.ListRowPresenter; import android.support.v17.leanback.widget.Presenter; import android.view.Gravity; import android.view.ViewGroup; import android.widget.TextView; /** * songwenju on 17-3-27 : 13 : 38. * Email: [email protected] */ public class MainFragment extends BrowseFragment { private ArrayObjectAdapter mRowsAdapter; private static final int GRID_ITEM_WIDTH = 300; private static final int GRID_ITEM_HEIGHT = 200; @Override public void onActivityCreated(Bundle savedInstanceState) { LogUtil.i(this,"MainFragment.onActivityCreated.");
        super.onActivityCreated(savedInstanceState);
        setupUIElements();

        loadRows();
    }

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

        /* GridItemPresenter */
        HeaderItem gridItemPresenterHeader = new HeaderItem(0, "GridItemPresenter");

        GridItemPresenter gridItemPresenter = new GridItemPresenter();
        ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(gridItemPresenter);
        gridRowAdapter.add("ITEM 1");
        gridRowAdapter.add("ITEM 2");
        gridRowAdapter.add("ITEM 3"); mRowsAdapter.add(new ListRow(gridItemPresenterHeader, gridRowAdapter)); / *set* /setAdapter(mRowsAdapter);

    }

    private void setupUIElements() {

//        setBadgeDrawable(getActivity() // .getResources() // .getDrawable(R.drawable.app_icon_your_company)); // Set the iconsetTitle("Hello Android TV!"); // Set title //HEADERS_ENABLED to display the left navigation bar, and HEADERS_DISABLED not to display HEADERS_HIDDEN to hide. Press the left key to display the left navigation barsetHeadersState(HEADERS_HIDDEN);
        setHeadersTransitionOnBackEnabled(true); // Set the fast navigation (or headers) background colorsetBrandColor(getResources().getColor(R.color.fastlane_background)); // Set the search colorsetSearchAffordanceColor(getResources().getColor(R.color.search_opaque)); } private class GridItemPresenter extends Presenter { @Override public ViewHolder onCreateViewHolder(ViewGroup parent) {  TextView view = new TextView(parent.getContext()); view.setLayoutParams(new ViewGroup.LayoutParams(GRID_ITEM_WIDTH,GRID_ITEM_HEIGHT)); view.setFocusable(true);
            view.setFocusableInTouchMode(true);
            view.setBackgroundColor(getResources().getColor(R.color.default_background));
            view.setTextColor(Color.WHITE);
            view.setGravity(Gravity.CENTER);
            return new ViewHolder(view);
        }

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

        @Override
        public void onUnbindViewHolder(ViewHolder viewHolder) {

        }
    }
}

Copy the code

In the colors.xml file add:

 <color name="default_background">#3d3d3d</color>
Copy the code

This allows MainFragment to reference background color Settings. ### Build and Run Now you can see the title and content combination implemented.

Note that we only define Presenter and load the project to be displayed. Other animations, such as when you select a project, get bigger and are implemented in the SDK. So even for non-designers, it’s easy to create some level of UI for Android TV applications. The source code is uploaded to Github.

See the next article, how to use Presenter and ViewHolder? – Android TV application uses Tutorial 3, for the CardPresenter implementation that uses ImageCardView to render a card with a main image, title, and subtext. Pay attention to wechat public number, regularly recommend mobile development related articles for you.