Android TV Development (4) Implement mainstream smart TV Video Player UI and Android ui

Android TV Development (4) Implement mainstream smart TV Video Player UI and Android ui

The development of mobile smart devices has promoted another field of Android, including Smart TVs, smart home devices, and wearable devices, however, the development of these devices is not the same as that of traditional mobile phone development, especially the focus control and user operations on TV, this series of blog posts mainly uses the implementation of the TV player to understand the process of developing an app on a smart device. This allows the remote control to focus on moving, the arrow keys to simulate the mouse, and live video streaming online, mobile phones are used as remote control and other related functions.

In the previous article, Android TV Development (iii) realized the mainstream TV Video Player UI. Initially, I learned the design of the smart TV UI and only implemented a view parent framework that can be controlled by a remote control, however, the items in it have not been written yet. As for how to call the display and application, let's continue learning today,

Source: http://blog.csdn.net/sk719887916

In FocusView, you need to add a FocusItemModle to fill the parent layout. This FocusItemModle is similar to the itemview in grideView. We can understand this. Now we define a FocusItemModle class. The Code is as follows:

Public class FocusItemModle {private View mFocusView = null;/*** starting line number */private int mRow = 0;/*** view occupies the number of rows */private int mRowSpan = 1; /***** start column number */private int mCol = 0;/***** View occupies the number of columns */private int mColSpan = 1; /*** @ param v * @ param row * @ param col */public FocusItemModle (View v, int row, int col) {this (v, row, 1, col, 1);}/*** @ param v * @ param row * @ param rowspan * @ param col * @ param colspan */public FocusItemModle (View v, int row, int rowspan, int col, int colspan) {mFocusView = v; setPosition (row, col); if (rowspan <1) throw new IllegalArgumentException ("rowspan <1 "); mRowSpan = rowspan; if (colspan <1) throw new IllegalArgumentException ("colspan <1"); mColSpan = colspan;} public View getMetroView () {return mFocusView ;} public int getRow () {return mRow;} public int getRowSpan () {return mRowSpan;} public int getCol () {return mCol;} public int getColSpan () {return mColSpan ;} public void setPosition (int row, int col) {if (row <0) throw new IllegalArgumentException ("row <0"); mRow = row; if (col <0) throw new IllegalArgumentException ("col <0"); mCol = col ;}

This item mainly controls the number of columns in the row where the focusView is displayed. It is used to return an itemView that is displayed in the focusView.

Before writing these main views, we will write a special javaBean ---, TvModle to facilitate the extension of future projects, and to cater to the mvc design pattern, we will map server data to the view.

Public class TvModle {/***** image resource */private int image;/***** title */private String name;/***** url */private String url; /***** introduction or information */private String info;/***** date */private String date;/***** includes subprograms */private List childs; public TvModle () {super ();} public TvModle (int image, String name) {super (); this. image = image; this. name = name;} public int getImage () {return image;} public void setImage (int image) {this. image = image;} public String getName () {return name;} public void setName (String name) {this. name = name;} public String getUrl () {return url;} public void setUrl (String url) {this. url = url;} public String getInfo () {return info;} public void setInfo (String info) {this.info = info;} public String getDate () {return date ;} public void setDate (String date) {this. date = date;} public List getChilds () {return childs;} public void setChilds (List childs) {this. childs = childs ;}}

After writing the view and middle layer, we will start to write the activty to display the UI. Here we will mainly create a New focusView and add different itemviews to it.

Activty:

@ Overridepublic void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. mian_ TV _ui); FocusView view = (FocusView) findViewById (R. id. focus_ui); view. setBackgroundColor (Color. WHITE); view. setGap (5); view. setVisibleItems (6, 5); view. setOrientation (OrientationType. horizontal); view. setAnimation (R. anim. scale_small, R. anim. scale_big);/* view. setOnItemClickListener (new OnItemClickListener () {@ Overridepublic void onItemClick (FocusView metroView, View view, int col, int row, long id) {Toast. makeText (getApplicationContext (), col + "", 1 ). show () ;}}); */getData (); // Add custom VIEWview. addFocusItem (getTvView (mTvLists. get (0 ). getName (), mTvLists. get (0 ). getImage (), 0, 3, 0, 2); view. addFocusItem (getTvView (mTvLists. get (1 ). getName (), mTvLists. get (1 ). getImage (), 3, 3, 0, 2); view. addFocusItem (getTvView (mTvLists. get (2 ). getName (), mTvLists. get (2 ). getImage (), 0, 2, 2, 1); view. addFocusItem (getTvView (mTvLists. get (3 ). getName (), mTvLists. get (3 ). getImage (), 0, 2, 3, 1); view. addFocusItem (getTvView (mTvLists. get (4 ). getName (), mTvLists. get (4 ). getImage (), 0, 2, 4, 1); view. addFocusItem (getTvView (mTvLists. get (5 ). getName (), mTvLists. get (5 ). getImage (), 2, 2, 2, 1); view. addFocusItem (getTvView (mTvLists. get (6 ). getName (), mTvLists. get (6 ). getImage (), 2, 2, 3, 1); view. addFocusItem (getTvView (mTvLists. get (7 ). getName (), mTvLists. get (7 ). getImage (), 2, 2, 4, 1); view. addFocusItem (getTvView (mTvLists. get (8 ). getName (), mTvLists. get (8 ). getImage (), 4, 2, 2, 1); view. addFocusItem (getTvView (mTvLists. get (9 ). getName (), mTvLists. get (9 ). getImage (), 4, 2, 3, 1); view. addFocusItem (getTvView (mTvLists. get (10 ). getName (), mTvLists. get (10 ). getImage (), 4, 2, 4, 1); // Add the default logoview. addFocusItem (getDefView (0, 2, 5, 1); view. addFocusItem (getDefView (0, 2, 6, 1); view. addFocusItem (getDefView (0, 2, 7, 1); view. addFocusItem (getDefView (0, 2, 8, 1); view. addFocusItem (getDefView (0, 2, 9, 1); view. addFocusItem (getDefView (2, 2, 5, 1); view. addFocusItem (getDefView (2, 2, 6, 1); view. addFocusItem (getDefView (2, 2, 7, 1); view. addFocusItem (getDefView (2, 2, 8, 1); view. addFocusItem (getDefView (2, 2, 9, 1 ));}

