Aplicación iOS: Trabajar con Selector de componentes múltiples



Este blog trata sobre la creación de una aplicación ios que muestra la conversión de una unidad a otra. Describe el funcionamiento de un selector de componentes múltiples, alertas, etc.

Para obtener una visión completa, lea . Este es el segundo blog de la serie de aplicaciones ios.





Si es un desarrollador experimentado que siente curiosidad por el funcionamiento del selector de componentes múltiples, entonces ha venido al blog correcto. En este blog, hablaré sobre cómo extender nuestra aplicación de conversión con más funcionalidad mediante la implementación de un selector de componentes múltiples, y también cómo realizar un manejo excepcional mediante alertas.

En elúltimo blog,hemos visto eso cuando escribimos algo en el campo de texto, aparece el teclado. El valor a convertir se escribe en el campo de texto y luego vemos que el teclado no desaparece.



Para solucionar este problema tenemos que agregar un botón que cubra toda la vista. Cuando el usuario toca cualquier parte del fondo, el teclado debería desaparecer.

Ahora, sigamos adelante y hagámoslo. Arrastre un botón, establezca el tipo de botón como personalizado y el color del texto como color claro desde el inspector de atributos.

Inspector de atributos



y seleccione Editor> Organizar> Enviar al fondo

y cambie el tamaño del botón de tal manera que se ajuste a la vista completa.

Este botón ahora actúa como un botón invisible de fondo en el que se hace clic para que desaparezca el teclado. Vamos a escribir IBAction para el mismo, seleccione el modo de editor asistente y control + arrastre al ViewController.h. Establezca la Conexión en Acción y el nombre en BackgroundButton y haga clic en conectar.

El código del controlador de vista se ve así ahora.

#importar @interface ViewController: UIViewController @property (fuerte, no atómico) IBOutlet UITextField * ValueTextField @property (fuerte, no atómico) IBOutlet UIPickerView * picker2 @property (fuerte, no atómico) NSArray * datos @property (fuerte *, noLabelabel) - (IBAction) Convertir: (UIButton *) sender - (IBAction) backgroundButton: (id) sender @end

Cambie a ViewController.m y luego escriba el siguiente código.

Java convirtiendo double a int
- (IBAction) backgroundButton: (id) sender {[_ValueTextField resignFirstResponder] [_picker2 resignFirstResponder] [_ResultLabel resignFirstResponder]}

Aquí el código le dice a todos los demás objetos que muestren el estado de primer respondedor cuando se detecta un toque. Ahora, ejecute la aplicación y vea. Podrá encontrar que el teclado desaparece cuando toca el fondo. Ahora para que el teclado funcione cuando haya terminado de escribir, llame al método backgroundButton en el método didselectRow () del selector. Entonces, el código del método será el siguiente.

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) fila enComponent: (NSInteger) componente {selectedValue = _data [fila] [self backgroundButton: 0]}

Ahora, puede trabajar en la parte de embellecimiento de la aplicación, como agregar un fondo y tal vez incluso dar una imagen de botón elegante. Sin embargo, en el mío, estableceré una imagen de fondo.
Para hacer eso, primero encuentre una imagen apropiada ¡duh! Luego agréguelo a la carpeta Images.xcassets y cambie la imagen de pantalla 1x a 2x en universal.

Ejecute la aplicación y vea si funciona bien.

Si cambio el dispositivo a iphone 5s.

Y ejecuta la aplicación.

Aquí podemos ver que todo funciona bien como se esperaba. Ahora, ¿qué pasa si quisiera agregar un fondo a mi botón y hacer que la apariencia sea más como un botón? Para hacer eso, primero agregaría un IBOutlet para el botón de conversión al ViewController.h

@property (fuerte, no atómico) IBOutlet UIButton * convertir

y luego agregue el siguiente código en el método viewDidLoad ()

self.convert.backgroundColor = [UIColor colorWithRed: 0.4 verde: 0.8 azul: 1.0 alpha: 1.0] [_convert setTitleColor: [UIColor whiteColor] forState: UIControlStateNormal]

Ejecutemos nuestra aplicación y veamos si es como nos gusta.

¡Vale genial! Debes haber notado que también cambié las posiciones de la etiqueta de resultado, la razón del cambio es algo que explicaré más adelante.

Sabemos que nuestra aplicación convierte de Celsius a Fahrenheit y viceversa. Entonces, ¿qué tal agregar algunas funciones o unidades más para convertir? Para hacerlo, necesitamos agregar un componente más a UIPickerView que proporcione la selección adecuada, cuando se selecciona una unidad en el primer componente del selector.

