#3. Bu gün nə öyrəndim - 2022.11.10

1. Jetpack Compose material dizayn Eyni məqalədən Jetpack Compose öyrənməyə davam edirik. İndi isə Material Dizaynı necə istifadə edəcəyimiz mövzusuna gəldik. Surface-deyib əsas uı-mızı onun içinə atdıqsa iş tamam, artıq Material Dizayndan istifadə etməyə başlaya bilərik. Əvvəl şəkilə modifierlərin içərisində .border deyib, dp-sini, colorunu (MaterialTheme.colors.secondary), CircleShape deyip çevrə formasında olmağını təmin edirik. Sonra Textview üçün textdən sonra vergül qoyub color deyib colorunuda veririk. Beləcə həm banner həm də colordan istifadə etmiş olduq. İndi görək Typography necə dəyuşir? style = MaterialTheme.typography.subtitle2 Bu qədər sadə.

Bu arada Surface bix box kimi düşünün, kənardan bir qutunun, bir elementin içinə salmış oluruq. Misal indi text hissəni bir boxun içinə salıb digər hissədən ayırmaq istiyirik, (CardView kimi düşünün), onun üçün belə ediril: Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp)

Preview daxilində "uiMode = Configuration.UI_MODE_NIGHT_YES" deyərək dark modu da aktivlədirmiş oluruq bu arada. 1. Jetpack Compose material dizayn Eyni məqalədən Jetpack Compose öyrənməyə davam edirik. İndi isə Material Dizaynı necə istifadə edəcəyimiz mövzusuna gəldik. Surface-deyib əsas uı-mızı onun içinə atdıqsa iş tamam, artıq Material Dizayndan istifadə etməyə başlaya bilərik. Əvvəl şəkilə modifierlərin içərisində .border deyib, dp-sini, colorunu (MaterialTheme.colors.secondary), CircleShape deyip çevrə formasında olmağını təmin edirik. Sonra Textview üçün textdən sonra vergül qoyub color deyib colorunuda veririk. Beləcə həm banner həm də colordan istifadə etmiş olduq. İndi görək Typography necə dəyuşir? style = MaterialTheme.typography.subtitle2 Bu qədər sadə.

Bu arada Surface bix box kimi düşünün, kənardan bir qutunun, bir elementin içinə salmış oluruq. Misal indi text hissəni bir boxun içinə salıb digər hissədən ayırmaq istiyirik, (CardView kimi düşünün), onun üçün belə ediril: Surface(shape = MaterialTheme.shapes.medium, elevation = 1.dp)

Preview daxilində "uiMode = Configuration.UI_MODE_NIGHT_YES" deyərək dark modu da aktivlədirmiş oluruq bu arada.

Indi bura qədər olan hissənin hazır kodunu paylaşmaq vaxtıdır. Buradan baxa bilərsiniz.

2. Jetpack Compose list göstərmək Tək tək elementlər üzərində işlədik indi bunları list kimi düşünək və ekranda list göstərək görək necə olur.

Burada Colum və Row əvəzinə LazyColum və LazyRow istifadə olunacaq. Demək yeni bir convertasiya funksiyası yaradırıq, list alacaq, listi map edim hər bir itemi tək tək bizim o mesaj UI-na göndərəcək.

3. Jetpack Compose ilə sadə animasiya İlk öncə unutmayaq ki remember mutableStateOf deyib saxladığımız valular dəyişəndə bunu izləyə bilirik və yığdığımız composable UI-ları buna uyğulayaraq dəyişiklik olanda UI-ın yenidən recomposition təmin olunur (yenidən yaradılnası kimi düşünək ama daha yüngül). Burada biz is isExpendend dəyişəni yaratmış olduq. Sonra Colum üçün modificationda clicable deyib bu dəyişəni tərsinə (!) dəyişirik. Textdə isə maxLine true olanda maximum int, false olanda 1 veririk. Nəticədə kliklədikdə böyüyür, təkrar kiliklədikdə kiçilir və beləcə mesaj hissəmiz kilib böyüyən olur. Gəldi sıra bu vaxtı arxa fon rəngini dəyişməyə. Tutoriala özünüz baxanda biləcəksiniz, buranı dərsliyə döndərdik, sadəcə qısa key sözlərin izahın verib keçək, sonradan remider - xatırladıcı rol oynasın deyə. animateColorAsState deyib clickdə olduğu kimi dəyişən yaradırsan onu da textin qutusunu (Surface) coloruna set edirsən. animateContentSize-ı modifierə əlavə etməyi unutmayaq.

Belə. Koda burdan göz gəzdirə bilərsiniz.

Bu gün Jetpack Compose günü oldu, sabah da yavaş yavaş davam edər, kənar maraqlı yeniliklər də öyrənərik. Uğurlar olsun hamımıza.