Ads

Thursday, August 29, 2013

RatingBar Module - Android

RatingBar is an extension that shows a rating in stars. The user can touch/drag to set the rating when using RatingBar.

This module converts native Android RatingBar widget to Titanium component.

Features:
  • Touch/Drag Rating
    User can touch/drag to set the rating when using RatingBar.
  • Number of stars
    User can customize no of stars (or rating items) in RatingBar using using setStars method.
  • stepSize
    User can sets the step size (granularity) of this RatingBar
  • setIsIndicator
    User can sets whether this rating bar is an indicator (and non-changeable by the user).
Using Custom Resources:
If you want to use custom resource in your App you can override default resource. For that you have to place your custom resource inside app_root/platform/android/res or app_root/modules/android/titutorial.ratingbar/0.1/platform/android/res in the same name.

For example, if you want to override star_on image you have to override your custom image with the same name star_on.png

Usage:
var win = Ti.UI.createWindow({
 backgroundColor:'#fff',
 layout : 'vertical'
});

var ratingbar = require('titutorial.ratingbar');

var setRatingButton = Ti.UI.createButton({
 title : 'Set rating 6',
 height : '40dp',
 width : Ti.UI.SIZE,
 top : '30dp'
});
win.add(setRatingButton);

/*
 * Dynamic rating bar
 */
var ratingBar1 = ratingbar.createRatingBar({
 top : '30dp',
 left:15,
 rating : 2,
 stars : 6,
 stepSize : 1.5,
 isIndicator : false
});
win.add(ratingBar1);

var ratingValue = Ti.UI.createLabel({
 text : 'Rating Value : '+ratingBar1.getRating(),
 color : '#000',
 font : {fontSize:'20dp'},
 height : Ti.UI.SIZE,
 width : Ti.UI.SIZE,
 top : '30dp',
 textAlign : 'center'
});
win.add(ratingValue);

ratingBar1.addEventListener('change', function(e) {
 ratingValue.text = "Rating Value : "+e.rating.toString();
});

/*
 * Static rating bar
 */
var ratingBar2 = ratingbar.createRatingBar({
 top : '30dp',
 left:15,
 rating : 3,
 stars : 5,
 stepSize : 1,
 isIndicator : true
});
win.add(ratingBar2);

setRatingButton.addEventListener('click', function() {
 ratingBar1.setRating(6.0);
});

win.open(); 

Download:
Module: https://marketplace.appcelerator.com/apps/6371?1827333944
Source Code: https://github.com/railskarthi/ratingbar

Screenshot:
Titanium RatingBar Module
 

No comments:

Post a Comment