Jetpack Compose ile daha iyi uygulamaları daha hızlı oluşturun.

Bu yazıda, jetpack compose’u ve jetpack compose için ortamın nasıl kurulacağını ve proje oluşturulacağını inceleyeceğiz

Genel Bakış 

Jetpack Compose, Android’in yerel kullanıcı arayüzü oluşturmak için modern araç takımıdır. Android’de kullanıcı arayüzü geliştirmeyi basitleştirir ve hızlandırır. Daha az kod, güçlü araçlar ve sezgisel Kotlin API’leriyle uygulamanızı hızla hayata geçirebilirsiniz.  

Android desteklenen tek platform değildir. Başlangıç için, Web ve Masaüstünde kullanabilirsiniz — Çok platformlu uygulamalar. 

Jetpack Compose’un Avantajları  

• Daha az kod yazılabildiğinden geliştirmenin tüm aşamalarını etkiler. 
• Compose, bildirimsel bir API kullanır, böylece yapmanız gereken tek şey kullanıcı arayüzünüzü tanımlamak olur. 
• Compose, mevcut tüm kodunuzla uyumludur. 
• Güncellemesi ve test edilmesi kolaydır. 
• Android’de bulunan mevcut görünümlerle kolayca uyumludur. 
• Geliştirme hızını artırır. 
• findViewById veya ViewBinding referanslarının kalıplarını ortadan kaldırır. 

Jetpack Compose’un Dezavantajları 

• Kod her değiştiğinde ön izlemenin yeniden işlenmesi ve yapılar o kadar hızlı olmaz. 
• Bir değişikliği işlemek için xml’den biraz daha yavaştır. (Hata ayıklama günlüklerini kapatarak sürüm yapısını oluşturmayı deneyin ve iyi çalışmalıdır 😊 ) 
• Bazı bileşenler desteklenmeyebilir ve bazı özellikler gelmeyebilir. Yol haritasına bakabilirsiniz. 

Kurulum Talimatları 

• Android Studio’nun son sürümünü buradan yükleyin. 
• Empty Compose Activity şablonunu kullanarak bir uygulama oluşturun. Varsayılan şablon zaten bazı Compose öğelerini içerir 

• Root compose_version build.gradle dosyasında compose sürümünü “1.0.5”e güncelleyin. 

• Ayrıca derleme hatası almamak için kotlin versionu “1.5.31”e güncelleyin. 

• Artık hazırsınız. 

Compose’daki Tema 

Jetpack Compose, dijital arayüzler oluşturmak için kapsamlı bir tasarım sistemi olan Material Design‘ın bir uygulamasını sunar. Bir Material Teması, renk, tipografi ve şekil niteliklerini içerir. Bu nitelikleri özelleştirdiğinizde, değişiklikleriniz uygulamanızı oluşturmak için kullandığınız bileşenlere otomatik olarak yansıtılır. 

@Composable
fun JetComposeDemoTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    val colors = if (darkTheme) {
        DarkColorPalette
    } else {
        LightColorPalette
    }

    MaterialTheme(
        colors = colors,
        typography = Typography,
        shapes = Shapes,
        content = content
    )
}

Renk: Renkler, Compose’da basit bir veri tutma sınıfı olan Color sınıfıyla modellenir. Sarılmış temadaki renklerle stil oluşturmak kolaydır ve bir renge ihtiyaç duyulan her yerde temadaki değerleri kullanabilirsiniz. 

package com.developersancho.jetcomposedemo.ui.theme

import androidx.compose.ui.graphics.Color

val Purple200 = Color(0xFFBB86FC)
val Purple500 = Color(0xFF6200EE)
val Purple700 = Color(0xFF3700B3)
val Teal200 = Color(0xFF03DAC5)

private val DarkColorPalette = darkColors(
    primary = Purple200,
    primaryVariant = Purple700,
    secondary = Teal200
)

private val LightColorPalette = lightColors(
    primary = Purple500,
    primaryVariant = Purple700,
    secondary = Teal200

Tipografi: Material bir tip sistemi tanımlar ve sizi az sayıda semantik adlandırılmış stil kullanmaya teşvik eder. 

package com.developersancho.jetcomposedemo.ui.theme

import androidx.compose.material.Typography
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.sp

// Set of Material typography styles to start with
val Typography = Typography(
    body1 = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    )
    /* Other default text styles to override
    button = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.W500,
        fontSize = 14.sp
    ),
    caption = TextStyle(
        fontFamily = FontFamily.Default,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp
    )
    */
)

Şekil: Malzeme, büyük, orta ve küçük bileşenler için şekiller tanımlamanıza olanak tanıyan bir şekil sistemi tanımlar. 

package com.developersancho.jetcomposedemo.ui.theme

import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Shapes
import androidx.compose.ui.unit.dp

val Shapes = Shapes(
    small = RoundedCornerShape(4.dp),
    medium = RoundedCornerShape(4.dp),
    large = RoundedCornerShape(0.dp)
)

Compose’da MainActivity 

Jetpack compose ile geliştirmeye başlamak için, Activity veya Fragment sınıflarından  alınan bir Class’a ihtiyacımız var. 

setContent{}: Bu blok, composable işlevleri çağırdığımız activity’nin düzenini tanımlar. (xml’de “setContentView(R.layout.activity_main)’’’ gibi) 

Surface(): Malzeme yüzeyi, malzeme tasarımındaki merkezi metafordur. Her yüzey, belirli bir yükseklikte bulunur ve yüzey parçasının diğer yüzeylerle görsel olarak nasıl ilişkili olduğunu ve yüzeyin gölgeleri nasıl oluşturduğunu etkiler. 

Değiştiriciler: Geleneksel olarak kullanıcı arayüzünüzü biçimlendirmek için kullandığınız xml öznitelikleriyle karşılaştırılabilir. Uygulanan konular ve çeşitli sıralarda dolgu ve renklendirmeyi kullanarak birçok farklı kullanıcı arayüzü kombinasyonu elde edebiliriz. 

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            JetComposeDemoTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Innovance")
                }
            }
        }
    }
}

Text(): Ekrana bir metin görünümü koyar. Ayrıca Compose UI kütüphanesi tarafından tanımlanan fonksiyon ekranda bir metin etiketi görüntüler (örneğin “TextView” şeklinde) 

@Composable: Bu açıklama, aşağıdaki yöntemin görünümler oluşturmak için Jetpack compose kullandığını belirtir. 

• Composable fonksiyonları yalnızca diğer composable fonksiyonlarından çağrılabilir. Jetpack Compose, bu composable fonksiyonları uygulamanın UI öğelerine dönüştürmek için bir Kotlin derleyici eklentisi kullanır. 

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name :)")
}

 @Preview: Bu açıklama stüdyonun tasarım bölümünde gösterilecek. Preview sadece geliştirme içindir, gerçek cihazda çalıştırdığımızda faydalı olmayacaktır. 

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetComposeDemoTheme {
        Greeting("Innovance")
    }
}

Son olarak 

• Jetpack Compose, Kotlin etrafında oluşturulmuştur. Bazı durumlarda, Kotlin iyi Compose kodu yazmayı kolaylaştıran özel deyimler sağlar. 
• Jetpack Compose, Flutter’a benzer şekilde widget’lara ve xml’in View’lara vb. sahiptir. 
• Compose yöntemleri büyük harflerle başlamalıdır. 
• Aralığı dolgu kullanarak tanımlarız, composable’lar için kenar boşluğu kavramı yoktur. 

Referanslar

• https://developer.android.com/jetpack/compose
• https://material.io/design

Keyifli kodlamalar! 

Yazar: Mesut Genç