Controles básicos y controles de selección

Controles básicos y controles de selección

Ezequiel Monsalve

Alberto Paillao

I. Control Button

Botón básico que puede contener un texto simple.

Propiedades principales:

• android:text

• android:background

• android:typeface

• android:textcolor

• android:textSize

I. Control Button. Eventos

El evento que mas se utiliza es el onClick, que se lanza cuando el usuario pulsa el botón. Para ello definimos un nuevo objeto View.OnclickListener() y lo asociamos al botón con el método setOnClickListener().

II. Control ToggleButton

Botón que puede presentarse en dos estados: Pulsado y no pulsado.

Para definir textos distintos en cada estado utilizamos:

• android:textOn

• android:textOff

II. Control ToggleButton. Eventos

En este caso utilizamos el método isChecked() para conocer el estado en que se encuentra el ToggleButton.

III. Control Switch

Muy similar al ToggleButton pero se muestra como un deslizador o interruptor.

Sus propiedades principales son idénticas a las de ToggleButton.

• android:textOn

• android:textOff

IV. Control ImageButton

En este tipo de botón podremos asignar una imagen en vez de un texto. Para ello utilizaremos un archivo de imagen incluido en la carpeta /res/drawable.

Las propiedades utilizadas en este botón son:

• android:src

• android:contentDescription.

Para agregar una nueva imagen utilizamos

la herramienta “Image Asset”.

IV. Control ImageButton. Texto + Imagen

También podemos añadir una imagen a un botón simple con texto. Para ello utilizamos la propiedad:

• Android:drawableLeft

Otra propiedad que se puede usar:

• android:drawablePadding

VI. Control ImageView

Permite mostrar imágenes en la aplicación.

Las propiedades mas importantes son:

• android:src

• android:maxWidth

• android:maxHeight

• android:contentDescription

VII. Control TextView

Son etiquetas de texto que se utilizan para mostrar un determinado texto al usuario.

Sus principales propiedades son:

• android:text

• android:background

• android:textColor

• android:textSize

• android:typeface

VIII. Control EditText

Permite la introducción y edición de texto por parte del usuario.

Sus principales propiedades:

• android:text

• android:inputType(textEmailAddress, number, phone, textUri, textPassword, text)

• android:drawableLeft

• android:drawableRight

• android:hint

• android:textColorHint

VIII. Control EditText. Interfaz Spanned

Un objeto de tipo Spanned es algo así como una cadena de caracteres en la que podemos insertar otros objetos a modo de marcas o etiquetas asociados a rangos de caracteres. Por lo tanto la interfaz Spannable permite la modificación de estas marcas, y además se deriva la interfaz Editable, que permite modificar el texto.

Tipos de spans predefinidos que permiten dar formato al texto:

• TypefaceSpan

• StyleSpan

• ForegroudColorSpan

• AbsoluteSizeSpan


Se utiliza el método setSpan(), que recibe como parámetro el objeto Span que se insertará, la posición inicial y final del texto a marcar, y un flag que indica la forma en la que el Span se extenderá al insertarse nuevo texto.


Además podemos cambiar el formato de un texto seleccionado, utilizando los métodos getSelectionStart() y getSelectionEnd().

Por ejemplo, al seleccionar un texto y presionar el botón negrita podremos cambiar el estilo del texto.

VIII. Control EditText. Etiquetas flotantes

Una etiqueta flotante es un hint que aparece en la parte superior del cuadro de texto.

El componente que utilizamos se llama TextInputLayout. Añadimos un EditText con hint, pero dentro de un contenedor de tipo TextInputLayout.

IX. Control CheckBox

Sirve para marcar o desmarcar opciones en una aplicación.

Extiende del control TextView por lo que son validas todas las propiedades de formato ya descritas.

Entre las propiedades que podemos utilizar se encuentran:

• android:checked

En el código de aplicación podemos usar los métodos isChecked() para ver el estado del control, y setChecked para establecer un estado concreto para el control.

IX. Control CheckBox. Eventos

El evento onClick es el mas interesante, ya que nos indica cuando se ha pulsado el CheckBox. Podremos consultar el estado del control con el método ya mencionado isChecked().

X. Control RadioButton

Similar al CheckBox, donde un radio button puede estar marcado o desmarcado, pero en este caso se utilizan dentro de un grupo donde solo una debe estar marcada obligatoriamente.

Se define mediante un elemento RadioGroup, que contiene todos los elementos RadioButton necesarios.

Propiedades:

• android:id

• android:text

X. Control RadioButton. Eventos

Recurrimos nuevamente al evento onClick para saber cuando se pulsa uno de los botones del grupo.

Definiremos un listener independiente, y

luego lo asignaremos a todos los

botones.

XI. Control de selección Spinner

Son listas desplegables que funcionan de forma similar a cualquier control de este tipo, en donde el usuario selecciona la lista, aparece una lista emergente con todas las opciones disponibles y al seleccionar una queda fijada en el control.

XI. Control de selección Spinner

Para enlazar los datos a este control utilizamos código java, partiendo por obtener una referencia al control a través de su ID.

Utilizamos un layout predefinido de Android (android.R.layout.simple_spinner_dropdown_ítem) como parámetro para el adaptador.

Y por ultimo asignamos el adaptador al control Spinnercon el método setAdapter().

XI. Control de selección Spinner. Eventos

El evento mas utilizado es el generado al seleccionarse una opción de la lista desplegable, onItemSelected.

Para capturar este evento utilizamos el método setOnItemSelectedListener(). Ademas usamos los metodos

