Uso de TableLayout

Función:

• Los TableLayout y TableRow Disposición Vistas

La vista recipiente Android TableLayout proporciona una manera de organizar vista componentes en una configuración de fila y columna. Mientras que la vista TableLayout proporciona el contenedor general, cada fila, y las células contenidas en el mismo,TableLayout es una ViewGroup que muestra niño View elementos en filas y columnas, se implementan a través de las instancias de la vista TableRow. 

El propósito de la vista de contenedor TableLayout es permitir que elementos de la interfaz de usuario a ser organizadas en la pantalla en un formato de tabla que consta de filas y columnas. Cada fila dentro de un TableLayout está ocupado por una instancia TableRow, que, a su vez, se divide en celdas, cada celda que contiene una única vista niño (que puede ser en sí mismo un recipiente con vista múltiples niños).

TableRow los objetos son las vistas secundarios de un TableLayout (cada TableRow define una única fila de la tabla). Cada fila tiene cero o más células, cada una de las cuales está definida por cualquier otra clase de Vista. Por lo tanto, las celdas de una fila pueden estar compuestos de una variedad de objetos de vista, como ImageView o TextView objetos. Una célula puede ser también un objeto ViewGroup (por ejemplo, puede anidar otra TableLayout como una célula).

•  android:layout_weight

Este atributo asigna un valor de “importancia” a una vista en términos de la cantidad de espacio que debe ocupar en la pantalla. Indica la cantidad de espacio extra en el LinearLayout se asigna a la vista asociada con estas LayoutParams.  Un valor de volumen más grande posibilita la expansión para llenar el espacio restante en la vista primaria. Especifique 0 si la vista no debe estirarse. De lo contrario, los píxeles adicionales serán prorrateados entre todos los puntos de vista cuyo peso es mayor que 0.

• android:shrinkColumns 

Permite marcar una o más columnas como encogibles, de forma que su anchura se pueda reducir para adaptarse al tamaño del contenedor del TableLayout. El índice de base cero de las columnas para reducir el tamaño. Los índices de columna deben estar separados por una coma: 1, 2, 5. índices ilegales y duplicados se ignoran. Puede reducir el tamaño de todas las columnas mediante el valor "*" en su lugar. Tenga en cuenta que una columna se puede marcar estirable y retráctil al mismo tiempo.

Puede ser un valor de cadena, usando '\\;' para escapar de caracteres tales como '\\ n' o '\\ uxxxx' para un carácter Unicode;

• android:stretchColumns 

Esta propiedad viene a ser la opuesta de la anterior, dado que permite que una columna se expanda aumentando su anchura hasta que todo el contenido del TableLayout ocupe la totalidad de la anchura de su contenedor. Los parámetros que toma son iguales que los de las propiedades anteriores, incluyendo el valor especial "*", para expandir todas las columnas. El índice de base cero de las columnas se estire. Los índices de columna deben estar separados por una coma: 1, 2, 5. índices ilegales y duplicados se ignoran. 

• android:layout_span 

Permite que una vista ocupe más de una columna. Indica que la celda que tiene el parámetro ocupará varias columnas . Tiene que tener un valor numérico igual o superior a "1". El valor "1" es el predeterminado. Define el número de columnas de este "niño" debe abarcar. Puede ser un valor entero, tal como " 100".

• android:padding

 El padding, como propiedad de la clase View, es compartida por todas las vistas, ya sean widgets o diseños. Está formada, en realidad, por cuatro propiedades, una para cada lateral de la vista. En XML se accede a estas propiedades mediante los atributos android:paddingLeft, android:paddingRight, android:paddingTop y android:paddingBottom de las vistas. Estos atributos permiten establecer un valor distinto para cada uno de los laterales o dejar alguno sin asignar. De forma predeterminada, cada una de estas propiedades tiene el valor cero. 

En el diseño XML tenemos disponible también el atributo android:padding, que permite establecer el padding de todos los laterales a la vez. Este atributo nos permite ahorrar código cuando queremos que el padding de los cuatro laterales tenga el mismo tamaño.

Para medir estas dimensiones, una vista considera su relleno. El relleno se expresa en píxeles para las partes izquierda, superior, derecha e inferior de la vista. El relleno se puede usar para desplazar el contenido de la vista una determinada cantidad de píxeles. Por ejemplo, un relleno izquierdo de 2 empuja el contenido de la vista 2 píxeles hacia la derecha del borde izquierdo. El relleno se puede ajustar usando el método padding.

• android:scaleType 

