An Alloy Scrollable View that shows an iOS style paging control for android
JavaScript
Latest commit 6c71058 Aug 29, 2016 @jkotchoff committed on GitHub Merge pull request #11 from appwapp/master
reset paging control, in case called again

README.md

Crossplatform ScrollableView widget Titanium Alloy

This widget for the Appcelerator Titanium Alloy MVC framework provides a view that mimics the iOS implementation of the Ti.UI.ScrollableView paging control for the Android platform.

Quick Start

Get it gitTio

Download this repository and consult the Alloy Documentation on how to install it, or simply use the gitTio CLI:

$ gittio install au.jkotchoff.scrollableView

demo

Use it

  • Require the widget in a view:
<Alloy>
  <Window>
    <Widget src="au.jkotchoff.scrollableView">
      <View backgroundColor="orange">
        <Label text="View 1"></Label>
      </View>
      <View backgroundColor="yellow">
        <Label text="View 2"></Label>
      </View>
    </Widget>
  </Window>
</Alloy>
  • Or retrieve the images on run time:
<Alloy>
  <Window>
    <Widget id="sView" src="au.jkotchoff.scrollableView" height="200" />
  </Window>
</Alloy>
function setImagesToScrollableView(name) {
    var views = [];
    _.each(name, function(item) {
        var img = Ti.UI.createImageView({
            image: '/images/' + item + '.jpg',
            width: Ti.UI.FILL
        });
        views.push(img);
    });

    $.sView.setViews(views);
}

setImagesToScrollableView(['1', '2', '3']);

Style the ScrollableView

You can change some default values for the widget, like the image used as the paging button indicator or the paging control background color. Those are the possible parameters you can change while initializing the widget:

Parameter Type Description
pagingControlBackgroundColor color Any valid color, including transparent.
pagingControlDotImage image file To change the default black button indicator, set here your own image.
pagingControlBelow boolean By default, the paging control is set over the images. You can set this value to true to set it below the images (note: the images will shrink their height 20dp from the total height of the widget control).

Example for paging control inline/below the images: example1 example2

Methods

Method Description
setViews(views[]) Array with all the views to show
setCurrentPage(number) Jump to the specified page
setHeight(value) You can set initial height as property and modify it later with this method (e.g. you retrieve images from a remote server and you don't know if there are images, so you can setHeight(0))
moveNext() Goes to next page
movePrevious() Goes to previous page
getCurrentPage() Get current page index
getTotalPages() Get total number of page

Event listeners

The listeners of ScrollableView can be set both, in the View as in the Controller.

  • Example in View:
<Alloy>
  <Window>
    <Widget id="scrollableView" src="au.jkotchoff.scrollableView" onScroll="onScrollEvent">
      <View backgroundColor="orange">
        <Label text="View 1"></Label>
      </View>
      <View backgroundColor="yellow">
        <Label text="View 2"></Label>
      </View>
    </Widget>
  </Window>
</Alloy>
  • Or in Controller:
$.scrollableView.addEventListener("scroll", function() {
  \\ your code here
});

Changelog

  • 1.0 Initial version
  • 1.1 Add setView method & enable event listeners
  • 1.2 Add support to receive a custom paging control image
  • 1.3 Add setHeight method & support for pagingControl below the images

Licenses

This project is licensed under the Apache Public License (Version 2). Please see the LICENSE.txt file for the full license.