Android

Jetpack oluşturmada durum yönetimini kullanarak kullanıcı arabirimini güncelleme | tarafından Saurabh Pant | Mayıs, 2022

Vardiya zamanı!

Kaynak: Hypertec Direct

Bu yazı yazının devamıdır TimerApp — Bölüm 1 Jetpack Compose’da bir zamanlayıcı seçim ekranı oluşturduğumuz. Okumadıysanız ve bir göz atmak istiyorsanız, lütfen okuyun. burada.

Pekala, işte başaracağımız şey:

Bir kullanıcı bir sayı tuşuna her bastığında bir zaman seçeceğiz. Bunu geliştirirken dikkat edilmesi gereken noktalar

  • Her sayı, saniyenin sağ biti olan aşırı sağdan eklenir.
  • Numara eklemek, girilen mevcut sayıları bir basamak sola kaydırır.
  • Saatin sol biti doldurulduğunda/dolduğunda, daha fazla giriş kabul edilmeyecektir.
  • Tek bir sayı girilmesi bile zaman göstergesinin rengini Griden Maviye, tüm sayıların silinmesi onu Maviden Griye değiştirecektir.
  • Çift sıfır tuşu, yalnızca her iki sıfır için de boşluk varsa iki sıfır ekler, aksi takdirde hiçbir şey olmaz.

Not: Tuş takımı tasarımını ve geri aramaları ele almayacağım. Bu ayrıntılar için lütfen bkz. burada.

Buradaki temel UI elemanımızın iki sıfır metni ve zaman birimi metni olacağını gördüğümüz gibi ve bunları üç kez tekrarlamak bize zaman gösterimimizi verecektir. O halde adını verelim TimeDisplayUnit kimin yapıcısı içerir

@Composable
fun TimeDisplayUnit(
time: TimeUnit = TimeUnit(),
unit: String,
textColor: Color = GRAY_TEXT
)

zaman: ZamanBirimi — Bu, sol ve sağ olmak üzere iki rakamımızı içeren bir veri sınıfıdır.

data class TimeUnit(
val leftDigit: Int = 0,
val rightDigit: Int = 0,
)

birim: dize — Görüntülenecek zaman biriminin adı, yani saniyeler için vb.

metinRenk: Renk — Oluşturulabilir zaman görüntüleme birimindeki metin için renk.

Şimdi bir veri sınıfı oluşturacağız TimeData bu, seçilen süre için verilerimizi tutacaktır.

Burada, makalenin ilerleyen bölümlerinde tartışacağımız üç yardımcı işlevimiz var. Yani veri sınıfı kendini açıklayıcıdır. Saat, dakika ve saniye için zaman birimlerini tutar.

var timeState = mutableStateOf(TimeData())

Bir zaman durumu yarattık TimeData. Bu durumu view modelimizde güncelliyoruz ve bu durumu composable’ımızda gözlemliyoruz.

val timeState by remember {
viewModel.timeState
}
....
Box {
TimeDisplay(
time = timeState,
)
} ....

TimeDisplay üç zaman görüntüleme birimi içeren bizim şekillendirilebilirliğimizdir.

Yani artık durumumuz görüntü birimlerimize geçti.

Yeni sayıları doğru bir şekilde yerleştirmek ve bunları sola kaydırmak biraz mantık gerektirir. Burada, her sayıyı bitişik sayıya kaydırıyoruz ve aşağıdaki şemada gösterildiği gibi devam ediyoruz. Buradaki tek yakalama, saat hanesinden kaymaya başlamamız gerektiğidir.

İşte yukarıdaki mantığın kodu

Bu fonksiyon 4. adımda yaptığımızın tersidir. İlk önce ikinci basamağı değiştirmeye başlıyoruz ve saatin sol basamağına bir sıfır ekliyoruz.

İşte yukarıdaki mantığın kodu

Fazla doldurmayı ve boş silmeyi önlememiz gerekiyor. Bunun için şimdi programımızda oluşturduğumuz üç fonksiyona bakın. TimeData sınıf. Silme durumunda, önce verilerin boş olup olmadığını kontrol ederiz, sonra basitçe geri döneriz. Ekleme durumunda verilerin dolu olup olmadığını kontrol ederiz ve ardından geri döneriz.

Şimdi, saat sol hanesi sıfırdan büyük olduğunda verinin dolu ve tüm haneler sıfır olduğunda verinin boş olduğunu düşünüyoruz.

Bu kadar! Şimdi uygulamayı çalıştırırsanız, sayıların doğru bir şekilde sola ve sağa kaydığını ve kısıtlamalarımızı takip ettiğini göreceksiniz. Peki! kolaydı.

Zaman verisi durumumuzu başarıyla yönettik ve kullanıcı arayüzünü buna göre güncelledik.

Zamanlayıcı uygulamasının tam kaynak kodu için aşağıdaki depoya bakın.

Yaklaşımı anlamak için lütfen aşağıdaki bağlantıyı okuyun

Şimdilik bu kadar. Umarım yardımcı olur!

Bir sonrakine kadar..

Şerefe!

İlgili Makaleler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

Başa dön tuşu