Para dividir un selector en dos componentes, necesitamos agregar un nuevo NSArray data2, que contendrá los datos del segundo componente. Además, defina dos constantes que representarán nuestros dos componentes. Aquí, el componente izquierdo se declara 0 y el componente derecho se declara 1 para simplificar la programación.

Su archivo ViewController.h se ve así

#import # define data1comp 0 # define data2comp 1 @interface ViewController: UIViewController @property (fuerte, no atómico) IBOutlet UITextField * ValueTextField @property (fuerte, no atómico) IBOutlet UIPickerView * picker2 @property (fuerte, no atómico) NSArray * fuerte, no atómico) NSArray * data2 @property (fuerte, no atómico) IBOutlet UILabel * ResultLabel @property (fuerte, no atómico) IBOutlet UIButton * convertir - (IBAction) Convertir: (UIButton *) remitente - (IBAction) backgroundButton: (id) remitente @fin

Ahora defina la matriz data2 en el método ViewDidLoad (). Ahora que tenemos ambas fuentes de datos, debemos poder escribir código para el selector de tal manera que cuando seleccionamos un elemento del primer componente del selector, el segundo componente debería cambiarse automáticamente al valor correspondiente. El segundo componente depende de la selección del primero.
Para esto, necesitamos definir un diccionario que almacenará las claves y valores. Las claves contienen los datos correspondientes al primer componente del selector y los valores contienen los datos correspondientes al segundo componente del selector.

