martes, 28 de enero de 2014

Estilos y Temas

En Android todos los elementos gráficos son susceptibles de modificar su aspecto en mayor o menor medida. En lugar de realizar una configuración individualizada de todos los elementos se pueden emplear los temas y/o estilos para realizarlo de forma más ordenada. Se trata de un concepto muy similar a las hojas de estilo CSS, donde también se emplea el concepto de herencia para definir unos estilos en función de estilos base o padre.

Un tema es una configuración de aspecto general de la app, de manera que todos los estilos definidos para el tema se aplican de forma automática a todos los elementos relacionados de la app. De cualquier forma cada Activity puede emplear un tema distinto. Habitualmente se emplean temas propios de las plataformas Android como base para definir nuevos temas o estilos.

Un recurso de estilo define la configuración visual para un elemento o grupo de éstos, pero necesita ser referenciado por los componentes visuales concretos para que se aplique el estilo en cuestión.

Lo mínimo necesario

Un fichero /res/values/styles.xml:
<resources
xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Tema de la aplicación -->
<style name="AppTheme" parent="android:Theme.Holo.Light">
<!-- Configuración global del tema, no imprescindible -->  
<item name="android:windowBackground">@color/fondo</item>    
</style>
   
<style name="Titulo" parent="AppTheme">
    <item name="android:textColor">@color/titulo</item>
    <item name="android:textSize">17sp</item>
</style>
</resources>


Un fichero /res/values/colors.xml
<resources
xmlns:android="http://schemas.android.com/apk/res/android">

<color name="fondo">#F2F2F2</color>
   <color name=“titulo">#857960</color>
</resources>


Aplicar el tema a la aplicación a través del Manifest:
<application
        android:allowBackup="true"
        android:icon=“@drawable/ic_launcher"
        android:label="@string/app_titulo"    
  android:theme="@style/StyledIndicators" >


Aplicar el estilo a los elementos necesarios:
<TextView
android:id="@+id/tvTitulo"
style="@style/Detalle.Text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text=“@string/main_title" />

Referencias

http://developer.android.com/guide/topics/resources/style-resource.html

martes, 21 de enero de 2014

Recursos

Es posible utilizar en una aplicación Android ficheros XML para especificar distintos tipos de recursos. Estos ficheros deben encontrarse en la ubicación /res de la aplicación, organizados en función del tipo de recurso que representan en subcarpetas cuyo nombre indica qué elementos proporcionan a la aplicación:
Carpeta
Recurso
animator
Animación de propiedades
anim
Animaciones por interpolación
color
Colores
drawable
Imágenes
layout
Layout
menu
Menús
raw
Otros elementos
values
Ficheros de valores
xml
Otros ficheros XML


Dentro de la carpeta values se pueden encontrar ficheros de distintos tipos, como por ejemplo los ficheros de recursos String que contienen las cadenas de caracteres que se usan en la aplicación. Es una práctica muy recomendable utilizar ficheros de recursos para los títulos, etiquetas, mensajes y cualquier otro tipo de elemento textual de la aplicación de forma que facilite el mantenimiento en caso de modificación de los mismos, la reutilización en distintos elementos gráficos, así como la traducción en caso de aplicaciones multi-idioma.

Lo mínimo necesario

Un fichero strings.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="app_name">Título</string>
<string name="my_button_text">Botón</string>


Referenciar a las cadenas desde cualquier otro fichero de recurso de la app:
<Button
android:id="@+id/my_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/my_button_text"/>


También se puede hacer referencia a los recursos desde código fuente:
TextView msgTextView = (TextView) findViewById(R.id.msg);
msgTextView.setText(R.string.hello_message);

Adaptación de recursos e Internacionalización

Android está presente en dispositivos con distintas capacidades y que se emplean con distintas configuraciones y en distintas localizaciones geográficas. Para llegar a la mayor cantidad de usuarios y dispositivos, la aplicación debe manejar texto, archivos multimedia o gráficos teniendo en cuenta distintas características de pantalla, versiones de sistema operativo, estado, localización o cualquier tipo de criterio que pueda motivar distintos recursos para la aplicación.

