Conocimientos de diseño de UI y pantalla de Android (transferidos)

¿Te confunden las numerosas pantallas de los teléfonos Android? ¿Sabes a qué tamaño es rentable diseñar renders? ¿Sabes qué está pasando con la densidad de la pantalla? ¿Conoces la relación entre dp y px? ¿Entiendes el impacto de las diferencias de pantalla en el diseño? Entra y echa un vistazo, aquí encontrarás la respuesta.

1. Comprender varios conceptos.

(1) Resolución. La resolución es la cantidad de píxeles en la pantalla de un teléfono móvil, generalmente descrita como el "ancho × alto" de la pantalla. Las resoluciones comunes para las pantallas de los teléfonos Android incluyen 480×800, 720×1280, 1080×1920, etc. 720 × 1280 significa que esta pantalla tiene 720 píxeles en la dirección del ancho y 1280 píxeles en la dirección de la altura.

(2) Tamaño de pantalla. El tamaño de la pantalla es el tamaño diagonal físico del teléfono, medido en pulgadas. Por ejemplo, un determinado teléfono móvil es un "teléfono móvil de pantalla grande de 5 pulgadas", que se refiere al tamaño diagonal, 5 pulgadas × 2,54 cm/pulgada = 12,7 cm.

(3) Densidad (dpi, puntos por pulgada; o PPI, píxeles por pulgada). Como sugiere el nombre en inglés, es la cantidad de píxeles por pulgada. Cuanto mayor sea el valor, más delicada será la pantalla. Si sabemos que la resolución de un teléfono móvil es 1080×1920 y el tamaño de la pantalla es de 5 pulgadas, ¿puedes calcular la densidad de esta pantalla? Jaja, ¡el teorema de Pitágoras de la escuela secundaria me viene muy bien! A través del ancho de 1080 y la altura de 1920, según el teorema de Pitágoras, concluimos que el número de píxeles en la diagonal es aproximadamente 2203. Luego divida 2203 entre 5 para obtener la densidad de esta pantalla. El resultado calculado es 440. Una pantalla de 440 ppp ya es bastante delicada.

2. Densidad real y densidad del sistema

No he encontrado los términos “densidad real” y “densidad del sistema” utilizados en ningún otro lugar, así que permítanme definirlos de esta manera para la momento.

La "densidad real" es la densidad calculada por nosotros mismos. Esta densidad representa el grado real de finura de la pantalla. Por ejemplo, 440 ppp en el ejemplo anterior es la densidad real, lo que significa que la pantalla tiene 440. píxeles por pulgada. La densidad de la pantalla de 5 pulgadas 1080×1920 es 440, mientras que la pantalla de 4,5 pulgadas con la misma resolución tiene una densidad de 490. Desde este punto de vista, la densidad de la pantalla tendrá muchos valores, mostrando una fragmentación grave. La densidad es la base para que la pantalla de Android escale y muestre la interfaz. Entonces, ¿cómo se adapta Android a tantas pantallas?

De hecho, la pantalla de cada teléfono Android tiene una densidad fija inicial. Estos valores son 120, 160, 240, 320 y 480, que llamamos "densidad del sistema". ¿Has notado algún patrón? La relación entre los valores separados es 2 veces. En términos generales, la pantalla de 240 × 320 tiene una densidad media de 120 ppp, que es ldpi; la pantalla de 320 × 480 tiene una densidad media de 160 ppp, que es mdpi; La pantalla ×1280 tiene una densidad ultraalta de 320 ppp, que es xhdpi; la pantalla de 1080 × 1920 tiene una densidad ultraalta de 480 ppp, que es xxhdpi.

Android escala los elementos de la interfaz en función de la densidad del sistema, no de la densidad real.

4. Conversión entre dp y px

En Android, la pantalla del teléfono móvil de densidad media con una densidad del sistema de 160 ppp es la pantalla base, es decir, un móvil de 320×480 pantalla del teléfono. En esta pantalla, 1dp=1px.

100 ppp son 100 px en 320×480 (mdpi, 160 ppp). Entonces, ¿cuántos píxeles son 100 ppp en un teléfono móvil de 480 × 800 (hdpi, 240 ppp)? Sabemos que 100dp parece aproximadamente del mismo tamaño en los dos teléfonos. Según la relación entre 160 y 240, podemos saber que en 480×800, 100dp en realidad cubre 150px. Entonces, si proporciona una imagen de 100 píxeles para un teléfono mdpi, la imagen se ampliará a 150 píxeles en un teléfono hdpi, pero ambos son de 100 ppp.