Se utilizan para la ampliación de los límites de una imagen a los límites de la vista de la imagen. Propiedades de configuración ScaleType para ImageView en Android son CENTER, CENTER_CROP, CENTER_INSIDE, FIT_CENTER, FIT_END, FIT_START, FIT_XY y MATRIX.

En androide, ImageView viene con diferentes opciones de configuración para apoyar los diferentes ScaleType que se utiliza para la ampliación de los límites de una imagen a los límites de la ImageView.

 A continuación se presentan los diferentes tipos 7 escala que se utilizan en Android:

• CENTRO - Centre la imagen, pero no escala la imagen
• CENTER_CROP -  Escala la imagen uniformemente
• CENTER_INSIDE - Centro de la imagen dentro del contenedor, en lugar de hacer el partido borde exactamente
• FIT_CENTER - Escala la imagen del centro
• FIT_END - Escala la imagen desde el extremo del contenedor.
• FIT_START - escala de la imagen desde el inicio del contenedor
• FIT_XY - Llenar la imagen a partir de las coordenadas X e Y del contenedor
• MATRIX - escala utilizando la matriz de la imagen cuando dibujo

• android:textStyle

Un estilo es una colección de propiedades que especifican la apariencia y el formato de una View o ventana. Un estilo puede especificar propiedades, como altura, relleno, color de fuente, tamaño de fuente, color de fondo y mucho más. Los estilos se definen en un recurso XML que está separado del XML que especifica el diseño. Estilo (negrita, cursiva, BoldItalic) para el texto. Debe ser uno o más (separados por '|') de los siguientes valores constantes.

• android:textsize

Tamaño del texto. Recomendaciones Tipo de dimensión para el texto es "SP" para-píxeles escalados (ejemplo: 15SP). Puede ser un valor de dimensión, que es un número de coma flotante anexa con una unidad tal como " 14.5sp". Las unidades disponibles son: px (píxeles), DP (píxeles independientes de la densidad), sp (píxeles escalados basados en el tamaño de la fuente preferido), en (pulgadas), y en mm (milímetros).

•   android:textColor

Color de texto.

Puede ser una referencia a otro recurso, en la forma " " o un atributo tema en forma " ". @[+][package:]type/name?[package:]type/name

Puede ser un valor de color, en la forma de " ", " ", " " o " ".#rgb#argb#rrggbb#aarrggbb

•  include layout 

<include/> es una etiqueta que sirve para incrustar otra distribución dentro del diseño actual. Incluye un archivo de diseño en este trazado.

 Aplicación para Sumar,Restar,Multiplicar y Dividir. 

Con el Programa Eclipse.

Hola Chavos!.

Ya les voy a mostrar como programar una aplicación, y con ello, paso a paso  lo necesario para realizarla, Haremos una que pueda brindarnos las operaciones más básicas; osea una calculadora.

Como se muestra en la imagen, aquí esta mi interfaz ya con la planeación de todos los atributos text, hint, id u onClick que he destinado a utilizar para nombrar los controles.

Si se preguntan que desde dónde se definen las propiedades para los controles. Bueno, Una vez que hayamos abierto el programa Eclipse y hecho el nuevo proyecto, del lado izquiero de la interfaz que nos recibe, se visualizan todas las carpetas que nacen de la carpeta raíz llamado según nuestro proyecto.

Como se visualiza aquí:

strings.xml lo encontramos en la carpeta values que se encuentra en la carperta res.

El archivo strings.xml se utiliza para almacenar todas las constantes de cadenas de caracteres que se necesitan en un programa, por ejemplo las etiquetas de los objetos Button, los textos fijos de los controles TextView y todos los controles que muestran un texto fijo en el dispositivo.

De esta manera⬇⬇⬇⬇⬇⬇⬇.Lo que se encuentra entre las marcas string es lo que se visualizará en la interfaz visual.⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇⬇

1.Ahora debemos asociar estas constantes a los controles visuales.

2.En este diálogo seleccionamos la constante de string que acabamos de crear

3.Ahora tenemos asociada la constante "hint_resul" con la propiedad text del control editText.


 Como vemos cuando asociamos las propiedades text de los controles con las constantes automáticamente vemos en pantalla que los textos de los controles se actualizan con los valores almacenados en dichas constantes.

Una vez que hayamos llegado hasta acá, lo siguiente que prosigue es programar en nuestra clase MainActivity.java.

 (Que Es un método que utiliza Android para iniciar una actividad instancia invocando los métodos específicos que corresponden a las etapas del ciclo de vida.)