En Android, gracias a la separación entre los ficheros de recursos y el código con la funcionalidad de la app, esta adaptación resulta sencilla y limpia, siempre que se sigan los criterios necesarios a la hora de organizar la información. Se consideran recursos las cadenas de texto, diseño, sonidos, gráficos y cualquier otro dato estático de la aplicación susceptible de estar sujeto a cambios por adaptación o localización. Cuando el usuario ejecuta la aplicación, Android selecciona automáticamente y carga los recursos que mejor se adapten al dispositivo.

Para organizar los recursos, la app puede especificar todos los directorios de recursos adaptados que sean necesarios. Estos directorios se encuentran dentro de la carpeta /res y utilizan la nomenclatura <resources_name>-<config_qualifier> donde resources-name se refiere al nombre del tipo de recurso (drawable, layout, values, …) y config-qualifier al tipo de configuración a la que se refiere (pantalla, idioma, orientación, …).

El nombre de un directorio de recursos y el orden de los sufijos deben seguir los criterios establecidos por Android, de otra forma el proyecto no puede ser construido.

En tiempo de ejecución también pueden existir problemas derivados de la adaptación de recursos. Android debe encontrar para cada recurso al menos su definición en la carpeta por defecto, en caso contrario se produce un error. Esto significa que el sistema al buscar un recurso (R.string.app_name) siempre mirará en la carpeta de recursos más específica a la situación concreta (values-en), si dentro de los recursos de esa carpeta no localiza el recurso buscará en la carpeta por defecto (values) y en caso de no localizarlo se produce el error y la app se detiene.

Referencias

http://developer.android.com/guide/topics/resources/providing-resources.html#AlternativeResources

martes, 14 de enero de 2014

Definición de interfaces

Los elementos de la interfaz gráfica de Usuario en Android siguen una estructura en la que se pueden encontrar dos tipos principales de componentes: View (elementos básicos) o ViewGroup (contenedores o grupos de elementos de tipo View o ViewGroup).

 Las interfaces de usuario en Android se pueden definir de dos formas, mediante archivo XML o mediante código Java directamente. Es más recomendable la utilización de XML, ya que resulta más sencillo de emplear, testar y configurar con el diseñador del SDK y además fomenta la separación de la lógica de aplicación de la capa de presentación. De cualquier forma a través de código habitualmente se establecen propiedades y eventos, o incluso existirá la posibilidad de definir nuevos elementos del interfaz  de forma dinámica.

Un primer paso para la definición del interfaz gráfico es la selección del Layout de la Activity. Un Layout es un ViewGroup que determina cómo se ubican y muestran los elementos en pantalla, existiendo en Android distintos tipos de Layout, entre los cuales destacan los de tipo Linear (muestra los elementos linealmente, en horizontal o vertical), Relative (muestra los elementos en posiciones relativas a otros elementos) o Frame (ubicación libre o superpuesta de elementos.

Sobre un layout se pueden colocar otros layouts anidados o directamente Views, que son los componentes de interacción con el usuario (también denominados widgets en algunos casos). Un View es cualquier elemento del interfaz gráfico que se incluye como parte de un layout para componer la visualización en pantalla de una Activity. Existe una gran cantidad de elementos de tipo View, siendo los más comunes los de tipo Button(botón), TextView (etiqueta), EditText (caja de texto), ListView (componente individual para mostrar elementos en una lista), …

Lo mínimo necesario

Un fichero XML de layout. Se localiza en la ruta res/layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

</LinearLayout>


Incluir en el layout los componentes gráficos con los atributos que definen su visualización y contenido predefinido:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
android:id="@+id/textView1"
android:text="uno"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<TextView
android:id="@+id/textView2"
android:text="dos"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
         

Cabe destacar del código anterior que los componentes visuales (ViewGroup o View) siempre tienen como obligatorios los atributos layout_width y layout_height para definir la colocación en pantalla. El atributo id solamente es necesario en el caso de necesitar referenciar al componente visual desde código o desde otro componente del propio XML.

Referencias