Kotlin koşulları: 2. Bölüm

Bu codelab'de, mevcut Dice Roller Android uygulamanıza zar görüntüleri ekleyeceksiniz. Öncelikle Dice Roller uygulamasının temelini oluşturmak için önceki codelab'i uygulamayı unutmayın.

Uygulamanız, TextView içinde zar atılan değerin değerini göstermek yerine, yuvarlanan kenar sayısı için uygun zar resmini gösterir. Bu, uygulamanız için çok daha görsel ve gelişmiş bir kullanıcı deneyimi olacaktır.

Zar görüntüleri indirmeniz için bir bağlantı verilir ve bunları uygulamanıza kaynak olarak eklersiniz. Hangi zar resminin kullanılacağına dair kod yazmak için Kotlin'de when ifadesi kullanırsınız.

Ön koşullar

• Düğmeli Zar Toplayıcı Android uygulaması oluşturma codelab'ini tamamladınız.
• Kontrol akışı ifadeleri (if / else, when ifadeleri) yazabiliyor.
• Kullanıcı girişine göre uygulamanın kullanıcı arayüzünü güncelleyebilme (MainActivity.kt dosyasını değiştirme).
• Button. reklam grubuna tıklama dinleyici ekleyebiliyor
• Bir Android uygulamasına resim kaynakları ekleyebilme.

Neler öğreneceksiniz?

• Uygulama çalışırken bir ImageView nasıl güncellenir?
• Uygulamanızın davranışını farklı koşullara göre özelleştirme (when ifadesi kullanarak).

Derlemeniz istenen nedir?

• Zar atmak ve ekrandaki resmi güncellemek için Button kullanan Zar Oyunları Android uygulaması.

İhtiyacınız olanlar

• Android Studio'nun yüklü olduğu bir bilgisayar.
• Zar görüntüleri indirmek için internet bağlantısı.

Bu görevde düzeninizdeki TextView öğesini, zar atmayı gösteren sonucun resmini gösteren ImageView ile değiştirirsiniz.

Zar Toplayıcı uygulamasını aç

1. Android Studio'da Düğmeli Dice Roller Android uygulaması oluşturma bölümünden Dice Roller uygulamasını açıp çalıştırın.
   Uygulama bu şekilde görünmelidir.

2. activity_main.xml uygulamasını (uygulama > res > scheme > activity_main.xml) açın.
   Bu, Düzen Düzenleyici'yi açar.

TextView'u silme

1. Düzen Düzenleyici'de Bileşen Ağacı'ndaki TextView simgesini seçin.
   

İpucu: Daha fazla kullanıcı arayüzü bileşeni ekleyip kısıtlamaları ekleyip kaldırdıkça bir View öğesinin geçici olarak üst üste bindiğini görebilir ve bu nedenle birini arka planda seçmek zorlaşır. Bu durumda, onu Bileşen Ağacı'nda seçerek bir View seçebilirsiniz.

2. Sağ tıklayıp Sil'i seçin veya Delete tuşuna basın.
3. Button üzerindeki uyarıyı şimdilik yoksayın. Bunu bir sonraki adımda düzelteceksiniz.

Düzene bir ImageView ekleme

1. ImageViewPalet'ten bir ImageView öğesini Tasarım görünümüne sürükleyip Button öğesinin üzerine yerleştirin.

2. Kaynak Seçin iletişim kutusunda, Örnek veriler altındaki avatarlar'ı seçin. Bu, bir sonraki göreve zar resimleri ekleyene kadar kullanacağınız geçici resimdir.

3. Tamam'a basın. Uygulamanızın Tasarım görünümü aşağıdaki gibi görünmelidir.

4. Bileşen Ağacı'nda iki hata göreceksiniz. Button dikey olarak sınırlanmamış ve ImageView ne dikey ne de yatay olarak sınırlı.

Button, başlangıçta yerleştirildiği TextView bölümünü kaldırdığınız için dikey olarak kısıtlanmamıştır. Şimdi ImageView ve altına Button yerleştirmeniz gerekir.

ImageView ve Düğmeyi konumlandırma

