UIAlertView - UISwitch - UIPickerView - UIDatePicker - UISlider - UISegmentedControl

(contenido parcial, pendiente de finalizar)

 UIAlertView 

Ver: más información acerca de UIViewAlert

Ejemplo de inicializar un UIAlertView:

UIAlertView *infUsuario= [[UIAlertView alloc] initWithTitle:@"Título Alerta"
message:@"Mensaje a mostrar al usuario"
delegate:nil
cancelButtonTitle:@"Cancelar"
otherButtonTitle:@"Aceptar", nil];

Mostrar la alerta mediante el método show  de UIAlertView:

[infUsuario show]; 


Los UIAlertView pueden aplicarse alguno de los siguientes estilos, en la propiedad alertViewStyle de tipo UIAlertViewStyle.

• UIAlertViewStyleDefault
• UIAlertViewStyleSecureTextInput
• UIAlertViewStylePlainTextInput
• UIAlertViewStyleLoginAndPasswordInput

El método setAlertViewStyle establece el estilo. 

[infoUsuario setAlertViewStyle:UIAlertViewStylePlainTextInput];



Para obtener la respuesta del usuario cuando interactua con el UIAlertView el UIViewController debe implementar el protocolo UIAlertViewDelegate, y el delegate del alert apuntar a self.

El método alertView:clickedButtonAtIndex es llamado inmediatamente después de que el usuario pulsa un botón del Alert View.

// El delegate es asingnado en este caso.

UIAlertView *infUsuario= [[UIAlertView alloc] initWithTitle:@"Título Alerta"
message:@"Mensaje a mostrar al usuario"
delegate:self  // el delegate apunta al UIViewController que lo contiene
cancelButtonTitle:@"Cancelar"
otherButtonTitle:@"Aceptar", nil];

// El método que obtiene la opción seleccionada del usuario

- (void) alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger) buttonIndex{

  NSString *tituloBtnPulsado = [alertView buttonTittleAtIndex:buttonIndex];

  if([tituloBtnPulsado isEqualToString:@"Aceptar"]){
       // ha pulsado boton acceptar
  } 
  else if([tituloBtnPulsado isEqualToString:@"Cancelar"])
  {
       // ha pulsado el botón cancelar
   }

}

 UISwitch 

UISwitch permite mostrar opción on/off, yes/no al interfaz de usuario.

Ejemplo de inicializar un UISwitch:

UISwitch *indicador = [[UISwich alloc] 

initWithFrame:CGRectMake(50,50,0,0)];

Por defecto muestra el estado off.

Para cambiar a estado on llamar al método setOn.

[indicador setOn:YES];

Para obtener la opción seleccionada del usuario hay que utilizar el addTarget:action:forControlEvents.

Ejemplo para captar la acción del usuario:

[indicador addTarget:self 

action:@selector(indicadorSeleccionado:)

forControlEvents:UIControlEventValueChanged];

- (void) indicadorSeleccionado:(UISwitch *)paramSender{

  if([paramSender isOn]){
    // el indicador está on
  }else{
    // el indicador está off
  }

}


Para cambiar el aspecto de un control UISwitch hay que actuar sobre las propiedades que afectan a las imagenes y al color del UISwitch.


En el caso de las imágenes.

• On Image, que representa el estado On. Ancho 77p, alto 22 p.
• Off Image, que representa el estado Off. Ancho 77p, alto 22 p.

En en caso del color.

• tintColor, es el color aplicado al estado Off.
• thumbTintColor, es el color aplicado al botón del UISwitch.
• onTintColor, es el color aplicado al estado On. 

Ejemplo para cambiar el color y la imagen del UISwitch:

UISwitch *indicador = [[UISwich alloc] 

initWithFrame:CGRectMake(50,50,0,0)];

indicador.tintColor = [UIColor redColor];

indicador.onTintColor = [UIColor brownColor];

indicador.thumbTintColor = [UIColor greenColor];

indicador.onImage = [UIImage imageNamed:@"imagenOn"];

indicador.offImage = [UIImage imageNamed:@"imagenOff"];

 UIPickerView 

Ver: más información acerca de UIPickerView


Es necesario implementar el protocolo UIPickerViewDataSource protocolo para informar al UIPickerView de los elementos a mostrar.

@interface ContendorViewController : 

UIViewController <UIPickerViewDataSource>

@property (nonatomic, strong) UIPickerView *seleccioneElemento;


En el método viewDidLoad 

self.seleccioneElemento = [[UIPickerView alloc] init];
self.seleccioneElemento.dataSource = self;
self.seleccioneElemento.center = self.view.center;

[self.view addSubview:self.seleccioneElemento];


