ZenBrains

Hoy vamos a ver como se pueden crear vistas (UIViews) personalizados.
En muchas ocasiones no tenemos suficiente con los controles que vienen con el UIKit y entonces tenemos que crear nuestros propios controles.
En este artículo vamos a ver un ejemplo muy simple de creación de vistas propias.
Al final del artículo podréis descargar el proyecto de ejemplo donde implementamos nuestra vista personalizada y hacemos uso de ella.
En el ejemplo vamos a intentar crear una barra de progreso simple.
Entonces, vamos a crear una nueva clase que heredará de UIView, la llamaremos “VistaPorcentaje”. Nuestra VistaPorcentaje tendrá dos propiedades: el porcentaje y el color de la barra.
Así queda la declaración de la clase:

#import 
 
@interface VistaPorcentaje : UIView {
	UIColor *barColor;
	CGFloat porcentaje;
}
 
@property (nonatomic, retain)UIColor *barColor;
@property (nonatomic, setter=setPorcentaje)CGFloat porcentaje;
 
-(void)setPorcentaje:(CGFloat)p;
 
@end

Ahora que ya tenemos definida nuestra clase vamos a ver su implementación:

#import "VistaPorcentaje.h"
 
@implementation VistaPorcentaje
@synthesize barColor, porcentaje;
 
- (id)initWithFrame:(CGRect)frame {
    if ((self = [super initWithFrame:frame])) {
		self.barColor = [UIColor greenColor];
		self.porcentaje = 0.0;
 
    }
    return self;
}
 
- (void)drawRect:(CGRect)rect {
   CGContextRef context = UIGraphicsGetCurrentContext();
    context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, self.barColor.CGColor);
 
	//Calculamos el ancho de la barra dependiendo del porcentaje
	CGFloat ancho = self.frame.size.width * porcentaje/100.0;
 
	//Dibujamos la barra del porcentaje
	CGRect r = CGRectMake(0, 0, ancho, self.frame.size.height);
	CGContextAddRect(context, r);
    CGContextFillRect(context, r);
 
}
 
-(void)setPorcentaje:(CGFloat)p{
	porcentaje = p;
	if (porcentaje > 100.0)
		porcentaje = 100.0;
 
	if (porcentaje < 0.0)
		porcentaje = 0.0;
 
	[self setNeedsDisplay];
}
 
- (void)dealloc {
	[barColor release];
	[super dealloc];
}
@end

Aquí los métodos claves son el drawRect y setPorcentaje. Dentro de drawRect implementamos toda la funcionalidad de pintura de nuestra vista. Básciamente en nuestro caso sólo pintamos un rectangulo de un tamaño equivalente al porcentaje respecto al ancho total de la vista.
Y el otro método, setPorcentaje, se llama cada vez que el usuario cambia la propiedad porcentaje. Fijaros que en este método tenemos una llamada [self setNeedsDisplay]. Con esa llamada decismos que se repinte (nunca llamamos directamente a drawRect) ya que se ha cambiado el porcentaje.

A continuación podemos ver un ejemplo de nuestro control (estamos en un view controller):

- (void)viewDidLoad {
    [super viewDidLoad];
 
	VistaPorcentaje *v = [[VistaPorcentaje alloc] initWithFrame:CGRectMake(10, 10, 200, 50)];
	v.backgroundColor = [UIColor whiteColor];
	v.barColor = [UIColor greenColor];
	v.porcentaje = 67.0;
	[self.view addSubview:v];
	[v release];
 
}

A base de este simple ejemplo se puede construir controles propios para mostrar histogramas, crear controles propios que respondan a las acciones de usuario y miles de cosas más.

EjemploVistaPersonalizada