Button öğesinin konumu ne olursa olsun, ekranı ImageView dikey olarak odaklamanız gerekir.

1. ImageView öğesine yatay kısıtlamalar ekleyin. ImageView öğesinin sol tarafını, ConstraintLayout adlı üst öğenin sol kenarına bağlayın.
2. ImageView öğesinin sağ tarafını üst kenarın sağ kenarına bağlayın.
   Bu, ImageView üst öğesinin içinde yatay olarak ortalanır.

3. ImageView öğesinin üst öğesini üst öğenin üst kısmına bağlayarak ImageView öğesine dikey bir sınırlama ekleyin.
   ImageView, ConstraintLayout yukarıya kaydırılır.
   
4. Button öğesine, Button üst kısmını ImageView alt kısmına bağlayan bir dikey kısıtlama ekleyin.
   Button, ImageView altına kaydırılır.
   
5. Şimdi ImageView öğesini tekrar seçin ve ImageView alt öğesini üst öğenin altına bağlayan bir dikey sınırlama ekleyin.
   Bu, ImageView öğesini ConstraintLayout içinde dikey olarak ortalar.

Kısıtlamalarla ilgili tüm uyarılar kaldırıldı.

Bundan sonra, Tasarım görünümü şöyle görünür: Merkezi ImageView ve hemen altında Button görünür.

Bileşen Ağacı'ndaki ImageView üzerinde ImageView cihazınıza içerik açıklaması eklemeniz gerektiğini belirten bir uyarı görebilirsiniz. ImageView Bu değişiklik Kotlin kodunda yapılacaktır.

Bu görevde bazı zar resimleri indirip uygulamanıza eklersiniz.

Zar resimleri indir

1. Zar resimlerinin bulunduğu zip dosyasını bilgisayarınıza indirmek için bu URL'yi açın. İndirme işleminin tamamlanmasını bekleyin.
2. Dosyayı bilgisayarınızda bulun (İndirilenler klasöründe olabilir).
3. Paketini açmak için zip dosyasını çift tıklayın. Bu işlem, 6 zar resmi dosyası içeren, 1 ile 6 arasında zar değerleri gösteren yeni bir DiceImages klasörü oluşturur.

Uygulamanıza zar görüntüleri ekleyin

1. Android Studio'da, menülerde View > Tool Windows > Resource Manager'ı veya Proje penceresinin sol tarafındaki Kaynak Yöneticisi sekmesini tıklayın.
2. Kaynak Yöneticisi'nin altındaki + işaretini tıklayın ve Çekilebilir Öğeleri İçe Aktar'ı seçin. Bu işlem bir dosya tarayıcısı açar.

3. 6 zar resim dosyasını bulup seçin. İlk dosyayı seçin, ardından Shift tuşunu basılı tutarken diğer dosyaları seçin.
4. Aç'ı tıklayın.

5. Bu 6 kaynağı içe aktarmak istediğinizi onaylamak için Sonraki'yi ve ardından İçe aktar'ı tıklayın.

6. Dosyalar başarıyla içe aktarıldıysa 6 resim, uygulamanızın Çekilebilir listesinde görünecektir.

Harika! Bir sonraki görevde, uygulamanızda bu resimleri kullanacaksınız.

Önemli! - Kotlin kodunuzdaki kaynak resimlerle bu resimlere başvurabilirsiniz:

• R.drawable.dice_1
• R.drawable.dice_2
• R.drawable.dice_3
• R.drawable.dice_4
• R.drawable.dice_5
• R.drawable.dice_6

Örnek avatar resmini değiştir

1. Tasarım Düzenleyicisi'nde ImageView'i seçin.
2. Beyan edilen Özellikler bölümündeki Özellikler bölümünde, avatar resmine ayarlanan srcCompat aracını bulun.

Araçlar srcCompat özelliğinin, sağlanan resmi yalnızca Android Studio'nun Tasarım görünümünde kullandığını unutmayın. Görüntü, yalnızca uygulamayı oluştururken geliştiricilere gösterilir, ancak uygulamayı emülatörde veya cihazda çalıştırdığınızda görülmez.

