Bu makale, Jetpack oluşturma kullanarak alt sayfaları görüntülemek için Activity ve fragman için Kotlin uzantılarının nasıl oluşturulacağını öğretecektir.
En şık UI bileşenlerinden biri, mevcut bağlamından tamamen ayrılmadan bazı bilgileri görüntülemek veya bir iç akışı temsil etmek için ekranın altından açılan bir görünüm olan Alt sayfadır.
Bugün birçok uygulama tarafından kullanılmaktadır ve muhtemelen bir gün sizin uygulamanızda da işinize yarayacaktır.
Jetpack oluşturma kullanarak bir alt sayfanın görüntülenmesi, aşağıdaki gibi birkaç makalede iyi bir şekilde belgelenmiştir: Bu ile Ahmed Tikiwa, Kıdemli Yazılım Mühendisi @Lunohangi kullanıyor ModalBottomSheetLayout.
Ve Şu ile Rasul Agakishiyevodaklanan, BottomSheetScaffold.
Örneğimizde, seçtik ModalBottomSheetLayout alt sayfa alanının dışına dokunarak durum değişikliği elde etmemizi sağladığından
Buraya kod için geldiyseniz, işte burada, bu yazının ilerleyen bölümlerinde onu parçalayacağız.
Android görüntüleme sisteminde çalışırken, Jetpack Compose ile yazıp eski görünümlerimize dökmeyi dilediğimiz UI bileşenlerine sık sık rastlıyoruz. Sayesinde Jetpack Compose birlikte çalışabilirliğiYapabiliriz!
Bunu yapmak için bir uzatma işlevi ilan ediyoruz. Activity bunun gibi
inline fun Activity.showAsBottomSheet(
content: @Composable (() -> Unit) -> Unit
) {
val viewGroup = this.findViewById(
android.R.id.content) as ViewGroup
addContentToView(viewGroup, content)
}
Herhangi bir Aktivitede herhangi bir yerde çağrılabilen bu uzantı işlevi, parametre olarak bir oluşturulabilir işlevi alır:
content: @Composable (() -> Unit) -> Unit
Parametre türünün, parametre olarak lambda alan bir Kotlin işlevi olduğuna dikkat edin, bu olayın bir kullanıcı olayı tarafından yayılmasını istiyorsak (kapat düğmesine dokunma, ağ yanıtı, vb.)
İçeriği çıkaracağız viewGroup bu, herhangi bir etkinlik hiyerarşisinde en üstteki görünümdür.
val viewGroup = this.findViewById(android.R.id.content) as ViewGroup
Alt tabakayı buna ekleyeceğiz viewGroupböylece o anda mevcut olan herhangi bir içeriğin üstünde görüntülenebilir. Activity.
private fun addContentToView(
viewGroup: ViewGroup,
content: @Composable (() -> Unit) -> Unit
) {
viewGroup.addView(
ComposeView(viewGroup.context).apply {
setContent {
BottomSheetWrapper(viewGroup, this, content)
}
}
)
}
Birleştirilebilir içerik eklemek için viewGroup sadece yenisini ekliyoruz ComposeView ona.
bu ComposeView kullanarak şekillendirilebilir bir içerik ayarlayabilen bir Android görünümüdür. setContent bir Aktivitenin yapabileceği gibi bir uzantı.
İçerik bloğunda, şekillendirilebilir dosyamızı birBottomSheetWrapperbu sarmalayıcı tüm alt sayfa mantığını içerecek ve birleştirilebilir içerik extension işlevine parametre olarak geçtik.
Bu yüzden ağır kaldırmamızın çoğu BottomSheetWrapper:
Kullanılacak herhangi bir kodda olduğu gibi Kompozisyondeğişkenleri şu şekilde saklıyoruz remember elementler.
val coroutineScope = rememberCoroutineScope()
val modalBottomSheetState = rememberModalBottomSheetState(
ModalBottomSheetValue.Hidden
)
val isSheetOpened = remember { mutableStateOf(false) }
Bu yüzden hatırlanan üç değeri koruyoruz:
eşyordam kapsamı
hatırlanmak istiyoruz CoroutineScope böylece performansı artırmak için bir eşyordamda slayt animasyonları başlatabiliriz.
val coroutineScope = rememberCoroutineScope()
Alt sayfa durumu
Alt sayfa durumu, değişikliklere tepki verebilmesi için içeriğe de aktarılacaktır, ayrıca bir durumda da gözlemlenecektir. LaunchedEffect alt tabakayı tamamen aşağı çekmenin başlatılacağından emin olmak için exit()
val modalBottomSheetState = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
Alt sayfa açık — ilk durum
Sayfanın kullanıcı eylemi nedeniyle mi yoksa henüz görünüme animasyon vermediğimiz için mi kapalı olduğunu bilmek istediğimizden, sayfanın ilk durumunu da hatırlayacağız.
val isSheetOpened = remember { mutableStateOf(false) }
Jetpack oluşturma, alt sayfa modal davranışını işleyebilen iki bileşen sağlar ve daha önce de belirttiğimiz gibi kullanacağız. ModalBottomSheetLayout bizim durumumuz için, alt sayfanın dışına tıklarken alt sayfayı gizleme davranışını aldığımız için.
ModalBottomSheetLayout(
sheetBackgroundColor = Color.Transparent,
sheetState = modalBottomSheetState,
sheetContent = {
content {
// Action passed for clicking close button in the content
coroutineScope.launch {
modalBottomSheetState.hide() // trigger LaunchedEffect
}
}
}
) {}
ile sağlayacağız sheetState daha önce hatırladık ve content() bu, alt sayfanın asıl içeriğidir ve bir parametre olarak uzantı işlevine sağlanacaktır.
Ayrıca, içeriğin içinden çıkış akışı başlatıldığında (bir X veya close örneğin düğme).
Alt sayfayı kapatmak ve kaldırmak istediğimiz üç senaryo vardır.
bu içerikten tıklama etkinliği daha önce beyan ettiğimizde ele alındı:
sheetContent = {
content {
// Action passed for clicking close button in the content
coroutineScope.launch {
modalBottomSheetState.hide() // trigger LaunchedEffect
}
}
}
tıklama cihaza geri dön altında aynı kodu yürütecek BackHandler Jetpack bağımlılıkları tarafından sağlanan yardımcı işlev
// clicking back on device
BackHandler {
coroutineScope.launch {
modalBottomSheetState.hide() // trigger the LaunchedEffect
}
}
Gördüğümüz gibi, alt sayfa ile işimiz bittiğinde hide()üzerinde modalBottomSheetState bu, sayfayı görünüm dışında canlandırır.
Ancak alt sayfa hala viewGroup arasında Activity.
Şunu aradığımızı unutmayın:
viewGroup.addView(ComposeView(...).apply { ... }
Bu yüzden hala görünümü kaldırmamız gerekiyor Activityve bunu kullanarak alt sayfa durumunu dinleyerek yapabiliriz. LaunchedEffect
// Take action based on hidden state
LaunchedEffect(modalBottomSheetState.currentValue) {
when (modalBottomSheetState.currentValue) {
ModalBottomSheetValue.Hidden -> {
parent.removeView(composeView)
}
else -> { Log.i(TAG, "Bottom sheet ${...} state") }
}
}
Kenar durumda
Aktiviteyi ilk başlattığımızda bir Edge durumu var ve alt sayfa gizleniyor.
Bu durumda, kullandığımız isSheetOpened daha önce hatırladık ve bu değişkeni başlatırken alt sayfayı gösterdik, diğer tüm durumlarda diyoruz removeView
// Take action based on hidden state
LaunchedEffect(modalBottomSheetState.currentValue) {
when (modalBottomSheetState.currentValue) {
ModalBottomSheetValue.Hidden -> {
when {
isSheetOpened -> parent.removeView(composeView)
else -> {
isSheetOpened = true
modalBottomSheetState.show()
}
}
}
else -> { Log.i(TAG, "Bottom sheet ${...} state") }
}
}
Ve bu kadar! Artık birleştirilebilirleri alt sayfalar olarak gösterebiliriz, eski Android görünümünün üstünde yukarı ve aşağı sürüklenebilirler, önemli bilgileri görüntüleyebilir veya ana akış bağlamından görsel olarak ayrılmadan bir yan akış başlatabiliriz!
Tam örnek kod GitHub’da mevcuttur ve görüntülenebilir burada
Umarım makaleyi beğenmişsinizdir, alkışladığınızdan ve takip ettiğinizden emin olun!
Ama sadece hak ettiğimi düşünüyorsan 😉
