Jetpack Compose Serisi — 3. Component Kullanımı
Selamlar, önceki yazıda Jetpack Compose’da responsive screen oluşturma üzerine konuşmuştuk. Bu yazıda ise component kullanımına eğileceğiz.
Bu seride işlenecek konular sırasıyla Theming, Responsive Ekran Oluşturma, Component Kullanımı ve Navigation olacak.
Giriş
Jetpack Compose’da component yazmaya başlamadan önce ilk olarak component mantığını, atomic design’i ve Compose bir uygulama geliştirmedeki faydalarını konuşalım.
Component, bir kullanıcı arabirimi oluşturmak için etkileşimli yapı taşlarıdır. Material’daki componentlere buradan detaylı ulaşabilirsiniz. En çok kullanılanlar, edittext, button, card, appbar olarak söyleyebiliriz. Eğer uygulamada belirli bir tema varsa bunu bir kere component oluşturarak, ekranların her yerinde bu componenti kullanarak, her bir buttonu her sayfada tekrar tekrdan oluşturmak yerine bir kere oluşturup, parametrelerle özelleştirmek geliştirme süresini düşürür ve daha rahat yönetebilir kılar.
Aslında declerative ui yaklaşımıyla beraber gerek Flutter gerek SwiftUI gerek Jetpack Compose olsun geliştirmede tasarım ekranlarına component yaklaşımıyla yaklaşıp her bir tasarım bileşinini küçük parçalara bölüp, gerektiğinde kullanılmasını sağlıyor. Böylece bir ekranın tasarımını yaparken sıfırdan değil eldeki yapboz parçalarını birleştirerek hızlıca yapmamızı sağlıyor.
Atomic Design
Atom tasarım(atomic design) tasarım sistemleri oluşturmak için uygulanan bir metodolojidir. İlhamı doğadan almış olup, maddenin en küçük yapı taşı olan atomlarla başlayıp, atomların bir araya gelmesiyle molekülleri oluşturup, moleküllerin bir araya gelmesiyle canlı bir organizma haline gelir. Organizmaların bir araya gelmesiyle de bir bütun oluşturur.
Atom Tasarımının amacı, atom olarak da bilinen en küçük formdaki bileşenleri oluşturmak ve bunları birleştirerek daha karmaşık bileşenleri oluşturmak ve daha karmaşık işlevleri tamamlamaktır. Atom tasarımı 5 bileşenden oluşmaktadır;
1- Atomlar
2- Molekül
3- Organizma
4- Template
5- Sayfalar
1. Atom
Atomlar, tasarımın en küçük yapı birimidir. Atom tek bir hücredir, temel yapı taşıdır veya Jetpack Compose terimleriyle bir Text, Alging veya basit bir özel component öğesidir. Örnek olarak; textler, butonları söyleyebiliriz.
2. Molekül
Moleküller, birbirine bağlı atom gruplarıdır ve bir bileşiğin en küçük temel birimleridir. Tasarım olarak karşılığını input alanları, dropdown, search area olarak verebiliriz.
3. Organizma
Organizmalar, bir arayüzün nispeten karmaşık, farklı bir bölümünü oluşturmak için bir araya getirilen molekül gruplarıdır. Örnek olarak, cardlar, form fieldler olarak verebiliriz.
4. Template
Template çoğunlukla sayfaları oluşturmak için bir araya getirilmiş organizma gruplarından oluşur.
5. Sayfalar
Sayfalar ise dinamik veriler içerir. Sayfa, bağlam içinde doğru verileri sağlayarak verilen şablonun belirli bir örneğidir. Kullanıcının etkilişime girdiği artık tasarımın son halidir.
Atomic Design Faydaları
Atomik tasarım, tasarım sistemleri oluşturmak için net bir metodoloji sağlar. Componentlerle uyumludur. Yeniden kullanılabilir component yaratmanıza sağlar. Bir kez yazın, her yerde kullanın. Atomic bir tasarım yapılmış ise bunu componentlere ayırmak oldukça kolaydır. Böylece development başında tasarıma göre kendi componentlerinizi yazarak bir bütunluk kurabilirsiniz. Bu componentleri her bir sayfada yeniden kullanacağınız için de daha kısa sürelerde ekranları yapabileceksiniz.
Component Oluşturma
Atomic design üzerine konuştuğumuza göre şimdi component oluşturmaya geçebiliriz. Önceki yazıda Bloom tasarımını iki ekranını geliştirmiştik. Burada ise bu sayfadan devam edip, iki ekrandaki EditText, Text, Button gibi Ui elementlerini component haline getireceğiz.
Text Oluşturmak
Component oluşturken, component isimli bir paket ismi oluşturalım. Componentleri bir paket içerisinden yönetmek oldukça kolay.
Component oluşturmak için öncelikle bir Composable fonksiyon oluşturalım. Fonkisyonda componente özel kullanmamız gereken parametleri yazalım. Sonrasında ise fonksiyon içerisinde Text()’i kullanarak paremetre değerlerine göre Text’i özelleştirerek componenti oluşturmuş oluyoruz.
Aşağıdaki kod parçasını inceleyelim. Öncelikle Composable bir fonksiyon oluşturduk. Sonrasında ise kullanmam gereken Text’e ait parametreleri içeren bir parametre dizisi oluşturdum. Buradaki özellikler, uygulamadaki ihtiyaca göre çoğaltıp, azaltılabilir veya belirli conditionlara göre de işlemler yapılabilir. Tamamen size kalmış!
Text için bazı özellikleri default verebilirsiniz. Bu renk, font, maxlines gibi özellikler olabilir.
Şimdi Text’i oluşturalım.
Text() olarak bir oluşturup, sonrasında parametleri bu şekilde veriyoruz. Text parametresinfde AnnotedString içerisinde vermeyi unutmayın.
Oluşturulan her bir componenti Preview özelliği sayesinde önizlemede nasıl göründüğünü görebilirsiniz.
@Preview
@Composable
private fun BodyPreview() {
BloomText(Modifier, "Bloom Text")
}
Component Kullanımı
WelcomeScreen’deki textleri BloomText componenti kullanarak değiştirelim. Gördüğünüz gibi oldukça kolay şekilde kullandık.
@Composable
fun BloomText(modifier: Modifier) {
BloomText(
modifier = modifier.paddingFromBaseline(top = 32.dp, bottom = 40.dp),
text = "Beautiful home garden solutions",
color = MaterialTheme.colors.onBackground,
style = MaterialTheme.typography.subtitle1
)
}Button Componenti Oluşturma
İlk olarak BloomText adlı Text’i özelleştirdiğimiz bir component oluşturmuştuk. Şimdi de uygulamalarda en çok kullanılan Ui elementlerinden birisi olarak butonu oluşturalım.
Butonu bu şekilde temel düzeyde kullanıp, içerisinde daha önceden yazdığınız özelleştirilmiş text ile birlikte kullanırsanız, her bir buton yapmada tek tek yeniden oluşturma masrafından kurtulmuş olursunuz. Burada mümkün olduğunca default parametre girmekte fayda var çünkü tasarımlarda butonların yüksekliği, rengi pek değişiklik göstermez. Her sayfada butonun yüksekliğini 50 verildiğini düşünelim. Bunu her seferinde 50 height vermek yerine baştan vermek daha doğru olacaktır.
Kullanım örneği;
TextField Componenti Oluşturma
TextField componentini duruma göre bir veya iki farklı component olarak tasarlayabilirsiniz. Compose’da OutlinedTextField ve TextField olarak iki ayrı TextField vardır. OutlineTextField’in farkı ui alanıın border ile çizilmesidir. Eğer tasarımda buna benzer bir text input alanı var ise OutlineTextField’dan türetebilirsiniz.
Kullanım örneği;
Sonuç
Bu yazıda atomic design, component oluşturmanın yararlarını, text, button ve textfield gibi temel inputların nasıl component haline getirileceğini konuştuk. Görüldüğü üzere Jetpack Compose bize kendi componen sınıflarını yaratmamıza olanak sağlıyor. Böylelikle generic hale getirdikten sonra component kullanmak oldukça pratik. Öyle ki bu componentleri bir repoda bir kere yazıp birbirinden farklı projelerde sadece birkaç parametreleri düzelterek kullanabilirisiniz. Bu da size development süresinin azalmasında, ui oluşturmada oldukça kolaylık sağlayacaktır.
Bir sonraki yazıda ise navigation üzerine konuşmuş olacağız. Bu yazının ilgili kodlarına aşağıdaki repodan ulaşabilirsiniz. Keyifli Okumalar!
