Ti.Ui.Switch iOS7 color

Applies to iOS7/Titanium SDK 3.1.3.GA

In iOS7 it's possible to change the colours of the UISwitch with the properties onTintColor, tintColor and thumbTintColor: UISwitch Class Reference

At the time of writing I can find no reference in the Titanium docs for changing these properties - seems we're stuck with the luminous green colour for now. With the iOS7 design style, it's important to be able to change these colours for a consistent look and feel. The only resource I could find online was benCoding's great little module that provides this functionality: http://bencoding.com/2013/07/18/ios7-style-switches-in-titanium/ While it does work, I found it broke the layout of my page and then crashed the app.

However, I was able to very simply change the colour of my switches, but unfortunately only in the generated XCode project. I understand that's far from ideal, but luckily the code is very simple - one line in fact.

To change the colour of your switches follow these steps:

1. Build your project from Titanium Studio.

2. Open the compiled Xcode project in Xcode.

3. Locate the TiUISwitch.m file (I just used Find > Find in Project).

4. Scroll down to the code block starting line 59. Should look like this:

   BOOL reproxying = [self.proxy inReproxy];
   BOOL newValue = [TiUtils boolValue:value];
   BOOL animated = !reproxying;
   UISwitch * ourSwitch = [self switchView];
   if ([ourSwitch isOn] == newValue) {
           return;
   }
   [ourSwitch setOn:newValue animated:animated];

5. Just add the following line straight after UISwitch * ourSwitch = [self switchView];

   [ourSwitch setOnTintColor:[UIColor colorWithRed:0.22 green:0.565 blue:0.722 alpha:1]];

6. Your code should now look like this:

   BOOL reproxying = [self.proxy inReproxy];
   BOOL newValue = [TiUtils boolValue:value];
   BOOL animated = !reproxying;
   UISwitch * ourSwitch = [self switchView];
   [ourSwitch setOnTintColor:[UIColor colorWithRed:0.22 green:0.565 blue:0.722 alpha:1]];
   if ([ourSwitch isOn] == newValue) {
           return;
   }
   [ourSwitch setOn:newValue animated:animated];

7. Run the project on the simulator or a device and you should now see the active colour of your switch changed!

Important notes: - You'll have to do this each time you build to Xcode, or leave it until you're ready to publish your app.

• You'll need to change the RGB values to your own desired color. This great little tool will generate the code for you: http://www.touch-code-magazine.com/web-color-to-uicolor-convertor/

• Am sure this will work for the other properties too, but haven't tested for that.

• This is completely non-standard. I or Titanium can't be responsible for any unforeseen adverse effects it might have on your code, but until Titanium add support for changing these simple properties, this is the only way I could find to meet the client's needs within the deadline.

• Happy coding!

I'd be interested to know if there's a better solution out there that I missed and hear when Titanium add support for this.