Android'de ilk uygulamanı yaz: Kotlin + Jetpack Compose ile sayaç uygulaması (satır satır açıklamalı)

Telefon · Mobil
, , ,
1

Bu derste ekrana basıldıkça artan bir sayaç uygulaması yapıyoruz. Küçük görünüyor ama bir Android uygulamasının en temel üç parçasını öğretiyor: ekran çizmek, kullanıcı dokunuşunu yakalamak ve durumu (state) güncellemek.

Hazırlık

  1. Android Studio’yu resmi siteden (developer.android.com) indir ve kur.
  2. New Project → Empty Activity şablonunu seç. Dil olarak Kotlin seçili olsun.
  3. Telefonunu USB ile bağla ve telefonda Geliştirici seçenekleri → USB hata ayıklama’yı aç. Ya da Android Studio’daki sanal telefonu (emülatör) kullan.

Kod: MainActivity.kt

Şablonun oluşturduğu dosyanın içeriğini şununla değiştir:

package com.ornek.sayac                      // 1

import android.os.Bundle                     // 2
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp

class MainActivity : ComponentActivity() {               // 3
    override fun onCreate(savedInstanceState: Bundle?) { // 4
        super.onCreate(savedInstanceState)
        setContent {                                     // 5
            MaterialTheme {                              // 6
                SayacEkrani()
            }
        }
    }
}

@Composable                                              // 7
fun SayacEkrani() {
    var sayi by remember { mutableIntStateOf(0) }        // 8

    Column(                                              // 9
        modifier = Modifier.fillMaxSize().padding(24.dp),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "$sayi", fontSize = 64.sp)           // 10
        Spacer(Modifier.height(24.dp))
        Row {
            Button(onClick = { sayi++ }) {               // 11
                Text("Artır")
            }
            Spacer(Modifier.width(12.dp))
            OutlinedButton(onClick = { sayi = 0 }) {     // 12
                Text("Sıfırla")
            }
        }
    }
}

Bu kod ne yapıyor? Satır satır

  1. package: Uygulamanın kimliği gibi düşün. Mağazada da bu adla tanınır, herkesinki farklı olmalı.
  2. import satırları: Kullanacağımız hazır parçaları (buton, yazı, düzen) projeye çağırır.
  3. MainActivity: Uygulama açıldığında ilk çalışan ekran. Android’de her ekran bir "Activity"dir.
  4. onCreate: Ekran oluşturulduğunda Android’in otomatik çağırdığı fonksiyon. Başlangıç işleri buraya yazılır.
  5. setContent: “Bu ekranın içeriği şudur” der. İçine yazdığımız şey ekrana çizilir.
  6. MaterialTheme: Google’ın hazır tasarım dili. Renkler ve yazı tipleri otomatik düzgün gelir.
  7. @Composable: Bu fonksiyonun bir arayüz parçası çizdiğini belirtir. Compose’da ekranlar bu tür fonksiyonlardan oluşur.
  8. var sayi by remember { mutableIntStateOf(0) }: Uygulamanın en önemli satırı. sayi adında, 0’dan başlayan bir değişken açar. remember ekran yeniden çizilse bile değeri unutmamasını sağlar. mutableIntStateOf ise değer değişince ekranın otomatik yenilenmesini sağlar.
  9. Column: İçindekileri alt alta dizer. fillMaxSize tüm ekranı kaplar, padding kenarlardan boşluk bırakır, Center her şeyi ortalar.
  10. Text: Sayıyı büyük puntoyla gösterir. "$sayi" değişkenin değerini yazıya çevirir.
  11. Button / onClick: Butona dokunulunca süslü parantezin içi çalışır. sayi++ sayıyı 1 artırır, ekran kendiliğinden güncellenir.
  12. OutlinedButton: Çerçeveli ikinci buton. Sayıyı 0’a döndürür.

Çalıştır

Android Studio’da yeşil :play_button: (Run) butonuna bas. Birkaç saniye sonra uygulama telefonunda ya da emülatörde açılır.

Kendini dene (ödev)

  • “Azalt” butonu ekle, ama sayı 0’ın altına düşmesin. İpucu: if (sayi > 0) sayi--
  • Sayı 10’a ulaşınca yazının rengi değişsin. İpucu: Text(..., color = if (sayi >= 10) Color.Red else Color.Unspecified) (bunun için androidx.compose.ui.graphics.Color import etmen gerekir)

Takıldığın yerin ekran görüntüsünü bu konuya at, birlikte çözelim.