Los métodos del protocolo UIPickerViewDataSource a implementar son numberOfComponentsInPickerView, y numberOfRowsInComponent.

- (NSInteger) numberOfComponentsInPickerView:(UIPickerView *)pickerView{

  NSInteger result = 0;

  if([pickerView isEqual:self.seleccioneElemento]){
     result = 1;
  }

  return result;
}

- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{

  NSInteger result = 0;

  if([pickerView isEqual:self.seleccioneElemento]){
     result = 5;
  }

  return result;
}


Ahora que tenemos el valor del número de lineas y de componentes (columnas) tenemos que implementar el método view:titleForRow:forComponent del protocolo UIPickerViewDelegate.


Si en el viewDidLoad rellenamos el array de elementos:


- (void) viewDidLoad {
  
 NSArray *enNumero = [[NSArray alloc]

 initWithObjects:@"1",@"2",@"3",nil];

 NSArray *enLetra = [[NSArray alloc] 

initWithObjects:@"uno",@"dos",@"tres",nil];

 [super viewDidLoad];
}


// Número de componentes 2, el array de enNumero y la de enLetra

- (NSInteger) numberOFComponentsInPickerView(UIPickerView *) pickerView{
  return 2;
}

// El número de filas para cada columna

- (NSInteger) pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{

  if(component == 0){ // para la primera columna el array de numeros

     return [enNumero count];

  }else{

     // la segunda columna tantas líneas como el tamaño del array enLetra
     return [enLetra count]; 

  }

}


// Para rellenarlo con el valor de los arrays


- (NSInteger) pickerView:(UIPickerView *)pickerView 
titleForRow:(NSInteger) row
forComponent:(NSInteger) component {

  if(component == 0){

    // para la primera columna valores del array  enNumero

     return [enNumero objectAtIndex:row];

  }else{

     // para la segunda columna valores del array enLetra

     return [enLetra objectAtIndex:row];

  }

}


Ahora nos toca conocer el elemento seleccionado.
Por defecto el indicador del UIPickerView no se visualiza. Para visualizarlo:

self.seleccioneElemento.showsSelectionIndicator = YES;

Implementamos el método selectedRowInComponent de UIPickerView.

- (void) pickerView:(UIPickerView *)pickerView 
didSelectedRow:(NSInteger) row
inComponent:(NSInteger) component {

NSString *valorNumero;
NSString *valorLetra;

  if(component == 0){

    // de la selección obtengo la columna de los números
       valorNumero = [enNumero objectAtIndex:row];

  }else{

    // de la selección obtengo la columna de las letras
       valorLetra = [enLetra objectAtIndex:row];     

  }


}

 UIDatePicker 

UIDatePicker permite al usuario seleccionar una fecha y hora de forma intuitiva.

Ejemplo para inicializar un UIDatePicker:

UIDatePicker *selectorFecha = [[UIDatePicker alloc] init]; 

Por defecto muestra la fecha actual. 

La propiedad datePickerMode permite establecer el tipo UIDatePickerMode.

• UIDatePickerModeTime
• UIDatePickerModeDate
• UIDatePickerModeDateAndTime
• UIDatePickerModeCountDownTimer

Para obtener la fecha seleccionada:

NSDate *fechaSeleccionada = selectorFecha.date;

UIDatePicker puede indicar cuando se ha cambiado de fecha utilizando el método addTarget:action:forControlEvents:.

Ejemplo para declarar un selector de un UIDatePicker:

- (void) viewDidLoad {

 [super viewDidLoad];

 UIDatePicker *selectorFecha = [[UIDatePicker alloc] init]; 

 selectorFecha.center = self.view.center;

 selectorFecha.datePickerMode = UIDatePickerModeDate;

 [self.view addSubview:selectorFecha];

 [selector addTarget:self

 action:@selector(cambioFecha:)

 forControlEvents:UIControlEventValueChanged];

}

// El método selector declarado

- (void) cambioFecha:(UIDatePicker *)paramDatePicker {

  NSLog(@"Fecha seleccionada = %@", paramDatePicker.date);

}

UIDatePicker permite establece una fecha mínima y máxima para limitar al usuario un margen de fechas.


Ejemplo para determinar la fecha mínima y maxima en un UIDatePicker:

 UIDatePicker *selectorFecha = [[UIDatePicker alloc] init]; 

 selectorFecha.center = self.view.center;

 selectorFecha.datePickerMode = UIDatePickerModeDate;

 NSTimeInteval intervaloAnual = ( 24 * 60 * 60 ) * 365;
 NSDate *minimaFecha = [NDate date];

 [minimaFecha dateByAddingTimeInterval:intervaloAnual];

 NSDate *maximaFecha =

 [[NSDate date] dateByAddingTimeInter: 2 * intervaloAnual];

 selectorFecha.minimumFecha = minimaFecha;

 selectorFecha.maximaFecha = maximaFecha;

 UISlider 

