Android TV Development (IV) realization of mainstream Smart TV video player UI

The development of mobile smart devices has driven another area of Android, including smart TVs and smart homes, as well as the use of wearable devices, but these devices are not developed in the same way as traditional mobile phone development, especially in focus control and user Operation TV is a big difference, This series of blog mainly uses the realization of TV player to understand the development of an app on the smart device process, to realize the remote control focus movement, the direction key simulation mouse, and online to complete the video live, mobile phone when the remote control use and other related functions.

On the development of Android TV (c) to realize the mainstream TV video player UI initially learned the design of the UI on the smart TV, and only implemented a remote control can be controlled by the view parent frame, but the inside of the item has not finished writing, as to how to invoke display and use we continue to learn today,

In Focusview you need to add a focusitemmodle to populate the parent layout, this focusitemmodle like Itemview in Grideview, we can understand that, now we define a Focusitemmodle Class with the following code:

public class Focusitemmodle {private View Mfocusview = null;/** * start of row */private int mrow = 0;/** * View occupies rows */private in T Mrowspan = 1;/** * Start column number */private int mCol = 0;/** * View occupies 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 ro Wspan, 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 = col span;} 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 &Lt 0 "); mrow = row;if (Col < 0) throw new IllegalArgumentException (" Col < 0 "); mCol = col;}

This item mainly controls Focusview displayed in the first few rows of columns, which is used to return a itemview displayed in Focusview.

Before we write these main view, it is easy to expand the project later we write a JavaBean---, tvmodle, and in order to cater to the MVC design pattern, to map the server data to the view.

public class Tvmodle {/** * picture resource */private int image;/** * Title */private string name;/** * URL */private string url;/** * Simplified Interface or information */private string info;/** * Date */private string date;/** * Includes sub-program */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 the middle layer, then we begin to write the activty to display the UI, here we are mainly new a focusview, by constantly adding a different itemview.

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) getName (), Mtvlists.get () GetImage (), 4, 2, 4, 1); Add 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 better understood, just the control we want to find, adding a number of sub-item,getdata () is used to simulate the acquisition of service data, the demo is temporarily written to the activity, enterprise development is recommended to write a separate manager to control the network layer to obtain data, Below is getdate ();

/** * Get data. */private void GetData () {///analog Network acquisition data Mtvlists.add (new Tvmodle (R.DRAWABLE.JSTV, "Jiangsu satellite TV"); Mtvlists.add (New Tvmodle ( R.DRAWABLE.CNTV, "China Network TV"), Mtvlists.add (New Tvmodle (R.DRAWABLE.SHTV, "Oriental satellite TV")), Mtvlists.add (New Tvmodle ( R.DRAWABLE.HUTV, "Mango satellite TV"); Mtvlists.add (New Tvmodle (R.DRAWABLE.GSTV, "Gansu satellite TV"); Mtvlists.add (New Tvmodle ( R.DRAWABLE.CNTV, "Jiangsu satellite TV"); Mtvlists.add (New Tvmodle (R.DRAWABLE.SHTV, "Oriental satellite TV")); Mtvlists.add (New Tvmodle ( R.DRAWABLE.PPTV, "PPTV")), Mtvlists.add (New Tvmodle (r.drawable.aqy, "Iqiyi art"), Mtvlists.add (New Tvmodle ( R.DRAWABLE.CNTV, "China Network TV"), Mtvlists.add (New Tvmodle (R.DRAWABLE.ATM, "astro-heavyweight")); Mtvlists.add (New Tvmodle ( R.DRAWABLE.SDYJQ, "Speed and passion blockbuster online"); Mtvlists.add (New Tvmodle (R.drawable.bjaqgs, "Beijing Love Story"));

In the initialization method above, we will use the method of adding the view of the child control, through Gettview () and Getdefview (), the preceding method is used to specify that we want to display the Itemview, the following method is to display the default view

/** * Gettvview * @param title * @param rouseid * @param row * @param rowspan * @param col * @param colspan * @return Foc Usitemvew */private focusitemmodle Gettvview (String title, int rouseid, int row, int rowspan,int col, int colspan) {Linear Layout layout = Getlinearlayout (); layout.setgravity (Gravity.center); Framelayout framelayout = new Framelayout (this); Framelayout.setpadding (PADDING, PADDING, PADDING, PADDING); TextView Mtextview = new TextView (this); Mtextview. SetText (title); Mtextview. setgravity (Gravity.center); Mtextview. SetTextColor (Color.Black); Mtextview settextsize, 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, Layout.addview (TV2, Fill_fill); return new Focusitemmodle (layout, row, rowspan, col, colspan);}

Again we need to use the XML that fills the activty layout, 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:o rientation= "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 the Android TV, and can use the remote control to move around the effect of the UI, but because just demo, not the actual project, so the effect is relatively rough, but does not affect the code quality, the above code on the TV without any bugs, But running on the phone is flawed, if you need a compatible phone, TV and mobile phone common one version, the code needs to be optimized, but I do not recommend the phone and the TV version of a common version, so that the adaptation of the UI and focus control can cause a lot of trouble, but not like the friends themselves to improve and expand, Moreover, the operation of the television is relatively simple, I will continue to improve the demo, combined with the third party open source video frame, complete a simple TV video player.

Android TV Development (IV) realization of mainstream Smart TV video player UI