Sheet sa mobile development — kahulugan, mga uri, at kung paano gumagana

Ano ang Sheet sa mga mobile app

Sheet ay isang mababaw na UI-component na lumalabas mula sa ibaba ng screen at nagpapakita ng karagdagang content o aksyon nang hindi inaalis ang gumagamit sa kasalukuyang screen. Hindi tulad ng mga full-screen transition, pinapanatili ng Sheet ang konteksto: nakikita ng gumagamit ang background screen at nauunawaan kung saan nagmula ang Sheet.

Ang arkitektura ng Sheet ay batay sa isang container na may nababagong taas. Sa minimal na estado (collapsed) bahagi lamang ng content ang nakikita — karaniwang isang pamagat o maliit na panel. Maaaring i-drag ng gumagamit ang Sheet pataas upang palawakin ito (expanded) o i-swipe pababa upang isara. Ang pag-uugali na ito ay kahawig ng isang pisikal na papel na hinugot mula sa ilalim ng isang stack — kaya ang pangalan.

Sa mga alituntunin ng Material Design 3 (2024), dalawang pangunahing senaryo ang itinatampok ng Google para sa paggamit ng Sheet: pagpapakita ng mga karagdagang aksyon na hindi kasya sa pangunahing toolbar, at pagpapakita ng mga form o detalyadong impormasyon nang hindi lumilipat sa isang hiwalay na screen. Sa iOS, idinagdag ng Apple ang system support para sa Sheet simula sa iOS 15 sa pamamagitan ng UISheetPresentationController, na nagpapatunay sa universality ng pattern.

Mga uri ng Bottom Sheet: standard, modal, at pinalawak

Material Design ay tumutukoy ng tatlong uri ng Bottom Sheet, bawat isa ay may sariling pag-uugali at lugar ng aplikasyon. Ang pagpili ng tamang uri ay direktang nakakaapekto sa karanasan ng gumagamit at pagsunod sa mga alituntunin ng platform.

Standard Bottom Sheet (Standard)

Standard Bottom Sheet ay isang non-modal na component: ang gumagamit ay maaaring makipag-ugnayan sa background screen nang hindi isinasara ang Sheet. Halimbawa, habang nagba-browse ng listahan ng produkto sa background window, nakikita ng gumagamit ang mga filter sa Bottom Sheet at maaaring baguhin ang mga ito nang hindi isinasara ang panel. Inaayos ng Sheet ang taas nito sa content — mula 30% hanggang 90% ng screen.

Standard Bottom Sheet ay hindi hinaharangan ang background at pinapayagan ang pakikipag-ugnayan sa pangunahing content. Ito ang pangunahing pagkakaiba mula sa modal Sheet, na nangangailangan ng mandatoryong aksyon upang magpatuloy. Gamitin ang standard Sheet kapag ang karagdagang impormasyon ay hindi kritikal para sa pangunahing senaryo.

Modal Bottom Sheet (Modal)

Modal Bottom Sheet ay hinaharangan ang pakikipag-ugnayan sa background screen hanggang sa gawin ng gumagamit ang isang aksyon sa loob ng Sheet. Ang ganitong Sheet ay palaging ipinapakita sa expanded na estado at nangangailangan ng tahasang pagsasara — sa pamamagitan ng button, aksyon, o pag-swipe pababa. Inirerekomenda ng Material Design ang modal Sheet para sa mga login form, kumpirmasyon, at kritikal na setting.

Sa Android, ang modal Bottom Sheet ay na-implement sa pamamagitan ng BottomSheetDialogFragment, na awtomatikong hinaharangan ang background. Sa iOS, ang katulad na pag-uugali ay ibinibigay ng modal na variant ng UISheetPresentationController na may parameter na .mediumDetent. Ang modal Sheet ay dapat gamitin lamang kapag ang konteksto ay nangangailangan ng atensyon ng gumagamit.

Pinalawak na Bottom Sheet (Expanding)

Pinalawak na Bottom Sheet ay pinagsasama ang mga katangian ng standard at modal: nagsisimula ito bilang non-modal sa collapsed na estado, ngunit nagiging modal kapag na-drag pataas. Sa praktika, nangangahulugan ito na ang gumagamit ay maaaring munang sumulyap sa nilalaman, pagkatapos ay magpasya — palawakin ang Sheet para sa detalyadong pag-aaral o isara ito.