Parece que la relación de escala de densidad media y alta densidad se puede calcular no en 160 ppp y 240 ppp, sino también en 320 px y 480 px. Sin embargo, el cálculo de la escala en función del ancho no se aplica a xhdpi de densidad ultraalta ni a xxhdpi de densidad ultraalta. Es decir, ¿cuántos px son 1dp en 720×1280? Si usa 720/320, obtendrá 1dp=2.25px, lo cual en realidad es incorrecto. La conversión de dp y px debe basarse en la densidad del sistema. La densidad del sistema de 720 × 1280 es 320 y la densidad del sistema de 320 × 480 es 160. 320/160 = 2, luego en 720 × 1280, 1dp = 2px. . De manera similar, en 1080×1920, 1dp=3px.

Puedes recordar la siguiente proporción, ¡y la conversión entre dp y px será muy fácil!

ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12, encontramos que la relación entre los números separados sigue siendo 2 veces. Al calcular, utilice mdpi como punto de referencia. Por ejemplo, en 720×1280 (xhdpi), ¿a cuántos px equivale 1dp? mdpi es 4, xhdpi es 8 y la relación es 2 veces, es decir, 1dp = 2px. Por el contrario, el cálculo es más importante. Por ejemplo, si usa PhotoShop para crear una representación de interfaz en un lienzo de 720 × 1280 y la distancia entre dos elementos es de 20 píxeles, ¿cuánto dp debe marcar? ¡Una relación de 2 veces, es decir 10dp!

Cuando el tamaño de fuente del sistema Android está configurado en "Normal", la conversión de tamaño entre sp y px es la misma que entre dp y px. Por ejemplo, si el tamaño del texto es de 24 píxeles en el lienzo de 720 × 1280 PS, dígale al ingeniero que el tamaño del texto es de 12 sp.

5. Se recomienda dibujar en xxdhpi

El hardware de los teléfonos móviles se ha desarrollado muy rápidamente en los últimos años. La resolución de pantalla de 1080 × 1920 se ha convertido en estándar y las pantallas 2K de 2560 × 1440. también son comunes. Con el desarrollo del hardware, se deben realizar algunas modificaciones a las teorías relacionadas anteriores. Dibujar en un lienzo de 720 × 1080 parece estar desactualizado.

Puede dibujar en un lienzo con una resolución de 1080 × 1920 (xxhdpi). Los materiales de imagen principales se extraen del lienzo de 1080 × 1920 y dejan que el programador los coloque en drawable-xxhdpi para tamaños pequeños; imágenes con líneas más finas, como iconos, se pueden producir y extraer dos conjuntos de iconos de diferentes tamaños, uno según xxhdpi y el otro según xhdpi.

En la resolución de 1080×1920 (xxhdpi), la relación entre dp y px es: 1dp=3px, que también es más fácil de calcular. Al dibujar, es mejor elegir un múltiplo de 3 para el tamaño del elemento y varios espacios para facilitar la conversión a dp.

7. Varias carpetas de recursos

Hice imágenes en 720 × 1280 y le pedí al desarrollador que las pusiera en la carpeta de recursos de drawable-xhdpi para que se pudieran mostrar correctamente.

Personalmente, creo que es suficiente proporcionar solo un conjunto de materiales. Puede probar si la aplicación se ejecuta sin problemas en teléfonos móviles de gama baja. Si tiene retrasos, puede proporcionar algunos materiales de imágenes mdpi según sea necesario, porque las imágenes están en xhdpi. ejecutarlo en teléfonos móviles mdpi ocupará más memoria.

Tomando el ícono de la aplicación como ejemplo, el tamaño del ícono en xhdpi es 96px. Si desea proporcionar un ícono por separado para mdpi, entonces el tamaño del ícono es 48px y se coloca en la carpeta de recursos de drawable-mdpi. . Los tamaños de imagen en cada carpeta de recursos también cumplen con la regla de ldpi:mdpi:hdpi:xhdpi:xxhdpi=3:4:6:8:12.

Si convierte un material de línea divisoria de 2 píxeles de alto en una imagen de 9.png y desea que la línea delgada tenga 2 píxeles en diferentes densidades sin que Android la escale según la densidad, ¿qué debe hacer? Puede colocar este material de línea divisoria en drawable-nodpi. Las imágenes en esta carpeta de recursos se mostrarán de acuerdo con el tamaño de píxel real y Android no las escalará según la densidad. Es decir, en mdpi la línea delgada es 2px (2dp), en xhdpi la línea delgada es 2px (1dp).