Las clases de tamaño de ventana son un conjunto de puntos de interrupción de viewports bien definidos que te ayudan a diseñar, desarrollar y probar diseños responsivos/adaptables. El equilibrio de los puntos de interrupción la simplicidad del diseño con la flexibilidad de optimizar tu app para casos únicos.
Las clases de tamaño de ventana categorizan el área de visualización disponible para tu app como compacta, mediana o expandida. El ancho y la altura disponibles se clasifican por separado, para que en cualquier momento, tu app tenga dos tamaños de ventana clases: una para ancho y otra para altura. El ancho disponible suele ser mayor importante que la altura disponible debido a la ubicuidad del desplazamiento vertical, de modo es probable que la clase de tamaño de ventana de ancho sea más relevante para la IU de tu app.
Como se muestra en las figuras, los puntos de interrupción te permiten seguir pensando sobre los diseños en términos de dispositivos y configuraciones. Cada punto de interrupción de clase de tamaño representa la mayoría de los casos en cada dispositivo típico, que puede ser un marco de referencia útil cuando piensas en la forma de tus diseños basados en puntos de interrupción.
Clase de tamaño | Punto de interrupción | Representación del dispositivo |
---|---|---|
Ancho compacto | ancho <600 dp | 99.96% de los teléfonos en orientación vertical |
Ancho medio | 600 dp ≤ ancho < 840 dp | 93.73% de las tablets en orientación vertical pantallas internas desplegadas más grandes en orientación vertical |
Ancho expandido | ancho ≥840 dp | 97.22% de las tablets en orientación horizontal pantallas internas desplegadas más grandes en orientación horizontal |
Altura compacta | altura <480 dp | 99.78% de los teléfonos en orientación horizontal |
Altura media | 480 dp ≤ altura <900 dp | 96.56% de las tablets en orientación horizontal 97.59% de los teléfonos en orientación vertical |
Altura expandida | altura ≥900 dp | 94.25% de las tablets en orientación vertical |
Aunque visualizar las clases de tamaño como dispositivos físicos puede ser útil, no están determinadas explícitamente por el tamaño de la pantalla del dispositivo. Ventana las clases de tamaño no están diseñadas para la lógica isTablet-type. Más bien, las métricas las clases de tamaño se determinan por el tamaño de ventana disponible para tu aplicación independientemente del tipo de dispositivo en el que se ejecute la app, que tiene dos implicaciones:
Los dispositivos físicos no garantizan una clase específica de tamaño de ventana. El el espacio de pantalla disponible para tu aplicación puede diferir del tamaño de la pantalla de la dispositivo por varias razones. En los dispositivos móviles, se puede usar el modo de pantalla dividida particionar la pantalla entre dos aplicaciones. En ChromeOS, las apps para Android pueden Se presentan en ventanas de formato libre cuyo tamaño puede cambiar de forma arbitraria. Los dispositivos plegables pueden tener dos pantallas de diferentes tamaños a las que se pueda acceder de forma individual. al plegar o desplegar el dispositivo.
La clase de tamaño de ventana puede cambiar durante el ciclo de vida de la app. Mientras se ejecuta la app, la orientación del dispositivo cambia, realiza varias tareas a la vez y plegar o desplegar el espacio puede cambiar el espacio disponible de la pantalla. Como resultado, la clase de tamaño de ventana es dinámica y la IU de tu app debería adaptarse según corresponda.
Las clases de tamaño de ventana se asignan a los puntos de interrupción compactos, medianos y expandidos en la Diseño de Material Design orientación. Usar clases de tamaño de ventana para tomar decisiones de diseño de aplicaciones de alto nivel como decidir si se usará un diseño canónico específico para aprovechar espacio adicional en pantalla.
Puedes calcular el valor
WindowSizeClass
con el
WindowSizeClass#compute()
de la herramienta de Jetpack
biblioteca de WindowManager. El siguiente ejemplo
muestra cómo calcular la clase de tamaño de ventana y recibir actualizaciones cada vez que
Cambios en la clase de tamaño de ventana:
Kotlin
class MainActivity : Activity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. val container: ViewGroup = binding.container // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(object : View(this) { override fun onConfigurationChanged(newConfig: Configuration?) { super.onConfigurationChanged(newConfig) computeWindowSizeClasses() } }) computeWindowSizeClasses() } private fun computeWindowSizeClasses() { val metrics = WindowMetricsCalculator.getOrCreate().computeCurrentWindowMetrics(this) val width = metrics.bounds.width() val height = metrics.bounds.height() val density = resources.displayMetrics.density val windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED val widthWindowSizeClass = windowSizeClass.windowWidthSizeClass // COMPACT, MEDIUM, or EXPANDED val heightWindowSizeClass = windowSizeClass.windowHeightSizeClass // Use widthWindowSizeClass and heightWindowSizeClass. } }
Java
public class MainActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // ... // Replace with a known container that you can safely add a // view to where the view won't affect the layout and the view // won't be replaced. ViewGroup container = binding.container; // Add a utility view to the container to hook into // View.onConfigurationChanged(). This is required for all // activities, even those that don't handle configuration // changes. You can't use Activity.onConfigurationChanged(), // since there are situations where that won't be called when // the configuration changes. View.onConfigurationChanged() is // called in those scenarios. container.addView(new View(this) { @Override protected void onConfigurationChanged(Configuration newConfig) { super.onConfigurationChanged(newConfig); computeWindowSizeClasses(); } }); computeWindowSizeClasses(); } private void computeWindowSizeClasses() { WindowMetrics metrics = WindowMetricsCalculator.getOrCreate() .computeCurrentWindowMetrics(this); int width = metrics.getBounds().width int height = metrics.getBounds().height() float density = getResources().getDisplayMetrics().density; WindowSizeClass windowSizeClass = WindowSizeClass.compute(width/density, height/density) // COMPACT, MEDIUM, or EXPANDED WindowWidthSizeClass widthWindowSizeClass = windowSizeClass.getWindowWidthSizeClass() // COMPACT, MEDIUM, or EXPANDED WindowHeightSizeClass heightWindowSizeClass = windowSizeClass.getWindowHeightSizeClass() // Use widthWindowSizeClass and heightWindowSizeClass. } }
Cómo probar las clases de tamaño de ventana
A medida que realizas cambios en el diseño, prueba el comportamiento del diseño en todos los tamaños de ventana especialmente en los anchos de puntos de interrupción compacto, mediano y expandido.
Si ya tienes un diseño para pantallas compactas, primero debes optimizarlo. para la clase de tamaño de ancho expandido, ya que esta clase proporciona la mayor cantidad de espacio para ver contenido adicional y realizar cambios en la IU. A continuación, decide qué diseño tiene sentido para la clase de tamaño de ancho medio; considera agregar un diseño especializado.
Próximos pasos
Para obtener más información sobre cómo usar las clases de tamaño de ventana para crear modelos responsivos o adaptables diseños, consulta lo siguiente:
Para diseños basados en Compose: Cómo brindar compatibilidad con diferentes tamaños de pantalla
Para diseños basados en vistas: Diseño responsivo/adaptable con vistas
Para obtener más información sobre los aspectos que hacen que una app sea excelente en todos los dispositivos y tamaños de pantalla, consulta: