Saltar al contenido

Tamaño del icono de la barra de pestañas

Es fundamental interpretar el código bien antes de aplicarlo a tu proyecto y si ttienes algo que aportar puedes dejarlo en la sección de comentarios.

Solución:

No debe hacer esto usted mismo, el sistema puede hacerlo automáticamente.

aquí están las Pautas de interfaz humana de Apple, donde puede encontrar resoluciones de íconos: https://developer.apple.com/ios/human-interface-guidelines/icons-and-images/custom-icons/

por ejemplo: si está utilizando iconos circulares para el elemento de la barra de pestañas, debe crear los siguientes tamaños para el modo vertical:

  • 75 píxeles × 75 píxeles (25 puntos × 25 puntos @3x)
  • 50 píxeles × 50 píxeles (25 puntos × 25 puntos @2x)
  • 25px × 25px (25pt × 25pt @1x)

y para modo paisaje:

  • 54 píxeles × 54 píxeles (18 puntos × 18 puntos @3x)
  • 36 píxeles × 36 píxeles (18 puntos × 18 puntos @2x)
  • 18 píxeles × 18 píxeles (18 puntos × 18 puntos @1x)

después de agregar estos íconos en Assets.xcassets o en algún otro lugar, puede seleccionar los íconos de elementos de la barra de pestañas del guión gráfico:

seleccione el elemento de la barra de pestañas y en el attributes inspector, elija una imagen vertical para el campo de imagen y una imagen horizontal para el campo horizontal.

Después de eso, el sistema hará todo por ti.

ingrese la descripción de la imagen aquí

TLDR: Puede especificar diferentes íconos para la barra de pestañas regular o compacta en el Catálogo de activos configurando Ancho de clase en Cualquiera y compacto.

Sí, de acuerdo con las Pautas de interfaz humana Iconos personalizados – Tamaño del icono de la barra de pestañas, debe incluir ambos tamaños de iconos

En orientación vertical, los iconos de la barra de pestañas aparecen encima de los títulos de las pestañas¹. En orientación horizontal, los íconos y títulos aparecen uno al lado del otro.

¹⁾ Esto es true solo en iPhone. En iPad para aplicaciones de pantalla completa, los íconos y títulos aparecen uno al lado del otro en orientación vertical y horizontal.

Según el dispositivo y la orientación, el sistema muestra una barra de pestañas regular o compacta. Su aplicación debe incluir iconos de barra de pestañas personalizados para ambos tamaños.

Las pautas hablan de clases de tamaño. En este caso, la barra de pestañas regular o compacta significa barra de pestañas en la clase de tamaño de ancho regular o compacto.

Puede especificar diferentes imágenes para diferentes clases de tamaño en el catálogo de activos. solo configura Clase de ancho a Any & Compact en el Inspector de Atributos para usted icono de la barra de pestañas Conjunto de imágenes:

Clase de ancho: cualquiera y compacto

Configure las imágenes más grandes para la clase de tamaño normal en la sección Cualquier ancho y las imágenes más pequeñas para la clase de tamaño compacto en la sección Ancho compacto.

El sistema mostrará automáticamente la imagen correcta según la clase de tamaño (dispositivo, orientación, configuración multitarea).

Puede encontrar los tamaños de icono correctos para los iconos en Directrices de la interfaz humana Iconos personalizados – Tamaño del icono de la barra de pestañas.

Por ejemplo, para un glifo circular, el icono debería ser:

  • 25×25 pt (50×50 px @2x) para barras de pestañas regulares
  • 18×18 pt (36×36 px @2x) para barras de pestañas compactas

Para un glifo cuadrado, el ícono debe ser:

  • 23×23 pt (46×46 px @2x) para barras de pestañas regulares
  • 17×17 pt (34×34 px @2x) para barras de pestañas compactas

Hay tamaños adicionales para glifos anchos y glifos altos.

En la captura de pantalla anterior, uso imágenes PDF con Escala ajustado a Single Scale en el Inspector de Atributos. El sistema genera automáticamente PNG de 1x, 2x y 3x.

Comentarios y puntuaciones del post

Tienes la posibilidad dar difusión a esta crónica si te valió la pena.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *