基于Android的數(shù)字機(jī)頂盒桌面啟動(dòng)器的設(shè)計(jì)與實(shí)現(xiàn)

李栿麟+李璋

摘 要：以Android為平臺(tái)，結(jié)合Android動(dòng)畫(huà)技術(shù)和控件顯示等技術(shù)，同時(shí)利用Eclipse、Genymotion開(kāi)發(fā)了一款適用于安卓平臺(tái)的高清數(shù)字機(jī)頂盒的桌面啟動(dòng)器App。

關(guān)鍵詞：Android;Genymotion;Eclipse;數(shù)字機(jī)頂盒啟動(dòng)器

中圖分類號(hào)：TP311 ? ? ? ? ? ? 文獻(xiàn)標(biāo)識(shí)碼：A ? ? ? ? ? 文章編號(hào)：2095-1302（2015）09-00-03

0 ?引 ?言

目前，使用電視機(jī)產(chǎn)品的用戶相比使用個(gè)人電腦的用戶多，但電視機(jī)存在的諸多弊端日益顯現(xiàn)，主要體現(xiàn)在分辨率和功能上。Android平臺(tái)的網(wǎng)絡(luò)電視機(jī)目前還處于推廣階段，有很多技術(shù)問(wèn)題需要解決，也具有廣闊的市場(chǎng)前景。目前，Android平臺(tái)已經(jīng)成為廣大網(wǎng)絡(luò)電視機(jī)廠商的首選操作系統(tǒng)，它具有強(qiáng)大的功能并具有很強(qiáng)的開(kāi)放性，在系統(tǒng)中進(jìn)行網(wǎng)絡(luò)電視機(jī)軟件開(kāi)發(fā)具有開(kāi)發(fā)周期短、設(shè)計(jì)自由度高、可擴(kuò)展性強(qiáng)等優(yōu)勢(shì)。為更好地完成機(jī)頂盒與電視機(jī)的互聯(lián)，設(shè)計(jì)了此App。

1 ?總體設(shè)計(jì)

1.1 ?總體功能概述

TvLauncher是一款為電視機(jī)或者機(jī)頂盒設(shè)計(jì)的桌面啟動(dòng)器，它列出了機(jī)頂盒的主要功能如電視、電影、教育等主頁(yè)面、管理數(shù)字電視所安裝的App的應(yīng)用管理頁(yè)面以及查詢相關(guān)人員信息的管理頁(yè)面等。

1.2 ?TvLauncher功能模塊的劃分

根據(jù)TvLauncher的總體功能概述，我們可以將TvLauncher劃分為以下幾個(gè)功能模塊來(lái)分別實(shí)現(xiàn)：

（1）主頁(yè)面功能模塊（Home頁(yè)面）：該模塊主要包括機(jī)頂盒的一些常見(jiàn)的快捷功能選項(xiàng)如電視、電影、娛樂(lè)、教育、搜素以及系統(tǒng)設(shè)置和系統(tǒng)更新等。

（2）應(yīng)用管理功能模塊（Application頁(yè)面）：在該模塊中將會(huì)把系統(tǒng)所有的應(yīng)用分頁(yè)顯示在屏幕上，并且提供可供用戶對(duì)這些應(yīng)用操作的一些功能選項(xiàng)，如對(duì)應(yīng)用的查看、移動(dòng)和卸載等。

（3）人員信息管理功能模塊（Information頁(yè)面）。

2 ?功能設(shè)計(jì)與實(shí)現(xiàn)

2.1 ?UI視圖的設(shè)計(jì)

在該應(yīng)用中，將采用ViewPager+Fragment組合的方式實(shí)現(xiàn)Tab（主頁(yè)面和應(yīng)用管理頁(yè)面以及人員信息頁(yè)面）的分頁(yè)和滑動(dòng)的效果，采用ViewPager+Gridview組合的方式實(shí)現(xiàn)對(duì)應(yīng)用管理頁(yè)面的App進(jìn)行分頁(yè)并實(shí)現(xiàn)滑動(dòng)效果。

2.1.1 ?主頁(yè)面的UI設(shè)計(jì)

主頁(yè)面的設(shè)計(jì)文件為activity_main_framela yout.xml和activity_main_menu.xml。其中在activity_home_framelayout.xml中采用相對(duì)布局嵌套使用幀布局的方式實(shí)現(xiàn)主頁(yè)面圖片和文字的組合，在activity_main_menu.xml中采用在線性布局中嵌套使用線性布局的方式完成Tab的頁(yè)面布局。