MainActivity lo encontramos en la primera carpeta que desenlaza nuestro Proyecto.Con el nombre Src , en una subcarpeta 《com.example.calculadora》 (o el nombre de tu proyecto,según sea el caso.)

Lo primero que vamos hacer es que, debajo de dónde dice:

                 public class MainActivity extends Activity{

-Mencionaremos sus valores a los controles que utilizamos.Definimos Variables:

Que son a Los:

▪TextView

▪EditText

▪Button

Y enseguida a los controles TextView, EditText y Button los enlazaremos con una variable en nuestro código.Por medio de la propiedad findViewById.  De la siguiente manera y así es como quedaría.⬇

}

A Casi concluir, escribimos las operaciones bases. Que determinarán el resultado que arrojará según el tipo de Button que escojan(sumar,restar,multiplicar o dividir)

Escribimos:

public void sumar (View v) {

OJO! todo aquello que vaya después de public void》↔《 tiene que ser exactamente lo que hemos escrito en onClick.

Desde activity_main.xml y este lo encontramos a un lado de Graphical Layout que es dónde esta la interfaz.Podemos escribir ejemplo-  android:onClick="sumar"

Ahora si, nuevamente en MainActivity.

Si se preguntan que de dónde salió a y b, es porque ha si e deseado identificar que num1=a y num2=b.

Hemos acabado el código!

Ahora veremos si funciona!.

Checamos esto si Vamos a la carpeta Principal. En mi caso Calculadora,  Click Derecho, en la opción Run As➡1 Android Application....

Esperamos a que nos abra el emulador. Abrimos nuestra app y chechamos si las operaciones nos la ha dado bien :) .

LISTOOOOOO!

Puntos importantes que debes de saber!

●¿Para que sirve EditText, TextView y Button?

El control EditText (caja de edición de texto) actua como campo de texto donde los usuarios pueden editar su contenido y se almacenas los datos.

➡

Los TextView (etiquetas de texto) se utilizan como medio de salida, es decir, para mostrar un determinado texto al usuario.

Un control de tipo Button es el botón más básico que podemos utilizar y normalmente contiene un simple texto.

➡

●Atributos de un botón:



android:hint. Con este parámetro pondremos un texto por defecto mientras el campo este vacío, es decir, el lo que ve el usuario antes de que el escriba nada.

 android:id Representa al identificador del botón para diferenciar su existencia de otros views.

android:onClick Almacena la referencia de un método que se ejecutará al momento de presionar el botón.

 android:onClick Almacena la referencia de un método que se ejecutará al momento de presionar el botón.

 android:text Permite cambiar el texto de un botón.


Y Esto es todo amigos!.

Propiedad android:onClick

Este métodos nos permite capturar los clicks en determinadas vistas comúnmente botones, para ejecutar ciertas partes de nuestro código fuente y de esta forma realizar las acciones que queramos.

Como su nombre lo indica es un evento (acción) que se realiza al presionar un elemento (botón, imagen, layout, etc.) de la interfaz gráfica de nuestra aplicación.

En pocas palabras...

Evento OnClick

{

///

//La aplicación hace algo.

///

}

Método findViewById

Esta función, es la que enlaza un recurso de la interfaz de usuario de una aplicación, con una variable en nuestro código. O simplemente se encarga de acceder a ese recurso para cambiar una de sus propiedades.

Supongamos, pues, que tenemos un layout con una veintena de widgets entre layouts, Buttons, EditText, TextView, ImageView… Y que en un momento dado del ciclo de vida de la actividad, tenemos que acceder a uno ó varios de ellos para cambiar sus propiedades. Podemos acceder a ellos del modo:

((EditText) this.findViewById(R.id.edittext_cliente)).setOnClickListener(…);

Aunque también podemos guardar el valor que devuelve la función findViewById() en una variable, o variable miembro de la Activity para operar con ella varias veces a lo largo del citado ciclo de vida.

¿Cuál es la diferencia? y ya que estamos ¿cuál era nuestro error? Pues que cada vez que se llama a la función findViewById(), android recorre todo el árbol jerárquico del Layout que hemos definido previamente en XML, en busca del recurso al que queremos acceder. Como ya habréis averiguado, el costo de esa operación es muy alto si el control a encontrar es de los últimos en el árbol, o si hay muchos niveles de layouts anidados, o simplemente queremos cambiar el valor de una de las propiedades de ese recurso bastantes veces a lo largo del ciclo de vida de la aplicación.

Manera de declarar a los controles “dibujados” en Layout para poder utilizarlos dentro de la clase Activity.

