Description
This module brings the Android ViewPager to the Titanium Mobile SDK.
You can download a pre-built version of this app on Google Play
Reference
To create a new view pager you use the factory method createViewPager(opts).
var viewPager = module.createViewPager();
possible options to pass into the method through the options object are:
data - Array
An Array of TiView objects, alternatively as an object like this:
data: [
{ title: "Tab title", view: viewObject }
]
or like this if you don't need tabs:
data: [
tiView1, tiView2, tiView3
]
tabs - Object
The main options for styling the tabs. Can have the following attributes:
<tr>
<td>style</td>
<td>Integer constant</td>
<td>Can be any of the following constants: <b>NONE</b>, <b>NORMAL</b>, <b>SCROLLING</b>, <b>MARKET</b></td>
</tr>
<tr>
<td>backgroundColor</td>
<td>Hexadecimal string</td>
<td>The background color of an unselected tab</td>
</tr>
<tr>
<td>backgroundColorSelected</td>
<td>Hexadecimal string</td>
<td>The background color of the selected tab (Not if style is MARKET)</td>
</tr>
<tr>
<td>lineColor</td>
<td>Hexadecimal string</td>
<td>The color of the line underneath the tab view</td>
</tr>
<tr>
<td>lineColorSelected</td>
<td>Hexadecimal string</td>
<td>The color of the line between the selected tab and the bottom line</td>
</tr>
<tr>
<td>lineHeight</td>
<td>Integer</td>
<td>Height of the bottom line</td>
</tr>
<tr>
<td>lineHeightSelected</td>
<td>Integer</td>
<td>Height of the line of the selected tab</td>
</tr>
<tr>
<td colspan="3">font (Object)</td>
</tr>
<tr>
<td>size</td>
<td>Integer</td>
<td>The size of the font on the tab</td>
</tr>
<tr>
<td>color</td>
<td>Hexadecimal string</td>
<td>The font color of an unselected tab</td>
</tr>
<tr>
<td>colorSelected</td>
<td>Hexadecimal string</td>
<td>The font color of the selected tab.</td>
</tr>
<tr>
<td>bold</td>
<td>Boolean</td>
<td>If the text should bold or not.</td>
</tr>
<tr>
<td colspan="3">padding (Object)</td>
</tr>
<tr>
<td>left</td>
<td>Integer</td>
<td>the left padding of a tab</td>
</tr>
<tr>
<td>top</td>
<td>Integer</td>
<td>the top padding of a tab</td>
</tr>
<tr>
<td>right</td>
<td>Integer</td>
<td>the right padding of a tab</td>
</tr>
<tr>
<td>bottom</td>
<td>Integer</td>
<td>the bottom padding of a tab</td>
</tr>
<tr>
<td>title</td>
<td>Integer</td>
<td>Padding between tabs. <b>NOTE: Only if style is MARKET</b></td>
</tr>
<tr>
<td>clip</td>
<td>Integer</td>
<td>The padding of the left and right visible tabs. A negative value will push them ouside the view area and hide some (or all) of the text. <b>NOTE: Only if style is MARKET</b></td>
</tr>
| Attribute | Type | Description |
indicator - Object
If you want your viewpager to have an indicator at the bottom of the view add this to the options.
For now you can use one attribute to the object, but more are planned.
<tr>
<td>style</td>
<td>Integer constant</td>
<td>Can be <b>NONE</b> or <b>LINE</b></td>
</tr>
<tr>
<td>color</td>
<td>Hexadecimal string</td>
<td>The color of the line</td>
</tr>
<tr>
<td>height</td>
<td>Integer</td>
<td>The height of the line</td>
</tr>
<tr>
<td>fadeOutTime</td>
<td>Integer (default: 200 miliseconds)</td>
<td>In milliseconds. How long before the line starts to fade out</td>
</tr>
<tr>
<td>fadingTime</td>
<td>Integer (default 500 milliseconds)</td>
<td>In milliseconds. How long the line should be fading.</td>
</tr>
| Attribute | Type | Description |
Events
You can add three different type of events for the ViewPager:
pageChange, will trigger each time the page was changed. Parameters returned from event: to, from
pager.addEventListener("pageChange", funtion (e) {
Ti.API.debug("Page changed from " + e.from + " to " + e.to);
});
pageScroll, will spam you with information about the page currently being scrolled: Parameters returned: page, offset, offsetPx
pager.addEventListener("pageScroll", function (e) {
Ti.API.debug("Scrolling page " + e.page + " offset: " + e.offset + ", offset in pixels: " + e.offsetPx);
});
pageState, the state of the page being scrolled Parameters returned: page, state, stateString
pager.addEventListener("pageState", function (e) {
Ti.API.debug("Page " + e.page + " has state " + e.state + " = " + e.stateString);
});
state can be any of the contants:
STATE_IDLE, STATE_DRAGGING, STATE_SETTLING
stateString is just a string representation of the state: idle, dragging and settling
Constants
For tab styles: NONE, NORMAL, SCROLLING and MARKET
For indicator style: LINE (more coming...)
For "pageState" event: STATE_IDLE, STATE_DRAGGING, STATE_SETTLING
Usage
See the demo project at github