- (void) viewDidLoad {[super viewDidLoad] // Realice cualquier configuración adicional después de cargar la vista, normalmente desde una plumilla. _data1 = [NSArray arrayWithObjects: @ 'Celsius', @ 'Fahrenheit', @ 'Meter', @ 'Centímetro', nil] data2 = [NSArray arrayWithObjects: @ 'Centímetro', @ 'Metro', @ 'Fahrenheit', @ 'Celsius', nil] dictionary = [NSDictionary dictionaryWithObjectsAndKeys: @ 'Celcius', @ 'Farenheit', @ 'Farenheit', @ 'Celcius', @ 'Meter', @ 'Centímetro', @ 'Centímetro', @ 'Metro ', nil] self.view.backgroundColor = [UIColor colorWithPatternImage: [UIImage imageNamed: (@' bg2.png ')]]}

Ahora, debemos cambiar la fuente de datos y delegar los métodos del selector actual a lo siguiente, para que tengamos datos completados en ambos componentes.

- (NSInteger) numberOfComponentsInPickerView: (UIPickerView *) pickerView {return 2} - (NSInteger) pickerView: (UIPickerView *) pickerView numberOfRowsInComponent: (NSInteger) componente {if (component == data1comp) {return [self.data1 count]} return [self.data2 count]} - (NSString *) pickerView: (UIPickerView *) pickerView titleForRow: (NSInteger) fila para Componente: (NSInteger) componente {if (componente == data1comp) {return [self.data1 objectAtIndex: fila]} return [self.data2 objectAtIndex: row]} - (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) fila inComponent: (NSInteger) componente {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [dictionary objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animado: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 = fila}}

Aquí, en nuestro método didSelectRow (), obtenemos el valor seleccionado del primer componente, luego lo pasamos como argumento al método objectForKey () del diccionario y obtenemos el valor correspondiente para la clave. Para encontrar la posición correspondiente para el valor en la segunda matriz, es decir, data2, usamos el método indexOfObject () de la matriz y almacenamos el resultado en un valor entero.
Luego pasamos este valor entero al método selector selectRow: fila en el método Component: componente (). Y recargue el componente del selector usando reloadComponent ().
Una vez hecho esto, al seleccionar un elemento del primer componente, se seleccionará el elemento correspondiente en el segundo componente del selector.

El código para didSelectRow ()

- (void) pickerView: (UIPickerView *) pickerView didSelectRow: (NSInteger) fila inComponent: (NSInteger) componente {[self backgroundButton: 0] if (component == data1comp) {NSString * data11 = [_ data1 objectAtIndex: row] NSArray * a = [dictionary objectForKey: data11] secondrow = [self.data2 indexOfObject: a] [_picker2 selectRow: secondrow inComponent: data2comp animado: YES] [_picker2 reloadComponent: data2comp] selectedValue = data11 selectedRow = fila}}

Ahora ejecute la aplicación y vea si el selector funciona como se espera.

¡Voila! ¡funciona!

Así que continuemos codificando nuestro botón de conversión. El selector anterior tenía solo dos valores para coincidir, es decir, Celsius y Fahrenheit, y luego se calculó el resultado. Pero ahora tenemos cuatro valores Celsius, Fahrenheit, Metro y Centímetro. Entonces he usado una declaración de cambio, que calcula el valor en función de la variable de fila seleccionada.

- (IBAction) Convertir: (UIButton *) sender {float val = [_ ValueTextField.text floatValue] NSLog (@ 'value% f', val) switch (selectedRow) {case 0: // Celsius a Fahrenheit res = (val * 1.8) + 32 break case 1: // Fahrenheit a Celsius res = (val-32) /1.8break case 2: // Metro a Centímetro res = val * 100 break case 3: // Centímetro a Metro res = val * 0.01 break predeterminado: res = 0.0} NSString * final = [NSString stringWithFormat: @ '%. 02f', res] _ResultLabel.text = final}

si ejecuta la aplicación, podemos ver que todo funciona bien.

Ahora, podemos verificar las excepciones que pueden ocurrir en nuestra aplicación. Por ejemplo, no hay ningún valor en el cuadro de texto. O estamos tratando de convertir de Celsius a Metro o Centímetro, lo que en realidad no es posible. Este tipo de situaciones se denominan excepciones y debemos evitarlo escribiendo código para manejar dichos errores.

Resolvamos el primer tipo de error que puede ocurrir cuando ejecutamos nuestra aplicación. Es decir, no escribimos nuestro valor para convertir en el campo de texto. Para este escenario, debemos alertar a nuestros usuarios para que ingresen el valor y luego procedan.

Podemos usar UIAlertView para esto. Podemos escribir un método llamado mensaje showAlertWithMessage (NSString *). En este método, podemos declarar un alertView y finalmente mostrarlo usando el método show (). El código del método será el siguiente.

- (void) showAlertWithMessage: (NSString *) mensaje {UIAlertView * alertView = [[UIAlertView alloc] initWithTitle: @ 'Error' mensaje: mensaje delegado: self cancelButtonTitle: nil otherButtonTitles: @ 'Okay', nil] alertView.tag = 100 _ResultLabel.text=@'No Result '[alertView show]}

Ahora bien, este método cuando el usuario hace clic en el botón convertir debe llamarse como conversión. La conversión no debe realizarse sin ingresar el valor. Entonces, en la definición del método para convertir, debemos verificar si la longitud del campo de texto es mayor o igual a cero o no. Si es así, realice la conversión; de lo contrario, muestre la alerta. Por lo tanto, el código del botón de conversión sería como:

fusionar ordenar implementación de c ++
- (IBAction) Convertir: (UIButton *) sender {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { float res=0.0 float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } }

Ahora ejecute la aplicación e intente hacer clic en el botón convertir sin ingresar valores en el campo de texto.

El segundo tipo de excepción que podría ocurrir es si el valor del primer componente no coincide con el valor del segundo componente de UIPickerView. Para esto, verificamos si el valor de la fila del componente seleccionado actual del segundo componente es igual al valor del valor de la fila devuelto por el delegado didSelectRow () del método. Si la condición no coincide, la conversión no es posible y si los valores coinciden, se puede realizar la conversión.

Podemos implementar esta lógica de la siguiente manera,

- (IBAction) Convertir: (UIButton *) sender {if ([_ ValueTextField.text length]<= 0) { [self showAlertWithMessage:@' Please enter the value'] } else { _ResultLabel.textColor= [UIColor blackColor] float res=0.0 NSInteger n =[_picker2 selectedRowInComponent:data2comp] if(n==secondrow) { float val=[_ValueTextField.text floatValue] NSLog(@'value %f',val) switch(selectedRow) { case 0:// Celsius to Fahrenheit res=(val*1.8)+32break case 1: // Fahrenheit to Celsius res=(val-32)/1.8break case 2: // meter to centimeter res= val*100 break case 3://centimeter to meter res=val*0.01 break default: res=0.0 } NSString *final= [NSString stringWithFormat:@'%.02f',res] _ResultLabel.text = final } else { // code for displaying error. _ResultLabel.textColor= [UIColor redColor] _ResultLabel.text = @'Result cannot be calculated' } }

Ahora ejecute la aplicación y vea cambiando el valor en el segundo componente después de hacer la selección en el primer componente.

Puede ver el mensaje de error, que el resultado no se puede calcular. Observará que el mensaje de error se imprimió en la misma etiqueta de resultado y que el mensaje es largo. Por eso, la etiqueta se movió hacia abajo desde la orientación anterior.

Entonces, nuestra aplicación de conversión está completa. Puede agregar más funcionalidad a la aplicación según su elección y hacerla más hermosa de acuerdo con su creatividad.

Tienes una pregunta para nosotros? Menciónalos en la sección de comentarios y nos pondremos en contacto contigo.

Artículos Relacionados: