Le presentamos la semana pasada a una herramienta de gran alcance para crear widgets personalizados en la pantalla de inicio del dispositivo Android, Zooper Widget. Lo mantuvimos bastante simple, que recorre a través de la adición de un widget de reloj básica utilizando una de las muchas plantillas incorporadas, a continuación, cambiar un toque de color y algo de texto. Vamos a llevarlo al siguiente nivel de esta semana y crear nuestro propio widget a partir de cero.
Zooper Widget es una de las aplicaciones más populares que se utilizan para crear un diseño totalmente único en su pantalla de inicio de Android. Hay muchos usuarios, sitios y foros por ahí presumiendo lo elegante y hermoso pueden ser los diseños resultantes. Ahora es su turno, esperamos a ver lo que puede hacer con algunas habilidades básicas bajo su cinturón.
Antes de empezar
Si usted no tiene ya instalado en Zooper Widget su dispositivo, tendrá que dirigirse a la tienda Play Google para obtener una copia. Usted puede conseguir fácilmente por hoy con la versión gratuita, pero le recomiendo derrochando en la versión Pro de $ 2.49 si usted piensa que va a seguir con Zooper Widget para el diseño de la pantalla de inicio de Android.
Si usted desea cualquier obra de arte personalizada o imágenes que desee utilizar en el widget, que sería bueno para organizarlas en una carpeta en el dispositivo ahora. Aquí es mi fondo de pantalla actual y la imagen que utilizo para construir mi widget o echa un vistazo a esta colección. Como siempre, Zooper Widget le permite volver a cualquier control en cualquier momento para hacer ajustes, por lo que no se preocupe si no está seguro del contenido que desea en este momento. También quiero advertirle ahora que estaremos construyendo un widget algo "ocupado", esto es sólo para incorporar todos los elementos, espero que la mayoría de sus proyectos se suscribirán a la "menos es más" la filosofía, que es grande, una vez que aprender cómo utilizar las herramientas de hoy en día.
al igual que con cualquier implementación de Zooper Widget, tendremos que decidir qué tamaño del widget de que necesitamos y añadirlo a nuestra pantalla de inicio. Recuerde que si su lanzador lo permite, usted puede agregar un widget de 1 × 1 y cambiar el tamaño para caber más tarde. Hemos cubierto los pasos requeridos en el artículo widget de reloj personalizado de la semana pasada
.
Una vez que el widget de vacío es el tamaño y posición, pulse en él para comenzar.
Escoja vacía
ahora puede realizar las modificaciones a la configuración general del widget, vea Herramienta de color y otros ajustes importantes de la semana pasada si necesita un repaso
.
Tap Disposición
Todos los elementos disponibles en Zooper Widget se puede ver cuando se toca el botón "+ ADD" en el menú superior. Los elementos opcionales que se pueden añadir son bastante explica por sí mismo, e incluyen:
Texto:. totalmente elemento de texto personalizable que puede ser texto estático o dinámico en base a muchos factores desencadenantes
texto enriquecido: multilínea similares a texto, pero añade soporte y de texto márgenes
Rect (ángulo):. a pesar de que dice formas rectangulares, que pueden estar redondeados en círculos demasiado. No hay que subestimar este elemento, se puede hacer o romper su diseño widget de
Serie:. Una colección de valores basados en la fecha en una línea, donde todos son visibles, pero uno se pone de relieve. Por ejemplo, los días de la semana podrían ser: Sun Lunes Martes Miércoles Jueves Viernes Sábado
Escalable el conjunto del icono: batería o del icono del tiempo juegos en un solo color, gráficos vectoriales escalables infinitamente
. Icono de mapa de bits fijo: la batería o el icono del tiempo juegos en un diseño colorido. escalables Gráficos de trama limitados
Barra de progreso:.. Una barra de progreso personalizable y dinámico para mostrar un archivo de valores como porcentaje de un total
Mapa de bits: Una imagen del dispositivo. Es compatible con los formatos de imagen más comunes, incluyendo jpg, png, bmp y más.
Los invito a que lo sigue a medida que caminamos a través de la mayor parte de los elementos anteriores para construir un widget pequeño y divertido que muestra una buena cantidad de la información relevante para su rutina diaria normal.
los elementos de texto en Zooper Widget son muy versátiles, se puede ajustar muchos aspectos visuales de ellos de color y el tamaño medio de las sombras paralelas, ángulos y curvatura. El texto que se muestra puede ser texto estático que se establece, o, más comúnmente, puede tirar de cientos de aspectos de su dispositivo y la Web. El texto dinámico puede incluir cosas como el tiempo, los niveles de batería, el tiempo, información de la temperatura, intensidad de la señal de red, información sobre llamadas recientes o mensajes SMS, las frecuencias de CPU, eventos de calendario salida del sol /puesta del sol y mucho más.
Más allá de Zooper Widget propia métrica accesibles, Zooper se pueden configurar para recopilar información de las variables Tasker, pero vamos a hablar de esa combinación potencia la próxima semana.
Pulse "+ ADD" en el menú superior y añadir un elemento de texto. El elemento de texto por defecto colocará el momento en la posición central con el texto blanco.
Cambiar el tamaño (tamaño de la fuente del texto) del texto para que el reloj es aproximadamente un tercio de la anchura de su widget en general. Simplemente toque la flecha hacia la derecha y ver que el cambio en la ventana de visualización de diseño en la parte superior de la pantalla.
No dude en para cambiar la fuente del texto de la familia en este momento, teniendo en cuenta que puede que tenga que volver a ajustar el tamaño de la fuente después. La cabeza hacia atrás a Cómo hacer ajustes básicos a un elemento de texto para más información sobre cómo se hace
.
Ajuste el valor de Desplazamiento Y para que el reloj se encuentra cerca de la mitad de su propia altura desde la parte superior de tu widget. Toque la flecha izquierda, esto creará un valor negativo, por ejemplo, -73.
Pulse en el sistema de nuevo el botón para volver a la pantalla de diseño de widgets. Esto completa un elemento de texto básicos, vamos a probar con la otra, un poco más avanzado.
Pulse "+ ADD" en el menú superior y añadir otro elemento de texto.
Toque en Editar texto
manualmente
Eliminar el contenido existente en el cuadro de texto en la parte superior, lo que debería leer #DHH #:## Dmm
queremos crear ahora una cadena de fecha, esto puede. hacerse por cualquiera de escribir manualmente el código requerido, o bien, por suerte, por la elección de los elementos de la lista proporcionada.
Toque la flecha hacia abajo al lado de la fecha.
Elija los elementos individuales en el orden en el lo que desean que aparezcan. Si es necesario, la cabeza de nuevo en el cuadro de texto en la parte superior y añadir cualquier puntuacion necesaria.
Mi preferencia personal con puntuacion añadido creado la cadena#DE #,###DMMMM Dd #,## Dy desglosar esos , cada elemento está rodeado por el símbolo #. La letra "D" designa los elementos como parte de la categorización de la fecha, los siguientes caracteres son valores arbitrarios de Zooper Widget, donde "E" representa una versión corta del día actual de la semana. "MMMM" compensa el largo nombre de formulario del mes en curso. "D" es el día actual del mes e "y" representa el año en curso. El resultado crea la cadena de fecha "jueves, 22 de mayo de 2014."
Pulsa en Aceptar para volver a editar el elemento de texto.
Cambiar la fuente, si se desea.
cambiar el tamaño del texto en alrededor de dos tercios de su anchura total widget o, el doble de la anchura de su elemento del tiempo.
cambiar el valor de Desplazamiento y para que su cadena de fecha se encuentra justo por debajo de su elemento del tiempo.
Pulse en el sistema de nuevo el botón para volver a la pantalla de diseño de widgets.
ahora estamos terminado con nuestros elementos de texto, pero sin salir todavía. A continuación vamos a añadir un elemento de la serie.
Pulse la tecla "+ Añadir" en el menú superior y seleccione la serie.
El elemento de la serie se basa únicamente en las fechas y la batería en este momento. El elemento de la serie por defecto coloca los días de la semana con el fin verticalmente con el día actual en el texto más grande y en negrita.
Cambio del tipo de serie de la batería.
Hay dos secciones de fuente en una serie . La fuente predeterminada es para el texto que no está resaltado, y elemento seleccionado de fuentes, como su nombre indica, es el texto resaltado. Cambiar la fuente de texto familiar para cualquiera de estos ahora, si lo desea.
Cambiar el tamaño de fuente predeterminado a un tamaño más bien pequeño, alrededor de un cuarto del tamaño de su cadena de fecha. He fijado a la mina 12.
Cambiar el tamaño tipográfico de artículos a aproximadamente el mismo tamaño que la cadena de fecha, o tal vez un poco más grande. Yo tengo la mía establece en 24.
Ajuste del Desplazamiento Y de la serie de manera que la parte superior de la misma es un poco por encima del centro de su control, y la parte inferior se encuentra alrededor de una octava por encima de la parte inferior. O más o menos un espacio en la parte inferior del tamaño de su elemento del tiempo. Es muy probable que va a tener que volver atrás y ajustar la configuración de tamaño de texto de modo que el tamaño total de su serie encaja dentro del área descrita.
Pulse en el sistema de nuevo este botón para volver a la pantalla widget de diseño .
Pulse la tecla "+ Añadir" en el menú superior y seleccione el conjunto del icono escalable.
Cambiar el Conjunto de iconos de iconos del tiempo predeterminado a iconos de la batería rellenos.
Girar el icono de -90, de manera que quede en posición vertical.
No dude en para cambiar el tamaño, pero mantener el icono más pequeño que el texto de su tiempo.
Ajuste el X desplazamiento a la izquierda, tratar de conseguir el icono de alrededor de 1/4 de la anchura widget desde el borde izquierdo.
Pulse en el sistema de nuevo el botón para volver a la pantalla de diseño de widgets.
Pulse la tecla "+ Añadir" en el menú superior y seleccione Grupo de iconos de mapa de bits.
Cambiar el Conjunto de iconos por defecto de iconos de la batería a ZW iconos del tiempo.
Cambiar el tamaño, si es necesario, para tratar de coincidir con el tamaño total de la batería icono escalable.
Ajuste del Desplazamiento X hacia la derecha, intenta conseguir el icono de alrededor de 1/4 de la anchura widget desde el borde derecho.
Pulse en el sistema de nuevo el botón para volver a la pantalla de diseño widget de
.
Pulse la tecla "+ Añadir" en el menú superior y seleccione Barra de progreso.
toque en Editar Progreso Min /Max /Valor.
Asegúrese de que Min se establece en 0
Cambiar valor para leer## NWSIG Alternativamente, elimine el texto predeterminado en el campo Valor, a continuación, toque en la flecha desplegable al lado de red y pulse sobre la fuerza de señal WiFi (0- > 9)
Cambiar Max a 9
pulse en la marca de verificación en el menú superior para confirmar los cambios
.
Ajuste del Desplazamiento X de modo que el borde izquierdo de la barra de progreso está cerca del centro de la batería Icono escalable a la izquierda.
cambiar el ancho de la barra de progreso para que el borde derecho llega a más de hasta aproximadamente el centro del icono de mapa de bits tiempo.
Ajuste del Desplazamiento Y de manera que la barra de progreso se mueve hacia abajo. Deja de modo que la barra de progreso está cubriendo el indicador de 20% de la batería de la serie vertical que hemos creado anteriormente.
Ahora vamos a manejar dos configuraciones juntos para crear un efecto de redondeo. Ajuste Curva a un valor de alrededor de -90. A continuación, ajuste de rotación a un valor de alrededor de 45. El resultado debe redondear la barra de progreso, y situarla en posición vertical de manera uniforme. El centro de la barra de progreso debe ahora estar por debajo del borde inferior de la serie de la batería. Ajuste estos dos valores en frente de la otra, en pequeños incrementos, hasta lograr el efecto deseado.
cambiar el espaciado a un valor de aproximadamente 6.
Cambiar Split a un valor de 1.
Pulse en el sistema de nuevo el botón para volver a la pantalla de diseño de widgets. Lo bueno de esta barra de progreso en particular, es que se le dará una indicación rápida y discreta de la intensidad de la señal de la red Wi-Fi que está conectado. El usuario no puede desear ver esto, así que adelante y jugar con los diferentes ajustes Min /Max /valor hasta que haya algo importante para usted.
Ahora debe tener lo que se ve un poco como una cara feliz. Vamos a ponerlo todo junto entonces.
Vamos a crear dos elementos Rect, el primero será un verdadero rectángulo, a continuación, vamos a crear un círculo.
Pulse en el "+ ADD" botón en el menú superior y seleccione Rect.
Aumentar la configuración de Anchura y Altura hasta que tenga un cuadrado o rectángulo, que llena completamente el área de widget.
Cambiar el color a algo que va muy bien complementar su pantalla de inicio. Este será el color principal de su widget. Es probable que tenga que volver aquí más tarde para cambiar el color de nuevo, así que no se preocupe si usted no tiene algo en mente, pero por favor cambiar a algo distinto del blanco por ahora.
Pulse en el sistema de botón de retroceso para volver a la pantalla de diseño de widgets. cuadrados y rectángulos simples son realmente tan fácil.
Ahora vamos a ver la creación de un círculo
Estamos de suerte, queremos empezar por crear un nuevo elemento que Rect es muy similar a la que acabamos de crear. En lugar de tocar el botón + añadir, haga lo siguiente:
Seleccione la casilla de verificación a la derecha de nuestro elemento Rect recién creado
En el menú superior, seleccione Clonar, que puede ser un icono. de rectángulos apilados con un símbolo + en ellos.
el nuevo elemento Rect ha sido creado con exactamente la misma configuración que el anterior.
seguir adelante y empezar cambiando el color a algo diferente, cualquier color está bien, siempre que es diferente que el elemento anterior Rect.
Aumentar el valor Rect Esquinas hasta que la convierte en redonda. Usted debe encontrar que en alrededor de 120 que tiene un círculo perfecto /ovalada. Vaya por delante y empujar más allá de eso y aproximadamente 200 para nuestros propósitos.
Cambiar el ancho y el alto hasta que son iguales, esto va a crear un círculo perfecto.
Si lo que quieres es un círculo, usted debería dejar aquí. Tenemos algo más en mente para este diseño sin embargo, así que por favor continúe.
Ahora, aumentar tanto el ancho y alto por igual hasta que son aproximadamente 30% más grande que su dimensión más grande Reproductor. Por ejemplo, si el lado más largo de su widget es 210, hacen de este elemento Rect sobre 280. Esto se debe llenar completamente el widget, o simplemente dejar espacios pequeños en las esquinas.
Aumentar gradualmente la configuración del esquema hasta que tenga un círculo que se ajusta totalmente justo dentro de su ventaja widget de más corta. Espero que su valor debe llegar a 150 o más alto, por lo que no dude en introducir manualmente un número mayor, y luego continuar con los botones de flecha, según sea necesario.
Por último, cambiar el modo de dibujo para Borrar. Lo que hemos hecho ajustando el modo de dibujo para borrar es designar esa zona como transparente. Usted se dará cuenta de que su primer elemento Rect es visible, pero sólo el círculo perfecto en el medio.
Pulse en el sistema de nuevo el botón para volver a la pantalla de diseño de widgets.
Algunas tareas de limpieza
la última cosa que necesitamos hacer es cambiar el orden de los elementos para que nuestro elemento Rect no está bloqueando todos nuestros otros trabajos.
En la pantalla de diseño, pulse y mantenga pulsado el icono de la flecha arriba /abajo en el lado izquierdo de su primer elemento rect. Esto activará por disposición de orden. Vaya por delante y deslice el Rect a la parte superior de nuestra lista de elementos. Como elementos se dibujan con el fin de esta lista, el resultado va a colocar todos los otros elementos en la parte superior de la Rect que haya creado.
Se puede sentir como retroceder en hacer pequeños ajustes en algunos, o la mayoría, de los elementos que ha creado, por favor lo hagan. Diseño Zooper Widget debe ser una experiencia fluida. Puede volver a cambiar los colores basados en nuevos fondos de pantalla, cambiar las fuentes en base a cómo se siente ese día, y más. Animo a pellizcar continua hasta que o bien tienen el widget perfecto, o está preparado para comenzar uno nuevo desde cero.
Los puntos de bonificación
Antes de llamar a un día, el diseño que hemos creado se el trabajo hecho, pero necesita un poco de empuje. Vamos a seguir adelante y añadir una imagen, jugar con algunos modos de dibujo y dar el widget una acción de hacer clic.
Pulse la tecla "+ Añadir" en el menú superior y seleccione Mapa de bits.
Desplácese hacia abajo y pulse el mapa de bits para recoger un mapa de bits, o la imagen, de la galería del dispositivo.
desde el diálogo de selección de archivos que aparece, buscar y pulse sobre la imagen deseada. La imagen puede vivir en el dispositivo, tal vez en esa carpeta designada que creó antes a partir de hoy, o incluso en línea a través de las fotos de Google+ o almacenamiento de Google Drive.
ajustar la escala de la foto hasta que se acomode a sus necesidades. Sin duda, se debe hacer para cubrir completamente el área del círculo en el widget.
Ajuste del Desplazamiento X e Y los valores como desee para mover la imagen en su lugar Offset.
Pulse en el sistema de nuevo botón para volver a la pantalla de diseño de widgets.
al igual que hicimos con el primer elemento de Rect, mantenga pulsado el /abajo icono de la flecha hacia arriba a la izquierda del mapa de bits y deslice el mapa de bits casi hasta la parte superior de la lista . Queremos que su primer elemento Rect ser el primero, este segundo mapa de bits.
sombras paralelas
Si encuentra el texto difícil de leer, o que casi cualquier otro elemento de mezcla en el fondo, considere cambiar su color o la adición de una gota de sombra. Para añadir una sombra, cambie el valor de la falta de definición, por lo general voy a aproximadamente 6, a continuación, cambiar tanto la sombra Desplazamiento X y Desplazamiento Y Sombra, voy a aproximadamente 2 cada uno. Ahora, incluso si el texto es blanco y el fondo es blanco, debe ser capaz de ver su artículo un poco más claramente. Echa un vistazo a las áreas resaltadas en la siguiente imagen.
Modos y opacidad Dibujo
En lo anterior, hemos utilizado dos modos de dibujo, Normal y claros. Como se ha indicado, normal muestra el elemento en el color elegido, y Clear crea un espacio totalmente transparente, de manera que se puede ver el fondo de pantalla pantalla de inicio en el fondo. El modo de dibujo final se llama XOR. XOR a su vez elementos en total transparencia superposición, pero se mostrará como normal cuando por su propia cuenta.
También hay un ajuste disponible para el mapa de bits y los elementos de mapa de bits Conjunto del icono de la opacidad, el valor por defecto es 100, que muestra el elemento de toda claridad, ajuste que se reduce a aplicar un efecto de transparencia. Para nuestro diseño, si se aplica la transparencia de la imagen de mapa de bits, es posible que desee eliminar el primer elemento Rect, de esta manera podrás ver el fondo de pantalla pantalla de inicio en lugar del color sólido de la Rect. Pero asegúrese de jugar con ella para ver lo que se ve mejor.
Nuestro producto final
La utilización de casi todos los elementos disponibles en el arsenal de Zooper Widget, aquí está el widget personalizado que hemos creado en la actualidad. No es perfecto, pero sospecho que va a ajustar el suyo para ver aún mejor.
Toque acciones e integración Tasker (Zooper Widget Pro)
Es posible en la versión Pro de Zooper Widget para asignar acciones que se llevarán a cabo cuando se toca un elemento de tu widget. Por ejemplo, usted podría hacerlo de modo que toque en el icono del tiempo se abre la aplicación meteorológica de cabecera. ¿Sabías que las acciones de derivación y elementos de texto pueden ir más allá de lo que se construye en Zooper Widget? Zooper Widget tiene la capacidad tanto de extraer información de Tasker para mostrar como texto, e impulsar acciones para Tasker para desencadenar una tarea. Tasker es una aplicación de gran alcance que le permite tomar el control casi completo de su dispositivo. Tasker también recoge información sobre casi cualquier caso, el escenario y más de su dispositivo, que podría ser mostrada en el widget de Zooper Widget.
Ofrezco el reto para cualquier interesado en utilizar Zooper Widget y Tasker para crear una el panel de control personalizado que cambia su volumen, brillo de la pantalla y cambia de encendido /apagado su conexión inalámbrica a Internet. Hay muchas maneras de hacer frente a todo esto, le mostraremos un ejemplo próxima semana. Los puntos de bonificación si se puede hacer que el widget mostrar un icono que indica cuando los auriculares se han enchufado.
Comparte con nosotros imágenes de los widgets que haya creado utilizando las habilidades anteriormente, siempre estamos interesados en ver los resultados de su trabajo de encargo práctico.