onNothingSelected() y getItemAtPosition()

XII. Control De Selección ListView

Un control ListView muestra al usuario una lista de opciones seleccionables directamente sobre el propio control, sin listas emergentes como en el caso del control Spinner. En caso de existir más opciones de las que se pueden mostrar sobre el control se podrá por supuesto hacer scroll sobre la lista para acceder al resto de elementos.

XII. Control De Selección ListView. Inflate()

Inflate(), que pertenece al objeto de la clase LayoutInflater. Método que se utiliza para construir y añadir las Views a los diseños de: Fragment Menu o ActionBar Adapter Dialogs. Para añadir una View a otra en cuando precisemos. Entre otros muchos casos ¿Y Activityno lo utiliza? Claro que lo usa, pero Android nos lo facilita de otra manera. En vez del método inflate() -que es un inflado implícito- lo han llamado setContentView() -en un inflado explícito.

XII. Control De Selección ListView. Adapter

AdapterUn adaptador es un objeto que comunica a un ListView los datos necesarios para crear las filas de la lista. Es decir, conecta la lista con una fuente de información como si se tratase de una adaptador de corriente que alimenta a un televisor. Además de proveer la información, también genera los Views para cada elemento de la lista. Mejor dicho, hace todo, solo que la lista es quién termina mostrando la información final.

Donde los parámetros del constructor tienen el siguiente propósito:

Context context: Representa el contexto de la aplicación. Usamos this para indicar que será la actividad que se basa en la creación de la lista.

int resource: Es el recurso de diseño o layout que representará cada fila de la lista. En este caso usamos un recurso del sistema llamado simple_list_item_1.xml. Este layout contiene un solo TextView que contendrá el texto de cada fila.

T[] objects: Es la referencia del array de objetos de tipo T con los cuales crearemos la lista. Si deseas puedes variar el constructor y usar una lista dinámica List<T> en lugar del array.

XII. Control De Selección ListView

XIII. Control De Selección ListView OPT

Optimización de no volver a inflar cada vez que se accede al xmlinnecesariamente y aplicar Viewholder para guardar los datos que ya hayan sido vistos y no tener que volver a inflar el xml para cargarlo


Codigo:

XIV. Control De Selección GridView

El control GridView de Android presenta al usuario un conjunto de opciones seleccionables distribuidas de forma tabular, o dicho de otra forma, divididas en filas y columnas. Dada la naturaleza del control ya podéis imaginar sus propiedades más importantes, que paso a enumerar a continuación:

• android:numColumns, indica el número de columnas de la tabla o “auto_fit” si queremos que sea calculado por el propio sistema operativo a partir de las siguientes propiedades.

• android:columnWidth, indica el ancho de las columnas de la tabla.

• android:horizontalSpacing, indica el espacio horizontal entre celdas.

• android:verticalSpacing, indica el espacio vertical entre celdas.

• android:stretchMode, indica qué hacer con el espacio horizontal sobrante. Si se establece al valor “columnWidth” este espacio será absorbido a partes iguales por las columnas de la tabla. Si por el contrario se establece a “spacingWidth” será absorbido a partes iguales por los espacios entre celdas.

XIV. Control De Selección GridView

XV. Control De Selección RecyclerView

LayoutManager:

El SDK incorpora de serie tres LayoutManager para las tres representaciones más habituales: lista vertical u horizontal (LinearLayoutManager), tabla tradicional (GridLayoutManager) y tabla apilada o de celdas no alineadas (StaggeredGridLayoutManager). Por tanto, siempre que optemos por alguna de estas distribuciones de elementos no tendremos que crear nuestro propio LayoutManager personalizado, aunque por supuesto nada nos impide hacerlo, y ahí uno de los puntos fuertes del nuevo componente: su flexibilidad.


ItemDecoration

Otro eslabón importante, son los llamados ItemDecorator, estos permiten modificar los elementos del RecycleView, este además, ofrece además ofrece un elemento llamado insets (márgenes) que pueden aplicarse a las vistas sin necesidad de modificar los parámetros del layout.


ItemAnimator:

La clase ItemAnimator como su nombre indica, anima el RecyclerView cuando se añade y se elimina un elemento, el RecyclerView utiliza un ItemAnimator por defecto.


El RecyclerView ha de saber cuando se inserta un elemento o se elimina, con elementos como ListViews, GridViews, etc… esto se conseguía llamando al método notifyDataSetChanged(), a nivel de performance, es bastante costoso, ya que redibuja todos los items en el layout, lo propio con el RecyclerView es usar el método notifyItemInserted() para añadir, y notifyItemRemoved() para eliminar, actualizando solo la parte apropiada.


Este adaptador deberá extender a la clase RecyclerView.Adapter, de la cual tendremos que sobrescribir principalmente tres métodos:

• onCreateViewHolder(). Encargado de crear los nuevos objetos ViewHolder necesarios para los elementos de la colección.

• onBindViewHolder(). Encargado de actualizar los datos de un ViewHolder ya existente.

• onItemCount(). Indica el número de elementos de la colección de datos.


• setHasFixedSize() Es conveniente hacerlo cuando tengamos certeza de que el tamaño de nuestro RecyclerView no va a variar (por ejemplo debido a cambios en el contenido del adaptador), ya que esto permitirá aplicar determinadas optimizaciones sobre el control.

Orientacion:

Controles básicos y controles de selección

Ezequiel Monsalve

Alberto Paillao

Controles básicos y controles de selección

Mobile

Transcript of Controles básicos y controles de selección