Skip to content

Latest commit

 

History

History
93 lines (65 loc) · 3.56 KB

README.md

File metadata and controls

93 lines (65 loc) · 3.56 KB

Switch Widget Sample

The Switch widget provides an styled switch for Android/mobileweb with the holo style. Also works on iOS, but the native iOS is better, of course.

Animation example

(this is not the real speed, this GIF is a lot more slow)

NOTE: My first version, that works with an ScrollableView, is in the scrollView branch. But the master version is better in terms of accuracy (just touch any part of the switch and changes automatically). Old is like this: Old Animation example

##Manifest

Adding the Switch Widget to Your Alloy Project

  • In your application's config.json file you will want to include the following line in your dependencies:
"dependencies": {
    "com.mcvendrell.switch": "1.1"
}
  • Create a widgets directory in your app directory if it doesn't already exist.
  • Copy the com.mcvendrell.switch folder into your app/widgets directory.

Create a Switch in the View

You can add a Switch to a view by requiring the switch widget.

<Widget id="mySwitch" src="com.mcvendrell.switch"/>

Assign it an ID that you can use in your controller. E.g. id="mySwitch" You can now access the Switch via $.mySwitch in your controller.

Ti.API.info("switch value " + $.mySwitch.value);

Detect a Switch change

You can detect a Switch change simply adding a onChange event.

<Widget id="mySwitch" src="com.mcvendrell.switch" onChange="myChangeFunction" />

You can now access the Switch change in your controller:

function myChangeFunction(e){
    Ti.API.info("Change detected. Value: " + e.value);
}

Position and Style the Switch

In your .tss file for the view, you can style and position your Switch as you would any other control, using any valid properties for Ti.UI.View object.

"#mySwitch": {
    top: 5, 
    width: 65, 
}

Initializing the Switch in the Controller

The Switch is off by default. Before you open your window, you need to call the Switch with the init method. For example:

$.mySwitch.init($.getView());

Initialization Parameters

Parameter Type Description
args object An object containing the arguments for initialization.
args.parentView Ti.UI.View Top level view to display the picker in.
[args.parameters] various Any valid Ti.UI.View key/value pairs that you want applied to the Switch appearance. It is recommended that you set these in the parent tss file where possible.

Accessible Properties and Methods

Properties Type Description
value boolean Read/Write. A boolean value to set/get the switch state: true = ON; false = OFF.

Localization

In order to support localization and avoid translation problems, I have chosen to use icons instead of text, so, in the doc/img folder you have 2 options to overwrite the default assets images folders. Choose what you prefer:

My choice -

Option 2 -

Or you can edit it and make your own.