Jetpack Compose Giriş - 2
Bu yazımızda Jetpack Compose dünyasına yeni bir proje oluşturarak baştan bir giriş yapacağız ve temel çoğu kavramı öğrenmeye çalışacağız.
Bu yazı, serimizin ikinci yazısı olacak ve ilk yazıyı okumak bu yazıyı daha iyi kavrama konusunda çok yardımcı olacaktır. Serinin ilk yazısında bir yandan jetpack compose toolkitini tanıyarak; geliştirme süreçlerini, nelere çözümler sunduğunu öğrendik bir yandan da mantığını ve işleyişini öğrenerek geliştirme öncesi iyi bir şekilde kavradık. Başlamadan önce Jetpack Compose Giriş yazısını şiddetle okumanızı tavsiye ederim.
İmplementasyon
Öncelikle Jetpack Compose’u kullanabilmemiz için projemize nasıl implemente edeceğimizi öğrenelim.
İmplemente etmeden önce aşağıdaki hususları da göz önünde bulundurmak gerekir.
Jetpack Compose’u projenizde kullanabilmeniz için projenizin api seviyesi 21 veya üstü olması gerekir.
Jetpack Compose ile gelişen en iyi deneyim için Android Studio Arctic Fox’u kullanmalısınız. Bunun nedeni, uygulamanızı Jetpack Compose ile geliştirmek için Android Studio’yu kullandığınızda, yeni proje şablonları ve Compose UI’nızı hemen önizleme yeteneği gibi akıllı düzenleyici özelliklerinden yararlanabilmenizdir.
Yeni bir proje başlatırken Empty Compose Activity seçerek başlatırsanız, gerekli tüm bağımlılıklar ve ayarlamalar otamatik şekilde kurulu gelmiş olacaktır. Daha sonrasında zaman kaybetmeden Jetpack Compose’u içeren projenizi kodlamaya başlayabilirsiniz. Eğerki var olan projenizi Jetpack Compose’a geçirmek isterseniz, aşağıdaki gistlerdeki adımları takip ederek implementasyonu gerçekleştirebilirsiniz.
✨Not: Aşağıdaki bazı bağımlılıklar yeni proje oluşturduğunuzda implemente edilmiş olarak gelmeyecektir. İhtiyaç halinde bu bağımlılıkları da projenize ekleyebilirsiniz.
Yeni projenizi Empty Compose Activity şeklinde oluşturduğumuzda eskisine göre farklı bazı şeyler karşılayacak bizleri. Bu durumu göze alarak hem yeni kavramları tanıyalım hem de Jetpack Compose geliştirmeyi derinlemesine öğrenmeye başlayalım.
ComponentActivity
İlk olarak MainActivity.kt dosyamız bizi bu şekilde karşılayacak. Burada farklı olarak göze çarpan ilk durum, MainActivity sınıfımızın ComponentActivity sınıfından kalıtılma durumu.
Bu durumu açıklamak gerekirse; diyelim ki MainActivity sınıfını AppCompatActivity sınıfından kalıtsaydık herhangi bir durum değişmeyecekti. Çünkü AppCompatActivity sınıfı FragmentActivity sınıfından, FragmentActivity sınıfı da ComponentActivity sınıfından kalıtılmıştır. Bu soyutlama durumu da herhangi bir problem çıkarmazdı. Öyleyse burada ComponentActivity’den kalıtma ile AppCompatActivity sınıfından kalıtma durumunu ne zaman kullanacağımıza bakalım. ComponentActivity sınıfı, projeniz sadece Jetpack Compose’u kullanacaksa bütün ihtiyaçlarınızı karşılayacaktır. Diyelim ki projeniz AppCompat apilerine ihitiyaç duyarsa AppCompatActivity’den kalıtmanız gerekecektir. Bu apileri kullanıcağınız duruma; compose projeniz içerisinden viewbased ui çağıracağınız zaman AndroidView kullandığımız durum örnek verilebilir.
🔶 Dipnot: Jetpack Compose kodu içerisinden view based ui kodu yazabiliyoruz. Aynı şekilde view based ui içerisinde de compose kodu yazarak ui oluşturabiliyoruz. AndroidView’ı ise compose projeye viewbased ui eklerken kullanırız. MapView’ın veya BannerView’ın Compose projenize ekleyeceğiniz bir seneryoda, bu viewların henüz compose için entegreleri olmadığı için(viewbased design ile kodlandıkları için) bu şekilde kullanmak zorundayız.
👁🗨 Ayrıca bu linki inceleyerek de compose ile view based ui arasındaki birlikte çalışabilirlik olaylarını derinlemesine inceleyebilirsiniz.
SetContent Methodu
İkinci bir durumsa setContent methodu. ComponentActivty’nin bir extension fonksiyonu olarak yazılmış ve son parametre olarak bir composable fonksiyon bekliyor. Buradaki composable fonksiyon @Composable anotasyonu ile işaretlenmiş fonksiyonları belirtmekte(Detayına aşağıda gireceğiz). Geleneksel view based design sisteminde inflate işlemi yaparak layoutları ekranda görünür hale getiriyorduk. Aynı mantıkla setContent methodunda da ekranda gözükecek layoutları kodlayabilirsiniz. Yani setContent methodu içerisinde, ekranda gösterilecek ui öğelerinin kodunu yazıyoruz diyebiliriz.
Composable Function
Bir farklı durum da @Composable ile işaretlenmiş fonksiyonlar görmemiz. Jetpack Compose’da ekrana bir şey çizdirmek için composable fonksiyonları kullanıyoruz. Yani ekranda herhangi bir text, resim, button ..vb gibi bir ui çizdireceksek bunların hepsi bir composable fonksiyon olmalı. Aynı şekilde bu componentleri içeren bir layoutu da düşünebilirsiniz.
Compsable fonksiyonlar hakkında bilmemiz gerekenler ;
🔶 Her composable fonskiyon @Composable anotasyonu ile işaretlenmeli. Bunun sebebi kotlin derleyicisine bunun bir ui çizdireceğini belirtmemiz gerekiyor.
🔶 Composable fonksiyonlar normal fonksiyonlar gibi parametre alabilir. Böylece uygulama lojiğinin ui içerisinde tanımlanmasına olanak sağlar. Yukarıdaki ekte de Greeting fonksiyonunun name parametresini aldığını görüyoruz. Burada parametrelerden gelen değerleri declarative şekilde kullanarak ui lojiğinizi kolaylıkla uygulayabilirsiniz. Örnek olarak alttaki gistte de görüldüğü üzere, bir boolean increase parametresine göre yazı rengini ayarlayabiliriz.
🔶 Geriye değer döndürmezler. Ui oluşturma işini üstlendiklerinden fonksiyonların bir değer döndürmesine gerek yoktur.
🔶 Composable fonksiyonları yine composable fonksiyonlar içerisinden çağırmanız gerek. Bu durum, coroutinelerdeki suspend fonksiyonların çağırımı mantığına benzer. Yine yukarıdaki ekte ki Greeting fonksiyonunu ele alırsak, Text fonksiyonu; eklediğmiz bir kütüphaneden gelen ekranda text göstermemize yarayan bir composable fonksiyon(Textview gibi). Bu fonksiyonu da diğer bir composable fonksiyon olan Greeting fonksiyonundan çağırıyoruz. Eğer ki normal bir fonksiyon içerisinden çağırısanız aşağıdaki hataları alacaksınızdır.
🔶 İsimlendirme kuralı olarak PascalCase kullanmak öneriliyor. Normal şartlarda fonksiyonlar isimlendirilirken camelCase stiliyle yazmak doğru olan. Fakat Composable fonksiyonlar ui belirttiği için PascalCase stili kullanmak daha doğru olacaktır. Greeting fonksiyonu da aynı şekilde PascalCase stili ile kodlanmış olduğunu görüyoruz.
@Preview Anotasyonu
Gelelim bir diğer farklı durum olan @Preview anotasyonu ile işaretlenen DefaultPreview fonksiyonuna. Farkederseniz setContent içerisinde ekranda göstereceğimiz compose kodlarını orada da aynı şekilde yazmışız. Burada bunu yapmamızın sebebi nasıl xml layoutu tasarlarken yanda yazdığımız kodun çıkıtısını görsel olarak görüyorsak, @Preview anotasyonu ile oluşturduğumuz composable fonksiyonlar da görsel şekilde gözlemlenebilir oluyor. Bunları birden fazla oluşturabilirsiniz. Farklı şekilde görünümleri aynı anda görmek de bizim için zaman kazandrıcı ve faydalı olacaktır. Örnek olarak, farklı cihazlara göre previewlar oluşturmak veya karanlık mod ile aydınlık mod görünümü aynı anda görerek kodlama yaptığmız senaryolar düşünülebilir.
Oluşturduğunuz @Preview anotasyonlu fonksiyonlar bazı parametreler alarak görünümü daha da özelleştirebilirsiniz. Yukarıdaki ekte de gördüğünüz belli parametrelere açıklamak gerekir ise;
🔶 group parametresi ile aynı grup ismi verdiğiniz previewları filtreleyerek görebilirsiniz.
🔶 widthDp ve heightDp parametrelerini kullanarak genişlik ve yüksekliğini ayarlayabilirsiniz.
🔶 showBackground parametresi ile arka planın gözük görünmeyeceğini, backgdroundColor parametresi ile de arka planın rengini ayarlayabilirsiniz.
🔶 uiMode parametresi ile çeşitli modlara göre görünümüzü ayarlayabilirsiniz.(Karanlık ve Aydınlık Mod gibi)
🔶 showSystemUi paramtresiyle de previewın bir cihaz içerisinde görünüp görünememe durumu ayarlanabilir. Ayrıca device parametresiyle de bu cihazı da belirtebilirsiniz.(Örnek Pixe3,PixelC .. vb gibi)
👁🗨 Preview ile daha detaylı bilgiye bu linkten ulaşabilrisiniz. Bu yazıda bahsetmediğim farklı preview özelliklerini ve derinlemesine inmediğimiz tooling konularını da linkten inceleyebilirsiniz.
Theme
Son olarak burada göze çarpan durum ise setContent methodu içerisinde yazılan ui kodlarının NewComposeProjectTheme composable fonksiyonu içerisinde yazılmış olması. NewComposeProjectTheme isimlendirmesi, yeni bir proje oluşturduğunuzda proje isminize göre otamatik oluşuyor. Oluşturduğum projenin ismini NewComposeProject olarak açtığım için bu isimlendirme karşımıza çıktı.(Proje ismi + Theme)
NewComposeProjectTheme ile tema ayarlarını yaparak composable fonksiyonlarımıza stil verebiliyoruz.
Jetpack Compose, dijital arayüzler oluşturmak için kapsamlı bir tasarım sistemi olan Material Design uygulamasını sunar. Materyal Design componentleri(buttons, cards, switches vb.), Materyal Tasarımını ürününüzün markasını daha iyi yansıtacak şekilde özelleştirmenin sistematik bir yolu olan Material Theming’in üzerine inşa edilmiştir. Material Theme; color, typography and shape attributelarını içerir. Bu attributeları özelleştirdiğinizde, değişiklikleriniz uygulamanızı oluşturmak için kullandığınız componentlere otomatik olarak yansıtılır.
Theming ile ilgili şimdilik bu kadar bilgi bilmemiz yeterli. Bundan sonraki yazımız olacak serimizin üçüncü yazısında derinlemesine bu konuya odaklanıp, en detayına kadar öğrenmiş olacağız.
Sonuç
Bu yazımızla beraber yeni bir compose projesi oluşturarak, Jetpack Compose ile gelen ve eskisine göre değişen kavramlara göz attık. Bu kavramlar üzerinden de Jetpack Compose’un temel ve önemli kavramlarını detaylı bir şekilde öğrenmiş olduk. Yazı içerisinde belirttiğim linkleri mutlaka incelemenizi tavsiye ederim. Linklerin içeriğinde bu yazıda bahsetmediğimiz ve detayına girmeyeceğimiz farklı konular da mecvut. Serinin bir sonraki yazısında görüşmek üzere. 👋👋
