martes, 21 de febrero de 2012

Crear UI para diferentes tamaños de pantallas.

Desarrollo sobre la plataforma Android:



Hola a todos nuevamente, espero que estén bien ;) otra vez voy a escribir sobre un tema un poco avanzado, no es demasiado complicado de comprender, pero si muy útil. Escribo porque estuve lidiando un rato sobre este problema, el tema es el siguiente, como sabemos la plataforma Android funciona sobre diferentes dispositivos, los mismos poseen pantallas con diferentes densidades, tamaños, etc. Al testear nuestra aplicación si no tenemos la costumbre de realizarlo con emuladores que posean diferentes características de pantalla, podríamos caer en el error de que la UI se ve correctamente en todo dispositivo, pero esto necesariamente no debe ser así. Ya que una imagen o un texto, no se veran igual en un movil como por ejemplo un Samsung Galaxy S2 a un Samsung i5500 (que es el que poseo para testear los programitas jeje)
Este problema, posee una solución que no es demasiado compleja, y ahora vamos a verla, lo primero es crear un proyecto Android en nuestro IDE Eclipse, y debería verse así:



Ahora lo que deberemos crear, dentro de la carpeta res/ de nuestro proyecto dependiendo al tipo de pantalla al que nos queremos referir, con estos nombre:

layout-small
layout-normal
layout-large
layout-xlarge


Y debería quedar como se ve en la imagen, ahora se deben preguntar, porque esos nombres, para que sirve esto etc, etc. Bueno, aunque como dije que esto es sencillo, la explicación no es tan fácil, porque se deben tener algún conceptos, para entenderlo.

Términos y conceptos.

Tamaño de la pantalla:
-
Tamaño físico real, medido en diagonal de la pantalla.
-
Para simplificar, en Android se han dividido todos los tamaños de pantalla reales, en cuatro tamaños generalizados: small, normal, large, and extra large.

Densidad de pantalla:

La cantidad de píxeles en un área física de la pantalla, normalmente conocida como dpi(puntos por pulgada). Por ejemplo, una "baja" densidad de pantalla tiene menos píxeles dentro de un área física determinada, en comparación con la densidad de una pantalla "normal" o "de alta densidad".
Para simplificar, los grupos de todas las densidades de pantalla reales en Android se dividen en cuatro densidades generalizadas: low, medium, high, and extra high.

Orientación:
La orientación de la pantalla desde el punto de vista del usuario. Esta es horizontal o vertical, lo que significa que la relación de aspecto de la pantalla o es de ancho o
alto,respectivamente. Tenga en cuenta que no sólo los diferentes dispositivos operan en diferentes orientaciones por defecto, pero puede cambiar la orientación en tiempo de ejecución cuando el usuario gira el dispositivo.( estas dos orientaciones son: landscape o portrait).

Resolución
El número total de pixel
es físicos sobre una pantalla. Al añadir soporte para múltiples pantallas, las aplicaciones no trabajan directamente con la resolución, las aplicaciones solo deben estar pensadas para que se vean correctamente según el tamaño de pantalla y la densidad, según lo especificado por los tamaños de pantallas generalizados y grupos de densidades.

Densidad de píxeles Independiente(dp)
Una unidad de pixel virtual que se debe utilizar en la definición de diseño de la interfaz de usuario, para expresar las dimensiones de diseño o de la posición de una manera independiente de la densidad.
El
dp es equivalente a un píxel físico en una pantalla de 160 dpi, que es la densidad de línea de base asumida por el sistema para una pantalla de densidad “mediun”. Durante la ejecución, el sistema de forma transparente maneja cualquier ampliación de las unidades dp, según sea necesario, en base a la densidad real de la pantalla en uso. La conversión de las unidades de DP a píxeles de la pantalla es simple: px = dp * (dpi / 160). Por ejemplo, en una pantalla de 240 dpi, un 1 dp es igual a 1,5 pixeles físicos. Usted siempre debe usar unidades dp la hora de definir la interfaz de usuario de la aplicación, para garantizar la correcta visualización de la interfaz de usuario en las pantallas con diferentes densidades.

