Share
El desarrollo de widgets para la plataforma Android implica un conjunto de tareas ligeramente diferente al desarrollo de aplicaciones estándar. En esta serie de tutoriales, trabajaremos en el proceso de desarrollar un widget de reloj analógico personalizable. El reloj se basará en la clase AnalogClock de Android y se personalizará con tus propios gráficos..
En esta serie de tutoriales estamos desarrollando un widget de reloj analógico de Android personalizable utilizando la clase AnalogClock y gráficos personalizados. En la primera parte de la serie, creamos el proyecto, preparando el archivo Manifest y otros recursos. En esta parte, trabajaremos en el diseño del widget. Esto implicará la creación de gráficos para el dial del reloj y las manecillas, así como la implementación del diseño en XML. Crearemos gráficos para diferentes densidades de dispositivos. En la parte final de la serie, vamos a implementar permitiendo al usuario elegir entre una selección de diseños para el reloj, por lo que crearemos tres opciones de diseño aquí.
Esta es la Parte 2 de nuestra serie sobre cómo crear un widget de reloj analógico de Android personalizable en cuatro tutoriales:
El widget de Android AnalogClock usa tres imágenes: el reloj, la manecilla de los minutos y la manecilla de la hora. Por lo tanto, crearemos tres elementos de diseño para cada versión del widget de reloj entre los que queremos que los usuarios puedan elegir. También crearemos opciones de diseño alternativas con marcación, hora y minutos. Para este proyecto, tendremos que apuntar a diferentes densidades de pantalla del dispositivo, para lo cual crearemos archivos de imagen en cuatro escalas diferentes.
Vamos a crear tres diseños de reloj, cada uno con una esfera, una manecilla de minutos y una manecilla de hora. Por supuesto, puede usar sus propios diseños, pero siéntase libre de usar los archivos de imagen que usamos aquí para comenzar.. Los archivos de imagen para cada diseño en cada densidad se incluyen en el enlace de descarga de este tutorial y también se incluirán en la descarga de la Parte 4..
Primero está el dial del reloj. Recuerde que especificamos que el widget tiene dos celdas de ancho y dos celdas de alto, lo que resulta en un tamaño máximo de 146dp (píxeles independientes de la densidad). Para esta serie de tutoriales crearemos cuatro versiones de cada imagen para adaptarse a las cuatro categorías de densidad.
En lugar de crear imágenes para cada densidad, alternativamente puede usar gráficos NinePatch, que son mapas de bits que se pueden escalar hacia arriba y hacia abajo para adaptarse a las densidades del dispositivo, lo que le permite crear una imagen única para cada diseño. La posibilidad de utilizar NinePatch depende en parte del contenido de los diseños que está utilizando, pero hay herramientas que lo ayudan a crearlos si lo desea..
Es más fácil si comienzas con la densidad media, que debería ser un máximo de 146px en ambos ejes. Aquí está el reloj predeterminado que usamos con densidad media, que puede usar como referencia para sus propios diseños o si no desea crear uno propio hasta más adelante:
En este caso, la imagen es de 146 píxeles en ambos ejes, pero puede reducirla si lo desea. Especificaremos un margen para los dispositivos que ejecutan API de Android de menos de 14, pero no proporcionaremos un margen para los dispositivos con más de 14, porque en los niveles de API más recientes se coloca un margen automático entre los widgets. Puedes usar prácticamente cualquier diseño que desees, tu reloj ni siquiera tiene que ser circular. Incluir marcas o números que indiquen las horas en el dial es recomendable desde una perspectiva de usabilidad, aunque no es esencial.
Aquí están los dos diseños alternativos de dial de reloj que usaremos, uno estilo piedra y el otro metálico, que se muestran aquí en densidad media:
Una vez que haya diseñado sus diales de reloj, puede crear versiones alternativas de cada imagen para las diferentes densidades. Dependiendo de sus diseños, esto puede no ser necesario, pero en este tutorial incluiremos versiones personalizadas de cada imagen para los diseños. Lo siguiente indica el tamaño máximo que estamos usando para nuestro widget en los ejes X e Y en cada densidad:
Cuando tenga archivos de imagen para cada diseño de marcación de reloj que desee usar (y versiones para cada densidad, si corresponde), cópielos en las carpetas dibujables en el área de trabajo de su proyecto de widget de Android. Eclipse normalmente creará una carpeta para cada categoría de densidad automáticamente, pero, si solo está utilizando una imagen para todas las densidades, puede crear una carpeta llamada simplemente "dibujable" y colocar la imagen allí. Las carpetas para cada nivel de densidad son:
El administrador de AVD de Android le permitirá probar su proyecto de widget terminado en cada una de estas densidades. Una vez que haya guardado sus imágenes en las diferentes carpetas dibujables, asegúrese de haber usado los mismos nombres en cada una de ellas. Por ejemplo, uno de los diseños de cuadrante que usamos se llama "clock_dial_stone", es el nombre de archivo de la imagen para el dial de piedra en cada carpeta de densidad, aunque el contenido de cada versión es diferente aunque solo sea en tamaño. Si aún tiene dudas sobre cómo debería funcionar esto, simplemente descargue los archivos de imagen usando el enlace de descarga en la parte superior de este tutorial y navegue por las carpetas para obtener la idea..
A continuación, cree una imagen para las agujas de minutos y minutos de su reloj, incluidas las imágenes para cada diseño y cada densidad a la que se dirige. Aquí están nuestras manecillas de minutos de densidad media para cada diseño:
Nuevamente, siéntase libre de usarlos para comenzar o elaborar su propia cuenta. Observe que estos archivos de imagen contienen espacio transparente alrededor de la mano. Debe diseñar cada una de las imágenes de sus manos con la altura máxima del dial del reloj con el que se utilizarán. Cada mano debe estar en la posición exacta en la que se encontraría al apuntar a las doce, colocada sobre la imagen de la esfera del reloj y media a través de ella. La mano también debe estar en el centro de su archivo de imagen horizontalmente, ya que se girará desde su punto central al mostrar la hora. La longitud de las manos dentro del archivo de imagen depende realmente de usted, siempre que la altura completa de la imagen sea la misma que la altura de la imagen de marcado.
El siguiente diagrama muestra la escala completa de las imágenes de las manecillas con la manecilla de los minutos a las doce y la manecilla de las tres (la manecilla de las horas ha sido girada 90 grados en el sentido de las agujas del reloj en su punto central):
Una vez que haya ordenado los diseños de la manecilla de minutos, guarde uno para cada densidad nuevamente, escalando hacia arriba y hacia abajo para que coincida con la altura del reloj en cada caso. Cópielos de nuevo en sus carpetas dibujables, usando el mismo nombre para cada diseño en las carpetas de densidad que con las imágenes de marcación.
A continuación, realice el mismo proceso para sus manos de hora. Aquí están las agujas de las horas para los tres diseños que estamos usando:
El principio aquí es el mismo que para las manecillas de minutos, excepto que las manecillas de hora deben ser típicamente más cortas. Diseñe las manecillas de su hora apuntando a las 12 en punto y prepare las versiones para cada densidad, copiándolas en sus carpetas dibujables como lo hizo con las manecillas de los minutos..
El diseño del widget utilizará algunos datos que incluiremos en las carpetas de "valores" de nuestro proyecto. En Android API 14 y posteriores, el sistema incluye automáticamente márgenes entre los widgets a medida que aparecen en la pantalla de inicio del usuario. Sin embargo, en versiones de API anteriores este no era el caso. Por este motivo, queremos especificar un margen para incluir en todo momento el widget del reloj en dispositivos con niveles de Android inferiores a 14. Este es un caso en el que podemos explotar el hecho de que tenemos carpetas de valores dirigidas a estas dos categorías de niveles de API de usuario..
Definiremos los márgenes en nuestro archivo de diseño XML haciendo referencia a un recurso de dimensión. En el directorio de "valores", cree un nuevo archivo llamado "dimensions.xml": seleccione la carpeta de "valores" en Eclipse y haga clic con el botón derecho o elija "Archivo", luego "Nuevo", "Archivo" e ingrese el nombre del archivo.
Al hacer clic en el botón "Finalizar", Eclipse creará y abrirá el archivo. Seleccione la pestaña "dimensiones.xml" para editar el código. Introduzca la siguiente:
8dp
Este código simplemente lista un valor de dimensión usando píxeles independientes de la densidad junto con un nombre para que podamos referirnos a él en otra parte.
Guarda el archivo. Ahora cópielo haciendo clic con el botón derecho en la carpeta "valores" o seleccionándolo y seleccionando "Editar", luego seleccione "Copiar". Péguelo en la carpeta "values-v14" que creamos la última vez: haga clic con el botón derecho o seleccione la carpeta y elija "Editar", luego seleccione "Pegar". El archivo aparecerá en la carpeta "values-v14", que apunta a los niveles de API a partir de 14 en adelante. Abra esta nueva copia del archivo y edite el valor de dimensión para indicar un margen de cero de la siguiente manera:
0dp
Ahora, cuando el diseño XML se refiere a este valor de dimensión usando su nombre, se usará un valor de cero en los dispositivos que ejecutan API 14 plus y un valor de 8dp se usará de otra manera.
Ahora vamos a definir nuestro widget en XML. Recuerde que especificamos un diseño inicial para el widget en el archivo XML en el que definimos sus propiedades básicas. El diseño al que nos referimos era "clock_widget_layout", así que cree este archivo ahora. Haga clic con el botón derecho o seleccione su carpeta de "diseño" y elija "Archivo" y luego "Nuevo", "Archivo". Ingrese "clock_widget_layout.xml" como el nombre del archivo y haga clic en "Finalizar".
Seleccione la pestaña "clock_widget_layout.xml" cuando Eclipse abra el archivo para que pueda editar el XML. Estamos utilizando un diseño relativo para nuestro widget: si desea utilizar un diseño diferente, también puede usar un diseño lineal o un diseño de marco, ya que estos son los únicos compatibles con los widgets. Para usar el diseño relativo, agregue el siguiente esquema a su archivo de diseño XML:
Aquí especificamos una ID para el widget, que usaremos para implementar los clics en nuestro código Java en la Parte 4. Observe que el código también se refiere al valor de dimensión que creamos, usando la sintaxis estándar, el nombre de las "dimensiones El archivo .xml "en realidad no importa, solo necesita enumerar un elemento" dimen "en un archivo de valores para referirse a él de esta manera.
Dentro del diseño relativo, agregue su widget AnalogClock de la siguiente manera:
Este es el elemento estándar del reloj analógico de Android, que nos permite personalizar la pantalla. Usamos un atributo de ID para que podamos referirnos al widget en Java. Los últimos tres atributos especifican los recursos dibujables que creamos para las manecillas de marcación, minutos y horas. Si guardó el suyo con diferentes nombres de archivo, modifique este código para reflejarlos. Android seleccionará el archivo dibujable de la carpeta de densidad relevante en cada dispositivo de usuario.
Dado que estamos permitiendo a los usuarios elegir un diseño, en realidad vamos a incluir los tres diseños en nuestro XML, estableciendo que todos excepto uno sean inicialmente invisibles. Asegúrese de que el primer diseño que incluya sea el que desea mostrar de manera predeterminada, luego agregue los otros de la siguiente manera:
Nuevamente, modifique los nombres que se pueden dibujar para reflejar los nombres de las imágenes de los diales, minutos y horas para cada uno de sus diseños. Si lo desea, puede incluir más de tres diseños; asegúrese de que todos, excepto uno de ellos, tengan la visibilidad establecida como invisible, de modo que solo aparezca inicialmente un diseño (la opción predeterminada). Podremos implementar la elección del usuario entre estos diseños en Java utilizando los atributos de ID del elemento del reloj analógico, que terminan con números enteros que comienzan en cero y aumentan con cada diseño. Guarda tu archivo de diseño.
A continuación, se incluyen capturas de pantalla de cómo se verá cada uno de nuestros diseños cuando se complete el widget:
Ese es el proceso de diseño de nuestro widget de reloj completo. Si no desea crear sus propias imágenes de diseño en esta etapa, solo use las imágenes en la carpeta de descarga al principio. En el siguiente tutorial usaremos la clase AppWidgetProvider para implementar nuestro widget en Java. En la parte final de la serie, implementaremos los clics del usuario en el widget, presentando una opción entre los diseños y actualizando las preferencias del usuario para mostrar continuamente la opción elegida..
Accentsconagua