Adobe發(fā)布mobile AIR已經(jīng)有一段時(shí)間了，但是移動(dòng)設(shè)備的UI與控件與PC端截然不同，導(dǎo)致真正使用AIR技術(shù)開發(fā)的移動(dòng)設(shè)備程序少之又少，而前段時(shí)間，Adobe終于發(fā)布了包括移動(dòng)UI組件的Flex SDK “Hero” (就是以前的Slider)，雖然只支持Android系統(tǒng)，但是我們可以看到電子市場(chǎng)上使用AIR技術(shù)開發(fā)的程序越來越多。本文就將以MP3電臺(tái)為例，介紹使用Flex Hero 開發(fā)mobile AIR應(yīng)用程序的一些方法和心得。

介紹移動(dòng)應(yīng)用程序

移動(dòng)程序界面中有一個(gè)重要的概念：屏幕，如下圖

在MP3電臺(tái)這個(gè)程序中，選臺(tái)界面和播放界面就是兩個(gè)“屏幕”，在PC端，這些操作是可以在一起進(jìn)行的，可是由于移動(dòng)設(shè)備屏幕大小的原因，無(wú)法塞在一個(gè)界面里。所以我們?cè)谶x完臺(tái)之后，整個(gè)屏幕都將轉(zhuǎn)換為電臺(tái)播放界面。Flex Hero中的View

在Flex “Hero”里，“屏幕”的概念叫做View。hero中關(guān)于移動(dòng)平臺(tái)的核心類如下：

其中，MobileApplication相當(dāng)于桌面版本的Application，是整個(gè)程序的容器。ViewNavigator管理各個(gè)View的顯示與切換，也包含頂部控制欄ActionBar。

ViewNavigator處理視圖切換的方法：

navigator.pushView(view,data,transition=null);  
navigator.popView(transition=null); 

ViewNavigator.pushView方法用于轉(zhuǎn)換到新的視圖，例如，當(dāng)用戶在頻道列表頁(yè)面選擇了一個(gè)頻道時(shí)，我們可以執(zhí)行

navigator.pushView(RadioPlay,{channel_item:channelList.selectedItem}); 

這樣的話，就切換到了RadioPlay這個(gè)視圖。這時(shí)，如果用戶按下了android上的后退按鈕，則Flex框架會(huì)自動(dòng)執(zhí)行navigator.popView操作，這樣會(huì)回到上一個(gè)視圖。當(dāng)然，我們也可以捕獲這個(gè)鍵盤事件，然后執(zhí)行自定義代碼。數(shù)據(jù)驅(qū)動(dòng)的視圖

this.addEventListener(KeyboardEvent.KEY_UP,function(e:KeyboardEvent){ 
    if(e.keyCode == Keyboard.BACK){ 
        e.stopPropagation(); 
        //其他操作,例如存儲(chǔ)數(shù)據(jù)等 
        //其他操作完畢 
        navigator.popView(); 
    }  
 }); 

視圖切換時(shí)，F(xiàn)lex默認(rèn)會(huì)把上一個(gè)視圖的UI銷毀(可以通過設(shè)置destructionPolicy=”none”來避免銷毀)，這樣一來，我們回退到上一個(gè)視圖的時(shí)候，就會(huì)丟失之前的UI狀態(tài)，比如說頻道列表的選中狀態(tài)View包含一個(gè)屬性data，當(dāng)開發(fā)者使用pushView方法時(shí)的第二個(gè)參數(shù)data將被賦值到這個(gè)屬性中。而每次用戶按下機(jī)身上的返回按鈕，F(xiàn)lex框架執(zhí)行popView方法自動(dòng)恢復(fù)歷史記錄時(shí)，也會(huì)把上一次的data屬性重新放到View的構(gòu)造方法中?？梢钥闯?，如果我們需要在界面切換時(shí)保存當(dāng)前視圖的所有狀態(tài)，相關(guān)代碼如下：

this.addEventListener(FlexEvent.VIEW_DEACTIVATE,saveState); 
private function saveState(event:Event):void{ 
    this.data.selection = channelList.selectedIndex; 
    this.data.scrollPosition = channelList.dataGroup.verticalScrollPosition; 
} 

這樣，我們?cè)陔x開頻道列表頁(yè)的時(shí)候，就會(huì)把當(dāng)前列表的選中狀態(tài)記錄下來，在重新顯示這個(gè)View的時(shí)候，我們可以再恢復(fù)回來：

private function restoreState():void{ 
    if(!data){ 
        data = new Object(); 
    } 
    if(data.selection){ 
        channelList.selectedIndex = data.selection; 
    } 
    if(data.scrollPosition){ 
        channelList.dataGroup.verticalScrollPosition = this.data.scrollPosition; 
    } 
} 

優(yōu)化技巧與注意事項(xiàng)

Android上的AIR不會(huì)自動(dòng)退出，也就是說，當(dāng)用戶按下home鍵或者后退到主屏幕時(shí)，AIR程序依然在運(yùn)行。對(duì)于電臺(tái)這樣一個(gè)應(yīng)用，后臺(tái)運(yùn)行是合乎情理的，但是如果想像傳統(tǒng)程序一樣，后退即退出的話，則需要額外做一些工作了：

if(Capabilities.cpuArchitecture=="ARM"){ 
    NativeApplication.nativeApplication.addEventListener(Event.DEACTIVATE, handleDeactivate, false, 0, true);  
} 
  
private function handleDeactivate(event:Event):void{ 
    NativeApplication.nativeApplication.exit(); 
} 

AIR在一些設(shè)備上的動(dòng)畫運(yùn)行效率比較低，我們可以給運(yùn)動(dòng)的元件設(shè)置cacheAsBitmapMatrix=true，將此元件交給GPU硬件渲染。這個(gè)屬性和桌面版本的cacheAsBitmap的用法幾乎完全一樣，對(duì)于需要平移、縮放的顯示對(duì)象，設(shè)置這個(gè)屬性可以大大加快動(dòng)畫效率。