Tutorial SDK iphone/ipad: UITextField

Para dar las gracias debes entrar o registrarte en el foro

iMiembro 2G
iMiembro 2G
Mensajes: 36 Agradecido: 5
07 Oct 2010, 12:55# 1

El UITextField es probablemente uno de los UI Controls que más se usan en iPhone.
Es el primer método de Introducción de información vía teclado por el usuario y contiene una gran funcionalidad adicional.

Aquí os muestro los atributos más importantes de este control

Atributos de Texto

Los atributos tienen que ver con el texto que se introduce dentro del control UITextField.

-text El texto que se muestra en la caja de UITextField.
-placeholder El texto que se mostrará en la caja de texto antes de que el usuario introduzca cualquier cosa. Este texto está normalmente con un color más claro, el cual denota que puede ser reemplazado.
-font La fuente del texto que se muestra en la caja.
-textColor El color del texto a mostrar
-textAlignment Como el texto es alineado en el UITextField. Los posibles valores son: UITextAlignmentLeft, UITextAlignmentRight, UITextAlignmentCenter

Algunos ejemplos del uso de estas propiedades.
// Asignar Texto: la propiedad text
[miCampoTexto setText:@"Esto es un ejemplo!"];

// Asignar placeholder
[miCampoTexto setPlaceholder:@"Escriba el texto aquí"];

// asignando el tipo de letra: propiedad Font, fontWithName es el nombre de la fuente a usar, size es el tamaño de la fuente.
[miCampoTexto setFont:[UIFont fontWithName:@"Times New Roman" size:14]];

// Asignando el color del Texto, asignamos el color Azul, enlazando con la clase UiColor
[miCampoTexto setTextColor:[UIColor blueColor]];

// Asignamos la alineación del texto, en este caso Centrado

[miCampoTexto setTextAlignment:UITextAlignmentCenter];

Así es como nos queda cuando actualizamos dichas propiedades.




Ajustando el tamaño del texto en UITextField

El texto mostrado en nuestro UITextField puede dinámicamente redimensionado basándonos en el ancho (Width) del UITextField. El beneficio de esto es que todo el texto escrito será visible en la pantalla. Vamos a reducir el texto hasta que llegue al tamaño de fuente de 17. Para que eso tenga sentido se tiene que asignar el tamaño de fuente del UITextField a un número superior a 17.

-adjustsFontSizeToFitWidth Valor Booleano que ajusta el tamaño de la fuente al ancho de la caja de texto UITextField.

Aquí un ejemplo
[miCampoTexto setFont:[UIFont fontWithName:@"Times New Roman" size:30]];
[miCampoTexto setAdjustsFontSizeToFitWidth:YES];


Controlando el acceso a la edición de la caja de texto

editing Booleano de solo-lectura que te informa si el usuario está actualmente editando el UITextField
clearsOnBeginEditing Limpia el texto del campo cada vez que el usuario comienza a editarlo.

Asignar la apariencia de fondo (background)

Este grupo de propiedades define como el UITextField se va a mostrar.

borderStyle Define el tipo de bore del UITextField.Los posibles valores son : UITextBorderStyleNone, UITextBorderStyleLine, UITextBorderStyleBezel, and UITextBorderStyleRoundedRect.
Por defecto está UITextBorderStyleNone.

background Un UIImage representado por una imagen de fondo en el UITextField. Si este campo se modifica la propiedad borderStyle se ignora..
backgroundDisabled La imagen de fondo que se mostrará si el UITextField está desactivado.

Algunos ejemplos de tipos de borde
// Sin estilo de borde
[miCampoTexto setBorderStyle:UITextBorderStyleNone];

// Estilo de Borde con una Línea
[miCampoTexto setBorderStyle:UITextBorderStyleLine];

// Estilo de borde Bezel
[miCampoTexto setBorderStyle:UITextBorderStyleBezel];

// Estilo de borde Redondeado
[miCampoTexto setBorderStyle:UITextBorderStyleRoundedRect];

