Window Size Class — ano ito, mga klase ng laki at pag-develop

Ano ang Window Size Class?

Window Size Class ay isang API ng Android platform, bahagi ng Jetpack WindowManager library, na nag-uuri ng magagamit na espasyo ng window ng application sa tatlong kategorya. Hindi tulad ng tradisyonal na diskarte sa mga resource quantifier (small/large/xlarge), ang Window Size Class ay nagbibigay ng discrete set ng mga halaga na maaasahan ng developer kapag nagdidisenyo ng interface.

Ang API ay lumitaw sa Android 7.0 Nougat bilang bahagi ng suporta para sa multi-window mode, ngunit ang aktibong pagpapatupad ay nagsimula sa Jetpack WindowManager 1.1 (2022). Inirerekomenda ng Google ang Window Size Class bilang pangunahing tool para sa pagbuo ng mga adaptibong layout sa halip na suriin ang lapad ng screen sa pamamagitan ng Display.getSize().

Ang pag-uuri ay batay sa lapad ng window sa dp, hindi sa pisikal na laki o densidad ng pixel. Nangangahulugan ito na ang dalawang device na may magkaibang resolusyon ngunit parehong lapad sa dp ay makakakuha ng parehong klase — ang interface ay magiging mahuhulaan na pareho.

Tatlong klase ng laki ng window ng Android

Compact — klase para sa window na may lapad hanggang 600 dp. Telepono sa portrait mode, karamihan sa mga natitiklop na telepono (Galaxy Z Flip) sa saradong estado. Ang interface ay binuo sa isang column, nabigasyon sa pamamagitan ng Bottom Navigation.

Medium — klase para sa window na may lapad na 600–840 dp. Tablet sa portrait, telepono sa landscape, natitiklop na device sa kalahating bukas na estado. Ang interface ay gumagamit ng dalawang column — halimbawa listahan sa kaliwa at mga detalye sa kanan. Pinapalitan ng Navigation Rail ang Bottom Navigation.

Expanded — klase para sa window na may lapad mula 840 dp. Tablet sa landscape, desktop window, natitiklop na device sa nakabukas na estado. Ang interface ay maaaring gumamit ng tatlo o higit pang panel, Permanent Navigation Drawer, mga panel ng tool.

Sa Material Design 3 para sa bawat klase ay tinukoy ang mga adaptibong component: Navigation Rail para sa Medium, Navigation Drawer para sa Expanded, Bottom Navigation para sa Compact. Hindi kailangang pumili ng developer ng breakpoints — ang mga ito ay itinakda na ng API.

Paano gumagana ang Window Size Class

Ang Window Size Class ay kinakalkula batay sa kasalukuyang lapad ng window ng application sa dp na isinasaalang-alang ang mga elemento ng system — status bar, navigation panel, paghahati ng screen sa Split Screen. Ang API ay tumutugon sa pagbabago ng configuration ng window: pag-ikot ng device, pagpasok sa multi-window mode, pagbukas ng natitiklop na device.

Para makuha ang klase, ginagamit ang WindowSizeClass class mula sa library na androidx.window. Ang developer ay nag-subscribe sa Flow (Kotlin) o LiveData (Java), na awtomatikong nag-a-update ng klase sa bawat pagbabago ng laki ng window — nang walang manu-manong pagproseso ng onConfigurationChanged.

Ang pag-uuri ay nangyayari sa tatlong hakbang. Una — pagsukat ng kasalukuyang lapad ng window sa pixels. Pangalawa — conversion sa dp sa pamamagitan ng DisplayMetrics.density. Pangatlo — paghahambing ng nakuhang halaga sa mga threshold: mas mababa sa 600 dp — Compact, 600–840 — Medium, mula 840 — Expanded.

val windowSizeClass = currentWindowAdaptiveInfo().windowSizeClass()

