Embed Size (px)
Citation preview
Controles y ObjetosAndroid Studio
[email protected]:Pedro Antonio Villalta
Blog de la Asignaturahttp://programacion-moviles.blogspot.com/
1
Layouts
Botones
Imágenes
Etiquetas
Cuadros de Texto
Listas
Contenido
Interfaz De Usuario
http://developer.android.com/guide/topics/ui/index.html
Interfaz de usuario de su aplicación es todo lo que elusuario puede ver e interactuar. Android ofrece unavariedad de componentes de interfaz de usuario pre-construcción, tales como objetos de diseño estructuradosy controles de interfaz de usuario que le permitenconstruir la interfaz gráfica de usuario para su aplicación.
Recurso en Línea
Los layouts son elementos novisuales destinados a controlarla distribución, posición ydimensiones de los controlesque se insertan en su interior.
Layouts
FrameLayout
LinearLayout
TableLayout
RelativeLayout
Tipos de Layouts
Un FrameLayout coloca todos sus controleshijos alineados con su esquina superiorizquierda, de forma que cada control quedaráoculto por el control siguiente (a menos queéste último tenga transparencia).
Suele utilizarse para mostrar un único controlen su interior, a modo de contenedor(placeholder) sencillo para un sólo elementosustituible, por ejemplo una imagen.
FrameLayout
Los componentes incluidos en un FrameLayoutpodrán establecer sus propiedades:
android:layout_width y android:layout_height
Que podrán tomar los valores “fill_parent” (paraque el control hijo tome la dimensión de su layoutcontenedor) o “wrap_content” (para que el controlhijo tome la dimensión de su contenido).
Propiedades de FrameLayout
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
</FrameLayout>
Ejemplo
Este layout apila uno tras otro todos sus elementoshijos de forma horizontal o vertical según seestablezca su propiedad android:orientation.
los elementos contenidos en un LinearLayoutpueden establecer sus propiedades
android:layout_width
android:layout_height
para determinar sus dimensiones dentro del layout
LinearLayout
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<EditText android:id="@+id/TxtNombre"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<Button android:id="@+id/BtnAceptar"
android:layout_width="wrap_content"
android:layout_height="fill_parent" />
</LinearLayout>
Ejemplo
Un TableLayout permite distribuir suselementos hijos de forma tabular,definiendo las filas y columnasnecesarias, y la posición de cadacomponente dentro de la tabla.
TableLayout
android:stretchColumns. Indicará las columnas quepueden expandir para absorver el espacio libredejado por las demás columnas a la derecha de lapantalla.
android:shrinkColumns. Indicará las columnas quese pueden contraer para dejar espacio al resto decolumnas que se puedan salir por la derecha de lapantalla.
android:collapseColumns. Indicará las columnas dela tabla que se quieren ocultar completamente.
Propiedades de TableLayout
<TableLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:stretchColumns="1" >
<TableRow>
<TextView android:text="Celda 1.1" />
<TextView android:text="Celda 1.2" />
</TableRow>
<TableRow>
<TextView android:text="Celda 2.1" />
<TextView android:text="Celda 2.2" />
</TableRow>
<TableRow>
<TextView android:text="Celda 3"
android:layout_span="2" />
</TableRow>
</TableLayout>
Ejemplo
Este layout permite especificar la posiciónde cada elemento de forma relativa a suelemento padre o a cualquier otroelemento incluido en el propio layout. Deesta forma, al incluir un nuevo elemento Apodremos indicar por ejemplo que debecolocarse debajo del elemento B yalineado a la derecha del layout padre.
RelativeLayout
<RelativeLayoutxmlns:android="http://schemas.android.com/apk/res/android
android:layout_width="fill_parent"android:layout_height="fill_parent" >
<EditText android:id="@+id/TxtNombre"android:layout_width="fill_parent"android:layout_height="wrap_content" />
<Button android:id="@+id/BtnAceptar"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_below="@id/TxtNombre"android:layout_alignParentRight="true" />
</RelativeLayout>
En el ejemplo, el botón BtnAceptar se colocará debajodel cuadro de texto TxtNombre.
(android:layout_below=”@id/TxtNombre”)
y alineado a la derecha del layout padre
(android:layout_alignParentRight=”true”),
además de dejar un margen a su izquierda de 10pixeles (android:layout_marginLeft=”10px”).
El SDK de Android nos proporciona tres tipos debotones:
El clásico (Button)
el de tipo on/off (ToggleButton), y
el que puede contener una imagen (ImageButton).
En la imagen siguiente vemos el aspecto por defectode estos tres controles.
Botones
Un control de tipo Button es el botón másbásico que podemos utilizar. En el ejemplosiguiente definimos un botón con el texto“Púlsame” asignando supropiedadandroid:text. Además de estapropiedad podríamos utilizar muchas otrascomo el colorde fondo (android:background),estilo de fuente (android:typeface), colordefuente (android:textcolor), tamaño defuente (android:textSize)
Control Button
<Button android:id="@+id/BtnBoton1"
android:text="Púlsame"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Ejemplo Control Button
Un control de tipo ToggleButton es un tipode botón que puede permanecer endosestados, pulsado/no_pulsado.
En este caso, en vez de definir un sólo textopara el control definiremos dos,dependiendo de su estado. Así, podremosasignar las propiedades android:textOn yandroid:textoOff para definir ambos textos.
Control ToggleButton
<ToggleButtonandroid:id="@+id/BtnBoton2"
android:textOn="ON"
android:textOff="OFF"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
Ejemplo Control ToggleButton
En un control de tipo ImageButton podremos definiruna imagen a mostrar en vez de un texto, para loque deberemos asignar la propiedad android:src.
Normalmente asignaremos esta propiedad con eldescriptor de algún recurso que hayamos incluido enla carpeta /res/drawable.
Por ejemplo, en nuestro caso hemos incluido unaimagen llamada “ok.png” por lo que haremosreferencia al recurso “@drawable/ok“.
Control ImageButton
<ImageButtonandroid:id="@+id/BtnBoton3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ok" />
Ejemplo Control ImageButton
Imágenes
etiquetas y
cuadros de texto
Otros controles
El control ImageView permite mostrar imágenesen la aplicación. La propiedad más interesante esandroid:src, que permite indicar la imagen amostrar. Nuevamente, lo normal será indicarcomo origen de la imagen el identificador de unrecurso de nuestra carpeta /res/drawable, porejemplo android:src=”@drawable/unaimagen”.
Control ImageView
<ImageView android:id="@+id/ImgFoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon" />
Podríamos establecer la imagen mediante el métodosetImageResorce(…), pasándole el ID del recurso a utilizarcomo contenido de la imagen.
ImageView img = (ImageView)findViewById(R.id.ImgFoto);
img.setImageResource(R.drawable.icon);
Ejemplo
El control TextView es otro de los clásicos en laprogramación de GUIs, las etiquetas de texto, y seutiliza para mostrar un determinado texto al usuario.
Al igual que en el caso de los botones, el texto delcontrol se establece mediante la propiedadandroid:text.
Control TextView
<TextView android:id="@+id/LblEtiqueta"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="Escribe algo:"
android:background="#AA44FF"
android:typeface="monospace" />
Ejemplo
Podemos manipular estas propiedades desde código.
En el siguiente fragmento recuperamos el texto deuna etiqueta con getText(), y posteriormente leconcatenamos unos números, actualizamos sucontenido mediante setText() y le cambiamos su colorde fondo con setBackgroundColor().
final TextView lblEtiqueta = (TextView)findViewById(R.id.LblEtiqueta);
String texto = lblEtiqueta.getText().toString();
texto += "123";
lblEtiqueta.setText(texto);
Manipulación de TextView
El control EditText es el componente de ediciónde texto que proporciona la plataforma Android.Permite la introducción y edición de texto por partedel usuario, por lo que en tiempo de diseño lapropiedad más interesante a establecer, ademásde su posición/tamaño y formato, es el texto amostrar, atributo android:text.
Control EditText
<EditText android:id="@+id/TxtTexto"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/LblEtiqueta" />
Ejemplo
De igual forma, desde nuestro código podremosrecuperar y establecer este texto mediante losmétodos
getText() y
setText(nuevoTexto)
respectivamente:
final EditText txtTexto = (EditText)findViewById(R.id.TxtTexto);
String texto = txtTexto.getText().toString();
txtTexto.setText("Hola mundo!");
Modificación de EditText
