Síguenos en...
Síguenos en Twitter Síguenos en Facebook Sigue nuestro canal YouTube
Registrarse
Compartir
+ Responder tema
Página 1 de 3 123 ÚltimoÚltimo
Resultados 1 al 10 de 30

Tema: Curso de programación Android

  1. #1

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117

    Curso de programación Android

    Antes de empezar a postear los diferentes temas del curso, he de dejar claro que el curso es de otra pagina (un blog).

    Su autor es Salvador Gómez y el blog donde se encuentra el curso es Desarrollo en Android | sgoliver.net blog

    Todo el contenido del blog esta bajo la licencia Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 España lo que nos permite copiarlo pero no modificarlo, alterarlo o lucrarnos a su costa.

    El curso esta realmente bien, y si te apetece o lo crees oportuno, en dicho blog puedes ofrecer un donativo al verdadero autor o pinchando aquí.

    Ahora si, empezamos...

    (lo ire completando poco a poco)

    Desarrollo en Android

    Conceptos Generales
    1. Entorno de desarrollo Android
    2. Estructura de un proyecto Android
    3. Componentes de una aplicación Android
    4. Desarrollando una aplicación Android sencilla

    Interfaz de Usuario en Android
    1. Interfaz de usuario en Android: Layouts
    2. Interfaz de usuario en Android: Controles básicos (I)
    3. Interfaz de usuario en Android: Controles básicos (II)
    4. Interfaz de usuario en Android: Controles básicos (III)
    5. Interfaz de usuario en Android: Controles de selección (I)
    6. Interfaz de usuario en Android: Controles de selección (II)
    7. Interfaz de usuario en Android: Controles de selección (III)
    8. Interfaz de usuario en Android: Controles de selección (IV)
    9. Interfaz de usuario en Android: Controles personalizados (I)
    10. Interfaz de usuario en Android: Controles personalizados (II)
    11. Interfaz de usuario en Android: Controles personalizados (III)

    Menús en Android
    1. Menús en Android (I): Menús y Submenús básicos
    2. Menús en Android (II): Menús Contextuales

    Widgets en Android
    1. Interfaz de usuario en Android: Widgets (I)
    2. Interfaz de usuario en Android: Widgets (II)

    Gestión de Preferencias en Android
    1. Preferencias en Android I: SharedPreferences

    Tratamiento de XML en Android
    1. Tratamiento de XML en Android (I): SAX
    2. Tratamiento de XML en Android (II): SAX simplicado
    3. Tratamiento de XML en Android (III): DOM
    4. Tratamiento de XML en Android (IV): XmlPull

    Bases de Datos en Android
    1. Bases de datos en Android (I): Primeros pasos con SQLite
    2. Bases de datos en Android (II): Inserción, actualización y eliminación de registros
    3. Bases de datos en Android (III): Consulta y recuperación de registros

    Localización Geográfica en Android
    1. Localización geográfica en Android (I)
    2. Localización geográfica en Android (II)

    Mapas en Android
    1. Mapas en Android (I): Preparativos y ejemplo básico
    2. Mapas en Android (II): Control MapView
    3. Mapas en Android (III): Overlays (Capas)

    Ficheros en Android
    1. Ficheros en Android (I): Memoria Interna
    2. Ficheros en Android (II): Memoria Externa (Tarjeta SD)

    Notificaciones en Android
    1. Notificaciones en Android: Toast

    Depuración de aplicaciones en Android
    1. Depuración en Android: Logging


    Temas Similares en HTCSpain:
  2. [VIDEO-TUTORIAL] Programación de Aplicaciones en Android + Descargas - [pebels]
  3. [VIDEO-TUTORIAL] Programación de Juegos en Android + Descargas - [pebels]
  4. Última edición por pebels; 13/12/2011 a las 16:28
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  5. #2

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Entorno de desarrollo Android

    A partir de ahora voy a publicar también algunos artículos sobre desarrollo paar la plataforma Android. Y para empezar, voy a describir los pasos básicos para disponer en nuestro PC del entorno y las herramientas necesarias para comenzar a programar aplicaciones Android.
    No voy a ser exhaustivo, ya existen muy buenos tutoriales sobre la instalación de Eclipse y Android, incluida la documentación oficial de la plataforma. Además, si has llegado hasta este blog quiero suponer que tienes unos conocimientos básicos de Eclipse y Java, por lo que tan sólo enumeraré los pasos necesarios de instalación y configuración, y proporcionaré los enlaces a las distintas herramientas. Vamos allá.

    Paso 1. Descarga e instalación de Eclipse.
    Si aún no tienes instalado Eclipse, puedes descargar la versión 3.5 desde este enlace (Ojo, la versión 3.6 parece que aún no se lleva muy bien con Android). Recomiendo descargar por ejemplo la versión Eclipse IDE for Java Developers. La instalación consiste simplemente en descomprimir el zip en la ubicación deseada.

    Paso 2. Descargar el SDK de Android.
    El SDK de la plataforma Android se puede descargar desde aquí. Una vez descargado, de nuevo bastará con descomprimir el zip en cualquier ubicación.

    Paso 3. Descargar el plugin Android para Eclipse.
    Google pone a disposición de los desarrolladores un plugin para Eclipse llamado Android Development Tools(ADT) que facilita en gran medida el desarrollo de aplicaciones para la plataforma. Podéis descargarlo mediante las opciones de actualización de Eclipse, accediendo al menú “Help / Install new software…” e indicando la URL de descarga “https://dl-ssl.google.com/android/eclipse/”. Se debe seleccionar e instalar el paquete completo Developer Tools, formado por Android DDMS y Android Development Tools.

    Paso 4. Configurar el plugin ADT.
    En la ventana de configuración de Eclipse, se debe acceder a la sección de Android e indicar la ruta en la que se ha instalado el SDK (paso 2).


    Paso 5. Descargar los targets necesarios.
    Además del SDK de Android comentado en el paso 2, también debemos descargar los llamados SDK Targets de Android, que no son más que las librerías necesarias para desarrollar en cada una de las versiones concretas de Android. Así, si queremos desarrollar por ejemplo para Android 1.6 tendremos que descargar su targetcorrespondiente. Para ello, desde Eclipse debemos acceder al menú “Window / Android SDK and AVD Manager“, y en la sección Available Packages seleccionar e instalar todos los paquetes deseados.


    Paso 6. Configurar un AVD.
    A la hora de probar y depurar aplicaciones Android no tendremos que hacerlo necesariamente sobre un dispositivo físico, sino que podremos configurar un emulador o dispositivo virtual (Android Virtual Device, o AVD) donde poder realizar fácilmente estas tareas. Para ello, volveremos a acceder al AVD Manager, y en la sección Virtual Devices podremos añadir tantos AVD como se necesiten (por ejemplo, configurados para distintas versiones de Android). Para configurar el AVD tan sólo tendremos que indicar un nombre descriptivo, el target de Android que utilizará, y las características de hardware del dispositivo virtual, como por ejemplo su resolución de pantalla, el tamaño de la tarjeta SD, o la disponibilidad de GPS.

    Y con este paso ya estamos preparados para crear nuestro primer proyecto para Android.

    Paso 7. ¡Hola Mundo! en Android.
    Creamos un nuevo proyecto de tipo Android Project. Indicamos su nombre, el target deseado, el nombre de la aplicación, el paquete java por defecto para nuestras clases y el nombre de la clase (Activity) principal.

    Esta acción creará toda la estructura de carpetas necesaria para compilar un proyecto para Android. Hablaremos de ella más adelante.
    Para ejecutar el proyecto tal cual podremos hacerlo como cualquier otro proyecto java configurando una nueva entrada de tipo Android Applications en la ventana de Run Configurations. Al ejecutar el proyecto, se abrirá un nuevo emulador Android y se cargará automáticamente nuestra aplicación.
    Última edición por pebels; 18/07/2011 a las 16:51
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  6. #3

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Estructura de un proyecto Android

    Seguimos con el Curso de Programación Android. Para empezar a comprender cómo se construye una aplicación Android vamos a echar un vistazo a la estructura general de un proyecto tipo.
    Cuando creamos un nuevo proyecto Android en Eclipse se genera automáticamente la estructura de carpetas necesaria para poder generar posteriormente la aplicación. Esta estructura será común a cualquier aplicación, independientemente de su tamaño y complejidad.
    En la siguiente imagen vemos los elementos creados inicialmente para un nuevo proyecto Android:



    Describamos los elementos principales.
    Carpeta /src/
    Contiene todo el código fuente de la aplicación, código de la interfaz gráfica, clases auxiliares, etc. Inicialmente, Eclipse creará por nosotros el código básico de la pantalla (Activity) principal de la aplicación, siempre bajo la estructura del paquete java definido.



    Carpeta /res/
    Contiente todos los ficheros de recursos necesarios para el proyecto: imágenes, vídeos, cadenas de texto, etc. Los diferentes tipos de recursos de deberán distribuir entre las siguientes carpetas:
    • /res/drawable/. Contienen las imágenes de la aplicación. Se puede dividir en /drawable-ldpi, /drawable-mdpi y /drawable-hdpi para utilizar diferentes recursos dependiendo de la resolución del dispositivo.
    • /res/layout/. Contienen los ficheros de definición de las diferentes pantallas de la interfaz gráfica. Se puede dividir en /layout y /layout-land para definir distintos layouts dependiendo de la orientación del dispositivo.
    • /res/anim/. Contiene la definición de las animaciones utilizadas por la aplicación.
    • /res/menu/. Contiene la definición de los menús de la aplicación.
    • /res/values/. Contiene otros recursos de la aplicación como por ejemplo cadenas de texto (strings.xml), estilos (styles.xml), colores (colors.xml), etc.
    • /res/xml/. Contiene los ficheros XML utilizados por la aplicación.
    • /res/raw/. Contiene recursos adicionales, normalmente en formato distinto a XML, que no se incluyan en el resto de carpetas de recursos.
    Como ejemplo, para un proyecto nuevo Android, se crean los siguientes recursos para la aplicación:



    Carpeta /gen/
    Contiene una serie de elementos de código generados automáticamente al compilar el proyecto. Cada vez que generamos nuestro proyecto, la maquinaria de compilación de Android genera por nosotros una serie de ficheros fuente en java dirigidos al control de los recursos de la aplicación.



    El más importante es el que se puede observar en la imagen, el fichero R.java, y la clase R.
    Esta clase R contendrá en todo momento una serie de constantes con los ID de todos los recursos de la aplicación incluidos en la carpeta /res/, de forma que podamos acceder facilmente a estos recursos desde nuestro código a traves de este dato. Así, por ejemplo, la constante R.drawable.icon contendrá el ID de la imagen “icon.png” contenida en la carpeta /res/drawable/. Veamos como ejemplo la clase R creada por defecto para un proyecto nuevo:

    Código:
     1 package net.sgoliver;
     2
    
     3 public final class R {
     4  	public static final class attr {
     5  	}
     6  	public static final class drawable {
     7  		public static final int icon=0x7f020000;
     8  	}
     9  	public static final class layout {
    10  		public static final int main=0x7f030000;
    11  	}
    12  	public static final class string {
    13  		public static final int app_name=0x7f040001;
    14  		public static final int hello=0x7f040000;
    15  	}
    16 }

    Carpeta /assets/
    Contiene todos los demás ficheros auxiliares necesarios para la aplicación (y que se incluirán en su propio paquete), como por ejemplo ficheros de configuración, de datos, etc.
    La diferencia entre los recursos incluidos en la carpeta /res/raw/ y los incluidos en la carpeta /assets/ es que para los primeros se generará un ID en la clase R y se deberá acceder a ellos con los diferentes métodos de acceso a recursos. Para los segundos sin embargo no se generarán ID y se podrá acceder a ellos por su ruta como a cualquier otro fichero del sistema. Usaremos uno u otro según las necesidades de nuestra aplicación.

    Fichero AndroidManifest.xml
    Contiene la definición en XML de los aspectos principales de la aplicación, como por ejemplo su identificación (nombre, versión, icono, …), sus componentes (pantallas, mensajes, …), o los permisos necesarios para su ejecución. Veremos más adelante más detalles de este fichero.
    En el siguiente post veremos los componentes software principales con los que podemos construir una aplicación Android.
    Última edición por pebels; 18/07/2011 a las 16:59
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  7. #4

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Componentes de una aplicación Android

    En el post anterior vimos la estructura de un proyecto Android y aprendimos dónde colocar cada uno de los elementos que componen una aplicación, tanto elementos de software como recursos gráficos o de datos. En éste nuevo post vamos a centrarnos específicamente en los primeros, es decir, veremos los distintos tipos de componentes de software con los que podremos construir una aplicación Android.
    En Java o .NET estamos acostumbrados a manejar conceptos como ventana, control, eventos o servicios como los elementos básicos en la construcción de una aplicación.
    Pues bien, en Android vamos a disponer de esos mismos elementos básicos aunque con un pequeño cambio en la terminología y el enfoque. Repasemos los componentes principales que pueden formar parte de una aplicación Android [Por claridad, y para evitar confusiones al consultar documentación en inglés, intentaré traducir lo menos posible los nombres originales de los componentes].

    Activity
    Las actividades (activities) representan el componente principal de la interfaz gráfica de una aplicación Android. Se puede pensar en una actividad como el elemento análogo a una ventana en cualquier otro lenguaje visual.

    View
    Los objetos view son los componentes básicos con los que se construye la interfaz gráfica de la aplicación, análogo por ejemplo a los controles de Java o .NET. De inicio, Android pone a nuestra disposición una gran cantidad de controles básicos, como cuadros de texto, botones, listas desplegables o imágenes, aunque también existe la posibilidad de extender la funcionalidad de estos controles básicos o crear nuestros propios controles personalizados.

    Service
    Los servicios son componentes sin interfaz gráfica que se ejecutan en segundo plano. En concepto, son exactamente iguales a los servicios presentes en cualquier otro sistema operativo. Los servicios pueden realizar cualquier tipo de acciones, por ejemplo actualizar datos, lanzar notificaciones, o incluso mostrar elementos visuales (activities) si se necesita en algún momento la interacción con del usuario.

    Content Provider
    Un content provider es el mecanismo que se ha definido en Android para compartir datos entre aplicaciones. Mediante estos componentes es posible compartir determinados datos de nuestra aplicación sin mostrar detalles sobre su almacenamiento interno, su estructura, o su implementación. De la misma forma, nuestra aplicación podrá acceder a los datos de otra a través de los content provider que se hayan definido.

    Broadcast Receiver
    Un broadcast receiver es un componente destinado a detectar y reaccionar ante determinados mensajes o eventos globales generados por el sistema (por ejemplo: “Batería baja”, “SMS recibido”, “Tarjeta SD insertada”, …) o por otras aplicaciones (cualquier aplicación puede generar mensajes (intents, en terminología Android) broadcast, es decir, no dirigidos a una aplicación concreta sino a cualquiera que quiera escucharlo).

    Widget
    Los widgets son elementos visuales, normalmente interactivos, que pueden mostrarse en la pantalla principal (home screen) del dispositivo Android y recibir actualizaciones periódicas. Permiten mostrar información de la aplicación al usuario directamente sobre la pantalla principal.

    Intent
    Un intent es el elemento básico de comunicación entre los distintos componentes Android que hemos descrito anteriormente. Se pueden entender como los mensajes o peticiones que son enviados entre los distintos componentes de una aplicación o entre distintas aplicaciones. Mediante un intent se puede mostrar unaactividad desde cualquier otra, iniciar un servicio, enviar un mensaje broadcast, iniciar otra aplicación, etc.

    En el siguiente post empezaremos ya a ver algo de código, analizando al detalle una aplicación sencilla.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  8. #5

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Desarrollando una aplicación Android sencilla

    Después de instalar nuestro entorno de desarrollo para Android y comentar la estructura básica de un proyecto y los diferentes componentes software que podemos utilizar ya es hora de empezar a escribir algo de código. Y como siempre lo mejor es empezar por escribir una aplicación sencilla.
    En un principio me planteé analizar en este post el clásico Hola Mundo pero más tarde me pareció que se iban a quedar algunas cosas básicas en el tintero. Así que he versionado a mi manera el Hola Mundo transformándolo en algo así como un Hola Usuario, que es igual de sencilla pero añade un par de cosas interesantes de contar. La aplicación constará de dos pantallas, por un lado la pantalla principal que solicitará un nombre al usuario y una segunda pantalla en la que se mostrará un mensaje personalizado para el usuario. Sencillo, inútil, pero aprenderemos muchos conceptos básicos, que para empezar no está mal.





    En primer lugar vamos a crear un nuevo proyecto Android tal como vimos al final del primer post de la serie. Llamaremos al proyecto “HolaUsuario”, indicaremos como target por ejemplo “Android 1.6″, daremos un nombre a la aplicación e indicaremos que se cree una actividad llamada “HolaUsuario”.


    Como ya vimos esto nos crea la estructura de carpetas del proyecto y todos los ficheros necesarios de un Hola Mundo básico, es decir, una sola pantalla donde se muestra únicamente un mensaje fijo.
    Lo primero que vamos a hacer es diseñar nuestra pantalla principal modificando la que Eclipse nos ha creado por defecto.

    ¿Pero dónde y cómo se define cada pantalla de la aplicación? En Android, el diseño y la lógica de una pantalla estan separados en dos ficheros distintos. Por un lado, en el fichero /res/layout/main.xmltendremos el diseño puramente visual de la pantalla definido como fichero XML y por otro lado, en el fichero /src/paquetejava/HolaUsuario.java, encontraremos el código java que determina la lógica de la pantalla.
    Vamos a modificar en primer lugar el aspecto de la ventana principal de la aplicación añadiendo los controles (views) que vemos en la primera captura de pantalla. Para ello, vamos a sustituir el contenido del ficheromain.xml por el siguiente:

    Código:
      1 <?xml 
    
    version="1.0" 
    
    encoding="utf-8"?>
      2 <LinearLayout
        
      3 xmlns:android="http://schemas.android.com/apk/res/android"
     
      4 	android:orientation="vertical"
     
      5 	android:layout_width="fill_parent"
     
      6 	android:layout_height="fill_parent" > 
    
      7
     
      8	<TextView 
    
    android:text="@string/nombre"
     
      9		android:layout_width="fill_parent"
    
     10		android:layout_height="wrap_content" />
    
     11
    
     12	<EditText 
    
    android:id="@+id/TxtNombre"
    
     13		android:layout_height="wrap_content"
    
     14		android:layout_width="fill_parent" />
    
     15
    
     16	<Button 
    
    android:id="@+id/BtnHola"
    
     17		android:layout_width="wrap_content"
    
     18		android:layout_height="wrap_content"
    
     19		android:text="@string/hola" />
    
     20
    
     21 </LinearLayout>


    En este XML se definen los elementos visuales que componen la interfaz de nuestra pantalla principal y se especifican todas sus propiedades. No nos detendremos mucho en cada detalle porque ése será tema de otro artículo, pero expliquemos un poco lo que vemos en el fichero.
    Lo primero que nos encontramos es un elemento LinearLayout. Los layout son elementos no visibles que determinan cómo se van a distribuir en el espacio los controles que incluyamos en su interior. Los programadores java, y más concretamente de Swing, conocerán este concepto perfectamente. En este caso, un LinearLayout distribuirá los controles uno tras otro y en la orientación que indique su propiedadandroid:orientation.
    Dentro del layout hemos incluido 3 controles: una etiqueta (TextView), un cuadro de texto (EditText), y un botón (Button).

    En todos ellos hemos establecido las siguientes propiedades:
    • android:id. ID del control, con el que podremos identificarlo 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 [Aprende más sobre la clase R en el post anterior].
    • android:text. Texto del control. El texto de un control se puede especificar directamente o bien utilizar alguna de las cadenas de texto definidas en los recursos del proyecto (fichero strings.xml), en cuyo caso indicaremos su identificador precedido del prefijo “@string/”.
    • android:layout_height y android:layout_width. Dimensiones del control con respecto al layout que lo contiene. Esta propiedad tomará normalmente los valores “wrap_content” para indicar que las dimensiones del control se ajustarán al contenido del mismo, o bien “fill_parent” para indicar que el ancho o el alto del control se ajustará al ancho o alto del layout contenedor respectivamente.

    Con esto ya tenemos definida la presentación visual de nuestra ventana principal de la aplicación. De igual forma definiremos la interfaz de la segunda pantalla, creando un nuevo fichero llamado frmmensaje.xml, y añadiendo esta vez tan solo una etiqueta (TextView) para mostrar el mensaje personalizado al usuario. Veamos cómo quedaría nuestra segunda pantalla:

    Código:
     1 <?xml 
    
    version="1.0" 
    
    encoding="utf-8"?>
     2 <LinearLayout
        
     3 	xmlns:android="http://schemas.android.com/apk/res/android"
    
     4	android:layout_width="wrap_content"
    
     5	android:layout_height="wrap_content">
     6
     
     7 <TextView 
    
    android:id="@+id/TxtMensaje"
     
     8	android:layout_height="wrap_content" 
     9	android:layout_width="fill_parent"
    
    10	android:text="$mensaje"></TextView>
    11
    
    12 </LinearLayout>


    Una vez definida la interfaz de las pantallas de la aplicación deberemos implementar la lógica de la misma. Como ya hemos

    comentado, la lógica de la aplicación se definirá en ficheros java independientes. Para la pantalla principal ya tenemos

    creado un fichero por defecto llamado HolaUsuario.java. Empecemos por comentar su código por defecto:

    Código:
     1 public class HolaUsuario extends Activity {
     2	 /** Called when the activity is first created. */
     3	 @Override
    
     4	 	public void onCreate(Bundle savedInstanceState) {
     5		super.onCreate(savedInstanceState);
     6		setContentView(R.layout.main);
     7	}
     8 }


    Como ya vimos en un post anterior, las diferentes pantallas de una aplicación Android se definen mediante objetos de tipo Activity. Por tanto, lo primero que encontramos en nuestro fichero java es la definición de una nueva clase HolaUsuario que extiende a Activity. El único método que sobreescribiremos de esta clase será el método OnCreate, llamado cuando se crea por primera vez la actividad. En este método lo único que encontramos en principio, además de la llamada a su implementación en la clase padre, es la llamada al método setContentView(R.layout.main). Con esta llamada estaremos indicando a Android que debe establecer como interfaz gráfica de esta actividad la definida en el recurso R.layout.main, que no es más que la que hemos especificado en el fichero /res/layout/main.xml. Una vez más vemos la utilidad de las diferentes constantes de recursos creadas automáticamente en la clase R al compilar el proyecto.
    En principio vamos a crear una nueva actividad para la segunda pantalla de la aplicación análoga a ésta primera, para lo que crearemos una nueva clase FrmMensaje que exienda de Activity y que implemente el método onCreate indicando que utilice la interfaz definida en R.layout.frmmensaje.

    Código:
     1 public class FrmMensaje extendsActivity { 
     2	@Override
     3   	public void onCreate(Bundle savedInstanceState) { 
     4		super.onCreate(savedInstanceState); 
     5		setContentView(R.layout.frmmensaje); 
     6	} 
     7 }


    Como vemos, el código incluido por defecto en estas clases lo único que hace es generar la interfaz de la actividad. A partir de aquí nosotros tendremos que incluir el resto de la lógica de la aplicación. Y vamos a empezar con la actividad principal HolaUsuario, obteniendo una referencia a los diferentes controles de la interfaz que necesitemos manipular, en nuestro caso sólo el cuadro de texto y el botón. Para ello utilizaremos el método findViewById() indicando el ID de cada control, definidos como siempre en la clase R:

    Código:
     1 final EditText txtNombre = (EditText)findViewById(R.id.TxtNombre); 
     2 final Button btnHola = (Button)findViewById(R.id.BtnHola);


    Una vez tenemos acceso a los diferentes controles, ya sólo nos queda implementar las acciones a tomar cuando pulsemos el botón de la pantalla. Para ello implementaremos el evento onClick de dicho botón, veamos cómo:

    Código:
     1 btnHola.setOnClickListener(new OnClickListener() {
     2	@Override
     3	public void onClick(View arg0) { 
     4		Intent intent = new Intent(HolaUsuario.this, FrmMensaje.class); 
     5
    
     6		Bundle bundle = new Bundle(); 
     7		bundle.putString("NOMBRE", txtNombre.getText().toString()); 
     8		intent.putExtras(bundle); 
     9
    
    10		startActivity(intent); 
    11	} 
    12 });


    Como ya indicamos en el artículo anterior, la comunicación entre los distintos componentes y aplicaciones en Android se realiza mediante intents, por lo que el primer paso será crear un objeto de este tipo. Existen varias variantes del constructor de la clase Intent, cada una de ellas dirigida a unas determinadas acciones, pero en nuestro caso particular vamos a utilizar el intent para llamar a una actividad desde otra de la misma aplicación, para lo que pasaremos al constructor una referencia a la propia actividad llamadora (HolaUsuario.this), y la clase de la actividad llamada (FrmMensaje.class).
    Si quisiéramos tan sólo mostrar una nueva actividad ya tan sólo nos quedaría llamar a startActivity()pasándole como parámetro el intent creado. Pero en nuestro ejemplo queremos también pasarle cierta información a la actividad, concretamente el nombre que introduzca el usuario en el cuadro de texto. Para hacer esto vamos a crear un objeto Bundle, que puede contener una lista de pares clave-valor con toda la información a pasar entre las actividades. En nuestro caso sólo añadiremos un dato de tipo String mediante el método putString(clave, valor). Tras esto añadiremos la información al intent mediante el métodoputExtras(bundle).
    Finalizada la actividad principal de la aplicación pasamos ya a la secundaria. Comenzaremos de forma análoga a la anterior, ampliando el método onCreate obteniendo las referencias a los objetos que manipularemos, esta vez sólo la etiqueta de texto.

    Tras esto viene lo más interesante, debemos recuperar la información pasada desde la actividad principal y asignarla como texto de la etiqueta. Para ello accederemos en primer lugar al intent que ha originado la actividad actual mediante el método getIntent() y recuperaremos su información asociada (objeto Bundle) mediante el método getExtras().
    Hecho esto tan sólo nos queda construir el texto de la etiqueta mediante su método setText(texto) y recuperando el valor de nuestra clave almacenada en el objeto Bundle mediante getString(clave).

    Código:
     1 public  
    class FrmMensaje extends Activity { 
     2
    
     3	@Override
     4	public void[ onCreate(Bundle savedInstanceState) { 
     5		super.onCreate(savedInstanceState); 
     6		setContentView(R.layout.frmmensaje); 
     7
      
     8		TextView txtMensaje = (TextView)findViewById(R.id.TxtMensaje); 
     9
     
    10		Bundle bundle = getIntent().getExtras(); 
    11
     
    12		txtMensaje.setText("Hola " + bundle.getString("NOMBRE")); 
    13	} 
    14 }


    Con esto hemos concluido la lógica de las dos pantallas de nuestra aplicación y tan sólo nos queda un paso importante para finalizar nuestro desarrollo. Como indicamos en uno de los artículos anteriores, cualquier aplicación Android utiliza un fichero especial en formato XML (AndroidManifest.xml) para definir, entre otras cosas, los diferentes elementos que la componen. Por tanto, todas las actividades de nuestra aplicación deben quedar convenientemente recogidas en este fichero.

    La actividad principal ya debe aparecer puesto que se creó de forma automática al crear el nuevo proyecto Android, por lo que debemos añadir tan sólo la segunda. Para este ejemplo nos limitaremos a incluir la actividad en el XML, más adelante veremos que opciones adicionales podemos especificar.

    Código:
     1 <?xml version="1.0"encoding="utf-8"?>
     2 <manifest xmlns:android="http://schemas.android.com/apk/res/android"
    
     3	 package="net.sgoliver" 
    
     4	 android:versionCode="1" 
    
     5	 android:versionName="1.0"> 
     6
     7	<application android:icon="@drawable/icon" android:label="@string/app_name"> 
     8		<activity android:name=".HolaUsuario" 
    
     9			android:label="@string/app_name"> 
    10		<intent-filter> 
    11		<action android:name="android.intent.action.MAIN" /> 
    12			<category android:name="android.intent.category.LAUNCHER" /> 
    13		</intent-filter> 
    14	</activity>
    15
    16	<activity android:name=".FrmMensaje"></activity> 
    17	</application> 
    18
    19	<uses-sdk android:minSdkVersion="4" /> 
    20
    21 </manifest>


    Una vez llegado aquí, si todo ha ido bien, deberíamos poder ejecutar el proyecto sin errores y probar nuestra aplicación en el emulador.
    Descarga el código fuente de este artículo.
    Espero que esta aplicación de ejemplo os haya servido para aprender temas básicos en el desarrollo para Android, como por ejemplo la definición de la interfaz gráfica, el código java necesario para acceder y manipular los elementos de dicha interfaz, o la forma de comunicar diferentes actividades de Android. En los artículos siguientes veremos algunos de estos temas de forma más específica y ampliaremos con algunos temas más avanzados.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  9. #6

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Layouts

    En el artículo anterior del curso, donde desarrollamos una sencilla aplicación Android desde cero, ya hicimos algunos comentarios sobre los layouts. Como ya indicamos, los layouts son elementos no visuales destinados a controlar la distribución, posición y dimensiones de los controles que se insertan en su interior. Estos componentes extienden a la clase base ViewGroup, como muchos otros componentes contenedores, es decir, capaces de contener a otros controles. En el post anterior conocimos la existencia de un tipo concreto de layout, LinearLayout, aunque Android nos proporciona algunos otros. Veámos cuántos y cuáles.

    FrameLayout
    Éste es el más simple de todos los layouts de Android. Un FrameLayout coloca todos sus controles hijos alineados con su esquina superior izquierda, de forma que cada control quedará oculto por el control siguiente (a menos que éste último tenga transparencia). Por ello, suele utilizarse para mostrar un único control en su interior, a modo de contenedor (placeholder) sencillo para un sólo elemento sustituible, por ejemplo una imagen.
    Los componentes incluidos en un FrameLayout podrán establecer sus propiedadesandroid:layout_width y android:layout_height, que podrán tomar los valores “fill_parent” (para que el control hijo **** la dimensión de su layout contenedor) o “wrap_content” (para que el control hijo **** la dimensión de su contenido).
    Ejemplo:
    Código:
     1 <FrameLayout
     2	xmlns:android="http://schemas.android.com/apk/res/android"
     3	android:layout_width="fill_parent" 
    
     4	android:layout_height="fill_parent"> 
     5
    
     6	<EditText android:id="@+id/TxtNombre" 
    
     7		android:layout_width="fill_parent" 
    
     8		android:layout_height="fill_parent" /> 
     9
    
    10 </FrameLayout>
    LinearLayout
    El siguiente layout Android en cuanto a nivel de complejidad es el LinearLayout. Este layout apila uno tras otro todos sus elementos hijos de forma horizontal o vertical según se establezca su propiedadandroid:orientation.
    Al igual que en un FrameLayout, los elementos contenidos en un LinearLayout pueden establecer sus propiedades android:layout_width y android:layout_height para determinar sus dimensiones dentro del layout. Pero en el caso de un LinearLayout, tendremos otro parámetro con el que jugar, la propiedad android:layout_weight.

    Código:
     1 <LinearLayout
     2	xmlns:android="http://schemas.android.com/apk/res/android"
     3	android:layout_width="fill_parent"
     4	android:layout_height="fill_parent"
     5	android:orientation="vertical">
     6
     7	<EditText android:id="@+id/TxtNombre"
    
     8		android:layout_width="fill_parent"
     9		android:layout_height="fill_parent" />
    10
    11	<Button android:id="@+id/BtnAceptar"
    
    12		android:layout_width="wrap_content"
    13		android:layout_height="fill_parent" />
    14
    15</LinearLayout>
    Esta propiedad nos va a permitir dar a los elementos contenidos en el layout unas dimensiones proporcionales entre ellas. Esto es más dificil de explicar que de comprender con un ejemplo. Si incluimos en unLinearLayout vertical dos cuadros de texto (EditText) y a uno de ellos le establecemos unlayout_weight=”1? y al otro un layout_weight=”2? conseguiremos como efecto que toda la superficie del layout quede ocupada por los dos cuadros de texto y que además el segundo sea el doble (relación entre sus propiedades weight) de alto que el primero.

    Código:
     1 <LinearLayout
     2	xmlns:android="http://schemas.android.com/apk/res/android"
     3	android:layout_width="fill_parent"
     4	android:layout_height="fill_parent"
     5	android:orientation="vertical">
     6
     7	<EditText android:id="@+id/TxtDato1"
     8		android:layout_width="fill_parent"
     9		android:layout_height="fill_parent"
    10		android:layout_weight="1" />
    11
    12	<EditText android:id="@+id/TxtDato2"
    
    13		android:layout_width="fill_parent"
    14		android:layout_height="fill_parent"
    15		android:layout_weight="2" />
    16
    17 </LinearLayout>
    Así pues, a pesar de la simplicidad aparente de este layout resulta ser lo suficiente versátil como para sernos de utilidad en muchas ocasiones.

    TableLayout
    Un TableLayout permite distribuir sus elementos hijos de forma tabular, definiendo las filas y columnas necesarias, y la posición de cada componente dentro de la tabla.
    La estructura de la tabla se define de forma similar a como se hace en HTML, es decir, indicando las filas que compondrán la tabla (objetos TableRow), y dentro de cada fila las columnas necesarias, con la salvedad de que no existe ningún objeto especial para definir una columna (algo así como un TableColumn) sino que directamente insertaremos los controles necesarios dentro del TableRow y cada componente insertado (que puede ser un control sencillo o incluso otro ViewGroup) corresponderá a una columna de la tabla. De esta forma, el número final de filas de la tabla se corresponderá con el número de elementos TableRow insertados, y el número total de columnas quedará determinado por el número de componentes de la fila que más componentes contenga.
    Por norma general, el ancho de cada columna se corresponderá con el ancho del mayor componente de dicha columna, pero existen una serie de propiedades que nos ayudarán a modificar este comportamiento:
    • android:stretchColumns. Indicará las columnas que pueden expandir para absorver el espacio libre dejado por las demás columnas a la derecha de la pantalla.
    • android:shrinkColumns. Indicará las columnas que se pueden contraer para dejar espacio al resto de columnas que se puedan salir por la derecha de la palntalla.
    • android:collapseColumns. Indicará las columnas de la tabla que se quieren ocultar completamente.

    Todas estas propiedades del TableLayout pueden recibir una lista de índices de columnas separados por comas (ejemplo: android:stretchColumns=”1,2,3?) o un asterisco para indicar que debe aplicar a todas las columnas (ejemplo: android:stretchColumns=”*”).
    Otra característica importante es la posibilidad de que una celda determinada pueda ocupar el espacio de varias columnas de la tabla (análogo al atributo colspan de HTML). Esto se indicará mediante la propiedadandroid:layout_span del componente concreto que deberá tomar dicho espacio.
    Veamos un ejemplo con varios de estos elementos:

    Código:
     1 <TableLayout
    
     2	xmlns:android="http://schemas.android.com/apk/res/android"
     3	android:layout_width="fill_parent"
     4	android:layout_height="fill_parent"
     5	android:stretchColumns="1">
     6
     7	<TableRow>
     8		<TextView android:text="Celda 1.1"/>
     9		<TextView android:text="Celda 1.2"/>
    10	</TableRow>
    11
    12	<TableRow>
    13		<TextView android:text="Celda 2.1"/>
    14		<TextView android:text="Celda 2.2"/>
    15	</TableRow>
    16
    17	<TableRow>
    18		<TextView android:text="Celda 3"
    19			android:layout_span="2"/>
    20	</TableRow>
    21
    22 </TableLayout>
    RelativeLayout
    El último tipo de layout que vamos a ver es el RelativeLayout. Este layout permite especificar la posición de cada elemento de forma relativa a su elemento padre o a cualquier otro elemento incluido en el propio layout. De esta forma, al incluir un nuevo elemento X podremos indicar por ejemplo que debe colocarse debajo del elemento Y y alineado a la derecha del layout padre. Veamos esto en el ejemplo siguiente:

    Código:
     1 <RelativeLayout
     2	xmlns:android="http://schemas.android.com/apk/res/android"
     3	android:layout_width="fill_parent"
     4	android:layout_height="fill_parent" >
     5
     6		<EditText android:id="@+id/TxtNombre"
     7		android:layout_width="fill_parent"
     8		android:layout_height="wrap_content" />
     9
    10	<Button android:id="@+id/BtnAceptar"
    11		android:layout_width="wrap_content"
    12		android:layout_height="wrap_content"
    13		android:layout_below="@id/TxtNombre"
    14		android:layout_alignParentRight="true" />
    15
    16 </RelativeLayout>
    En el ejemplo, el botón BtnAceptar se colocará debajo del 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 10 pixeles (android:layout_marginLeft=”10px”).
    Al igual que estas tres propiedades, en un RelativeLayout tendremos un sinfín de propiedades para colocar cada control justo donde queramos. Veamos las principales [creo que sus propios nombres explican perfectamente la función de cada una]:
    Posición relativa a otro control:

    • android:layout_above.
    • android:layout_below.
    • android:layout_toLeftOf.
    • android:layout_toRightOf.
    • android:layout_alignLeft.
    • android:layout_alignRight.
    • android:layout_alignTop.
    • android:layout_alignBottom.
    • android:layout_alignBaseline.

    Posición relativa al layout padre:

    • android:layout_alignParentLeft.
    • android:layout_alignParentRight.
    • android:layout_alignParentTop.
    • android:layout_alignParentBottom.
    • android:layout_centerHorizontal.
    • android:layout_centerVertical.
    • android:layout_centerInParent.

    Opciones de margen (también disponibles para el resto de layouts):

    • android:layout_margin.
    • android:layout_marginBottom.
    • android:layout_marginTop.
    • android:layout_marginLeft.
    • android:layout_marginRight.

    Opciones de espaciado o padding (también disponibles para el resto de layouts):

    • android:padding.
    • android:paddingBottom.
    • android:paddingTop.
    • android:paddingLeft.
    • android:paddingRight.

    En próximos artículos veremos otros elementos comunes que extienden a ViewGroup, como por ejemplo las vistas de tipo lista (ListView), de tipo grid (GridView), y en pestañas (TabHost/TabWidget).
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  10. #7

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles básicos (I)

    En el artículo anterior del Curso de Programación en Android ya vimos los distintos tipos de layouts con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En los próximos artículos dedicados a Android vamos a hacer un repaso de los diferentes controles que pone a nuestra disposición la plataforma de desarrollo de este sistema operativo. Empezaremos con los controles más básicos y seguiremos posteriormente con algunos algo más elaborados.
    En este primer post sobre el tema nos vamos a centrar en los diferentes tipos de botones y cómo podemos personalizarlos. El SDK de Android nos proporciona tres tipos de botones: 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 defecto de estos tres controles.



    No vamos a comentar mucho sobre ellos dado que son controles de sobra conocidos por todos, ni vamos a enumerar todas sus propiedades porque existen decenas. A modo de referencia, a medida que los vayamos comentando iré poniendo enlaces a su página de la documentación oficial de Android para poder consultar todas sus propiedades en caso de necesidad.

    Control Button [API]
    Un control de tipo Button es el botón más básico que podemos utilizar. En el ejemplo siguiente definimos un botón con el texto “Púlsame” asignando su propiedad android:text. Además de esta propiedad podríamos utilizar muchas otras como el color de fondo (android:background), estilo de fuente (android:typeface), color de fuente (android:textcolor), tamaño de fuente (android:textSize), etc.

    Código:
     1 <Button android:id="@+id/BtnBoton1"
    
     2		android:text="Púlsame"
     3	android:layout_width="wrap_content"
     4	android:layout_height="wrap_content" />
    Control ToggleButton [API]
    Un control de tipo ToggleButton es un tipo de botón que puede permanecer en dos estados, pulsado/no_pulsado. En este caso, en vez de definir un sólo texto para el control definiremos dos, dependiendo de su estado. Así, podremos asignar las propiedades android:textOn y android:textoOff para definir ambos textos. Veamos un ejemplo a continuación.

    Código:
     1 <ToggleButton android:id="@+id/BtnBoton2"
     2	android:textOn="ON"
     3	android:textOff="OFF"
     4	android:layout_width="wrap_content"
     5	android:layout_height="wrap_content" />
    Control ImageButton [API]
    En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos esta propiedad con el descriptor de algún recurso que hayamos incluido en la carpeta /res/drawable. Así, por ejemplo, en nuestro caso hemos incluido una imagen llamada “ok.png” por lo que haremos referencia al recurso “@drawable/ok“.

    Código:
     1 <ImageButton android:id="@+id/BtnBoton3"
     2	android:layout_width="wrap_content"
     3	android:layout_height="wrap_content"
     4	android:src="@drawable/ok" />
    Eventos de un botón
    Como podéis imaginar, aunque estos controles pueden lanzar muchos otros eventos, el más común de todos ellos y el que querremos capturar en la mayoría de las ocasiones es el evento onClick. Para definir la lógica de este evento tendremos que implementarla definiendo un nuevo objeto View.OnClickListener() y asociándolo al botón mediante el método setOnClickListener(). La forma más habitual de hacer esto es la siguiente:

    Código:
     1 final Button btnBoton1 = (Button)findViewById(R.id.BtnBoton1);
     2
     3 btnBoton1.setOnClickListener(new View.OnClickListener() {
     4	@Override
     5	public void onClick(View arg0)
     6	{
     7		lblMensaje.setText("Botón 1 pulsado!");
     8	}
     9 });
    En el caso de un botón de tipo ToggleButton suele ser de utilidad conocer en qué estado ha quedado el botón tras ser pulsado, para lo que podemos utilizar su método isChecked(). En el siguiente ejemplo se comprueba el estado del botón tras ser pulsado y se realizan acciones distintas según el resultado.

    Código:
     1 final ToggleButton btnBoton2 = (ToggleButton)findViewById(R.id.BtnBoton2);
     2
     3 btnBoton2.setOnClickListener(new View.OnClickListener() {
     4	@Override
     5	public void onClick(View arg0)
     6	{
     7		if(btnBoton2.isChecked())
     8			lblMensaje.setText("Botón 2: ON");
     9		else
    10			lblMensaje.setText("Botón 2: OFF");
    11	}
    12 });
    Personalizar el aspecto un botón [y otros controles]
    En la imagen anterior vimos el aspecto que presentan por defecto los tres tipos de botones disponibles. Pero, ¿y si quisiéramos personalizar su aspecto más allá de cambiar un poco el tipo o el color de la letra o el fondo?
    Para cambiar la forma de un botón podríamos simplemente asignar una imagen a la propiedad android:background, pero esta solución no nos serviría de mucho porque siempre se mostraría la misma imagen incluso con el botón pulsado, dando poca sensación de elemento “clickable”.
    La solución perfecta pasaría por tanto por definir diferentes imágenes de fondo dependiendo del estado del botón. Pues bien, Android nos da total libertad para hacer esto mediante el uso de selectores. Un selector se define mediante un fichero XML localizado en la carpeta /res/drawable, y en él se pueden establecer los diferentes valores de una propiedad determinada de un control dependiendo de su estado.
    Por ejemplo, si quisiéramos dar un aspecto plano a un botón ToggleButton, podríamos diseñar las imágenes necesarias para los estados “pulsado” (en el ejemplo toggle_on.png) y “no pulsado” (en el ejemplo toggle_off.png) y crear un selector como el siguiente:

    Código:
     1 <?xml version="1.0" encoding="UTF-8"?>
     2 <selector
     3	xmlns:android="http://schemas.android.com/apk/res/android">
     4	
     5	<item android:state_checked="false"
     6			android:drawable="@drawable/toggle_off" />
     7		<item android:state_checked="true"
     8			android:drawable="@drawable/toggle_on" />
     9	
    10 </selector>
    Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo colocamos como un recurso más en nuestra carpeta de recursos /res/drawable. Hecho esto, tan sólo bastaría hacer referencia a este nuevo recurso que hemos creado en la propiedad android:background del botón:

    Código:
     1 <ToggleButton android:id="@+id/BtnBoton4"
     2		android:textOn="ON"
    
     3		android:textOff="OFF"
    
     4		android:padding="10dip"
    
     5			android:layout_width="wrap_content"
     6			android:layout_height="wrap_content"
    
     7			android:background="@drawable/toggle_style"/>
    En la siguiente imagen vemos el aspecto por defecto de un ToggleButton y cómo ha quedado nuestro ToggleButton personalizado.



    Podéis descargar el código fuente de este artículo pulsando aquí: android-botones.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  11. #8

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles básicos (II)

    Después de haber hablado en el artículo anterior de los controles de tipo botón, en esta nueva entrega nos vamos a centrar en otros tres componentes básicos imprescindibles en nuestras aplicaciones: las imágenes (ImageView), las etiquetas (TextView) y por último los cuadros de texto (EditText).

    Control ImageView [API]
    El control ImageView permite mostrar imágenes en la aplicación. La propiedad más interesante esandroid:src, que permite indicar la imagen a mostrar. Nuevamente, lo normal será indicar como origen de la imagen el identificador de un recurso de nuestra carpeta /res/drawable, por ejemploandroid:src=”@drawable/unaimagen”. Además de esta propiedad, existen algunas otras útiles en algunas ocasiones como las destinadas a establecer el tamaño máximo que puede ocupar la imagen, android:maxWidth y android:maxHeight.

    Código:
     1 <ImageView android:id="@+id/ImgFoto"
    
     2	android:layout_width="wrap_content"
    
     3 	android:layout_height="wrap_content"
    
     4 	android:src="@drawable/icon" />
    En la lógica de la aplicación, podríamos establecer la imagen mediante el método setImageResorce(…), pasándole el ID del recurso a utilizar como contenido de la imagen.

    Código:
     1 ImageView img= (ImageView)findViewById(R.id.ImgFoto);
     2 img.setImageResource(R.drawable.icon);
    Control TextView [API]
    El control TextView es otro de los clásicos en la programación de GUIs, las etiquetas de texto, y se utiliza para mostrar un determinado texto al usuario. Al igual que en el caso de los botones, el texto del control se establece mediante la propiedad android:text. A parte de esta propiedad, la naturaleza del control hace que las más interesantes sean las que establecen el formato del texto mostrado, que al igual que en el caso de los botones son las siguientes: android:background (color de fondo), android:textColor (color del texto), android:textSize (tamaño de la fuente) y android:typeface (estilo del texto: negrita, cursiva, …).

    Código:
     1 <TextView android:id="@+id/LblEtiqueta"
    
     2	android:layout_width="fill_parent"
     3 	android:layout_height="wrap_content"
     4 	android:text="Escribe algo:"
     5 	android:background="#AA44FF"
     6 	android:typeface="monospace" />
    De igual forma, también podemos manipular estas propiedades desde nuestro código. Como ejemplo, en el siguiente fragmento recuperamos el texto de una etiqueta con getText(), y posteriormente le concatenamos unos números, actualizamos su contenido mediante setText() y le cambiamos su color de fondo con setBackgroundColor().

    Código:
     1 final TextView lblEtiqueta = (TextView)findViewById(R.id.LblEtiqueta);
     2 String texto = lblEtiqueta.getText().toString();
     3 texto += "123";
     4 lblEtiqueta.setText(texto);
    Control EditText [API]
    El control EditText es el componente de edición de texto que proporciona la plataforma Android. Permite la introducción y edición de texto por parte del usuario, por lo que en tiempo de diseño la propiedad más interesante a establecer, además de su posición/tamaño y formato, es el texto a mostrar, atributo android:text.

    Código:
     1 <EditText android:id="@+id/TxtTexto"
     2	android:layout_width="fill_parent"
     3 	android:layout_height="wrap_content"
     4 	android:layout_below="@id/LblEtiqueta" />
    De igual forma, desde nuestro código podremos recuperar y establecer este texto mediante los métodos getText() y setText(nuevoTexto) respectivamente:

    Código:
     1 final EditText txtTexto = (EditText)findViewById(R.id.TxtTexto);
     2 String texto = txtTexto.getText().toString();
     3 txtTexto.setText("Hola mundo!");
    Un detalle que puede haber pasado desapercibido. ¿Os habéis fijado en que hemos tenido que hacer untoString() sobre el resultado de getText()? La explicación para esto es que el método getText() no devuelve un String sino un objeto de tipo Editable, que a su vez implementa la interfaz Spannable. Y esto nos lleva a la característica más interesante del control EditText, y es que no sólo nos permite editar texto plano sino también texto enriquecido o con formato. Veamos cómo y qué opciones tenemos, y para empezar comentemos algunas cosas sobre los objetos Spannable.

    Interfaz Spanned
    Un objeto de tipo Spanned es algo así como una cadena de caracteres (deriva de la interfaz CharSequence) en la que podemos insertar otros objetos a modo de marcaso etiquetas(spans) asociados a rangos de caracteres. De esta interfaz deriva la interfaz Spannable, que permite la modificación de estas marcas, y a su vez de ésta última deriva la interfaz Editable, que permite además la modificación del texto.
    Aunque en el apartado en el que nos encontramos nos interesaremos principalmente por las marcas de formato de texto, en principio podríamos insertar cualquier tipo de objeto.
    Existen muchos tipos de spans predefinidos en la plataforma que podemos utilizar para dar formato al texto, entre ellos:

    • TypefaceSpan. Modifica el tipo de fuente.
    • StyleSpan. Modifica el estilo del texto (negrita, cursiva, …).
    • ForegroudColorSpan. Modifica el color del texto.
    • AbsoluteSizeSpan. Modifica el tamaño de fuente.


    De esta forma, para crear un nuevo objeto Editable e insertar una marca de formato podríamos hacer lo siguiente:

    Código:
     1 //Creamos un nuevo objeto de tipo Editable
     2 Editable str = Editable.Factory.getInstance().newEditable("Esto es un simulacro.");
     3
     4 //Marcamos cono fuente negrita la palabra "simulacro"
     5 str.setSpan(new StyleSpan(android.graphics.Typeface.BOLD), 11, 19, Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
    En este ejemplo estamos insertando un span de tipo StyleSpan para marcar un fragmento de texto con estilo negrita. Para insertarlo utilizamos el método setSpan(), que recibe como parámetro el objeto Span a insertar, la posición inicial y final del texto a marcar, y un flag que indica la forma en la que el span se podrá extender al insertarse nuevo texto.

    Texto con formato en controles TextView y EditText
    Hemos visto cómo crear un objeto Editable y añadir marcas de formato al texto que contiene, pero todo esto no tendría ningún sentido si no pudiéramos visualizarlo. Como ya podéis imaginar, los controles TextView y EditText nos van a permitir hacer esto. Vemos qué ocurre si asignamos al nuestro control EditText el objeto Editable que hemos creado antes:

    Código:
     1 txtTexto.setText(str);
    Tras ejecutar este código veremos como efectivamente en el cuadro de texto aparece el mensaje con el formato esperado:



    Ya hemos visto cómo asignar texto con y sin formato a un cuadro de texto, pero ¿qué ocurre a la hora de recuperar texto con formato desde el control?. Ya vimos que la función getText() devuelve un objeto de tipo Editable y que sobre éste podíamos hacer un toString(). Pero con esta solución estamos perdiendo todo el formato del texto, por lo que no podríamos por ejemplo salvarlo a una base de datos.
    La solución a esto último pasa obviamente por recuperar directamente el objeto Editable y serializarlo de algún modo, mejor aún si es en un formato estandar. Pues bien, en Android este trabajo ya nos viene hecho de fábrica a través de la clase Html [API], que dispone de métodos para convertir cualquier objeto Spanned en su representación HTML equivalente. Veamos cómo. Recuperemos el texto de la ventana anterior y utilicemos el método Html.toHtml(Spannable) para convertirlo a formato HTML:

    Código:
     1 //Obtiene el texto del control con etiquetas de formato HTML
     2 String aux2 = Html.toHtml(txtTexto.getText());
    Haciendo esto, obtendríamos una cadena de texto como la siguiente, que ya podríamos por ejemplo almacenar en una base de datos o publicar en cualquier web sin perder el formato de texto establecido:

    Código:
     1 <p>Esto es un <b>simulacro</b>.</p>
    La operación contraria también es posible, es decir, cargar un cuadro de texto de Android (EditText) o una etiqueta (TextView) a partir de un fragmento de texto en formato HTML. Para ello podemos utilizar el métodoHtml.fromHtml(String) de la siguiente forma:

    Código:
     1 //Asigna texto con formato HTML
     2 txtTexto.setText(
     3	 Html.fromHtml("<p>Esto es un <b>simulacro</b>.</p>"),
     4	 BufferType.SPANNABLE);
    Desgraciadamente, aunque es de agradecer que este trabajo venga hecho de casa, hay que decir que tan sólo funciona de forma completa con las opciones de formato más básicas, como negritas, cursivas, subrayado o colores de texto, quedando no soportadas otras sorprendentemente básicas como el tamaño del texto, que aunque sí es correctamente traducido por el método toHtml(), es descartado por el método contrario fromHtml(). Sí se soporta la inclusión de imágenes, aunque esto lo dejamos para un artículo aparte (prometido!) ya que requiere algo más de explicación.
    Podéis descargar parte del código de este artículo desde este enlace.
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  12. #9

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles básicos (III)

    Tras hablar de varios de los controles indispensables en cualquier aplicación Android, como son los botones y los cuadros de texto, en este artículo vamos a ver cómo utilizar otros dos tipos de controles básicos en muchas aplicaciones, los checkboxes y los radio buttons.

    Control CheckBox [API]
    Un control checkbox se suele utilizar para marcar o desmarcar opciones en una aplicación, y en Android está representado por la clase del mismo nombre, CheckBox. La forma de definirlo en nuestra interfaz y los métodos disponibles para manipularlos desde nuestro código son análogos a los ya comentados para el control ToggleButton.
    De esta forma, para definir un control de este tipo en nuestro layout podemos utilizar el código siguiente, que define un checkbox con el texto “Márcame”:

    Código:
     1 <CheckBox android:id="@+id/ChkMarcame"
    
     2	android:layout_width="wrap_content"
     3 	android:layout_height="wrap_content"
     4 	android:text="Márcame!" />
    En cuanto a la personalización del control podemos decir que éste extiende [indirectamente] del control TextView, por lo que todas las opciones de formato ya comentadas en artículos anteriores son válidas también para este control.
    En el código de la aplicación podremos hacer uso de los métodos isChecked() para conocer el estado del control, y setChecked(estado) para establecer un estado concreto para el control.

    Código:
     1 if (checkBox.isChecked()) {
     2	checkBox.setChecked(false);
     3 }
    En cuanto a los posibles eventos que puede lanzar este control, el más interesante es sin duda el que informa de que ha cambiado el estado del control, que recibe el nombre de onCheckedChanged. Para implementar las acciones de este evento podríamos utilizar por tanto la siguiente lógica:

    Código:
     1 final CheckBox cb = (CheckBox)findViewById(R.id.chkMarcame);
     2
    
     3 cb.setOnCheckedChangeListener(
     4	new CheckBox.OnCheckedChangeListener() {
     5		public void onCheckedChanged(CompoundButton buttonView,
     6							 boolean isChecked) {
     7			if (isChecked) {
     8					cb.setText("Checkbox marcado!");
     9			}
    10			else {
    11				cb.setText("Checkbox desmarcado!");
    12		}
    13 	}
    14 });
    Control RadioButton [API]
    Al igual que los controles checkbox, un radiobutton puede estar marcado o desmarcado, pero en este caso suelen utilizarse dentro de un grupo de opciones donde una, y sólo una, de ellas debe estar marcada obligatoriamente, es decir, que si se marca una de ellas se desmarcará automáticamente la que estuviera activa anteriormente. En Android, un grupo de botones radiobutton se define mediante un elementoRadioGroup, que a su vez contendrá todos los elementos RadioButton necesarios. Veamos un ejemplo de cómo definir un grupo de dos controles radiobutton en nuestra interfaz:

    Código:
     1 <RadioGroup android:id="@+id/gruporb"
    
     2 	android:orientation="vertical"
     3 	android:layout_width="fill_parent"
     4 	android:layout_height="fill_parent" >
     5
     6 <RadioButton android:id="@+id/radio1"
     7		android:layout_width="wrap_content"
     8		android:layout_height="wrap_content"
     9		android:text="Opción 1" />
    10
    11 <RadioButton android:id="@+id/radio2"
    12		android:layout_width="wrap_content"
    13		android:layout_height="wrap_content"
    14		android:text="Opción 2" />
    15
    16 </RadioGroup>
    En primer lugar vemos cómo podemos definir el grupo de controles indicando su orientación (vertical u horizontal) al igual que ocurría por ejemplo con un LinearLayout. Tras esto, se añaden todos los objetos RadioButton necesarios indicando su ID mediante la propiedad android:id y su texto mediante android:text.
    Una vez definida la interfaz podremos manipular el control desde nuestro código java haciendo uso de los diferentes métodos del control RadioGroup, los más importantes: check(id) para marcar una opción determinada mediante su ID, clearCheck() para desmarcar todas las opciones, y getCheckedRadioButtonId() que como su nombre indica devolverá el ID de la opción marcada (o el valor -1 si no hay ninguna marcada). Veamos un ejemplo:

    Código:
     1 final RadioGroup rg = (RadioGroup)findViewById(R.id.gruporb);
     2 rg.clearCheck();
     3 rg.check(R.id.radio1);
     4 int idSeleccionado = rg.getCheckedRadioButtonId();
    En cuanto a los eventos lanzados, al igual que en el caso de los checkboxes, el más importante será el que informa de los cambios en el elemento seleccionado, llamado también en este caso onCheckedChange. Vemos cómo tratar este evento del objeto RadioGroup:

    Código:
     1 final RadioGroup rg = (RadioGroup)findViewById(R.id.gruporb);
     2
     3 rg.setOnCheckedChangeListener(
     4	new RadioGroup.OnCheckedChangeListener() {
     5		public void onCheckedChanged(RadioGroup group, int checkedId) {
     6			lblMensaje.setText("ID opcion seleccionada: " + checkedid);
     7		}
     8 });
    Veamos finalmente una imagen del aspecto de estos dos nuevos tipos de controles básicos que hemos comentado en este artículo:



    Podéis descargar el código de este artículo desde este enlace.
    Última edición por pebels; 13/09/2011 a las 09:46
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

  13. #10

    Avatar de pebels
    Fecha de ingreso
    28 oct, 07
    Mensajes
    3,117
    Interfaz de usuario en Android: Controles de selección (I)

    Una vez repasados los controles básicos (I, II, III) que podemos utilizar en nuestras aplicaciones Android, vamos a dedicar los próximos artículos a describir los diferentes controles de selección disponibles en la plataforma. Al igual que en otros frameworks Android dispone de diversos controles que nos permiten seleccionar una opción dentro de una lista de posibilidades. Así, podremos utilizar listas desplegables (Spinner), listas fijas (ListView), tablas (GridView) y otros controles específicos de la plataforma como por ejemplo las galerías de imágenes (Gallery).

    En este primer artículo dedicado a los controles de selección vamos a describir un elemento importante y común a todos ellos, los adaptadores, y lo vamos a aplicar al primer control de los indicados, las listas desplegables.

    Adaptadores en Android (adapters)

    Para los desarrolladores de java que hayan utilizado frameworks de interfaz gráfica como Swing, el concepto de adaptador les resultará familiar. Un adaptador representa algo así como una interfaz común al modelo de datos que existe por detrás de todos los controles de selección que hemos comentado. Dicho de otra forma, todos los controles de selección accederán a los datos que contienen a través de un adaptador.

    Además de proveer de datos a los controles visuales, el adaptador también será responsable de generar a partir de estos datos las vistas específicas que se mostrarán dentro del control de selección. Por ejemplo, si cada elemento de una lista estuviera formado a su vez por una imagen y varias etiquetas, el responsable de generar y establecer el contenido de todos estos “sub-elementos” a partir de los datos será el propio adaptador.

    Android proporciona de serie varios tipos de adaptadores sencillos, aunque podemos extender su funcionalidad facilmente para adaptarlos a nuestras necesidades. Los más comunes son los siguientes:

    • ArrayAdapter. Es el más sencillo de todos los adaptadores, y provee de datos a un control de selección a partir de un array de objetos de cualquier tipo.
    • SimpleAdapter. Se utiliza para mapear datos sobre los diferentes controles definidos en un fichero XML de layout.
    • SimpleCursorAdapter. Se utiliza para mapear las columnas de un cursor sobre los diferentes elementos visuales contenidos en el control de selección.

    Para no complicar excesivamente los tutoriales, por ahora nos vamos a conformar con describir la forma de utilizar un ArrayAdapter con los diferentes controles de selección disponibles. Más adelante aprenderemos a utilizar el resto de adaptadores en contextos más específicos.

    Veamos cómo crear un adaptador de tipo ArrayAdapter para trabajar con un array genérico de java:

    Código:
     1 final String[] datos =
     2		new String[]{"Elem1","Elem2","Elem3","Elem4","Elem5"};
     3
     4 ArrayAdapter<String> adaptador =
     5 		new ArrayAdapter<String>(this,
    
     6			android.R.layout.simple_spinner_item, datos);
    Comentemos un poco el código. Sobre la primera línea no hay nada que decir, es tan sólo la definición del array java que contendrá los datos a mostrar en el control, en este caso un array sencillo con cinco cadenas de caracteres. En la segunda línea creamos el adaptador en sí, al que pasamos 3 parámetros:

    1. El contexto, que normalmente será simplemente una referencia a la actividad donde se crea el adaptador.
    2. El ID del layout sobre el que se mostrarán los datos del control. En este caso le pasamos el ID de un layout predefinido en Android (android.R.layout.simple_spinner_item), formado únicamente por un control TextView, pero podríamos pasarle el ID de cualquier layout de nuestro proyecto con cualquier estructura y conjunto de controles, más adelante veremos cómo.
    3. El array que contiene los datos a mostrar.

    Con esto ya tendríamos creado nuestro adaptador para los datos a mostrar y ya tan sólo nos quedaría asignar este adaptador a nuestro control de selección para que éste mostrase los datos en la aplicación.

    Control Spinner [API]

    Las listas desplegables en Android se llaman Spinner. Funcionan de forma similar al de cualquier control de este tipo, el usuario selecciona la lista, se muestra una especie de lista emergente al usuario con todas las opciones disponibles y al seleccionarse una de ellas ésta queda fijada en el control. Para añadir una lista de este tipo a nuestra aplicación podemos utilizar el código siguiente:

    Código:
     1 <Spinner android:id="@+id/CmbOpciones"
    
     2	android:layout_width="fill_parent"
     3 	android:layout_height="wrap_content" />
    Poco vamos a comentar de aquí ya que lo que nos interesan realmente son los datos a mostrar. En cualquier caso, las opciones para personalizar el aspecto visual del control (fondo, color y tamaño de fuente, …) son las mismas ya comentadas para los controles básicos.

    Para enlazar nuestro adaptador (y por tanto nuestros datos) a este control utilizaremos el siguiente código java:

    Código:
     1 final Spinner cmbOpciones = (Spinner)findViewById(R.id.CmbOpciones);
     2
     3 adaptador.setDropDownViewResource(
     4		android.R.layout.simple_spinner_dropdown_item);
     5
     6 cmbOpciones.setAdapter(adaptador);
    Comenzamos como siempre por obtener una referencia al control a través de su ID. Y en la última línea asignamos el adaptador al control mediante el método setAdapter(). ¿Y la segunda línea para qué es? Cuando indicamos en el apartado anterior cómo construir un adaptador vimos cómo uno de los parámetros que le pasábamos era el ID del layout que utilizaríamos para visualizar los elementos del control. Sin embargo, en el caso del control Spinner, este layout tan sólo se aplicará al elemento seleccionado en la lista, es decir, al que se muestra directamente sobre el propio control cuando no está desplegado. Sin embargo, antes indicamos que el funcionamiento normal del control Spinner incluye entre otras cosas mostrar una lista emergente con todas las opciones disponibles. Pues bien, para personalizar también el aspecto de cada elemento en dicha lista emergente tenemos el método setDropDownViewResource(ID_layout), al que podemos pasar otro ID de layout distinto al primero sobre el que se mostrarán los elementos de la lista emergente. En este caso hemos utilizado otro layout predefinido an Android para las listas desplegables (android.R.layout.simple_spinner_dropdown_item).

    Con estas simples lineas de código conseguiremos mostrar un control como el que vemos en las siguientes imágenes:



    Como se puede observar en las imágenes, la representación del elemento seleccionado (primera imagen) y el de las opciones disponibles (segunda imagen) es distinto, incluyendo el segundo de ellos incluso algún elemento gráfico a la derecha para mostrar el estado de cada opción. Como hemos comentado, esto es debido a la utilización de dos layouts diferentes para uno y otros elementos.

    En cuanto a los eventos lanzados por el control Spinner, el más comunmente utilizado será el generado al seleccionarse una opción de la lista desplegable, onItemSelected. Para capturar este evento se procederá de forma similar a lo ya visto para otros controles anteriormente, asignadole su controlador mediante el método setOnItemSelectedListener():

    Código:
     1 cmbOpciones.setOnItemSelectedListener(
     2		new AdapterView.OnItemSelectedListener() {
     3		public void onItemSelected(AdapterView<?> parent,
     4			android.view.View v, int position, long id) {
     5				lblMensaje.setText("Seleccionado: " + datos[position]);
     6		}
     7
     8		public void onNothingSelected(AdapterView<?> parent) {
     9			lblMensaje.setText("");
    10		}
    11 });
    Para este evento definimos dos métodos, el primero de ellos (onItemSelected) que será llamado cada vez que se selecciones una opción en la lista desplegable, y el segundo (onNothingSelected) que se llamará cuando no haya ninguna opción seleccionada (esto puede ocurrir por ejemplo si el adaptador no tiene datos).

    En el siguiente artículo describiremos el uso de controles de tipo lista (ListView).
    Última edición por pebels; 13/09/2011 a las 09:46
    CargaUSB 1.0 (31/08/09)
    Editor Teeter 1.0 PPC y PC (28/11/08)
    Led Banner 1.4 (05/03/09)


    Agradezco cualquier donación. Las donaciones recibidas serán para poder publicar mis desarrollos (de Android) en el play store. Gracias.

 

 
+ Responder tema
Página 1 de 3 123 ÚltimoÚltimo

Nuestros visitantes llegarón a esta página buscando:

descargar android-HolaUsuario.zip

android-holausuario.zip

iniciar spinner con valor determinado android

codigo android holausuario zip

Codigoandroid-HolaUsuario.zip

SEO Blog

Etiquetas para este tema