基于Android的数字机顶盒桌面启动器的设计与实现

李栿麟+李璋

摘 要：以Android为平台，结合Android动画技术和控件显示等技术，同时利用Eclipse、Genymotion开发了一款适用于安卓平台的高清数字机顶盒的桌面启动器App。

关键词：Android;Genymotion;Eclipse;数字机顶盒启动器

中图分类号：TP311             文献标识码：A           文章编号：2095-1302（2015）09-00-03

0  引  言

目前，使用电视机产品的用户相比使用个人电脑的用户多，但电视机存在的诸多弊端日益显现，主要体现在分辨率和功能上。Android平台的网络电视机目前还处于推广阶段，有很多技术问题需要解决，也具有广阔的市场前景。目前，Android平台已经成为广大网络电视机厂商的首选操作系统，它具有强大的功能并具有很强的开放性，在系统中进行网络电视机软件开发具有开发周期短、设计自由度高、可扩展性强等优势。为更好地完成机顶盒与电视机的互联，设计了此App。

1  总体设计

1.1  总体功能概述

TvLauncher是一款为电视机或者机顶盒设计的桌面启动器，它列出了机顶盒的主要功能如电视、电影、教育等主页面、管理数字电视所安装的App的应用管理页面以及查询相关人员信息的管理页面等。

1.2  TvLauncher功能模块的划分

根据TvLauncher的总体功能概述，我们可以将TvLauncher划分为以下几个功能模块来分别实现：

（1）主页面功能模块（Home页面）：该模块主要包括机顶盒的一些常见的快捷功能选项如电视、电影、娱乐、教育、搜素以及系统设置和系统更新等。

（2）应用管理功能模块（Application页面）：在该模块中将会把系统所有的应用分页显示在屏幕上，并且提供可供用户对这些应用操作的一些功能选项，如对应用的查看、移动和卸载等。

（3）人员信息管理功能模块（Information页面）。

2  功能设计与实现

2.1  UI视图的设计

在该应用中，将采用ViewPager+Fragment组合的方式实现Tab（主页面和应用管理页面以及人员信息页面）的分页和滑动的效果，采用ViewPager+Gridview组合的方式实现对应用管理页面的App进行分页并实现滑动效果。

2.1.1  主页面的UI设计

主页面的设计文件为activity_main_framela yout.xml和activity_main_menu.xml。其中在activity_home_framelayout.xml中采用相对布局嵌套使用帧布局的方式实现主页面图片和文字的组合，在activity_main_menu.xml中采用在线性布局中嵌套使用线性布局的方式完成Tab的页面布局。

2.1.2  主页面中电影菜单的二级页面UI设计

电影菜单的二级页面设计文件为：activity_movie.xml和movie_viewpager_item.xml。其中在activity_movie.xml中采用线性布局嵌套线性布局的方式实现该页面的总体布局，在movie_view pager_item.xml中采用在相对布局中嵌套使用帧布局的方式实现图片和文字的组合。

2.1.3  应用管理页面的UI设计

应用管理页面的设计文件为：application_view pager.xml和application_ viewpager_item.xml文件。其中在app-lication_viewpager.xml文件中采用线性布局相互嵌套+自定义ViewPager控件组合的方式实现该页面的总体布局，application_viewpager_item.xml文件中采用在相对布局中嵌套使用帧布局的方式将系统应用的图标、名称以及背景图片进行组合。

2.1.4  应用管理模块二级功能（移动和删除）页面的UI设计

应用管理模块二级功能（移动和删除）页面的设计文件为：activity_popupwindow.xml。文件采用在相对布局中嵌套使用线性布局的方式实现效果。

2.1.5  人员信息查看页面的UI设计

人员信息管理页面的设计文件为：activity_information.xml和information_listview_item.xml。在activity_informa-tion.xml中采用在线性布局中嵌套使用线性布局的方式实现人员信息界面的总体布局，在information_listview_item.xml文件中采用单纯的线性布局方式实现多组文字的组合效果。

2.2  特效的设计与实现

2.2.1  主页菜单焦点放大动画的设计与实现

主页菜单焦点的放大主要采用Tweened Animation动画中的Scale（缩放效果）类型的动画来实现。其主要代码如下：

（1）放大动画的代码

v.bringToFront（）;

ScaleAnimation myAnimation_Scale = new ScaleAnimation（1.0f， 1.1f，1.0f， 1.1f， Animation.RELATIVE_TO_SELF， 0.5f，

Animation.RELATIVE_TO_SELF， 0.5f）; myAnimation_Scale.setDuration（300）;

v.startAnimation（myAnimation_Scale）;

myAnimation_Scale.setFillAfter（true）;

其中，v.bringToFront（）;函数用于把当前视图置于其他视图上方。

（2）缩小动画的代码

ScaleAnimation myAnimation_Scale = new ScaleAnimation（1.1f， 1.0f， 1.1f， 1.0f， Animation.RELATIVE_TO_SELF， 0.5f，Animation.RELATIVE_TO_SELF， 0.5f）;

myAnimation_Scale.setDuration（300）;

v.startAnimation（myAnimation_Scale）;

其实现的效果图如图1所示。

图1  主页面菜单焦点放大动画实现效果图

