Los íconos de pestaña son elementos gráficos que se usan para representar pestañas específicas en una interfaz con varias pestañas. Cada ícono de pestaña tiene dos estados: no seleccionado y seleccionado.
Como se describe en Proporcionar conjuntos de íconos específicos de densidad, debes crear conjuntos de íconos separados de densidad media y alta. Esto garantiza que los iconos se muestren correctamente en todos los dispositivos en los que puede instalarse tu aplicación. Consulta las Sugerencias para diseñadores. para obtener sugerencias sobre cómo trabajar con varios conjuntos de íconos.
La imagen final debe exportarse como un archivo PNG transparente. No incluir un color de fondo.
Las plantillas para crear iconos en Adobe Photoshop están disponibles en la Paquete de plantillas.
Advertencia:
El estilo de los iconos de pestaña ha cambiado drásticamente en
Android 2.0 en comparación con versiones anteriores Para
proporcionar compatibilidad con todas las versiones de Android, los desarrolladores deben hacer lo siguiente:
1) Ubica los íconos de pestañas para Android 2.0 y versiones posteriores en el
Directorios drawable-hdpi-v5, drawable-mdpi-v5 y drawable-ldpi-v5.
2) Ubica los íconos de pestaña de las versiones anteriores en
Directorios drawable-hdpi, drawable-mdpi y drawable-ldpi.
3) Establece android:targetSdkVersion en 5 o más en el
<uses-sdk>
en el manifiesto de la aplicación.
Esto informará al sistema que debe renderizar las pestañas con el estilo nuevo.
Cómo proporcionar íconos para dos estados de pestaña
Los íconos de pestaña deben tener dos estados: no seleccionado y seleccionado. Para proporcionar íconos con varios estados, los desarrolladores deben crear estado Elemento de diseño de lista para cada ícono, que es un archivo en formato XML que enumera qué imagen para usar en los diferentes estados de la IU.
Por ejemplo, para un widget de pestaña con pestañas llamadas "Amigos" y "Compañeros de trabajo", puedes usar una estructura de directorios similar a la que se muestra a continuación:
res/...
drawable/...
ic_tab_friends.xml
ic_tab_coworkers.xml
drawable-ldpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-mdpi/...
ic_tab_friends_selected.png
ic_tab_friends_unselected.png
ic_tab_coworkers_selected.png
ic_tab_coworkers_unselected.png
drawable-hdpi/...
...
drawable-ldpi-v5/...
...
drawable-mdpi-v5/...
...
drawable-hdpi-v5/...
...El contenido de los archivos XML antes mencionados debe hacer referencia a la correspondiente
elementos de diseño de íconos seleccionados y no seleccionados. Por ejemplo, a continuación se muestra el código
para ic_tab_friends.xml:
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <!-- selected state --> <item android:drawable="@drawable/ic_tab_friends_selected" android:state_selected="true" android:state_pressed="false" /> <!-- unselected state (default) --> <item android:drawable="@drawable/ic_tab_friends_unselected" /> </selector>
Android 2.0 a Android 2.3
En los siguientes lineamientos, se describe cómo diseñar íconos de pestaña para Android 2.0 a Android 2.3 (niveles de API 5 a 10)
Tamaño y posicionamiento
Los iconos de pestaña deben usar formas simples, y deben estar se escalan y se posicionan dentro del recurso final.
En la figura 1, se muestran varias formas de posicionar el ícono dentro del activo. Debes ajustar el tamaño de los íconos más pequeño que los límites reales de la recurso.
Para indicar el tamaño recomendado para el icono, cada ejemplo en En la Figura 1, se incluyen tres rectángulos de guía diferentes:
- El recuadro rojo es el cuadro de límite del elemento completo.
- El recuadro azul es el cuadro de límite recomendado para el ícono en sí. El cuadro del ícono es más pequeño que el cuadro del elemento completo para permitir tratamientos especiales de íconos.
- El recuadro naranja es el cuadro de límite recomendado para el ícono real cuando el contenido sea cuadrado. El cuadro de los iconos cuadrados es más pequeño que el de otros los iconos para establecer un peso visual coherente en los dos tipos.
|
|
|
|
|
|
|
Figura 1: Tamaño y posicionamiento de los íconos de pestaña dentro de los límites de la elemento de ícono. |
Estilo, colores y efectos
Los íconos de pestaña son planos, tienen efecto mate y se muestran de frente.
Los íconos de pestaña deben tener dos estados: no seleccionado y seleccionado.
|
Figura 2: Estilo y efectos para los íconos de pestaña no seleccionados Nota: Todas las dimensiones de píxeles son para media densidad y se deben ajustar adecuadamente para otras densidades.
|
|
Figura 3: Estilo y efectos para los íconos de pestaña seleccionados Nota: Todas las dimensiones de píxeles son para media densidad y se deben ajustar adecuadamente para otras densidades.
|
Sugerencias y precauciones
A continuación, se incluyen algunas recomendaciones ejemplos a tener en cuenta al crear iconos de pestaña para tu aplicación.
Íconos de ejemplo
A continuación, se muestran iconos de pestaña estándar de alta densidad que se usan en la plataforma de Android.
Advertencia: Debido a que estos recursos pueden cambiar entre las versiones de la plataforma, no debe hacer referencia a la copia de los recursos del sistema. Si deseas usar íconos u otros recursos de elementos de diseño internos, debes almacenar un copia local de esos íconos o elementos de diseño en los recursos de tu aplicación y, luego, hacer referencia a la copia local del código de la aplicación. De esa manera, puedes mantener el control sobre la apariencia de tus iconos, incluso si la interfaz de usuario copiar los cambios. Ten en cuenta que la siguiente cuadrícula no se completa.
Android 1.6 y versiones anteriores
En los siguientes lineamientos, se describe cómo diseñar íconos de pestaña para Android 1.6 (nivel de API 4) y versiones anteriores
Estructura
- Los íconos de pestaña no seleccionados tienen los mismos efectos y gradiente de relleno que íconos de menú pero sin resplandor exterior.
- Los íconos de pestaña seleccionados tienen el mismo aspecto que los íconos de pestaña no seleccionados, pero con un tono más tenue sombra interior y tienen el mismo gradiente en la parte frontal íconos de diálogo.
- Los íconos de pestaña tienen un Safeframe de 1 px que solo debe superponerse para el borde. del suavizado de una forma redonda.
- Todas las dimensiones especificadas en esta página se basan en un tamaño de mesa de trabajo de 32 x 32 píxeles. Mantén 1 px de relleno alrededor del cuadro de límite dentro de la plantilla de Photoshop.
|
Figura 3: SafeFrame y gradiente de relleno para la pestaña no seleccionada íconos. El tamaño del ícono es de 32 x 32 |
|
Figura 4: SafeFrame y gradiente de relleno para los íconos de pestaña en el estado seleccionado. El tamaño del ícono es de 32 x 32 |
Ícono de pestaña no seleccionado
Luz, efectos y sombras
Los íconos de pestaña no seleccionados se parecen a los íconos de pestaña seleccionados, pero con sombra interior más tenue y el mismo gradiente en la parte frontal que los íconos de diálogo.
|
Figura 5: Luces, efectos y sombras para elementos no seleccionados íconos de pestaña.
|
Paso a paso
|
Ícono de pestaña seleccionado
Los íconos de pestaña seleccionados tienen los mismos efectos y gradiente de relleno que el menú. pero sin resplandor externo.
|
Figura 6: Luz, efectos y sombras para la pestaña seleccionada íconos.
|
Paleta de colores
|
Paso a paso
|