UISlider permite especificar un rango de valores.

Ejemplo para instanciar un UISlider estableciendo un valor mínimo y máximo:

- (void) viewDidLoad{

[super viewDidLoad];

UISlider *valorNumerico = [[UISlider alloc]

initWhitFrame:CGRectMake(5.0f, 5.0f, 220.0f, 30.0f)];

valorNumerico.minimumValue = 0.0f;
valorNumerico.maximumValue = 80.0f;

valorNumerico.value = 10.0f; // estableciendo un valor inicial

[self.view addSubview:valorNumerico];

}


Para capturar la interacción del usuario indicar el método addTarget:action:forControlEvents:.


[valorNumerico addTarget:self

action:@selector(seleccionValorNumerico:)

forControlEvents:UIControlEventValueChanged];

// el selector seleccionValorNumerico

- (void) seleccionValorNumerico:(UISlider *)paramSender{

    NSLog(@"Se ha seleccionado %f, paramSender.value);

}

Para evitar que continuamente se llame a este selector cuando la imagen del UISlider está desplazandose y que solo se llame cuando finalice la selección.

valorNumerico.continuous = NO;



Para cambiar el aspecto de UISlider, es posible asignar una imagen al desplazador según el estado, normal o cuando el usuario está desplazando la imagen para seleccionar un valor. 

• UIControlStateNormal
• UIControlStateHighlilghted

Ejemplo para asignar imagen según el estado:

[valorNumerico setThumbImage:[UIImage imageNamed:@"verde.png"] forState:UIControlStateNormal];

[valorNumerico setThumbImage:[UIImage imageNamed:@"rojo.png"] forState:UIControlStateHighlighted];

Además de modificar la imagen también es posible modificar el color de las distintas partes el UISlider. 

Propiedades para aplicar el tintColor:

• minimumTrackTintColor, se aplica a la zona del valor mínimo.
• thumbTintColor, se aplica a la zona de indicador de desplazamiento.
• maximumTrckTintColor, se aplica a la zona del valor máximo.

Ejemplo para asignar el tintColor:

valorNumerico.minimumTrackTintColor = [UIColor blueColor];
valorNumerico.thumbTintColor = [UIColor greenColor];
valorNumerico.maximumTrackTintColor = [UIColor yellowColor];


Además es posible asignar imágenes que aparecerán en el lado del valor mínimo y al lado del valor máximo. Las imágenes tienen que ser de un tamaño 23 x 23.

Métodos para asignar esas imágenes:

• setMaximumValueImage:forState
• setMinimumValueImage:forState

[valorNumerico setMaximumValueImage:

[UIImage imagenNamed:@"sol.png"]];

[valorNumerico setMinimumValueImage:

[UIImage imagenNamed:@"luna.png"]];

 UISegmentedControl 

UISegmentedControl permite selección una opción de forma rápida, en un conjunto de pocas opciones.

Ejemplo para instanciar un UISegmentedControl:

- (void) viewDidLoad {

[super viewDidLoad];

NSArray *diasSemana = [[NSArray alloc] initWithObjects:
@"lunes", @"martes", @"miercoles", @"jueves", @"viernes", nil]];

UISegmentedControl *peticionControl =

 [[UISegmentedControl alloc]

initWhitItems:diasSemana];

peticionControl.center = self.view.center;

[self.view addSubview:peticionControl];

}

Para capturar la selección del usuario el método addTarget:action:forControlEvents:

[peticionControl addTarget:self

action:@selector(diaSeleccionado:)

forControlEvents:UIControlEventValueChanged];

El selector declarado.

- (void) diaSeleccionado(UISegmentedControl *)paramSender{

NSInteger indiceSeleccion = [paramSender selectedSegmentIndex];

NSString *textoDia = 

[paramSender titleForSegmentAtIndex:indiceSeleccion];

}

Estilo asignado a los UISegmentedControl mediante la propiedad segmentedControlStyle. Estilos definidos para UISegmentedControl :

• UISegmentedControlStylePlain
• UISegmentedControlStyleBordered
• UISegmentedControlStyleBar
• UISegmentedControlStyleBezeled

Ejemplo de la propiedad segmentedControlStyle:

peticionControl.segmentedControlStyle = UISegmentedControlStyleBar;


También se puede aplicar un tintColor para cambiar su color.

peticionControl.tintColor = [UIColor redColor];