Our Blog

Switcher mobile skin for a toggle button

One of the components that is very common in a mobile app is the Switcher component. The on/off switch is usually available on IOS and Android devices. This component is like a toggle button but with a skin that makes it look as a Switcher.

Switcher

Application

This is just a simple test and we have all the styles hardcoded on it.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
          xmlns:s="library://ns.adobe.com/flex/spark">
   <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      s|ToggleButton
      {
         skin-class: ClassReference("skins.SwitcherSkin");
         background: Embed(source='/images/switcher_bg.png');
         thumb: Embed(source='/images/switcher_thumb.png');
      }
   </fx:Style>
   <s:ToggleButton x="50" y="50" width="94" height="27"/>
</s:Application>

I have a special skin, SwitcherSkin, for the toggle button that transforms the normal toggle to a switcher.

Skin

We are extending from MobileSkin to make our skin lightweight for a mobile project. And we only have 2 elements on it: the background that has the on/off background and the thumb that moves to cover the on/off labels.

package skins
{
   import caurina.transitions.Tweener;
   import flash.display.DisplayObject;
   import spark.skins.mobile.supportClasses.MobileSkin;
   public class SwitcherSkin extends MobileSkin
   {
      protected var background:DisplayObject;
      protected var thumb:DisplayObject;
      override protected function commitCurrentState():void
      {
         super.commitCurrentState();
         invalidateDisplayList();
      }
      override protected function createChildren():void
      {
         background = addElement( "background" );
         thumb = addElement( "thumb" );
      }
      protected function addElement( style:String ):DisplayObject
      {
         var elementAsset:Class = getStyle( style );
         var element:DisplayObject;
         if( elementAsset )
         {
            element = new elementAsset();
            addChild( element );
         }
         return element;
      }
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         if( currentState == "up" )
         {
            Tweener.removeTweens( thumb );
            Tweener.addTween( thumb, { time:0.4, x:0 } );
         }
         if( currentState == "upAndSelected" )
         {
            Tweener.removeTweens( thumb );
            Tweener.addTween( thumb, { time:0.4, x:unscaledWidth - thumb.width } );
         }
      }
   }
}

To make it more interesting, I added a little tween using the Tweener library . I hope you like it. You can improve on it making the labels dynamic and the dimensions too.

The source is available for download.

Nahuel Foronda

Nahuel Foronda

9 Comments

  1. Raymond Camden

    Raymond Camden

    It would be kind of cool if there was a site where these skins could be shared. From you and others I mean.
  2. Florian

    Florian

    I'm curious to know why you chose to use a custom tween engine instead of the one provided with Flex?
  3. Nahuel Foronda

    Nahuel Foronda

    @Camden, that's good idea, now we need to see who wants to volunteer to such task :)

    @Florian, I used it because of my old habits. In Flex 3x the default Flex engine was not good. I think that now Flex 4 do fine. You can use that if you prefer.
  4. James Harvey

    James Harvey

    @Nahuel,
    I agree with my comrade Ray, and I would gladly volunteer to contribute to such a task, as well as (if neccessary) assist and manage.
  5. Arnaud Thorel

    Arnaud Thorel

    Flex developpers need to find great component look to promote Flex Applications.


    I see in Conqu a DateTime Picker, can you explain how do you this one ?

    Thx
    Arnaud
  6. Nahuel Foronda

    Nahuel Foronda

    Arnaud, The Date Picker it is not that simple and I monkey patched the framework to use the Scroller the way that I want. I think that Adobe is working on its own version so maybe you should wait for them.
  7. Arnaud Thorel

    Arnaud Thorel

    Thx Nahuel,

    I tried to do it by myself using list and layout (like a vertical carrousel). I also have some trouble with the Scroller, but i succeed to get the selectedIndex at the center of the picker. Skin was more easier to do (gradient on the top and on the bottom).

    Monkey Patch is a way of life. When the Flex SDK 4.0 I had to develop a messenger application in AIR using Gesture (looks like conqu - great job). But I patched list states to remove hovered state and add deleted state.
  8. Yonas Kolb

    Yonas Kolb

    Nice one. I also wrote a similar skin in MXML for use in desktop apps as well. It supports custom labels and has a draggable thumb. If anyone's interested check it out <a href="http://yonaskolb.com/blog/2012/1/18/flex-toggle-switch-spark-skin.html">here</a>
  9. Yonas Kolb

    Yonas Kolb

    That link didn't post correctly...
    http://yonaskolb.com/blog/2012/1/18/flex-toggle-switch-spark-skin.html