Jetpack Compose Tutorial Bölüm 1
Giriş
Merhaba bu eğitim serisi en temel Jetpack Compose özelliklerini temel seviyede anlatmayı hedeflemektedir. Jetpack Compose Android’in native UI geliştirmek için kullanılan modern toolkitidir. Android’de UI geliştirmeyi basitleştirir ve hızlandırır. Bu eğitim serisinin ilk kısmı Jetpack Compose ile ilk uygulama, Rowlar Columnlar ve temel boyutlandırma, Compose modifier’lar ve text field stili oluşturmayı içermektedir. Hadi başlayalım! 🥳
Tutorial
Jetpack Compose ile İlk Uygulama
Android Studio’da bir proje açın.
Empty Compose Activity’i seçin.
Kayıt konumunu seçin kotlin dilini ve minimum api level kısmından uygun 21 ve üzeri bir API degerini seçin.
Gördüğünüz gibi resource altında artık layout diye bir directory bulunmuyor.
Yani bu boş bir Jetpack Compose projesi için default bir aktivite.
Jetpack compose ile kullanıcı arayüzümüzü tekrar kullanılabilir hale getirmek için tek bileşenlere ayırmaya çalışıyoruz. Composable fonksiyonlarını onCreate metodunun altında görebilirsiniz. Greeting metnimizi ekranda görüntülemek için kullanılacaktır ve DefaultPreview aynı zamanda her seferinde projeyi oluşturmadan uygulamamızın kullanıcı arayüzünü görmemize yardımcı olan şekillendirilebilir bir fonksiyondur.
Jetpack Compose ile sizin de görebileceğiniz gibi önizlemede canlı güncellemeleri görebildik😊 Güncellemeleri canlı görmek için sağ üst köşeden bölmeyi veya tasarımı seçmeniz yeterli. Şimdi ilk uygulamamız olarak istediğimiz metni ekranda görelim. ComposeAppTheme’i MainActivity’den kaldırın ve setContent içindeki Greeting fonksiyonunu istediğiniz adla çağırın.
Yani aktiviteniz bu şekilde görünecek ve projeyi çalıştırdıktan sonra aşağıdaki sonucu göreceksiniz. Bu bizim ilk uygulamamızdı! 🥳
Rowlar, Columnlar and Temel Boyutlandırma
Aktivitemizi aşağıdaki işlevleri kaldırarak güncelleyelim; şöyle görünmelidir:
“Jetpack Compose”u tekrar ancak farklı metinler kullanarak yazdırmak istiyorsanız, aşağıdaki gibi 2 farklı metin kullanıyorsanız; metinler birbirinin üstünde olacaktır. Yani aşağıdaki kod bizim için çözüm değil.
Bu durumda bize Row ya da Column lazım.
@Composable çağrılarının yalnızca @Composable işlevlerinin bağlamından yapılabileceğini unutmayın; dolayısıyla bu işlevleri doğrudan etkinliğinizin onCreate yönteminin içinden çağıramazsınız.
Gördüğünüz gibi satır ve sütunlara değiştirici, yatay ve dikey hizalama, yatay ve dikey düzenleme gibi parametreler de ekleyebiliyoruz. Columnlar için horizontalAllignment ve verticalAllignment seçeneği bulunur ve Rowlar için horizontalArrangement ve verticalAllignment seçeneği bulunur ve modifier’larla Sütunların ve Satırlar’ın boyutunu veya renklerini ve daha fazlasını değiştirebilirsiniz.
Temel boyutlandırma için görünümü doldurabilir veya görünümün bir yüzdesini doldurabilir ve ayrıca görünümün özel bir dp boyutunu ayarlayabilirsiniz. İşte Column kısmının çıktısı:
Column kısmını kaldırırsak Row kısmının çıktısı şu olur:
Compose Modifierlar
Modifierlar composableları tasarlamanızı ve geliştirmenizi sağlar. Size yardımcı olduğu konular:
- Composable’ın boyutu, layoutu, davranışları ve görünüşü
- Bilgi ekleme ve erişilebilirlik labelları
- Kullanıcı girdi bilgisi işleme
- Yüksek düzeyde etkileşimler, mesela bir element’in tıklanılabilir, kaydırılabilir, zoomlanabilir, sürüklenebilir olması
Bu örnekte arka plan rengini macenda olarak ayarladık, yükseklik ve ağırlık dolgusunu yüzde ile ayarladık, dolguyu ayarladık ve Spacer ile metinlerin arasına boşluk ekledik. Bu kodun çıktısı aşağıdadır:
Modifier fonksiyonların sırası önemlidir. Her işlev, önceki işlevin döndürdüğü modifierda değişiklik yaptığından, sıra nihai sonucu etkiler. Bunun bir örneğini görelim:
Yukarıdaki koddan da görebileceğiniz gibi kenarlıklar ve dolgular eklendikten sonra sırasıyla uygulanır. Yani aşağıda iç içe kenarlıkların olduğu bir sonuç var.
Son olarak metinlerimize tıklanabilir modifierlar ekleyelim ve onları etkileşimli hale getirelim. Bir tıklama efektiyle birlikte gelir ve onClick dinleyicisinin içine ne gerekiyorsa ekleyebiliriz. Bu durumda bazı toast mesajları eklenmiştir.
İşte sonuç:
Text Field Stillendirme
Bölüm 1'in son bölümünde sadece stil içeren bir metin alanı oluşturacağız. İşte örnek kod:
FontFamily SansSerif olarak eklenmiştir, yazı tipi boyutu 30sp, yazı tipi stili italik ve kalındır ve buraya herhangi bir dekorasyon eklenmemiştir, satır arası veya altı çizili olarak eklenebilir.
Aşağıdan sonucu görebilirsiniz:
Sonuç
Bu makalede Jetpack Compose’un temelleri, Jetpack Compose ile ilk entegrasyon ve ilk uygulama, composable’lar, row ve columnların temel boyutlandırması, Compose modifier’lar ve text field şekillendirilmesi hakkında bilgiler verildi. Bu makale yeni başlayanlar için bir rehberdir ve adım adım yol gösterecek diğer eğitim bölümleri de olacaktır.
Umarım bu makaleyi faydalı bulmuşsunuzdur ve herhangi bir yorumunuz veya sorunuz varsa lütfen aşağıdaki yorumlarda bana bildirin.