Ang pattern na ito ay lalong popular sa mga mapa at navigator, kung saan ang ibabang panel ay nagpapakita ng maikling impormasyon tungkol sa isang punto ng ruta, at kapag nag-swipe pataas ay nagbubukas ito nang may mga detalye. Gumagamit ang Google Maps ng ganitong pinalawak na Sheet para sa pagpapakita ng impormasyon tungkol sa mga lugar at ruta.

Bottom Sheet sa Android: Material Design at Jetpack Compose

Android SDK ay nagbibigay ng ilang API para sa pag-implement ng Bottom Sheet, mula sa klasikong View approach hanggang sa modernong Jetpack Compose. Ang Material Components Library para sa Android ay may kasamang mga handa nang implementasyon ng BottomSheetDialogFragment at BottomSheetBehavior.

BottomSheetBehavior sa XML layout

BottomSheetBehavior ay isang klase mula sa Material Components na maaaring ikabit sa anumang View at pamahalaan ang posisyon nito sa screen. Ang developer ay nagtatakda ng tatlong estado: STATE_COLLAPSED (nakatiklop), STATE_EXPANDED (nakabuka), at STATE_HIDDEN (nakatago). Awtomatikong hinahawakan ng Behavior ang mga drag gesture at animation.

val sheet = findViewById<View>(R.id.bottom_sheet)
val behavior = BottomSheetBehavior.from(sheet)
behavior.state = BottomSheetBehavior.STATE_COLLAPSED
behavior.peekHeight = 200

Bottom Sheet sa Jetpack Compose

Jetpack Compose ay nagbibigay ng mas deklaratibong API sa pamamagitan ng ModalBottomSheet component mula sa Material 3. Hindi tulad ng View approach, ang Bottom Sheet sa Compose ay isang composable function na tumatanggap ng estado at content. Awtomatikong ina-animate ng Sheet ang paglitaw, pagtatago, at pagbabago ng taas habang nagda-drag.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun FilterSheet(onDismiss: () -> Unit) {
    ModalBottomSheet(onDismissRequest = onDismiss) {
        Text("Filters")
        Button(onClick = onDismiss) { Text("Apply") }
    }
}

BottomSheetDialogFragment para sa mga modal na senaryo

BottomSheetDialogFragment ay isang espesyalisadong DialogFragment na ipinapakita bilang Bottom Sheet. Awtomatiko nitong hinahawakan ang modality, lifecycle, at mga pagbabago sa configuration. Ang developer ay kailangan lamang i-override ang onCreateView at ibalik ang layout ng Sheet. Ayon sa dokumentasyon ng Google (Android Developers, 2024), ang BottomSheetDialogFragment ay ang inirerekomendang paraan para sa modal Bottom Sheet sa klasikong Android.

Sheet sa iOS: UISheetPresentationController at SwiftUI

Apple ay nagpakilala ng system support para sa Sheet simula sa iOS 15 sa pamamagitan ng UISheetPresentationController. Bago ito, ang mga developer ay nag-implement ng Bottom Sheet nang manu-mano sa pamamagitan ng custom transition o third-party library. Ang native Sheet ng Apple ay sumusuporta sa detents — mga paunang natukoy na antas ng pagbubukas.

UISheetPresentationController sa UIKit

UISheetPresentationController ay isang built-in na presentation controller na nagpapakita ng View Controller bilang Sheet. Ang developer ay nagtatakda ng array ng detents — mga halaga ng taas kung saan maaaring huminto ang Sheet. Idinagdag ng iOS 16 ang custom detents na may arbitrary na taas. Inirerekomenda ng Apple ang paggamit ng medium (.medium) at large (.large) detents bilang pangunahing.

let viewController = MySheetViewController()
if let sheet = viewController.sheetPresentationController {
    sheet.detents = [.medium, .large]
    sheet.prefersGrabberVisible = true
    sheet.preferredCornerRadius = 16
}
present(viewController, animated: true)

.sheet modifier sa SwiftUI

SwiftUI ay nagbibigay ng .sheet modifier na nag-uugnay ng pagpapakita ng Sheet sa estado. Kapag naging true ang published variable, awtomatikong ipinapakita ng SwiftUI ang Sheet. Sinusuportahan din ng SwiftUI ang detents sa pamamagitan ng .presentationDetents modifier, na idinagdag sa iOS 16.

struct ContentView: View {
    @State private var showSheet = false

    var body: some View {
        Button("Show Sheet") { showSheet = true }
            .sheet(isPresented: $showSheet) {
                FilterView()
                    .presentationDetents([.medium, .large])
            }
    }
}

