Classes de taille de fenêtre

Les classes de taille de fenêtre sont un ensemble de points d'arrêt de fenêtre d'affichage définis qui vous aident concevoir, développer et tester des mises en page responsives et adaptatives. Équilibre des points d'arrêt la simplicité de la mise en page et la possibilité d'optimiser votre application dans des cas uniques.

Les classes de taille de fenêtre classent la zone d'affichage disponible pour votre application dans la catégorie compact, medium ou expanded. La largeur et la hauteur disponibles sont classées séparément. Votre application possède donc à tout moment deux tailles de fenêtre une pour la largeur et une pour la hauteur. La largeur disponible est généralement supérieure importante que la hauteur disponible en raison de l'omniprésence du défilement vertical, donc la classe de taille de fenêtre en largeur est probablement plus adaptée à l'interface utilisateur de votre application.

Comme le montrent les figures, les points d'arrêt vous permettent de continuer à réfléchir sur les mises en page en termes d'appareils et de configurations. Point d'arrêt de chaque classe de taille représente un cas majoritaire pour des scénarios d'appareil typiques, ce qui peut être utile de référence lorsque vous réfléchissez à la conception de votre modèle mises en page.

Même s'il peut être utile de visualiser les classes de taille en tant qu'appareils physiques, la taille de la fenêtre ne sont pas explicitement déterminées par la taille de l'écran de l'appareil. Fenêtre Les classes de taille ne sont pas destinées à une logique de type isTablet. Il s'agit plutôt de la fenêtre Les classes de taille sont déterminées par la taille de fenêtre disponible pour votre application quel que soit le type d'appareil sur lequel l'application s'exécute. implications:

• Les appareils physiques ne garantissent pas l'utilisation d'une classe de taille de fenêtre spécifique. La l'espace disponible à l'écran pour votre application peut différer de la taille d'écran appareil pour de nombreuses raisons. Sur les appareils mobiles, le mode Écran partagé partitionner l'écran entre deux applications. Sous ChromeOS, les applications Android peuvent être présentées dans des fenêtres de forme libre qui sont arbitrairement redimensionnables ; Les appareils pliables peuvent avoir deux écrans de différentes tailles accessibles individuellement en pliant ou en dépliant l'appareil.

• La classe de taille de fenêtre peut changer tout au long de la durée de vie de votre application. Pendant l'exécution de votre application, l'orientation de l'appareil change, le mode multitâche et le pliage ou le dépliage peut modifier l'espace disponible à l'écran. En tant que résultat, la classe de taille de fenêtre est dynamique et l'UI de votre appli doit s'adapter en conséquence.

Les classes de taille de fenêtre sont mappées aux points d'arrêt compacts, moyens et étendus dans le Mise en page Material Design conseils. Utiliser des classes de taille de fenêtre pour prendre des décisions de haut niveau concernant la mise en page des applications par exemple, décider d'utiliser ou non une mise en page canonique spécifique pour tirer parti plus d'espace à l'écran.

Vous pouvez calculer la WindowSizeClass actuelle à l'aide de la fonction WindowSizeClass#compute() fournie par la bibliothèque Jetpack WindowManager. L'exemple suivant montre comment calculer la classe de taille de fenêtre et recevoir des mises à jour chaque fois qu'elle change:

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.
    }
}

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.
    }
}

Tester les classes de taille de fenêtre

Lorsque vous modifiez la mise en page, testez le comportement de la mise en page sur toutes les tailles de fenêtre, en particulier pour les points d'arrêt de largeur compacte, moyenne et étendue.

Si vous disposez déjà d'une mise en page pour les écrans compacts, commencez par l'optimiser pour la classe de largeur étendue, car celle-ci offre le plus d'espace . Ensuite, choisissez la mise en page qui convient pour la classe de largeur moyenne ; envisagez d'ajouter une mise en page spécialisée.

Étapes suivantes

En savoir plus sur l'utilisation des classes de taille de fenêtre pour créer des modèles responsifs/adaptatifs consultez les sections suivantes:

• Pour les mises en page basées sur Compose: Assurer la compatibilité avec différentes tailles d'écran

• Pour les mises en page basées sur les vues : Conception responsive/adaptative avec vues

Pour en savoir plus sur les caractéristiques d'une application sur tous les appareils et toutes les tailles d'écran, voir:

• Adopter des mises en page responsives pour votre UI
• Qualité des applications sur grand écran