2.1.2 ?主頁(yè)面中電影菜單的二級(jí)頁(yè)面UI設(shè)計(jì)

電影菜單的二級(jí)頁(yè)面設(shè)計(jì)文件為：activity_movie.xml和movie_viewpager_item.xml。其中在activity_movie.xml中采用線性布局嵌套線性布局的方式實(shí)現(xiàn)該頁(yè)面的總體布局，在movie_view pager_item.xml中采用在相對(duì)布局中嵌套使用幀布局的方式實(shí)現(xiàn)圖片和文字的組合。

2.1.3 ?應(yīng)用管理頁(yè)面的UI設(shè)計(jì)

應(yīng)用管理頁(yè)面的設(shè)計(jì)文件為：application_view pager.xml和application_ viewpager_item.xml文件。其中在app-lication_viewpager.xml文件中采用線性布局相互嵌套+自定義ViewPager控件組合的方式實(shí)現(xiàn)該頁(yè)面的總體布局，application_viewpager_item.xml文件中采用在相對(duì)布局中嵌套使用幀布局的方式將系統(tǒng)應(yīng)用的圖標(biāo)、名稱以及背景圖片進(jìn)行組合。

2.1.4 ?應(yīng)用管理模塊二級(jí)功能（移動(dòng)和刪除）頁(yè)面的UI設(shè)計(jì)

應(yīng)用管理模塊二級(jí)功能（移動(dòng)和刪除）頁(yè)面的設(shè)計(jì)文件為：activity_popupwindow.xml。文件采用在相對(duì)布局中嵌套使用線性布局的方式實(shí)現(xiàn)效果。

2.1.5 ?人員信息查看頁(yè)面的UI設(shè)計(jì)

人員信息管理頁(yè)面的設(shè)計(jì)文件為：activity_information.xml和information_listview_item.xml。在activity_informa-tion.xml中采用在線性布局中嵌套使用線性布局的方式實(shí)現(xiàn)人員信息界面的總體布局，在information_listview_item.xml文件中采用單純的線性布局方式實(shí)現(xiàn)多組文字的組合效果。

2.2 ?特效的設(shè)計(jì)與實(shí)現(xiàn)

2.2.1 ?主頁(yè)菜單焦點(diǎn)放大動(dòng)畫(huà)的設(shè)計(jì)與實(shí)現(xiàn)

主頁(yè)菜單焦點(diǎn)的放大主要采用Tweened Animation動(dòng)畫(huà)中的Scale（縮放效果）類型的動(dòng)畫(huà)來(lái)實(shí)現(xiàn)。其主要代碼如下：

（1）放大動(dòng)畫(huà)的代碼

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（）;函數(shù)用于把當(dāng)前視圖置于其他視圖上方。

（2）縮小動(dòng)畫(huà)的代碼

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）;

其實(shí)現(xiàn)的效果圖如圖1所示。

圖1 ?主頁(yè)面菜單焦點(diǎn)放大動(dòng)畫(huà)實(shí)現(xiàn)效果圖

2.2.2 ?主頁(yè)面Tab菜單焦點(diǎn)動(dòng)畫(huà)的設(shè)計(jì)與實(shí)現(xiàn)

主頁(yè)面Tab菜單焦點(diǎn)動(dòng)畫(huà)將主要借助幀動(dòng)畫(huà)實(shí)現(xiàn)，在文件main_menu_animation.xml中定義了兩幀圖片，間隔時(shí)間為0.3秒。其實(shí)現(xiàn)的主要代碼如下：

（1）獲得焦點(diǎn)代碼

v.setBackgroundResource（R.anim.main_menu_animation）;

mFrameAnimation = （AnimationDrawable） v.getBackground（）;

mFrameAnimation.start（）;

（2）失去焦點(diǎn)的代碼

v.setBackgroundColor（Color.TRANSPARENT）;

其實(shí)現(xiàn)的效果圖如圖2所示。

圖 2 ?主頁(yè)面Tab菜單焦點(diǎn)動(dòng)畫(huà)實(shí)現(xiàn)效果圖

2.2.3 ?電影菜單二級(jí)菜單的翻頁(yè)動(dòng)畫(huà)設(shè)計(jì)與實(shí)現(xiàn)