3. Avatarın küçük önizlemesini tıklayın. Bu iletişim kutusu, bu ImageView için kullanılacak yeni bir kaynak seçmek üzere açılır.

4. dice_1 çekilebilirliğini seçin ve Tamam'ı tıklayın.

Oley! ImageView tüm ekranı kaplar.

Ardından, ImageView öğesinin genişliğini ve yüksekliğini Button'ı gizlemeyecek şekilde ayarlarsınız.

5. Sınırlamalar Widget'ı altındaki Özellikler penceresinde, layout_width ve layout_height özelliklerini bulun. Söz konusu reklamlar şu anda sarmalama_içeriği olarak ayarlanmıştır. Bu nedenle, ImageView içindeki içerik kadar (kaynak resim) kadar uzun ve geniş olur.
6. Bunun yerine, ImageView üzerinde 160 dp sabit genişlik ve 200 dp sabit yükseklik ayarlayın. Enter tuşuna basın.
   
   ImageView şimdi çok daha küçük.
   

Button metriğinin resme çok yakın olduğunu görebilirsiniz.

7. Kısıtlanmış Widget'ta ayarlayarak 16 dp düğmesine bir üst kenar boşluğu ekleyin.
   

Tasarım görünümü güncellendikten sonra, uygulama çok daha iyi görünür!

Not: Resim boyutlarını farklı piksel çözünürlüğüne sahip cihazlarda doğru şekilde ölçeklenebilmesi için bu boyutları tanımlamak üzere birim olarak yoğunluktan bağımsız pikseller (dp) kullanın.

Düğme tıklandığında zar resmini değiştirme

Düzen düzeltildi ancak zar görüntülerinin kullanılması için MainActivity sınıfının güncellenmesi gerekiyor.

Şu anda MainActivity.kt dosyasında bulunan bir hata bulunuyor. Uygulamayı çalıştırmaya çalışırsanız şu derleme hatasını görürsünüz:

Bunun nedeni, kodunuzun düzenden sildiğiniz TextView öğesine referans vermeye devam etmesidir.

1. MainActivity.kt uygulamasını aç (app > java > com.example.diceroller > MainActivity.kt)

Kod R.id.textView anlamına geliyor, ancak Android Studio kodu tanımıyor.

2. rollDice() yöntemde TextView ile ilgili tüm kodları seçin ve silin.

// Update the TextView with the dice roll
val resultTextView: TextView = findViewByID(R.id.textView)
resultTextView.text = dice.roll().toString()

3. rollRice() içinde, ImageView türünde diceImage adında yeni bir değişken oluşturun. Düzendeki ImageView değerine eşit olarak ayarlayın. findViewById() yöntemini kullanın ve giriş bağımsız değişkeni olarak ImageView, R.id.imageView için kaynak kimliğini iletin.

val diceImage: ImageView = findViewById(R.id.imageView)

ImageView öğesinin tam kaynak kimliğini nasıl bulacağınızı merak ediyorsanız Özellikler penceresinin üst kısmındaki id [no] özelliğine bakın.

Kotlin kodundaki bu kaynak kimliğine atıfta bulunduğunuzda, söz konusu kimliğin tam olarak aynı olduğundan (büyük harf i, büyük V, boşluk olmadan) yazdığınızdan emin olun. Aksi takdirde Android Studio'da bir hata gösterilir.

4. Düğme tıklandığında ImageView öğesini doğru şekilde güncelleyebileceğinizi test etmek için bu kod satırını ekleyin. Zar oyunları her zaman "2" olmaz, yalnızca test amacıyla dice_2 resmi kullanır.

diceImage.setImageResource(R.drawable.dice_2)

Bu kod, dice_2 görüntüsü için kaynak kimliğini ileterek ImageView üzerinde setImageResource() yöntemini çağırır. Bu işlemle, dice_2 görüntüsü gösterilecek şekilde ekrandaki ImageView güncellenir.

rollDice() yöntemi artık şu şekilde görünmelidir:

private fun rollDice() {
    val dice = Dice(6)
    val diceRoll = dice.roll()
    val diceImage: ImageView = findViewById(R.id.imageView)
    diceImage.setImageResource(R.drawable.dice_2)
}

5. Uygulamanızın hatasız olarak çalıştığını doğrulamak için uygulamanızı çalıştırın.

Uygulama, Rol düğmesi dışında boş bir ekranla başlamalıdır.

Düğmeye dokunduğunuzda 2 değerini gösteren bir zar resmi gösterilir. Evet!!

Düğmeye dokunarak resmi değiştirebiliyordunuz. Yaklaşıyorsunuz!

Zarların 2 sonucu her zaman 2 olmaz. Farklı Zarlar İçin Koşullu Davranış Ekleme codelab'inde öğrendiğiniz kontrol akışı mantığını kullanın. Böylece, rastgele zar rulosuna bağlı olarak uygun zar resmi gösterilir.

Kod yazmaya başlamadan önce, ne olacağını açıklayan bir sözde kod yazarak uygulamanın nasıl davranması gerektiğini kavramsal olarak düşünün. Örneğin:

Kullanıcı 1 dönerse dice_1 resmini gösterin.

Kullanıcı 2 dönerse dice_2 resmini gösterir.

vb.

Not: Sözde kod, bazı kodların nasıl çalışabileceğine dair resmi olmayan bir açıklamadır. if / else gibi bilgisayar dilinin bazı unsurlarını kullanır ancak öğeleri insanlar tarafından anlaşılabilir bir şekilde açıklar. Tüm ayrıntılara karar verilmeden önce doğru yaklaşımın planlanması yararlı olabilir.

Yukarıdaki sözde kod, Kozlin'deki zar atımın değerine göre if / else ifadeleriyle yazılabilir.

if (diceRoll == 1) {
   diceImage.setImageResource(R.drawable.dice_1)
} else if (diceRoll == 2) {
   diceImage.setImageResource(R.drawable.dice_2)
}
 ...

Ancak her destek kaydı için if / else yazmak sık sık tekrarlanır. Aynı mantık, when ifadesiyle daha basit bir şekilde ifade edilebilir. Bu daha kısa (kısa kod) değil! Uygulamanızda bu yaklaşımı kullanın.

when (diceRoll) {
   1 -> diceImage.setImageResource(R.drawable.dice_1)
   2 -> diceImage.setImageResource(R.drawable.dice_2)
   ...

RollDice() yöntemini güncelle

1. rollDice() yönteminde, her seferinde resim kaynak kimliğini dice_2 resim olarak ayarlayan kod satırını silin.

diceImage.setImageResource(R.drawable.dice_2)

2. Bu değeri, ImageView değerini diceRoll değerine göre güncelleyen bir when ifadesiyle değiştirin.

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }

Değişiklikleri tamamladığınızda rollDice() yöntemi şöyle görünmelidir.

private fun rollDice() {
   val dice = Dice(6)
   val diceRoll = dice.roll()

   val diceImage: ImageView = findViewById(R.id.imageView)

   when (diceRoll) {
       1 -> diceImage.setImageResource(R.drawable.dice_1)
       2 -> diceImage.setImageResource(R.drawable.dice_2)
       3 -> diceImage.setImageResource(R.drawable.dice_3)
       4 -> diceImage.setImageResource(R.drawable.dice_4)
       5 -> diceImage.setImageResource(R.drawable.dice_5)
       6 -> diceImage.setImageResource(R.drawable.dice_6)
   }
}

3. Uygulamayı çalıştırın. Roll düğmesi tıklandığında zar resmi 2 dışındaki diğer değerlerle değiştirilir. Çalışıyor!

Kodunuzu optimize etme

Daha kısa ve öz bir kod yazmak istiyorsanız aşağıdaki kodu değiştirebilirsiniz. Uygulamanızın kullanıcılarına görünür bir etkisi yoktur, ancak kodunuzu daha kısa ve daha az tekrarlı hale getirir.

Zaman ifadenizde diceImage.setImageResource() çağrısının 6 kez göründüğünü fark etmiş olabilirsiniz.

