Titanium中Android模組開發:自訂View模組

Porject做成

根據Titanium中Android模組開發指南的內容，大家應該能很容易的建立一個Module的模板工程。

引用

titaniumcreate--platform=android--type=module--name=ColoredView--id=net.siso9to.coloredview--android=$HOME/devel/android-sdk-mac_x86

將做成好的模板工程匯入到Eclipse中，Module的準備工作就算完成了。

Module做成

匯入的模板工程的包目錄下，有兩個類檔案：

ColoredviewModule.java

ExampleProxy.java

這樣原封不動的也是沒有問題的，但是我們看到類名中view的第一字母小寫了，不是很符合規範，所以我們使用重構功能將類名修改為：ColoredViewModule.java。使用Eclipse的重構功能的話，註解位置部分

Java代碼

@Kroll.module(name="Coloredview",id="net.siso9to.coloredview")

的name參數沒有給重新命名，所以這裡需要手動修改。

還有就是類中不用的方法，注釋等都刪去，ExampleProxy.java也要重寫做一個，所以也一併刪去。

修改之後的ColoredViewModule.java的內容是一下這個樣子的：

Java代碼

packagenet.siso9to.coloredview;

importorg.appcelerator.kroll.KrollModule;

importorg.appcelerator.kroll.annotations.Kroll;

importorg.appcelerator.titanium.TiContext;

@Kroll.module(name="ColoredView",id="net.siso9to.coloredview")

publicclassColoredViewModuleextendsKrollModule

{

publicColoredViewModule(TiContexttiContext){

super(tiContext);

}

}

這樣就留下來了最低限度代碼的Module。

自訂View做成

要做成自訂View，需要建立一個繼承了TiUIView的類。

然後，自訂View的時候，還需要再TiUIView的子類中產生View執行個體，調用setNativeView()方法將該子類儲存。

Java代碼

packagenet.siso9to.coloredview;

importorg.appcelerator.titanium.proxy.TiViewProxy;

importorg.appcelerator.titanium.view.TiUIView;

importandroid.content.Context;

importandroid.graphics.Color;

importandroid.view.View;

publicclassColoredViewextendsTiUIView{

publicclassCostomViewextendsView{

publicCostomView(Contextc){

super(c);

this.setBackgroundColor(Color.GREEN);

}

}

publicColoredView(TiViewProxyproxy){

super(proxy);

CostomViewcostomView=newCostomView(proxy.getContext());

setNativeView(costomView);

}

}

Proxy做成

最後，要做成一個能偶再Module中調用剛才做成的自訂View的Proxy類。

調用剛才做成的自訂View的Proxy類在做成的時候，需要繼承TiViewProxy，然後，實現createView(Activityactivity)方法，將自訂View的執行個體類返回。

Java代碼

packagenet.siso9to.coloredview;

importorg.appcelerator.kroll.annotations.Kroll;

importorg.appcelerator.titanium.TiContext;

importorg.appcelerator.titanium.proxy.TiViewProxy;

importorg.appcelerator.titanium.view.TiUIView;

importandroid.app.Activity;

@Kroll.proxy(creatableInModule=ColoredViewModule.class)

publicclassColoredViewProxyextendsTiViewProxy

{

privateColoredViewcoloredView;

publicColoredViewProxy(TiContexttiContext){

super(tiContext);

}

@Override

publicTiUIViewcreateView(Activityactivity){

coloredView=newColoredView(this);

returncoloredView;

}

}

在建構函式中，通過setBackgroundColor(Color.GREEN)的設定，View的背景色就被設定上了。

需要注意的地方是，再做成Proxy類的時候，需要像以下這個樣子將註解的creatableInModule值設定成和Module名一樣。

Java代碼

@Kroll.proxy(creatableInModule=ColoredViewModule.class)

確認動作的Script做成

做好了Module之後，我們需要確認以下該Module是否能正常的運行，是否能達到我們需要的效果。

在確認Module的效果前，我們需要將Module整合到我們的Titanium當中來，使用example檔案夾下的app.js就能確認Module的效果。

稍微修改一下通過Titanium命令產生的example/app.js:

Js代碼

varwindow=Ti.UI.createWindow({

backgroundColor:'white'

});

varlabel=Ti.UI.createLabel();

window.add(label);

window.open();

varmodule=require('net.siso9to.coloredview');

Ti.API.info("moduleis=>"+module);

varview=module.createColoredView({

top:'100dp',

width:'100dp',

height:'100dp',

color:'#000',

});

window.add(view);

從Module經由Proxy調用自訂View時，並不是直接的調用Proxy的createView方法，而是向上面代碼這樣：

create+Proxy名去除Proxy）

確認動作的Script的運行

修改完app.js之後，通過ant我們來運行這個script。

在build.xml檔案上點擊右鍵，選擇「DebugAs」>「2AntBuild...」

在表示出來的Ant的Task一覽中，我們選擇「clean」和「run」。

※如果只是選擇ruan的話，可能會殘留一些不必要的檔案，從而引起編譯失敗，所以這裡也先選上clean

然後按下「Debug」之後運行，成功啟動模擬器之後，就能看到一下的頁面了，綠色部分就是這回自訂的View。

這裡只是說明了如果自訂一個View，其中最大限度的省略了一些其他的代碼，如果大家要自訂View的話，應該不會這個簡單，但是過程基本上是這樣的。