domingo, 3 de agosto de 2014
Una aplicación de ejemplo: Mis Lugares
A lo largo de este curso vamos a ir creando una aplicación de ejemplo que toque los aspectos más significativos de Android. Comenzamos en este capítulo creando una serie de vistas que nos permitirán diseñar un sencillo interfaz de usuario.
Práctica: Creación de la aplicación Mis Lugares.
1. Crea un nuevo proyecto con los siguientes datos:
Application Name: Mis Lugares
Project Name: MisLugares
Package Name: com.example.mislugares
Minimun Required SDK: API 8: Android 2.2 (Froyo)
Target SDK: API 18
Compile With: API 19: Android 4.4
Activity Name: MainActivity
Layout Name: activity_main
NOTA: Los dos últimos parámetros se introducen en la última ventana.
2. Abre el fichero res/layout/activity_main.xml y trata de crear una vista similar a la que ves a continuación. Ha de estar formada por un LinearLayout que contiene un TextView y cuatro Button. Trata de utilizar recursos para introducir los cinco textos que aparecen.
Solución:
1. El fichero activity_main.xml ha de ser similar al siguiente:
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:gravity="center"
android:padding="30dp"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/app_name"
android:gravity="center"
android:textSize="25sp "
android:layout_marginBottom="20dp"/>
<Button android:id="@+id/Button01"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="@string/accion_mostrar"/>
<Button android:id="@+id/Button02"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="@string/accion_preferencias"/>
<Button android:id="@+id/Button03"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="@string/accion_acerca_de"/>
<Button android:id="@+id/Button04"
android:layout_height="wrap_content"
android:layout_width="match_parent"
android:text="@string/accion_salir"/>
</LinearLayout>
2. El fichero res/values/strings.xml ha de tener el siguiente contenido:
<resources>
<string name="accion_mostrar">Mostrar Lugares</string>
<string name="accion_preferencias">Preferencias</string>
<string name="accion_acerca_de">Acerca de </string>
<string name="accion_salir">Salir</string>
<string name="app_name">Mis Lugares</string>
<string name="action_settings">Settings </string>
</resources>
Práctica: Un formulario para introducir nuevos lugares
El objetivo de esta práctica es crear un layout que permita introducir y editar lugares en la aplicaciónMis Lugares.
1. Crea un nuevo layout con nombre edicion_lugar.xml.
2. Ha de parecerse al siguiente formulario. Puedes basarte en un LinearLayout o un RelativeLayoutpara distribuir los elementos. Pero es importante que este layout, se encuentre dentro de un ScrollViewpara que cuando el formulario no quepa en pantalla se pueda desplazar verticalmente.
3. Introduce a la derecha del TextView con texto “Tipo:” un Spinner con id tipo. Más adelante configuraremos esta vista para que muestre un desplegable con los tipos de lugares.
4. Las vistas EditText han de definir el atributo id con los valores: nombre, direccion, telefono, url y comentario. Utiliza también el atributo hint para dar indicaciones sobre el valor a introducir. Utiliza el atributo inputType para indicar qué tipo de entrada esperemos. De esta manera se mostrará un teclado adecuado (por ejemplo si introducimos un correo electrónico aparecerá la tecla @).
Nota: El atributo inputType admite los siguientes valores (en negrita los que has de gastar en este ejercicio): none, text, textCapCharacters, textCapWords, textCapSentences, textAutoCorrect, textAutoComplete, textMultiLine, textImeMultiLine, textNoSuggestions, textUri, textEmailAddress, textEmailSubject. textShortMessage, textLongMessage, textPersonName, textPostalAddress, textPassword, textVisiblePassword, textWebEditText, textFilter, textPhonetic, textWebEmailAddress, textWebPassword, number, numberSigned, numberDecimal, numberPassword, phone, datetime, date y time.
5. Abre la clase MainActivity y reemplaza:
setContentView(R.layout.activity_main);
por
setContentView(R.layout.edicion_lugar);
6. Ejecuta la aplicación y verifica como cambia el tipo de teclado en cada EditText.
Solución:
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical" >
<TextView
android:id="@+id/t_nombre"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Nombre:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/nombre"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/t_nombre"
android:hint="algo que identifique el lugar" >
<requestFocus/>
</EditText
<TextView
android:id="@+id/t_tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/nombre"
android:text="Tipo:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="@+id/tipo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="@id/t_tipo"
android:layout_toRightOf="@id/t_tipo" />
<TextView
android:id="@+id/t_direccion"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/t_tipo"
android:text="Dirección:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/direccion"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/t_direccion"
android:hint="dirección del lugar"
android:inputType="textPostalAddress" />
<TextView
android:id="@+id/t_telefono"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/direccion"
android:text="Telefono:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/telefono"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="@id/t_telefono"
android:layout_alignTop="@id/t_telefono"
android:hint="teléfono para contactar"
android:inputType="phone" />
<TextView
android:id="@+id/t_url"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/telefono"
android:text="Url:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/url"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/t_url"
android:hint="página web"
android:inputType="textUri" />
<TextView
android:id="@+id/t_comentario"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/url"
android:text="Comentario:"
android:textAppearance="?android:attr/textAppearanceMedium" />
<EditText
android:id="@+id/comentario"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/t_comentario"
android:hint="introduce tus notas"
android:inputType="textMultiLine" />
</RelativeLayout>
</ScrollView>
