Tomas Persson

I’m happy to announce that my ViewPager module is now available on the Appcelerator Marketplace!

Get it here

There’s been some minor changes since my last post. Unfortunately the market style tabs didn’t make it in to this release as I couldn’t get them to act the way I wanted, but they will be added soon.

Be sure to check out my demo project to get the full api of the module as this post is only to highlight some of the features.

At the very basic, this module will let you swipe between views in your Titanium Mobile application. You can optionally add tabs to the pager and also a simple indicator.

var pager = module.createViewPager({ data: pagerData });

This will create a viewpager and set the contents of pagerData as the “pages”. The data array can either be an array of TiView objects:

var pagerData = [ view1, view2 ];

Where view1 and view2 are some TiView (like a TableView as my demo). Or an array of objects with a “title” and “view” attributes.

var pagerData = [
    { title: "tab one", view: view1 },
    { title: "tab two", view: view2 }
]

Using this will automatically set the pager to use the “normal” tabs (the fixed ones) and to disable this (or to change the type of tabs you want) you’ll have to add a “tabs” attribute to the options passed into the createViewPager method.

var pager = module.createViewPager({
    data: pagerData,
    tabs: {
        style: module.NONE // or module.NORMAL or module.SCROLLING
    }
}

There are three (four when the market tabs are added) constants to use as style: NONE, NORMAL and SCROLLING check this video out to see the scrolling tabs in action. Now, obviously you might want to change the appearance of the tabs (not everyone is into the dark theme). Lucky for you, it’s as easy as adding a few attributes to the style object.

var pager = module.createViewPager({
    data: pagerData,
    tabs: {
        style: module.NONE, // or module.NORMAL or module.SCROLLING
        backgroundColor: "#ffffff",
        backgroundColorSelected: "#cccccc"
    }
}

The color values MUST be in hex starting with a hash (#), support for shorthand (like “black”, “white”, etc) might be added later. Here’s a list of styles you can set:

• backgroundColor
• backgroundColorSelected
• lineColor
• lineColorSelected
• lineHeight
• lineHeightSelected

These should be pretty self explanatory. All the color values must be like I said a hex string starting with a #. The heights take an integer.

You can also add a font object to the style object:

var pager = module.createViewPager({
    data: pagerData,
    tabs: {
        style: module.NONE, // or module.NORMAL or module.SCROLLING
        backgroundColor: "#ffffff",
        backgroundColorSelected: "#cccccc",
        font: {
            color: "#00ff00",
            colorSelected: "#fff000",
            size: 14
        }
    }
}

Possible attributes are:

• color
• colorSelected
• size

And also a padding object. Which will set the padding of the tabs:

var pager = module.createViewPager({
    data: pagerData,
    tabs: {
        style: module.NONE, // or module.NORMAL or module.SCROLLING
        backgroundColor: "#ffffff",
        backgroundColorSelected: "#cccccc",
        font: {
            color: "#00ff00",
            colorSelected: "#fff000",
            size: 14
        },
        padding: {
            left: 20,
            top: 20,
            right: 20,
            bottom: 20
        }
    }
}

You can also add if you’d like to display an indicator at the bottom of the view. For now it’s just a line indicator (like the vanilla ICS app launcher), but more will be added in a coming update and also the ability to style it properly.

var pager = module.createViewPager({
    data: pagerData,
    tabs: {
        style: module.NONE, // or module.NORMAL or module.SCROLLING
        backgroundColor: "#ffffff",
        backgroundColorSelected: "#cccccc",
        font: {
            color: "#00ff00",
            colorSelected: "#fff000",
            size: 14
        },
        padding: {
            left: 20,
            top: 20,
            right: 20,
            bottom: 20
        }
    },
    indicator: {
        style: module.LINE // or module.NONE (or just leave it out)
    }
}

That should be all that’s needed to know to get you started using the module.

A future update, which hopefully will come within a fortnight (love that word) will include some getters/setters/properties for commonly used stuff. It will also include the “market” tabs along with some other goodies

Please don’t hesitate to contact me and give as much feedback as you can muster, positive as well as negative, so that I can improve it and fix annoyances for you. And don’t be afraid to request features as well.