初探AIR for Android開發

Adobe發佈mobile AIR已經有一段時間了,但是移動設備的UI與控件與PC端截然不同,導致真正使用AIR技術開發的移動設備程序少之又少,而前段時間,adobe終於發佈了包括移動UI組件的Flex SDK “Hero” (就是以前的Slider),雖然只支持Android系統,但是我們可以看到電子市場上使用AIR技術開發的程序越來越多。本文就將以MP3電臺爲例,介紹使用Flex Hero 開發mobile AIR應用程序的一些方法和心得。

介紹移動應用程序

移動程序界面中有一個重要的概念:屏幕,如下圖

屏幕示意

在MP3電臺這個程序中,選臺界面和播放界面就是兩個“屏幕”,在PC端,這些操作是可以在一起進行的,可是由於移動設備屏幕大小的原因,無法塞在一個界面裏。所以我們在選完臺之後,整個屏幕都將轉換爲電臺播放界面。

Flex Hero中的View

在Flex “Hero”裏,“屏幕”的概念叫做View。hero中關於移動平臺的核心類如下:

類示意圖

其中,MobileApplication相當於桌面版本的Application,是整個程序的容器。ViewNavigator管理各個View的顯示與切換,也包含頂部控制欄ActionBar。

ViewNavigator解析

ViewNavigator處理視圖切換的方法:

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

ViewNavigator.pushView方法用於轉換到新的視圖,例如,當用戶在頻道列表頁面選擇了一個頻道時,我們可以執行

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

這樣的話,就切換到了RadioPlay這個視圖。

這時,如果用戶按下了android上的後退按鈕,則Flex框架會自動執行navigator.popView操作,這樣會回到上一個視圖。當然,我們也可以捕獲這個鍵盤事件,然後執行自定義代碼。

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

數據驅動的視圖

視圖切換時,Flex默認會把上一個視圖的UI銷燬(可以通過設置destructionPolicy=”none”來避免銷燬),這樣一來,我們回退到上一個視圖的時候,就會丟失之前的UI狀態,比如說頻道列表的選中狀態

View包含一個屬性data,當開發者使用pushView方法時的第二個參數data將被賦值到這個屬性中。而每次用戶按下機身上的返回按鈕,Flex框架執行popView方法自動恢復歷史記錄時,也會把上一次的data屬性重新放到View的構造方法中。可以看出,如果我們需要在界面切換時保存當前視圖的所有狀態,相關代碼如下:

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

這樣,我們在離開頻道列表頁的時候,就會把當前列表的選中狀態記錄下來,在重新顯示這個View的時候,我們可以再恢復回來:

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

優化技巧與注意事項

Android上的AIR不會自動退出,也就是說,當用戶按下home鍵或者後退到主屏幕時,AIR程序依然在運行。對於電臺這樣一個應用,後臺運行是合乎情理的,但是如果想像傳統程序一樣,後退即退出的話,則需要額外做一些工作了:

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

AIR在一些設備上的動畫運行效率比較低,我們可以給運動的元件設置cacheAsBitmapMatrix=true,將此元件交給GPU硬件渲染。這個屬性和桌面版本的cacheAsBitmap的用法幾乎完全一樣,對於需要平移、縮放的顯示對象,設置這個屬性可以大大加快動畫效率。

最後,MP3電臺應用的源文件可以在這裏下載。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章