電影菜單二級(jí)菜單的翻頁(yè)動(dòng)畫(huà)將主要采用ViewPager自帶的setPageTransformer（）來(lái)設(shè)置切換動(dòng)畫(huà)。其實(shí)現(xiàn)的效果如圖3所示。

圖 3 ?電影菜單二級(jí)菜單的翻頁(yè)動(dòng)畫(huà)實(shí)現(xiàn)效果圖

2.2.4 ?主頁(yè)面倒影效果的設(shè)計(jì)與實(shí)現(xiàn)

主頁(yè)面倒影效果的主要設(shè)計(jì)思路是：首先獲得需要設(shè)置倒影的View的緩存，然后通過(guò)mMatrix.preScale（1，-1）利用該緩存創(chuàng)建一個(gè)和原View一模一樣的圖像 ;調(diào)用Bitmap.createBitmap（originalImage，o，height/2， width，height/2.mMatrix，false）使該圖像倒過(guò)來(lái)創(chuàng)建一個(gè)倒過(guò)來(lái)圖像，調(diào)用canvas.drawBitmap（reflectionImage，o，height/3f，null），把倒過(guò)來(lái)的圖像畫(huà)到畫(huà)布上。這樣就實(shí)現(xiàn)了倒影效果。其主要代碼如下：

/*為需要設(shè)置倒影的View設(shè)置緩存*/

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（）; }

/*翻轉(zhuǎn)圖片、創(chuàng)建倒過(guò)來(lái)的圖像、將圖像畫(huà)到畫(huà)布上*/

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）;

// 創(chuàng)建畫(huà)布

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;

其實(shí)現(xiàn)的效果如圖4所示。

圖 4 ?主頁(yè)面倒影實(shí)現(xiàn)效果圖

2.2.5 ?應(yīng)用管理頁(yè)面的分頁(yè)、應(yīng)用的移動(dòng)和卸載的實(shí)現(xiàn)

（1）應(yīng)用管理頁(yè)面的分頁(yè)的實(shí)現(xiàn)

應(yīng)用管理頁(yè)面的分頁(yè)將主要采用ViewPager+GridView實(shí)現(xiàn)。利用gridview將應(yīng)用顯示到頁(yè)面上，利用ViewPager實(shí)現(xiàn)對(duì)應(yīng)用的分頁(yè)以及滑動(dòng)效果。

（2）應(yīng)用的移動(dòng)和卸載的實(shí)現(xiàn)

應(yīng)用管理頁(yè)面長(zhǎng)按某一Item，會(huì)彈出popupwindow。此時(shí)，如果選擇移動(dòng)（點(diǎn)取消則退回應(yīng)用界面），就記錄應(yīng)用的起始位置positionA，移動(dòng)到positionB，記錄positionB的位置，在List中交換二者的位置，然后更新gridview的Adapter，完成整個(gè)移動(dòng)過(guò)程。如果選擇卸載，程序會(huì)彈出一個(gè)確認(rèn)框，選擇確認(rèn)卸載（點(diǎn)取消則退回應(yīng)用界面），程序就獲取該應(yīng)用的packgName，激活系統(tǒng)卸載intent，然后在List中刪除該應(yīng)用，接著更新gridview的Adapter，完成卸載。

3 ?結(jié) ?語(yǔ)

安卓用戶界面設(shè)計(jì)使用的方法是使用XML來(lái)描述UI，使用XML來(lái)描述的好處是將用戶和程序邏輯分開(kāi)，可以做到用戶界面的改變不影響程序邏輯，程序邏輯的變動(dòng)也可以不影響用戶界面，實(shí)際上是采用了MVC模式的設(shè)計(jì)。Activity是MVC中的Controller，Activity的ContentView則是MVC中的View。

參考文獻(xiàn)

[1]文璨.Android平臺(tái)網(wǎng)絡(luò)電視機(jī)的桌面系統(tǒng)與功能模塊的設(shè)計(jì)與實(shí)現(xiàn)[D].成都：電子科技大學(xué)，2012.

[2]楊豐盛.Android應(yīng)用開(kāi)發(fā)揭秘[M].北京：機(jī)械工業(yè)出版社，2010.

[3]李剛.瘋狂Android講義[M].北京：電子工業(yè)出版社，2011.

[4]張領(lǐng)，李根福，王敬杰.Android程序開(kāi)發(fā)范例寶典[M].北京：人民郵電出版社， 2015.

[5]張榮.Android開(kāi)發(fā)與應(yīng)用[M].北京：人民郵電出版社，2014.