安卓TV开发(四) 实现主流智能TV视频播放器UI

安卓TV开发（四）实现主流智能TV

视频播放器UI

在FocusView中需要添加一个FocusItemModle 用于填充父布局，这个FocusItemModle 类似grideView中itemview一样,我们可以这么理解，现在我们就定义一个FocusItemModle 类，代码如下：

[java] view plain copy print?在CODE上查看代码片派生到我的代码片

public class FocusItemModle {

private View mFocusView = null;

/**

* 起点行数

*/

private int mRow = 0;

/**

* view占据行数

*/

private int mRowSpan = 1;

/**

* 起点列数

*/

private int mCol = 0;

/**

* View占据列数

*/

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;

}

此item主要控制focusView显示在第几排第几列，用于返回一个itemView显示在

focusView中。

再写好这些主要view之前，便于以后项目的扩展我们就专门写一个javaBean---,TvModle，也为了迎合mvc设计模式，用来将服务器数据映射到view上。

[java] view plain copy print?在CODE上查看代码片派生到我的代码片

public class TvModle {

/**

* 图片资源

*/

private int image;

/**

* 标题

*/

private String name;

/**

* url

*/

private String url;

/**

* 简介或信息

*/

private String info;

/**

* 日期

*/

private String date;

/**

* 包括子节目

*/

private List childs;

public TvModle() {

super();

}

public TvModle(int image, String name) {

super();

this.image = image;

https://www.doczj.com/doc/3914379878.html, = name;

}

public int getImage() {

return image;

}

public void setImage(int image) { this.image = image;

}

public String getName() {

return name;

}

public void setName(String name) { https://www.doczj.com/doc/3914379878.html, = name;

}

public String getUrl() {

return url;

}

public void setUrl(String url) {

this.url = url;

}

public String getInfo() {

return info;

}

public void setInfo(String info) { https://www.doczj.com/doc/3914379878.html, = 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;

}

}

等写好了view和中间层，接下来我们就开始写要显示该UI的activty,这里我们主要是New 一个focusView，通过不断往里面加入一个个不同的itemView。

activty:

[java] view plain copy print?在CODE上查看代码片派生到我的代码片

@Override

public void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(https://www.doczj.com/doc/3914379878.html,yout.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() {

@Override

public void onItemClick(FocusView metroView, View view, int col, int row,

https://www.doczj.com/doc/3914379878.html,ng id) {

Toast.makeText(getApplicationContext(),col+"", 1).show();

}

});*/

getData();

// 添加自定义VIEW

view.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));

//添加默认logo

view.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));

}

这里的代码比较好理解，只是将我们所要的控件找到，加入多个子item,getdata()是用来模拟获取服务数据的，本次demo暂时写到activity中，企业开发中建议单独写个manager用来

控制网络层获取数据，下面是getDate(); 本文出处：https://www.doczj.com/doc/3914379878.html,/sk719887916 [java] view plain copy print?在CODE上查看代码片派生到我的代码片

// 模拟网络获取数据

mTvLists.add(new TvModle(R.drawable.atm, "阿童木重磅来袭"));

mTvLists.add(new TvModle(R.drawable.sdyjq, "速度与激情大片在线看"));

mTvLists.add(new TvModle(R.drawable.yyt, "音悦台"));

