Jetpack Compose Nedir?

Selamlar,

Google tarafından geliştirilmiş olan Native geliştiriciler için az kod, performans ve hız açısından yeni trend olan Compose’dan bahsedeceğim.

• Compose için Android Studio güncel halini indirmemiz gerekiyor.

• Gelelim Compose’u nasıl kullanacağımıza;

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

@Composable annotation ile composable olmasını sağlıyoruz. Xml’den farklı olarak projemizde layout.xml artık yok bir diğer farklılık classlar’da kullanabileceğimiz Theme(Tema), Shape(Şekil), Color(renk) ve Type(Tip) karşımıza çıkıyor.

• Activity içerisinde Compose

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

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

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        Greeting("Android")
    }
}

ComponentActivity: Activity olduğunu belirtmek için kullanıyoruz.
setContent: Composable’larımızı eklemek için kullanıyoruz.
Preview(Ön izleme): @Preview annotation’ı ekleyerek oluşturduğumuz composable’ları design kısmında görebiliyoruz.

• Compose’da kullanılan Row — Column — Box yapılarını öğrenelim.

Row: Öğeleri ekranda yatay olarak yerleştirmek için kullanırız.

Column: Öğeleri ekrana dikey olarak yerleştirmek için kullanılır.

Box: Öğeleri üst üste koymak için kullanılır.

• Modifier, ilgili item için özellikler eklememizi sağlar(width, height, padding, color vs.)

Modifier sunduğu özelliklerden bazıları

@Composable
fun ModifierExample() {
    Text(
        text = "Modifier Example",
        color = Color.White,
        fontSize = 14.sp,
        textAlign = TextAlign.Center,
        fontStyle = FontStyle.Normal,
        modifier = Modifier.padding(start = 10.dp)
    )
}

• Compose’da Navigation kullanımı ;

implementation "androidx.navigation:navigation-compose:latest_version"

build.gradle kütüphaneyi ekliyoruz. MainActivity içerisine tanımlıyoruz.

val navController = rememberNavController()

NavHost(navController = navController, startDestination = "main_screen"){
    composable("main_screen"){
        MainScreen()
    }
}

NavHost composable içerisinde başlatmayı istediğimiz ekranı startDestination içinde tanımlıyoruz.

Not: https://developer.android.com/jetpack/compose/tutorial

Umarım faydalı olur. İyi çalışmalar..