Sheet sa cross-platform frameworks: Flutter at React Native

Cross-platform frameworks ay sumusuporta rin sa Bottom Sheet, na iniangkop ang pag-uugali sa target na platform. Ang Flutter at React Native ay nagbibigay ng built-in at custom na implementasyon na may iba't ibang antas ng kakayahang umangkop.

Bottom Sheet sa Flutter

Flutter SDK ay naglalaman ng dalawang pamamaraan para sa pagpapakita ng Bottom Sheet: showBottomSheet (standard) at showModalBottomSheet (modal). Ang Material Design sa Flutter ay sumusunod sa parehong prinsipyo tulad ng sa Android — ang Sheet ay lumilitaw mula sa ibaba, sumusuporta sa drag at nako-configure na taas. Para sa pinalawak na pag-uugali na may mga detents, ginagamit ang DraggableScrollableSheet.

Scaffold.of(context).showBottomSheet((context) {
    return Container(
        padding: EdgeInsets.all(16),
        child: Column(
            children: [
                Text("Sheet Content"),
                ElevatedButton(
                    onPressed: () => Navigator.of(context).pop(),
                    child: Text("Close")
                )
            ]
        )
    );
})

Bottom Sheet sa React Native

React Native ay walang built-in na Bottom Sheet component sa core nito, kaya ang mga developer ay gumagamit ng third-party library. Ang pinakasikat ay @gorhom/bottom-sheet (higit sa 7 libong bituin sa GitHub, 2024). Nagbibigay ito ng gesture-driven Bottom Sheet na may suporta para sa snap points, animation, at fixed headers. Ang library ay isinulat sa Reanimated 2 at Gesture Handler para sa pagganap sa 60 FPS.

Pinakamahusay na kasanayan at karaniwang pagkakamali

Tamang paggamit ng Bottom Sheet ay nangangailangan ng pagsunod sa mga alituntunin ng platform at pag-unawa sa mga senaryo kung saan ang Sheet ay angkop. Tingnan natin ang mga pangunahing rekomendasyon at karaniwang pagkakamali sa pagdidisenyo ng Sheet.

Kailan gagamitin ang Bottom Sheet

Ang Bottom Sheet ay optimal para sa mga aksyon na karagdagang may kaugnayan sa pangunahing content sa screen. Mga filter, pag-uuri, pagpili ng mga opsyon, maikling impormasyon tungkol sa isang elemento — karaniwang mga senaryo. Inirerekomenda ng Material Design ang paggamit ng Sheet para sa mga tool na hindi dapat sumakop sa buong screen, ngunit nangangailangan ng mas maraming espasyo kaysa sa Action Sheet o Popup Menu.

Kailan HINDI gagamitin ang Bottom Sheet

Huwag gamitin ang Bottom Sheet para sa mga kritikal na babala o error — para dito ang mga dialog window ay angkop. Iwasan ang Sheet na may maraming input field na nangangailangan ng scroll: nahihirapan ang gumagamit na maabot ang keyboard at nawawala ang konteksto. Kung ang Sheet ay naglalaman ng higit sa pitong elemento ng aksyon, isaalang-alang ang isang hiwalay na screen sa halip na Sheet.

Pagkakamali: masyadong mataas na collapsed mode

Karaniwang pagkakamali ang pagtatakda ng peekHeight (taas sa nakatiklop na estado) ng higit sa 40% ng screen. Hindi nauunawaan ng gumagamit kung nakikita niya ang Sheet nang buo o maaari itong palawakin. Inirerekomenda ng Material Design ang peekHeight sa saklaw na 15-30% ng taas ng screen upang mag-iwan ng kapansin-pansing bahagi ng content na nakatago at mag-udyok sa pag-drag.

Pagkakamali: pagbalewala sa swipe gesture sa iOS

Sa iOS, inaasahan ng mga gumagamit na ang Sheet ay maaaring isara sa pamamagitan ng pag-swipe pababa mula sa anumang posisyon. Kung hindi mo pinagana ang gesture na ito (sa pamamagitan ng UISheetPresentationController.prefersEdgeAttachedInCompactHeight), ang gumagamit ay nakakaranas ng pagkabigo kapag sinusubukang isara ang Sheet sa karaniwang paraan. Binibigyang-diin ng Apple Human Interface Guidelines (2024) na ang pag-swipe upang isara ay isang pangunahing inaasahan ng gumagamit ng iOS.