The code here is easy to understand. It just finds the control we want and adds multiple sub-items. getdata () is used to simulate obtaining service data. This demo is temporarily written to activity, in enterprise development, it is recommended to write a manager to control the network layer to obtain data, the following is getDate (); the source of this article: http://blog.csdn.net/sk719887916

/*** Get data. */private void getData () {// obtains the mTvLists data over a simulated network. add (new TvModle (R. drawable. jstv, "Jiangsu TV"); mTvLists. add (new TvModle (R. drawable. cntv, "China Network TV"); mTvLists. add (new TvModle (R. drawable. shtv, "oriental TV"); mTvLists. add (new TvModle (R. drawable. HUV, "Mango TV"); mTvLists. add (new TvModle (R. drawable. stststv, "Gansu satellite TV"); mTvLists. add (new TvModle (R. drawable. cntv, "Jiangsu TV"); mTvLists. add (new TvModle (R. drawable. shtv, "oriental TV"); mTvLists. add (new TvModle(R.drawable.ppt v, "pptv"); mTvLists. add (new TvModle (R. drawable. aqy, "iQiYi"); mTvLists. add (new TvModle (R. drawable. cntv, "China Network TV"); mTvLists. add (new TvModle (R. drawable. atm, "a tong Mu hit"); mTvLists. add (new TvModle (R. drawable. sdyjq, "online watch of speed and passion movies"); mTvLists. add (new TvModle (R. drawable. bjaqgs, "Beijing Love Story "));}

In the above initialization method, we will use the view method to add sub-controls, through getTview () and getDefView (), the previous method is used to specify to display the itemView we want, the following method displays the default view.

/*** GetTvView * @ param title * @ param rouseid * @ param row * @ param rowspan * @ param col * @ param colspan * @ return FocusItemVew */private FocusItemModle getTvView (String title, int rouseid, int row, int rowspan, int col, int colspan) {LinearLayout layout = getLinearLayout (); layout. setGravity (Gravity. CENTER); FrameLayout frameLayout = new FrameLayout (this); frameLayout. setPadding (PADDING, PADDING); TextView mTextView = new TextView (this); mTextView. setText (title); mTextView. setGravity (Gravity. CENTER); mTextView. setTextColor (Color. BLACK); mTextView. setTextSize (15); ImageView mLogoView = new ImageView (this); mLogoView. setLayoutParams (FILL_FILL); mLogoView. setImageResource (rouseid); frameLayout. addView (mLogoView, FILL_FILL); frameLayout. addView (mTextView, WRP_WRP); layout. addView (frameLayout); return new FocusItemModle (layout, row, rowspan, col, colspan);} private FocusItemModle getDefView (int row, int rowspan, int col, int colspan) {LinearLayout layout = getLinearLayout (); TextView tv2 = new TextView (this); tv2.setText ("channel" + (I ++); tv2.setGravity (Gravity. CENTER); tv2.setTextColor (Color. WHITE); tv2.setTextSize (15); layout. addView (tv2, FILL_FILL); return new FocusItemModle (layout, row, rowspan, col, colspan );}

Again, we need to use the xmL of Layout filled with activty, which is relatively simple.

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <com.example.tv_ui_demo.tvView.FocusView        android:id="@+id/focus_ui"        android:layout_width="fill_parent"        android:layout_height="wrap_content" /></LinearLayout>

Through the previous article, combined with this article, we initially implemented a display on Android TV, and can use the remote control to control the UI of the effects of moving up and down, but because it is only a demo, not a real project, so the effect is rough, but it does not affect the code quality. The above Code does not have any bugs on TV, but it is defective to run on mobile phones. If you need to be compatible with mobile phones, if TV and mobile phones share a version, the code needs to be optimized, but I do not recommend that mobile phones and TV versions share a version. This will cause a lot of trouble for UI adaptation and focus control, however, the TV operation is relatively simple, and I will continue to improve this demo later, combined with the third-party open-source video framework, complete a simple video player on TV. Source: http://blog.csdn.net/sk719887916