Rango de pantallas soportados

El soporte que se da sobre los diferentes tamaños de pantallas y división, como antes se a mencionado, es el que se muestra en la imagen:


Estos son los tamaños que tendrían las pantallas en unidades dp.


              xlarge pantallas de al menos 960dp x 720dp
             large pantallas de al menos 640dp x 480dp
             normal pantallas de al menos 470dp x 320dp
             small pantallas de al menos 426dp x 320dp



Bueno, una vez leído estos conocimientos básicos, creo que ya comprenden el porque les hice crear esas carpetas, con esos nombres en particular, esto en resumen lo que hará es que nuestro Android pueda elegir la UI de las que hemos diseñado, la que mejor se adapte a la pantalla del móvil en la que se instale.


Para darse cuenta de lo mismo(como se ve en la imagen), nuestro IDE Eclipse detecta como si lo haría nuestro Android en que carpeta se encuentra el layout a editar, así que como se ve, de forma predeterminada el que se encuentra en la carpeta layout-large, se pone en Editing config: “Large Screen” tamaño de pantalla 5.1in WVGA.

De la misma manera lo hará con el layout en layout-normal(3.7in WVGA(Nexus One)) y layout-small(en 2.7in QVGA) así que de esta manera, simplemente con crear en cada carpeta de esas un archivo .xml con el mismo nombre. Donde diseñaremos el mismo layout pero para diferentes tamaños de pantallas, esto hará que nuestro SO Android elija la versión de layout que mas le conviene para cada tamaño de pantalla que tengan los dispositivo donde se instalen. Debemos tener en cuenta que esto lo podemos hacer también con las diferentes orientaciones de pantallas en las que este nuestro dispositivo (portrait y landscape). En ese caso, podríamos crear 8 archivos .xml del mismo layout (4 tamaños de pantallas diferentes x 2 orientaciones de pantallas) Tengan en cuenta que no siempre es necesario realizar tantas versiones del mismo layout, para eso recomiendo crear uno, para un tamaño de pantalla, después verlos con otras versiones de pantallas y en diferentes VM, así comprueban que el funcionamiento sea el óptimo para el usuario.

Como verán el tema es bastante amplio, esto seria una de las buenas practicas de programación sobre Android, y esta en las recomendación que indican desde la documentación oficial, que como siempre recomiendo leer , para ampliar los conocimientos adquiridos en mis post. Espero que les allá gustado, y que les servido de algo.



Documentación Oficial:

Saludos a todos, Gabriel E. Pozo


sábado, 11 de febrero de 2012

Viendo componentes de la Gui : WebView


Desarrollo sobre la plataforma Android:


Hola a todos de nuevo, como ya vieron en los otros post, ya creamos nuestra primer aplicación, pero como habrán visto, es bastante insulsa. Pues ahora vamos a comenzar a ver los componentes gráficos, los que aran que se pueda interactuar con nuestra aplicación, darle información y tomar información del usuario, etc, etc.
En realidad, en este post iba a comenzar por los componentes GUI mas comunes y sencillo, como un botón y un txtview, pero como estuve realizando un par de cosas con un webview hoy. Pues vamos hablar un poco sobre el tema.
Bueno lo primero sera, crear un nuevo proyecto Android, como ya vimos en anteriores post, para ello desde Eclipse vamos a File, New, Android Project. Le damos un nombre al proyecto, elegimos una versión de la plataforma Android ( en mi caso 2.2 o level 8 ;) ). Después creamos los nombres de los paquetes, y te crea una aplicación donde solo hay un textview que dice la famosa frase Hello World!!!


