Android module development in Titanium: Custom View module

Made of Porject

According to the Android Module development guide in Titanium, you should be able to easily create a Module template project.

Reference

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

Import the completed template project into Eclipse, and the Module preparation is complete.

Module

There are two class files in the package directory of the imported template project:

ColoredviewModule. java

ExampleProxy. java

In this way, there is no problem, but we can see that the first letter of view in the class name is lower case, not very compliant, so we use the refactoring function to change the class name to: ColoredViewModule. java. Use the reconstruction function of Eclipse to annotate the location Section

Java code

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

The name parameter is not renamed, so you need to manually modify it here.

There are also methods that are not used in the class, and comments are deleted. ExampleProxy. java also needs to be rewritten, so it is also deleted.

The modified ColoredViewModule. java content looks like this:

Java code

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

}

}

In this way, the Module with the minimum code is left.

Custom View

To create a custom View, you must create a class that inherits the TiUIView.

Then, when customizing the View, you need to generate a View instance in the subclass of TiUIView and call setNativeView () to save the subclass.

Java code

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

Finally, we need to create a Proxy class that can call the custom View just made in Module.

When calling the Proxy class of the custom View just made, you need to inherit the TiViewProxy, and then implement the createView (Activityactivity) method to return the instance class of the custom View.

Java code

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;

}

}

In the constructor, the background Color of the View is set through setBackgroundColor (Color. GREEN.

Note that when making a Proxy class, you need to set the creatableInModule value of the annotation to be the same as the Module name as follows.

Java code

@ Kroll. proxy (creatableInModule = ColoredViewModule. class)

Make the Script of the confirmation action

After completing the Module, we need to confirm whether the Module can run normally and achieve the expected results.

Before confirming the effect of the Module, we need to integrate the Module into our Titanium, and use app. js in the example folder to confirm the effect of the Module.

Slightly modify the example/app. js generated by using the Titanium command:

Js Code

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

When the Module calls a custom View through the Proxy, it does not directly call the Proxy createView method, but the code above is as follows:

Create + Proxy remove Proxy)

Run the Script to confirm the action

After modifying app. js, run the script through ant.

Right-click the build. xml file and choose DebugAs> 2AntBuild ...」

In the list of Ant tasks, select "clean" and "run 」.

※If you only select ruan, unnecessary files may be left behind, which may cause compilation failure. Therefore, clean is selected first.

Then press Debug and run it. After the simulator is started successfully, you can see the page. The green part is the custom View.

This only shows that if you customize a View, some other code is omitted to the maximum extent. If you want to customize the View, it should not be simple, but the process is basically like this.