CODEWITHSUNDEEP
javascripttitanium-mobile
Manikandan
Manikandan

Reputation: 488

Titanium how to use images in switch

I am new to titanium and am working on switches and I have two images ON and OFF and I when we swipe the ON it should switch to the OFF.. Here are the two images I am trying to use..

OFF ON

I dont know how to use these images..The only thing I can do is a default switch

Here is the coding

var basicSwitch = Ti.UI.createSwitch({
value:true ,// mandatory property for iOS 
color: 'white',
left : 40,
top:0,
backgroundColor:'black'
});
cview.add(basicSwitch);

basicSwitch.addEventListener('change',function(e){
Ti.API.info('Switch value: ' + basicSwitch.value);

Upvotes: 0

Views: 203

Answers (1)

Robin Ellerkmann
Robin Ellerkmann

Reputation: 2113

The natively built in Slider does not support custom images (except on iOS). I would recommend you to implement this as a button which changes if it is swiped in the desired direction.

var switchButton = Ti.UI.createButton({
    image: "/disabledSwitch.png", //exchange for your location
    //Add the dimensions
    title: "OFF" });

switchButton.addEventListener ('swipe', function() {
    if (e.direction == "right" && e.source.title == "OFF" {
        //Enable the "switch"
        switchButton.setImage("Your active image");
        switchButton.setTitle("ON");
        //Set your desired actions
    } else if (.direction == "left" && e.source.title == "ON" {
        //Disable the "switch"
        switchButton.setImage("Your inactive image");
        switchButton.setTitle("OFF");
        //Set your desired actions
    } });

cview.add(switchButton);

You could also additionally add a click listener.

Upvotes: 2

Related Questions