El estilo de Borde no es que sea algo excitante. No obstante podemos darle más vida usando la propiedad background. Aquí va un ejemplo de asignar una imagen al fondo de la caja de texto.

miCampoTexto.textAlignment = UITextAlignmentCenter;
miCampoTexto.textColor = [UIColor whiteColor];
myCampoTexto.borderStyle = UITextBorderStyleNone;
miCampoTexto.background = [UIImage imageNamed:@"imagenbonita.png"];
y el resultado ya es mucho más bonito. Por último saber que para que la propiedad background funcione bien, la propiedad borderStyle tiene que tener cualquier estilo que no sea UITextBorderStyleRoundedRect.


Cambiando la vista superpuesta de la caja de texto
Otras formas interesantes de customizar tú UITextFields es usar una Superposición o capa. UITextField ofrece una superposición a la izquierda y derecha para tus cajas de texto. Aquí están las propiedades:
clearButtonMode El círculo que se muestra X al escribir. Se utiliza para borrar el texto. Los valores posibles: UITextFieldViewModeNever, UITextFieldViewModeWhileEditing, UITextFieldViewModeUnlessEditing, UITextFieldViewModeAlways
leftView La opinión de que aparece a la izquierda dentro de un UITextField. Esto podría ser algo así como una lente de aumento para la búsqueda.
leftViewMode Funciona como un clearButtonMode (ni puta idea de que es)
rightView Lo mismo que leftView solo que se alinea a la derecha.
rightViewMode Lo mismo que leftViewMode pero controla la Vista derecha.

Mejor mirar un ejemplo para entenderlo:

// Inicializamos el objecto miVista(objeto de tipo Imagen UIImageView) con la imagen xxx.png
UIImageView * miVista= [[ UIImageView alloc ] initWithImage :
[UIImage imageNamed : @"xxx.png" ]];
// Le indicamos que quiero que la imagen se muestre en la parte izquierda con el setLeftView
[miCampoTexto setLeftView :miVista];
[ myCampoTexto setLeftViewMode: UITextFieldViewModeAlways];
// Liberamos de la memoria el objeto miVista
[miVista release ];

Como se puede ver, el texto se alinea después de la imagen. Vamos es una manera fácil de mejorar la caja de texto.

La última cosa que vamos a discutir es como mostrar y ocultar el teclado en el momento que nos situamos en la caja de texto. Si en algun momento habeis intentado realizar algun pinito os habreis dado cuenta que el teclado no se oculta automaticamente.

Mostrando y ocultando el Teclado
Para mostrar el teclado:
[miCampoTexto becomeFirstResponder];
Para ocultar el teclado:
[miCampoTexto resignFirstResponder];

A cascarla.

Espero que os ayude esta mini guia. También comentaros que cualquier comentario sera bienvenido.

P.d.: Esta información la he sacado hace tiempo de alguna web extranjera, y me dedique a traducir y a entender todo el proceso para que se pueda entender facilmente. :playa:

Saludos.

Gracias  
3 personas han dado las gracias: ferjuarez88KogamaroAkuario
Etiquetado en:
iMiembro Pro 5G
iMiembro Pro 5G
Mensajes: 2329 Agradecido: 1728
07 Oct 2010, 12:58# 2

si te soy sincero no se para lo que es, pero tanto curro merece un agradecimiento
muchas gracias

-------------------------------------------------------
"Al final todo sale bien y si no sale bien es que no es el final."
--------------------------------------------------------
Normas ipad foros
--------------------------------------------------------
Gracias  
iMiembro 2G
iMiembro 2G
Mensajes: 36 Agradecido: 5
07 Oct 2010, 13:30# 3
tioma escribió:si te soy sincero no se para lo que es, pero tanto curro merece un agradecimiento
muchas gracias


:cunao:

Bueno Sabes que en el iphone o ipad tienes Cajas de texto donde escribes, a eso a nivel de programación se le llama un control UITextField y lo que pretendo explicar son los diferentes metodos y propiedades principales de dicho control.

te muestro una imagen de lo que serian las cajas de texto

Imagen


Espero haberte ayudado.

Saludos.
Gracias  

Publicidad
Publicidad