Klasy rozmiaru okna

Klasy rozmiaru okna to zbiór określonych punktów przerwania widocznego obszaru, projektowania, opracowywania i testowania układów elastycznych i adaptacyjnych. Bilans punktów przerwania prostota układu i elastyczność pozwalającą optymalizować aplikację pod kątem unikalnych przypadków.

Klasy rozmiaru okna kategoryzują obszar wyświetlania dostępny dla Twojej aplikacji według compact, medium lub expanded (rozwinięty). Sklasyfikowana jest dostępna szerokość i wysokość oddzielnie, więc w każdej chwili okno aplikacji może mieć 2 rozmiary klasy – jedną dla szerokości, a drugą dla wysokości. Dostępna szerokość jest zwykle większa jest ważniejsza niż dostępna wysokość ze względu na powszechność przewijania w pionie. klasa szerokości okna jest prawdopodobnie bardziej odpowiednia dla interfejsu Twojej aplikacji.

Jak widać na ilustracjach, punkty przerwania pozwalają myśleć dalej. o układach w kontekście urządzeń i konfiguracji. Punkt przerwania każdej klasy rozmiaru stanowi większość typowych scenariuszy dotyczących urządzeń, co może być pomocne. gdy zastanawiasz się nad strukturą punktu przerwania, układy.

Wizualizacja klas rozmiarów jako urządzeń fizycznych może być przydatna, jednak rozmiar okna klasy nie są wyraźnie określone przez rozmiar ekranu urządzenia. Okno klas rozmiarów nie jest traktowana jako logika typu isTablet. Okno klasy rozmiarów są określane na podstawie rozmiaru okna dostępnego dla aplikacji niezależnie od typu urządzenia, na którym działa aplikacja. Mają one 2 ważne konsekwencje:

• Urządzenia fizyczne nie gwarantują konkretnej klasy rozmiaru okna. ilość miejsca na ekranie dostępna dla aplikacji może się różnić od rozmiaru ekranu z różnych powodów. Na urządzeniach mobilnych tryb podzielonego ekranu dzielą ekran między 2 aplikacje. W ChromeOS aplikacje na Androida mogą mogą być wyświetlane w oknach o swobodnej atmosferze, które można dowolnie zmieniać. Urządzenia składane mogą mieć 2 ekrany o różnych rozmiarach. otwierając lub rozkładając urządzenie.

• Klasa rozmiaru okna może się zmieniać przez cały okres istnienia aplikacji. Gdy aplikacja jest uruchomiona, zmiany orientacji urządzenia, wielozadaniowość rozłożenie może zmienić ilość dostępnego miejsca na ekranie. Jako klasa rozmiaru okna jest dynamiczna, a interfejs aplikacji powinien odpowiednio się zmienia.

Klasy rozmiaru okna są mapowane na punkty przerwania kompaktowego, średniego i rozwiniętego Układ Material Design wskazówek. używać klas rozmiaru okna do podejmowania ogólnych decyzji dotyczących układu aplikacji, np. podjęcie decyzji o użyciu konkretnego układu kanonicznego, by wykorzystać dodatkowego miejsca na ekranie.

Bieżąca wartość WindowSizeClass możesz obliczyć za pomocą funkcji WindowSizeClass#compute() dostępnej w bibliotece Jetpack WindowManager. Z przykładu poniżej dowiesz się, jak obliczyć klasę rozmiaru okna i otrzymywać aktualizacje po każdej zmianie klasy rozmiaru okna:

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

Klasy rozmiaru okna testowego

Gdy wprowadzasz zmiany w układzie, testuj jego zachowanie na oknach wszystkich rozmiarów, zwłaszcza przy małych, średnich i rozwiniętych punktach przerwania.

Jeśli masz już układ na kompaktowe ekrany, najpierw zoptymalizuj układ w przypadku klasy rozmiaru po rozwinięciu, ponieważ ta klasa zapewnia najwięcej miejsca o dodatkowe zmiany w treści i interfejsie. Następnie zdecyduj, jaki układ klasę średniej szerokości; warto rozważyć dodanie specyficznego układu.

Dalsze kroki

Dowiedz się więcej o tym, jak używać klas rozmiaru okna do tworzenia elastycznych/adaptacyjnych układy, zapoznaj się z tymi informacjami:

• Układy oparte na funkcji tworzenia wiadomości: obsługa różnych rozmiarów ekranu

• w przypadku układów opartych na widokach: elastyczne/adaptacyjne projektowanie z widokami;

Aby dowiedzieć się, co sprawia, że aplikacja jest odpowiednia na każde urządzenie i ekran, zobacz:

• Migracja interfejsu do układów elastycznych
• Jakość aplikacji na dużym ekranie