when (diceRoll) {
    1 -> diceImage.setImageResource(R.drawable.dice_1)
    2 -> diceImage.setImageResource(R.drawable.dice_2)
    3 -> diceImage.setImageResource(R.drawable.dice_3)
    4 -> diceImage.setImageResource(R.drawable.dice_4)
    5 -> diceImage.setImageResource(R.drawable.dice_5)
    6 -> diceImage.setImageResource(R.drawable.dice_6)
}

Her bir durum arasında değişen tek şey, kullanılan kaynak kimliğidir. Yani, kullanılacak kaynak kimliğini depolamak için bir değişken oluşturabilirsiniz. Ardından, kodunuzdan diceImage.setImageResource() ifadesini yalnızca bir kez çağırabilir ve doğru kaynak kimliğini iletebilirsiniz.

1. Yukarıdaki kodu aşağıdakiyle değiştirin.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   6 -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

Buradaki yeni kavram, when ifadesinin bir değer döndürebilmesidir. Bu yeni kod snippet'iyle when ifadesi, drawableResource değişkeninde depolanacak doğru kaynak kimliğini döndürür. Daha sonra, görüntülenen resim kaynağını güncellemek için bu değişkeni kullanabilirsiniz.

2. when değerinin artık kırmızıyla altı çizildiğini unutmayın. Fareyle imlecinizin üzerine geldiğinizde şu hata mesajını görürsünüz: 'when' ifade tam olmalıdır, gerekli &&339;else' dalını ekleyin.

Hata, when ifadesi değerinin drawableResource öğesine atanmasıdır. Bu nedenle when öğesi kapsamlı olmalıdır. 12 taraflı bir zarla değiştirseniz bile her zaman değerin döndürülmesi için mümkün olan tüm durumları işlemelidir. Android Studio, else dalını eklemenizi önerir. 6 destek kaydını else olarak değiştirerek bu sorunu düzeltebilirsiniz. 1 - 5 yazışmaları aynıdır ancak 6 dahil diğer tüm öğeler else tarafından ele alınmaktadır.

val drawableResource = when (diceRoll) {
   1 -> R.drawable.dice_1
   2 -> R.drawable.dice_2
   3 -> R.drawable.dice_3
   4 -> R.drawable.dice_4
   5 -> R.drawable.dice_5
   else -> R.drawable.dice_6
}

diceImage.setImageResource(drawableResource)

3. Düzgün çalıştığından emin olmak için uygulamayı çalıştırın. Tüm numaraların 1'den 6'ya kadar olan zar görüntüleriyle birlikte gösterildiğinden emin olmak için test edin.

ImageView'de uygun içerik açıklaması ayarlama

Rulonun sayısını bir resimle değiştirdiğinize göre artık ekran okuyucular yuvarlanmış numarayı anlayamaz. Bu sorunu düzeltmek için resim kaynağını güncelledikten sonra ImageView öğesinin içerik açıklamasını güncelleyin. İçerik açıklaması, ekran okuyucuların açıklayabilmesi için ImageView öğesinde gösterilen metnin metin açıklaması olmalıdır.

diceImage.contentDescription = diceRoll.toString()

Ekran okuyucular bu içerik açıklamasını sesli okuyabilir. Bu nedenle, ekranda "6" karelik zar rulosu görüntülenirse içerik açıklaması "6" olarak okunur.

Daha kullanışlı bir lansman deneyimi oluşturun

Kullanıcı uygulamayı ilk kez açtığında uygulama boş olur (Roll düğmesi hariç). Bu işlem garip görünür. Kullanıcılar ne beklemeleri gerekebileceğini bilemeyebilir. Bu nedenle, uygulamayı ilk kez başlattığınızda ve Activity cihazını oluşturduğunuzda kullanıcı arayüzünü rastgele bir zar rulosu gösterecek şekilde değiştirin. Bu durumda kullanıcıların, Rulo düğmesine dokunduklarında zar patlatma olasılığı daha yüksektir.

override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   val rollButton: Button = findViewById(R.id.button)
   rollButton.setOnClickListener { rollDice() }

   // Do a dice roll when the app starts
   rollDice()
}

