/Ti.FlipView

Primary LanguageObjective-CMIT LicenseMIT

Ti.FlipView

This module attempts to combine two seperate modules for iOS and Android into one. It is not yet working cross-plattform. Please do not use in production.

About

This is the Titanium version of Mpospese/mpflipviewcontroller for iOS and a fork of the Android version of Manu's TiAndroidFlip

Currently we have different API for both platform. Please look into to platform folders.

USAGE

var win = Ti.UI.createWindow({
win.open();
var flipView = require('ti.flipview').createView({
    pages : [0,1,2,3,4,5,6,7,8].map.function() {return Ti.Ui.createView({}}
);
win.add(flipView);

Properties:

  • flipView.numberOfPages (read only)
  • startPage,
  • transitionOrientation,
  • transitionDuration,
  • tapRecognitionMargin,
  • swipeThreshold,
  • swipeEscapeVelocity,
  • bounceRatio
  • rubberBandRatio

Events (ioS):

flipView.addEventListener('change', function(e) { 
console.log('Current page index is ' + e.source.currentPage);
});

Methods after creating (iOS):

  • flipView.insertPageAfter(index,view);
  • flipView.insertPageBefore(index,view)
  • flipView.appendPage(view);
  • flipView.deletePage(index);
  • flipView.bounceForward();
  • flipView.bounceBackward();
  • changeCurrentPage();

Crossplatform

For using in both platforms currently you can use this javascript wrapper:

var FlipModule = require('ti.flipview');
module.exports = function() {
    var options = arguments[0] || {};
    var total = options.pages.length;
    var self = FlipModule.createFlipView({
        // Android:
        orientation : FlipModule.ORIENTATION_HORIZONTAL,
        overFlipMode : FlipModule.OVERFLIPMODE_GLOW,
        views : options.pages,
        currentPage : (options.startPage) ? options.startPage : 0,
        total : total
        startPage : (options.startPage) ? options.startPage : undefined,
        transitionDuration : 0.4,
        // iOS:
        pages : options.pages,
        tapRecognitionMargin : 1,
        swipeThreshold : 120,
        swipeEscapeVelocity: 650,
        bounceRatio: 0.3,  // default 0.3
        rubberBandRatio: 0.6666, // default 0.6666
    });
    self.addEventListener('flipped', function(_e) { // Android
        options && options.onflipend({
            current : _e.index,
            pagecount : total,
        });
    });
    self.addEventListener('change', function(_e) { // iOS
        options.onflipend && options.onflipend({
            current : _e.source.currentPage,
            pagecount : total
        });
    });
    return self;
};

In the future the API wil be the same syntax