mTvLists.add(new TvModle(https://www.doczj.com/doc/3914379878.html,tv, "中国网络电视台"));

mTvLists.add(new TvModle(R.drawable.shtv, "东方卫视"));

mTvLists.add(new TvModle(R.drawable.hutv, "芒果卫视"));

mTvLists.add(new TvModle(R.drawable.gstv, "甘肃卫视"));

mTvLists.add(new TvModle(https://www.doczj.com/doc/3914379878.html,tv, "江苏卫视"));

mTvLists.add(new TvModle(R.drawable.shtv, "东方卫视"));

mTvLists.add(new TvModle(R.drawable.pptv, "pptv"));

mTvLists.add(new TvModle(R.drawable.aqy, "爱奇艺"));

mTvLists.add(new TvModle(https://www.doczj.com/doc/3914379878.html,tv, "中国网络电视台"));

mTvLists.add(new TvModle(R.drawable.atm, "阿童木重磅来袭"));

mTvLists.add(new TvModle(R.drawable.sdyjq, "速度与激情大片在线看"));

mTvLists.add(new TvModle(R.drawable.bjaqgs, "北京爱情故事"));

mTvLists.add(new TvModle(R.drawable.hutv, "芒果卫视"));

mTvLists.add(new TvModle(R.drawable.gstv, "甘肃卫视"));

mTvLists.add(new TvModle(https://www.doczj.com/doc/3914379878.html,tv, "江苏卫视"));

mTvLists.add(new TvModle(R.drawable.shtv, "东方卫视"));

在上面的初始化方法中，我们会用到添加子控件的view的方法，通过getTview()和getDefView（）,前面方法用于指定显示我们所要的itemView,后面方法是显示默认的view

[java] view plain copy print?在CODE上查看代码片派生到我的代码片

/**

* 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, 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(https://www.doczj.com/doc/3914379878.html,eLayout);

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("频道"+(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);

}

再次我们还需要用到填充activty的Layout的xmL,比较简单

[html] view plain copy print?在CODE上查看代码片派生到我的代码片

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:orientation="vertical" >

android:id="@+id/focus_ui"

android:layout_width="fill_parent"

android:layout_height="wrap_content" />

通过上篇文章结合本次文章，我们初步实现了一个在安卓TV上显示，并且可以用遥控器控制上下左右移动的效果UI，但由于只是demo，并非实际项目，所以效果比较粗糙，但是并不影响代码质量，以上的代码在tv上没有任何bug，但是运行在手机上是存有缺陷的，如果需要兼容手机，TV和手机公用一个版本的话，代码需要优化，但我本人不建议手机和电视版本公用一个版本，这样对UI的适配和焦点控制会带来众多麻烦，手机也无需这么大的使徒，但是不仿喜欢的朋友自己去完善和扩展，况且电视的操作体验是比较简单的，并且无法触屏的（但也有触屏的电视，价格不菲）后面我会继续完善本次demo，结合第三方开源视频框架，完成一个简易的tv上的视频播放器。

java视频播放器源代码

import java.awt.*; import java.io.*; import java.util.*; import javax.media.*; import javax.media.format.*; import javax.swing.*; public class VideoPlayer implements ControllerListener { Vector audioCapDevList = null; Vector videoCapDevList = null; CaptureDeviceInfo audioCapDevInfo = null; CaptureDeviceInfo videoCapDevInfo = null; MediaLocator audioCapDevLoc = null; MediaLocator videoCapDevLoc = null; Player audioPlayer; Player videoPlayer; public void initAudioCapDevLoc() { //这里可以填写其它的音频编码格式，具体请看AudioFormat类 audioCapDevList = CaptureDeviceManager.getDeviceList(new AudioFormat( AudioFormat.LINEAR)); if ((audioCapDevList.size() > 0)) { //或许有几个CaptureDevice,这里取第一个 audioCapDevInfo = (CaptureDeviceInfo) audioCapDevList.elementAt(0); audioCapDevLoc = audioCapDevInfo.getLocator(); } else { System.out.println("找不到音频采集设备"); System.exit(0); } } public void initVideoCapDevLoc() { //这里可以填写其它的编码视频格式，具体请看VideoFormat类 videoCapDevList = CaptureDeviceManager.getDeviceList(new VideoFormat( VideoFormat.YUV)); if ((videoCapDevList.size() > 0)) {

各视频格式播放代码

1。avi格式 代码片断如下： ＜object id="video" width="400" height="200" border="0" classid="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"＞ ＜param name="ShowDisplay" value="0"＞ ＜param name="ShowControls" value="1"＞ ＜param name="AutoStart" value="1"＞ ＜param name="AutoRewind" value="0"＞ ＜param name="PlayCount" value="0"＞ ＜param name="Appearance value="0 value="""＞ ＜param name="BorderStyle value="0 value="""＞ ＜param name="MovieWindowHeight" value="240"＞ ＜param name="MovieWindowWidth" value="320"＞ ＜param name="FileName" value="／Mbar。avi"＞ ＜embed width="400" height="200" border="0" showdisplay="0" showc autostart="1" autorewind="0" playcount="0" moviewindowheight="240" moviewindowwidth="320" filename="／Mbar。avi" src="Mbar。avi"＞ ＜／embed＞ ＜／object＞ 2。mpg格式 代码片断如下： ＜object classid="clsid:05589FA1-C356-11CE-BF01-00AA0055595A" id="ActiveMovie1" width="239" height="250"＞

视频播放器通用代码

ASP视频播放器通用代码 1.avi格式 2.mpg格式