when (windowSizeClass.windowWidthSizeClass) {
    WindowWidthSizeClass.COMPACT -> // compact na lapad
    WindowWidthSizeClass.MEDIUM  -> // katamtamang lapad
    WindowWidthSizeClass.EXPANDED -> // pinalawak na lapad
}

Bukod sa lapad (windowWidthSizeClass), ang API ay nagbibigay ng klase para sa taas ng window (windowHeightSizeClass) — kapaki-pakinabang para sa landscape orientation at desktop window.

Window Size Class sa Jetpack Compose

Sa Jetpack Compose ang Window Size Class ay ginagamit sa pamamagitan ng function na currentWindowAdaptiveInfo(), na nagbabalik ng WindowAdaptiveInfo na may mga klase ng lapad at taas. Isinasaalang-alang ng function na ito hindi lamang ang laki ng window, kundi pati na rin ang uri ng input (keyboard, mouse, touch) — sa pamamagitan ng WindowPosture at WindowLayoutInfo.

Karaniwang senaryo — paglipat sa pagitan ng mga layout depende sa klase. Halimbawa, sa Compact ay ipinapakita ang BottomSheet na may pagpili, sa Medium — side panel, sa Expanded — permanenteng Navigation Drawer.

@Composable
fun AdaptiveNavigation(windowSizeClass: WindowWidthSizeClass) {
    when (windowSizeClass) {
        WindowWidthSizeClass.COMPACT -> BottomNavigation()
        WindowWidthSizeClass.MEDIUM  -> NavigationRail()
        WindowWidthSizeClass.EXPANDED -> NavigationDrawer()
    }
}

Sa Material Design 3 ang mga component na NavigationSuiteScaffold ay awtomatikong umaangkop sa Window Size Class — hindi kailangang magsulat ng conditional logic ang developer.

Window Size Class at Material Design 3

Material Design 3 (Material You) ay ganap na isinama sa Window Size Class. Ang adaptive layout system sa Material 3 ay tumutukoy kung aling navigation component ang gagamitin sa bawat klase: BottomNavigation para sa Compact, NavigationRail para sa Medium, NavigationDrawer para sa Expanded.

Ang integrasyong ito ay gumagana sa antas ng Adaptive API, na pinagsasama ang Window Size Class sa iba pang mga signal — FoldState (natitiklop na device) at WindowPosture (posisyon ng screen). Ang Adaptive API ay available sa pamamagitan ng material3-adaptive library.

Ang Material 3 ay nagbibigay ng apat na adaptibong component sa mataas na antas: ListDetailPaneScaffold, SupportingPaneScaffold, NavigationSuiteScaffold at AdaptiveSheet. Bawat isa sa kanila ay nagbabago ng kanilang pag-uugali depende sa Window Size Class nang walang karagdagang configuration.

Mga benepisyo ng adaptibong layout

Ang paggamit ng Window Size Class ay nagbibigay ng tatlong pangunahing benepisyo sa mobile development. Una — predictability: sa halip na daan-daang kumbinasyon ng laki ng screen, ang developer ay gumagawa sa tatlong klase. Ito ay lubos na nagbabawas ng bilang ng mga test scenario at bug na may kaugnayan sa layout.

Pangalawa — awtomatikong pag-aangkop sa multi-window mode. Kapag ang user ay pumasok sa Split Screen, ang lapad ng window ay nagbabago — ang Window Size Class ay agad na muling kinakalkula, at ang interface ay umaangkop. Kung wala ang API na ito, ang application sa nahating screen ay nagpapakita ng pinutol na bersyon ng interface para sa telepono.

Pangatlo — pagkakapare-pareho sa Material Design 3. Isinama ng Google ang Window Size Class sa sistema ng mga adaptibong component, kaya ang mga interface na binuo sa Material 3 ay awtomatikong sumusunod sa mga rekomendasyon ng Google para sa malaking screen na disenyo nang walang karagdagang trabaho.