¿Qué Es Un View?

Es un componente que permite controlar la interacción del usuario con la aplicación. Estos son muy similares a los controles SWING de Java, como Labels, Buttons, TextFields, Checkboxes, etc. Los Views son organizados dentro de los Layouts para que el usuario comprenda los objetivos de la actividad.

Atributos De Un View

Veamos los propósitos de los atributos usados con mayor frecuencia al diseñar un layout:

layout:height: Representa la dimensión de longitud vertical de un View. Puedes asignarle valores absolutos en dps, si dependiendo de las métricas de diseño que tengas ó usar los valores match_parent y wrap_content. El primero ajusta la dimensión a las medidas del contenedor padre y el segundo lo ajusta al contenido del View.

layout:width: Representa el ancho de un view.

layout:layout_margin: Especifica las márgenes del view con respecto a otros componentes. Podemos definir los valores individualmente para la margen izquierda, derecha, superior e inferior. O si deseas puedes especificar un mismo valor para todos los margenes.

layout:alignComponent: Indica la adyacencia de las margenes entre componentes. Por ejemplo, esto permitiría ubicar el margen izquierdo de un botón justo al lado del margen izquierdo de otro botón. Si en algún momento el botón cambia entonces su compañero cambiará con él. Este atributo muestra el poder de un Relative layout.

layout:alignParent: Con este atributo especificamos que un view estará ubicado hacia uno de los lados de su padre.

layout:centerInParent: Permite centrar horizontal y verticalmente un View con respecto a su padre.

id: Es un nombre que diferencia los views entre si. Es de utilidad cuando vayamos a referenciar los controles en el código Java. Así que elige nombres representativos y de fácil interpretación.

Android:Id

El parámetro Android:id que si bien es una propiedad opcional, es muy recomendable asignar siempre a todos los elementos de la interfaz de usuario y que identifica de manera única al elemento al que se lo asignemos.

Su valor se define de la siguiente manera:

Android:id=”@+id/identificador_unico”

Necesitaremos el parámetro android:id para crear el objeto de la interfaz gráfica en nuestras clases java.

Por ejemplo:

Button button1 = (Button) findViewById(R.id.boton1);

Donde “boton1” será el “id” que hayamos asignado al botón en el fichero XML de definición de la interfaz gráfica de la Activity que estemos creando:

<Button android:id="@+id/boton1"

android:layout_width="150dp"

android:layout_height="130dp"

/>

Esta propiedad es el ID del control, con el que podremos identificarlo de forma única más tarde en nuestro código. Vemos que el identificador lo escribimos precedido de “@+id/”. Esto tendrá como efecto que al compilarse el proyecto se genere automáticamente una nueva constante en la clase R para dicho control.

Aquí es donde se  ubica el archivo MainActivity java:

Función setContentView :

Este método solo se puede llamar desde onCreate, y además es un campo immutable. Solo se puede fijar la vista de la actividad una sola vez. Es la forma que tiene Android de obligarnos a tener una única vista por actividad.

La línea setContentView(R.layout.main); señala que hay una clase estática llamada R.layout y, que dentro de esa clase hay una constante entera llamada main que apunta a una vista definida por un fichero de recursos layout xML. El nombre del fichero XML es main.xml, el cual debe estar en el directorio ./res/layout.

Método onCreate:

Es donde usted hace funcionar su actividad. Cuando Activity se inicia y la aplicación no se carga, entonces ambos serán llamados métodos onCreate() .

Pero para arranques posteriores de Activity, el onCreate() de aplicación no serán llamados.Se utiliza para realizar todo tipo de inicializaciones, como la creación de la interfaz de usuario o la inicialización de estructuras de datos. Puede recibir información de estado dela actividad (en una instancia de la clase Bundle), por si se reanuda desde una actividad que ha sido destruida y vuelta a crear.

Activity:

Un Actividad  es uno de los componentes de una aplicación, concretamente el encargado de ofrecer una pantalla con la que los usuarios pueden interactuar, con el único objetivo de hacer algo. Es por ello que lleva asociada una interfaz de usuario.

De hecho, una aplicación suele estar compuesta por varias actividades que están vinculadas unas a otras de alguna forma. Generalmente, toda aplicación tiene una actividad considerada la actividad principal (main), la cual es la que se muestra al usuario cuando se abre la aplicación por primera vez.

Para crear una actividad, basta con que creemos una clase que herede de la clase Activity. Además de heredar de esta clase, deberemos sobreescribir algunos métodos que pertenecen al ciclo de vida de la actividad.