Kodunuza Yorum Yapın

Yazdığınız kodda neler olduğunu açıklamak için kodunuza birkaç yorum ekleyin.

Tüm bu değişiklikleri yaptıktan sonra rollDice() yönteminiz bu şekilde görünebilir.

/**
* Roll the dice and update the screen with the result.
*/
private fun rollDice() {
   // Create new Dice object with 6 sides and roll the dice
   val dice = Dice(6)
   val diceRoll = dice.roll()

   // Find the ImageView in the layout
   val diceImage: ImageView = findViewById(R.id.imageView)

   // Determine which drawable resource ID to use based on the dice roll
   val drawableResource = when (diceRoll) {
       1 -> R.drawable.dice_1
       2 -> R.drawable.dice_2
       3 -> R.drawable.dice_3
       4 -> R.drawable.dice_4
       5 -> R.drawable.dice_5
       else -> R.drawable.dice_6
   }

   // Update the ImageView with the correct drawable resource ID
   diceImage.setImageResource(drawableResource)

   // Update the content description
   diceImage.contentDescription = diceRoll.toString()
}

MainActivity.kt dosyasının tamamı için aşağıdaki bağlı GitHub'daki çözüm koduna bakın.

Tebrikler! Zar Toplayıcı uygulamasını tamamladınız. Artık bu uygulamayı arkadaşlarınızla bir sonraki oyun gecesine taşıyabilirsiniz.

Bu codelab'in çözüm kodu aşağıda gösterilen proje ve modüldedir.

Çözüm Kodu URL'si: https://github.com/google-developer-training/android-basics-kotlin-dice-roller-with-images-app-solution

Bu codelab'in kodunu GitHub'dan almak ve Android Studio'da açmak için aşağıdakileri yapın.

1. Android Studio'yu başlatın.
2. Android Studio'ya hoş geldiniz penceresinde, Sürüm denetiminden projeye göz atın'ı tıklayın.
3. Git'i seçin.

4. Clone Repository (Veri Deposu) iletişim kutusunda, sağlanan kod URL'sini URL kutusuna yapıştırın.
5. Test et düğmesini tıklayın, bekleyin ve Bağlantı başarılı yazan yeşil bir pop-up balonunun olduğundan emin olun.
6. İsteğe bağlı olarak Dizin'i önerilen varsayılandan farklı bir değerle değiştirin.

7. Klonla'yı tıklayın. Android Studio, kodunuzu getirmeye başlar.
8. Sürüm Denetiminden Ödeme pop-up'ında Evet'i tıklayın.

9. Android Studio'nun açılmasını bekleyin.
10. Codelab başlatıcı veya çözüm kodunuz için doğru modülü seçin.

11. Kodunuzu oluşturup çalıştırmak için Çalıştır düğmesini tıklayın.

Yardım: İndirdiğiniz kod düzgün yüklenmiyor veya çalışmıyorsa Yardım ve Sorun Giderme Kılavuzu'na bakın.

• ImageView içinde görüntülenen resmi değiştirmek için setImageResource() işlevini kullanın
• Uygulamanızdaki farklı durumları ele almak için if / else ifadeleri veya when ifadeleri gibi kontrol akışı ifadeleri kullanın. Örneğin, farklı koşullarda farklı resimler gösterin.

• Kotlin'de if ifadesi
• Kotlin'de when ifadesi
• ImageView.setImageResource()
• Erişilebilirlik

Not: Alıştırmalar isteğe bağlıdır. Bu codelab'de öğrendiklerinizi alıştırma yapmanıza fırsat tanır.

Aşağıdakileri yapın:

1. Uygulamaya Zar düğmesi ekleyerek 2 zar sonucu elde etmek için uygulamaya başka bir zar ekleyin. Düzeninizde kaç ImageViews öğesine ihtiyacınız olacak? Bu, MainActivity.kt kodunu nasıl etkileyecek?

Çalışmalarınızı kontrol edin:

Tamamlanan uygulamanız hatasız çalışmalı ve iki zar gösterilmelidir.