2.2.2  主页面Tab菜单焦点动画的设计与实现

主页面Tab菜单焦点动画将主要借助帧动画实现，在文件main_menu_animation.xml中定义了两帧图片，间隔时间为0.3秒。其实现的主要代码如下：

（1）获得焦点代码

v.setBackgroundResource（R.anim.main_menu_animation）;

mFrameAnimation = （AnimationDrawable） v.getBackground（）;

mFrameAnimation.start（）;

（2）失去焦点的代码

v.setBackgroundColor（Color.TRANSPARENT）;

其实现的效果图如图2所示。

图 2  主页面Tab菜单焦点动画实现效果图

2.2.3  电影菜单二级菜单的翻页动画设计与实现

电影菜单二级菜单的翻页动画将主要采用ViewPager自带的setPageTransformer（）来设置切换动画。其实现的效果如图3所示。

图 3  电影菜单二级菜单的翻页动画实现效果图

2.2.4  主页面倒影效果的设计与实现

主页面倒影效果的主要设计思路是：首先获得需要设置倒影的View的缓存，然后通过mMatrix.preScale（1，-1）利用该缓存创建一个和原View一模一样的图像 ;调用Bitmap.createBitmap（originalImage，o，height/2， width，height/2.mMatrix，false）使该图像倒过来创建一个倒过来图像，调用canvas.drawBitmap（reflectionImage，o，height/3f，null），把倒过来的图像画到画布上。这样就实现了倒影效果。其主要代码如下：

/*为需要设置倒影的View设置缓存*/

for （int i = 0; i <reflectNum; i++）{

mFrameLayoutReflectArray[i].measure（                  MeasureSpec.makeMeasureSpec（0，

MeasureSpec.UNSPECIFIED），                  MeasureSpec.makeMeasureSpec（0， MeasureSpec.UNSPECIFIED））;

mFrameLayoutReflectArray[i].layout（0， 0，

mFrameLayoutReflectArray[i].getMeasuredWidth（），mFrameLayoutReflectArray[i].getMeasuredHeight（））;mFrameLayoutReflectArray[i].buildDrawingCache（）;mBitmapArray[i] = mFrameLayoutReflectArray[i].getDrawingCache（）; }

/*翻转图片、创建倒过来的图像、将图像画到画布上*/

finalint reflectionGap = 4;

int width = originalImage.getWidth（）;

int height = originalImage.getHeight（）;

Matrix matrix = new Matrix（）;

matrix.preScale（1， -1）;

Bitmap reflectionImage = Bitmap.createBitmap（originalImage， 0，

height / 2， width， height / 2， matrix， false）;

Bitmap bitmapWithReflection = Bitmap.createBitmap（width，

（height + height / 3）， Config.ARGB_8888）;

// 创建画布

Canvas canvas = new Canvas（bitmapWithReflection）;

canvas.drawBitmap（originalImage， 0， 0， null）;

canvas.drawBitmap（reflectionImage， 0， height + reflectionGap， null）;

Paint paint = new Paint（）;

LinearGradient shader = new LinearGradient（0，

originalImage.getHeight（）， 0， bitmapWithReflection.getHeight（）

+ reflectionGap， 0x70ffffff， 0x00ffffff，

TileMode.MIRROR）;paint.setShader（shader）;

paint.setXfermode（new PorterDuffXfermode（Mode.DST_IN））;

canvas.drawRect（0， height， width， bitmapWithReflection.getHeight（） + reflectionGap， paint）;return bitmapWithReflection;

其实现的效果如图4所示。

图 4  主页面倒影实现效果图

2.2.5  应用管理页面的分页、应用的移动和卸载的实现

（1）应用管理页面的分页的实现

应用管理页面的分页将主要采用ViewPager+GridView实现。利用gridview将应用显示到页面上，利用ViewPager实现对应用的分页以及滑动效果。

（2）应用的移动和卸载的实现

应用管理页面长按某一Item，会弹出popupwindow。此时，如果选择移动（点取消则退回应用界面），就记录应用的起始位置positionA，移动到positionB，记录positionB的位置，在List中交换二者的位置，然后更新gridview的Adapter，完成整个移动过程。如果选择卸载，程序会弹出一个确认框，选择确认卸载（点取消则退回应用界面），程序就获取该应用的packgName，激活系统卸载intent，然后在List中删除该应用，接着更新gridview的Adapter，完成卸载。

3  结  语

安卓用户界面设计使用的方法是使用XML来描述UI，使用XML来描述的好处是将用户和程序逻辑分开，可以做到用户界面的改变不影响程序逻辑，程序逻辑的变动也可以不影响用户界面，实际上是采用了MVC模式的设计。Activity是MVC中的Controller，Activity的ContentView则是MVC中的View。

参考文献

[1]文璨.Android平台网络电视机的桌面系统与功能模块的设计与实现[D].成都：电子科技大学，2012.

[2]杨丰盛.Android应用开发揭秘[M].北京：机械工业出版社，2010.

[3]李刚.疯狂Android讲义[M].北京：电子工业出版社，2011.

[4]张领，李根福，王敬杰.Android程序开发范例宝典[M].北京：人民邮电出版社， 2015.

[5]张荣.Android开发与应用[M].北京：人民邮电出版社，2014.