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
VIII. Control EditText. Interfaz Spanned
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.
VIII. Control EditText. Interfaz Spanned
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
XIII. Control De Selección ListView OPT
Codigo:
XIII. Control De Selección ListView OPT
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
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.
XV. Control De Selección RecyclerView
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.
XV. Control De Selección RecyclerView
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.
XV. Control De Selección RecyclerView
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.
XV. Control De Selección RecyclerView
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.
XV. Control De Selección RecyclerView
• 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:
XV. Control De Selección RecyclerView
Controles básicos y controles de selección
Ezequiel Monsalve
Alberto Paillao