ZenBrains

En muchos foros y blog, se ve gente que pregunta si hay algún control en Xcode que nos permita dar puntuaciones del estilo de las cinco estrellitas que se ve por iTunes, iPhone, iPod y demás. En su día, yo mismo recurrí a Google para ver si encontraba uno, pero a parte de algunas explicaciones de como montarlo, algunas usando un slider del Xcode, con vistas o la clase UIControl, nadie daba nada.

Finalmente decidí montarme uno yo mismo, y hoy os lo traigo, modificado, para que podáis añadirlo fácilmente a vuestro proyecto y usarlo en cualquier vista dentro de vuestra aplicación. Al final del artículo, en el que explico como funciona y como usarlo, encontrareis el link para descargarlo.

Funcionamiento
Personalmente me decanté por usar una vista normal, UIView, para implementar mi “rating control”, el porqué es muy simple, aunque hay una clase especialmente pensada para controles, UIControl, no vamos a hacer grandes maravillas, lo único que nos interesa es que mientras el usuario desplaza el dedo por nuestro sistema de puntuación, se vayan iluminando las estrellas pertinentes.
Para ello uso un UIViewController, que se encarga de crear la vista, añadir el número de iconos necesarios, por norma 5 y seguir la interactuación del usuario para detectar cuando pulsa un icono en concreto, o desplaza el dedo de uno a otro, para mostrar el rating pertinente. De esta manera conseguimos una buena fluidez y el mismo efecto que cuando se usa el rating del iPod, iPhone o iTunes.

No entraré en detalla en el código en si, ya que los interesados disponen de los archivos, más abajo, para curiosear, pero intentaré dar los detalles suficientes para que sea fácil usar esta clase en vuestra aplicación.

Aquí tenéis el contenido de la cabecera de la clase RatingViewController:

//
//  RatingViewController.h
//
//  Created by www.zenbrains.com on 5/13/10.
//  Copyright 2010 Zenbrains. All rights reserved.
//
 
#import <UIKit/UIKit.h>
 
 
@interface RatingViewController : UIViewController {
 
	// Property to acces the rate given by the user
	NSInteger rate;
 
	// Arrays to store the names of the images for the icons, when active and unactive
	// initialize through the designates initializer
	NSArray *ratedIcons;
	NSArray *unratedIcons;
 
	// Instances to set up the aspect of the rating view
	// initialize through the designates initializer
	NSInteger numberOfRates;
	NSInteger ratingViewWidth;
	NSInteger ratingViewHeigth;
	NSInteger ratingIconWidth;
}
 
@property NSInteger rate;
 
// The designated initializer.
- (id)initWithRates:(NSInteger)numRates viewWidth:(NSInteger)viewWidth viewHeight:(NSInteger)viewHeight 
		  iconWidth:(NSInteger)iconWidth ratedIcons:(NSArray*)ratIcons unratedIcons:(NSArray*)unratIcons;
// To move the rating view where you want
- (void)locateRatingViewAtPoint:(CGPoint)point;
// To set the initial rate for the view in case you have a rate stored
- (void)setRate:(int)rate;
 
// You shouldn't need to call this one 
- (void)updateRatingViewWithLocation:(CGPoint)touchPosition;
 
@end

Sobre las variables, los comentarios explican para que se usa cada cosa, solo comentaros algo sobre el rate:

rate, a través de esta propiedad es como se accede al valor actual del rating, esta pensado para valores enteros de 1 a 5 (normalmente) dejando el 0 libre para cuando no tenemos aun una puntuación.

En cuanto a los métodos, también se explican por si solos, solo comentaros que con el initWithRates:viewWidth:viewHeight:iconWidth:ratedIcons:unratedIcons: es con el que se inicializan todas las variables anteriores a los valores que nos interesan, si usáis el típico initWithNibName:bundle: para inicializar esta clase, se usarán unos valores dados por defecto dentro del RatingViewController.m, pero la vista quedará situada en la esquina superior izquierda, luego podéis moverla con el método locateRatingViewAtPoint:.

Daros cuenta de que se ha sobrescrito el método setRate: para que no solo le de el valor a la variable rate sino para que actualice también, el aspecto de los iconos en la vista.