Bueno, lo primero que deberemos hacer, es abrir el archivo main.xml que se encuentra en la carpeta, “layout”, que esta dentro de la carpeta “res”. Ah este archivo se lo puede modificar de dos maneras, “visual o modificando a mano el código” (esta bueno jugar con las dos) . Una recomendación mía, es que vallan jugando arrastrando los objetos y luego modificar los atributos a mano.
De manera visual, vamos a la paleta de componentes que esta a nuestra izquierda, vamos hasta composite, y luego arrastramos el webview. Nos quedara a la vista, algo así:


Luego miramos el código haciendo click en la sección de abajo donde dice main.xml y si todo salio
bien por ahora, nuestro Eclipse, nos debería haber creado este código:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello" />

<WebView
android:id="@+id/webView1"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</LinearLayout>

Ahora deberemos ir hasta hasta el archivo .java que nos genero de manera automática, que se encuentra en la carpeta “src” en el paquete que tiene el nombre que nosotros elegimos al generar nuestro proyecto, en mi caso “prueba.web.view” y allí debería haber creado código similar a este:

package prueba.web.view;

import android.app.Activity;
import android.os.Bundle;

public class WebViewActivity extends Activity {
             /** Called when the activity is first created. */
             @Override
             public void onCreate(Bundle savedInstanceState) {
                        super.onCreate(savedInstanceState);
                        setContentView(R.layout.main);
              }
}


Pues, ahora simplemente para poder manejar el webview, deberemos crear una referencia desde la clase R al webview que nosotros tenemos en nuestro layout. Como verán, en el .xml el ID o nombre de referencia del webview se especifica en esta sección de código:

android:id="@+id/webView1" dentro del webview.

Así que ahora en WebViewActivity, deberemos agregar este código:

WebView primero = (WebView)findViewById(R.id.webView1);

Donde se crea la referencia al objeto utilizando la función “findViewById”. Ahora todo lo que hagamos con primero, afectara a nuestro webview ;)
Lo que nos queda ahora es agregarle la url, del recurso que queremos que muestre nuestro webview, por ejemplo:

primero.loadUrl(url);


Ah y casi me olvido, por supuesto que hay que agregar los permisos necesarios, para que no nos lance ningún error al querer ejecutar la aplicación. Los mismo se deben agregar en el archivo AndroidManifest.xml. En el caso este que el webview muestra una url desde internet, debemos agregar el permiso de acceso a internet, que es este:

<uses-permission android:name="android.permission.INTERNET"/>

Quedandonos un AndroidManifest.xml similar a este:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="prueba.web.view"
android:versionCode="1"
android:versionName="1.0" >

<uses-sdk android:minSdkVersion="8" />
<uses-permission android:name="android.permission.INTERNET"/>

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name" >
<activity
android:name=".WebViewActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />

<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>

</manifest>

Este es el resultado, sobre el manejo simple de webview:


Después deberemos profundizar muchos sobre el tema, ya que con esta herramienta se pueden cargar ficheros perteneciente a la aplicación, como archivos HTML, y CSS. Y muchas otras cosas mas, así que imaginen que potente que es su utilización.

Bueno gente, esto es todo por este articulo, espero que les alla gustado, mas adelante seguiremos profundizando sobre temas relacionados a la GUI de nuestras aplicaciones, ya que creo, que en los dispositivos moviles si no es atractivo no va a tener éxito. Como siempre les digo, sigan investigando sobre este tema, que es muy amplio, y en lo posible vean y lean toda la documentación que puedan.

Documentación Oficial:


Saludos a todos, Gabriel E. Pozo






sábado, 4 de febrero de 2012

Ciclo de vida de una aplicación.

Desarrollo sobre la plataforma Android:



Hola a todos, en este post vamos a hablar sobre el ciclo de vida de una aplicación Android, para el que se pregunte porque, pues deberán saber que es una de las cosas a saber mas importantes sobre la programación en esta plataforma. Porque es tan importante se preguntaran, pues simplemente que el ciclo de vida es la forma en que una aplicación maneja la creación de los recursos, servicios, enlace a los datos, etc, etc. Así también como la destrucción de los mismos, para poder liberar los recursos y que estos no sigan consumiendo los pocos que podemos llegar a tener en nuestro dispositivo (recuerden que no estamos creando aplicaciones para una PC ;) ).
Como verán en la siguiente imagen, acá se gráfica, el ciclo de vida de una aplicación, que luego pasaremos a explica:


onCreate() : Se ejecuta cuando se crea la Activity por primera vez. Aquí es donde se deberían crear views, enlazar datos a listas,… en definitiva el proceso de inicialización de nuestra aplicación. (Dato: desde este estado no se puede matar la aplicación, desde este estado solo se podría pasar a onStart()).

onRestart(): Se ejecuta después de que la aplicación se haya detenido, justo después de que sea iniciada de nuevo. (Dato: desde este estado no se puede matar la aplicación, desde este estado solo se podría pasar a onStart()).

onStart(): Se ejecuta justo antes de que la aplicación aparezca visible para el usuario. Si la aplicación es un proceso en background el siguiente estado es onStop(), si la aplicación se ejecuta en foreground el siguiente método es onResume(). (Dato: desde este estado no se puede matar la aplicación, desde este estado solo se podría pasar a onResume() o onStop()).

onResume(): Se ejecuta cuando la Activity interactúa con el usuario. En éste punto la Activity está en la cima de la pila. (Dato: desde este estado no se puede matar la aplicación, desde este estado solo se podría pasar a onPause() ).


onPause(): Se ejecuta cuando el sistema está a punto de continuar una Activity anterior. Se utiliza típicamente para guardar datos que no se han grabado anteriormente, parar animaciones y otras acciones que consuman CPU. Seguida por onResume() si la actividad vuelve a primer plano o onStop() si es invisible para el usuario. (Dato: desde este estado se puede matar la aplicación, desde este estado solo se podría pasar a onResume() o onStop() ).


onStop(): Se ejecuta cuando la Activity deja de ser visible al usuario, porque otra Activity ha continuado y pasa a un lugar más prioritario de la pila. Puede ocurrir porque una nueva Activity ha sido creada, una Activity ya creada pasa a primer plano o ésta está siendo destruida. El siguiente método será onRestart() si la Activity vuelve a interaccionar con el usuario o por onDestroy() si la Activity será destruida.(Dato: desde este estado se puede matar la aplicación, desde este estado solo se podría pasar a onRestart() o onDestroy() ).

onDestroy(): Última llamada antes de destruir la Activity. Puede ocurrir porque la actividad está acabando (llamada a finish() ) , o porque el sistema destruirá la instancia para guardar espacio. Se puede distinguir esos escenarios con el método isFinishing().(Dato: desde este estado se puede matar la aplicación, desde este estado no se puede ir a otro).

Conocer todo el funcionamiento del ciclo de vida, es extremadamente importante, ya que con los mismos, serán donde manejaremos, el salvar los datos, la creación y destrucción de recursos, etc, etc. Vamos a dar un ejemplo la partida de un juego:
Cuando el usuario cierra la aplicación de manera inesperada, porque tiene que entender una llamada, o responder un mensaje. Si nosotros no manejamos este tipo de situaciones, perderíamos los datos de la partida, lo que no quedaría bien en nuestro programa. Así que antes de que se cierre, deberíamos recordar salvar los datos. Deberían pensar en cual de todos esos estados les rendiría mas, ya que si sobre cargamos nuestro dispositivo con muchas llamadas a salvar datos, la aplicación tendría un peor rendimiento. Lo que no se quedaría muy bien, y eso puede provocar que a los usuarios les moleste utilizar nuestro programa.


Bueno gente, esto es todo por este articulo,ya conocen el ciclo de vida, espero que se entienda lo importante que es conocerlo. Les recomiendo que busquen un poco mas de información sobre el tema, y además que realicen algunas pruebas, para que les ayude a entenderlo de forma mas didáctica. De todas maneras, esto lo seguiremos viendo todo el tipo, ya que es algo básico para la programación sobre esta plataforma.


Documentación Oficial:


Saludos a todos, Gabriel E. Pozo