Como usarlo en vuestra aplicación

Bien, una vez ya sabemos cómo funciona, solo queda dar un ejemplo de como usarlo en vuestra aplicación. En el zip de más abajo se incluyen los archivos RatingViewController.h y .m, junto con un set de imágenes que son las que se usan por defecto al llamar el initWithNibName:bundle:. Incluir todos estos archivos a vuestro proyecto. Ahora, desde cualquier otra clase podéis incluir esta vista, por ejemplo desde el viewDidLoad de vuestra vista principal.

- (void)viewDidLoad {
    [super viewDidLoad];
 
	// 3 rates stars
	NSArray *anArray = [NSArray arrayWithObjects:@"starFL.png",@"starFC.png",@"starFR.png",nil];
	NSArray *otherArray = [NSArray arrayWithObjects:@"starEL.png",@"starEC.png",@"starER.png",nil];
	ratingViewController = [[RatingViewController alloc] initWithRates:3 viewWidth:90 viewHeight:30 iconWidth:30 ratedIcons:anArray unratedIcons:otherArray];
	[ratingViewController locateRatingViewAtPoint:CGPointMake(10, 50)];
	[ratingViewController setRate:1];
 
	// 5 rates stars
	anArray = [NSArray arrayWithObjects:@"starFL.png",@"starFC.png",@"starFC.png",@"starFC.png",@"starFR.png",nil];
	otherArray = [NSArray arrayWithObjects:@"starEL.png",@"starEC.png",@"starEC.png",@"starEC.png",@"starER.png",nil];
	RatingViewController *rateViewA= [[RatingViewController alloc] initWithRates:5 viewWidth:300 viewHeight:60 iconWidth:60 ratedIcons:anArray unratedIcons:otherArray];
	[rateViewA locateRatingViewAtPoint:CGPointMake(10, 110)];
	[rateViewA setRate:3];
 
	// 6 rates leafs
	anArray = [NSArray arrayWithObjects:@"leafR.png",@"leafB.png",@"leafY.png",@"leafYG.png",@"leafG.png",@"leafG.png",nil];
	otherArray = [NSArray arrayWithObjects:@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",nil];
	RatingViewController *rateViewB = [[RatingViewController alloc] initWithRates:6 viewWidth:240 viewHeight:40	iconWidth:40 ratedIcons:anArray unratedIcons:otherArray];
	[rateViewB locateRatingViewAtPoint:CGPointMake(10, 210)];
	[rateViewB setRate:30];
 
	// 10 rates leafs
	anArray = [NSArray arrayWithObjects:@"leafR.png",@"leafB.png",@"leafY.png",@"leafYG.png",@"leafG.png",@"leafR.png",
			   @"leafB.png",@"leafY.png",@"leafYG.png",@"leafG.png",nil];
	otherArray = [NSArray arrayWithObjects:@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",
				  @"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",@"leafE.png",nil];
	RatingViewController *rateViewC = [[RatingViewController alloc] initWithRates:10 viewWidth:300 viewHeight:30 iconWidth:30 ratedIcons:anArray unratedIcons:otherArray];
	[rateViewC locateRatingViewAtPoint:CGPointMake(10, 310)];
	[rateViewC setRate:-5];
 
	[[self view] addSubview:[ratingViewController view]];
	[[self view] addSubview:[rateViewA view]];
	[[self view] addSubview:[rateViewB view]];
	[[self view] addSubview:[rateViewC view]];
 
}

En este ejemplo estoy añadiendo cuatro “rating views” a mi vista, normalmente solo usareis uno, para mostrar lo que se puede hacer con esta clase, crear vuestros propios iconos, calcular como ha de ser de grande la vista (podéis usar Interface Builder para encontrar los pixeles) y solo tenéis que crear un objeto de esta clase, inicializarlo y ponerlo donde queráis. Con el código anterior obtenemos lo siguiente

Bueno, espero que os sea de utilidad y podáis usar esta vista en vuestras aplicaciones, sentiros libres de usar el código con o sin modificaciones, pero si tenéis un hueco en el código o los créditos de vuestra aplicación, siempre podéis mencionar nuestro nombre como agradecimiento.

Aquí os dejo los archivos. RatingViewController