Android Kotlin Hakkında Temel Bilgiler 02.2: Kullanıcı etkileşimi ekleme

Bu codelab, Android Kotlin Hakkında Temel Bilgiler kursunun bir parçasıdır. Bu kurstan en iyi şekilde yararlanmak için codelab'leri sırayla tamamlamanızı öneririz. Kursla ilgili tüm codelab'ler Android Kotlin Hakkında Temel Bilgiler codelab'leri açılış sayfasında listelenir.

Bilmeniz gerekenler

  • Kotlin'de temel bir Android uygulaması oluşturma
  • Android uygulamasını emülatörde veya cihazda çalıştırma
  • Android Studio'nun Düzen Düzenleyicisi'ni kullanarak doğrusal düzen oluşturma .
  • LinearLayout, TextView, ScrollView ve tıklama işleyicisi olan bir düğme kullanan basit bir uygulama oluşturma.

Neler öğreneceksiniz?

  • EditTextGörünümEditText kullanarak kullanıcı girişi alma
  • EditText görünümündeki metni kullanarak metni TextView görünümüne ayarlama
  • View ve ViewGroup ile çalışma
  • View görünürlüğünü değiştirme

Yapacaklarınız

  • Önceki bir codelab'den alınan AboutMe uygulamasına etkileşim ekleyin.
  • Kullanıcının metin girebilmesi için EditText ekleyin.
  • Button ekleyin ve tıklama işleyicisini uygulayın.

Bu codelab'de, AboutMe uygulamasını genişleterek kullanıcı etkileşimi ekleyeceksiniz. Takma ad alanı, BİTTİ düğmesi ve takma adı görüntülemek için bir metin görünümü eklersiniz. Kullanıcı bir takma ad girip BİTTİ düğmesine dokunduktan sonra, metin görünümü güncellenerek girilen takma ad gösterilir. Kullanıcı, metin görünümüne dokunarak takma adı tekrar güncelleyebilir.

AboutMe uygulaması

Bu görevde, kullanıcının takma ad girebilmesi için bir EditText giriş alanı ekleyeceksiniz.

1. adım: Başlayın

  1. Önceki bir codelab'den AboutMe uygulamanız yoksa başlangıç kodunu (AboutMeInteractive-Starter) indirin. Bu, önceki bir codelab'de tamamladığınız kodun aynısıdır.
  2. Android Studio'da AboutMeInteractive-Starter projesini açın.
  3. Uygulamayı çalıştırın. Bir ad metin görünümü, bir yıldız resmi ve kaydırma görünümünde uzun bir metin segmenti görürsünüz.



    Kullanıcının metinlerden hiçbirini değiştiremediğini fark edin.

Kullanıcının uygulamayla etkileşime geçebildiği (ör. metin girebildiği) uygulamalar daha ilgi çekicidir. Android, metin girişini kabul etmek için düzenlenebilir metin adlı bir kullanıcı arayüzü (UI) widget'ı sağlar. EditText (TextView alt sınıfı) kullanarak bir düzenleme metni tanımlarsınız. Düzenleme metni, kullanıcının metin girişi yapmasına ve bunu değiştirmesine olanak tanır. Bu durum, aşağıdaki ekran görüntüsünde gösterilmiştir.

2. adım: EditText ekleyin

  1. Android Studio'da activity_main.xml düzen dosyasını Tasarım sekmesinde açın.
  2. Palet bölmesinde Metin'i tıklayın.



    Ab TextView, TextView, Palet bölmesindeki metin öğeleri listesinin en üstünde gösterilir. Ab TextView'in altında birden fazla EditText görünüm bulunur.

    Palet bölmesinde, TextView simgesinin Ab harflerini alt çizgisiz olarak gösterdiğini fark edin. Ancak EditText simgelerinde Ab ifadesinin altı çizili olarak gösteriliyor. Alt çizgi, görünümün düzenlenebilir olduğunu gösterir.

    Android, EditText görünümlerinin her biri için farklı özellikler ayarlar ve sistem, uygun sanal giriş yöntemini (ör. ekran klavyesi) gösterir.
  3. PlainText düzenleme metnini Component Tree'ye (Bileşen Ağacı) sürükleyin ve name_text'nin altına, star_image'ün üstüne yerleştirin.


  4. EditText görünümünde aşağıdaki özellikleri ayarlamak için Özellikler bölmesini kullanın.

Özellik

Değer

id

nickname_edit

layout_width

match_parent (varsayılan)

layout_height

wrap_content (varsayılan)

  1. Uygulamanızı çalıştırın. Yıldız resminin üzerinde, varsayılan metin olarak "Ad" yazan bir düzenleme metni görürsünüz.

Bu görevde, ipucu ekleyerek, metin hizalamasını değiştirerek, stili NameStyle olarak değiştirerek ve giriş türünü ayarlayarak EditText görünümünü şekillendiriyorsunuz.

1. adım: İpucu metni ekleyin

  1. string.xml dosyasında ipucu için yeni bir dize kaynağı ekleyin. 
<string name="what_is_your_nickname">What is your Nickname?</string>
  1. Aşağıdaki özellikleri EditText görünümüne ayarlamak için Özellikler bölmesini kullanın:

Özellik

Değer

style

NameStyle

textAlignment

(merkez)

hint

@string/what_is_your_nickname

  1. Özellikler bölmesinde, text özelliğinden Name değerini kaldırın. İpucunun gösterilmesi için text özelliği değeri boş olmalıdır.

2. adım: inputType özelliğini ayarlayın

inputType özelliği, kullanıcıların EditText görünümünde girebileceği giriş türünü belirtir. Android sistemi, ayarlanan giriş türüne bağlı olarak uygun giriş alanını ve dokunmatik klavyeyi gösterir.

Olası tüm giriş türlerini görmek için Özellikler bölmesinde inputType alanını veya alanın yanındaki üç nokta simgesini ... tıklayın. Kullanabileceğiniz tüm giriş türlerini gösteren bir liste açılır. Şu anda etkin olan giriş türü işaretlenir. Birden fazla giriş türü seçebilirsiniz.

Örneğin, şifreler için textPassword değerini kullanın. Metin alanı, kullanıcının girişini gizler.

Telefon numaraları için phone değerini kullanın. Sayısal tuş takımı gösterilir ve kullanıcı yalnızca sayı girebilir.

Takma ad alanı için giriş türünü ayarlayın:

  1. nickname_edit düzenleme metniiçin inputType özelliğini textPersonName olarak ayarlayın.
  2. Bileşen Ağacı bölmesinde autoFillHints uyarısını görürsünüz. Bu uyarı bu uygulama için geçerli değildir ve bu codelab'in kapsamı dışındadır. Bu nedenle, uyarıyı yoksayabilirsiniz. (Otomatik doldurma hakkında daha fazla bilgi edinmek istiyorsanız Uygulamanızı otomatik doldurma için optimize etme başlıklı makaleyi inceleyin.)
  3. Özellikler bölmesinde, EditText görünümünün aşağıdaki özelliklerinin değerlerini doğrulayın:

Özellik

Değer

id

nickname_edit

layout_width

match_parent (varsayılan)

layout_height

wrap_content (varsayılan)

style

@style/NameStyle

inputType

textPersonName

hint

"@string/what_is_your_nickname"

text

(boş)

Button, kullanıcının bir işlem gerçekleştirmek için dokunabileceği bir kullanıcı arayüzü öğesidir. Düğmeler metin, simge veya hem metin hem de simge içerebilir.

Bu görevde, kullanıcının bir takma ad girdikten sonra dokunacağı bir BİTTİ düğmesi ekleyeceksiniz. Bu düğme, EditText görünümünü, takma adı gösteren bir TextView görünümüyle değiştirir. Kullanıcı, takma adı güncellemek için TextView görünümüne dokunabilir.

1. adım: BİRİM düğmesi ekleyin

  1. Palet bölmesinden bir düğmeyi Bileşen Ağacı'na sürükleyin. Düğmeyi nickname_edit metni düzenle
    seçeneğinin altına yerleştirin.
  2. done adlı yeni bir dize kaynağı oluşturun. Dizeye Done değerini verin. 
<string name="done">Done</string>
  1. Yeni eklenen Button görünümünde aşağıdaki özellikleri ayarlamak için Özellikler bölmesini kullanın:

Özellik

Değerler

id

done_button

text

@string/done

layout_gravity

center_horizontal

layout_width

wrap_content

layout_gravity özelliği, görünümü üst düzeni olan LinearLayout'de ortalar.

  1. Stili, Android'in sağladığı önceden tanımlanmış stillerden biri olan Widget.AppCompat.Button.Colored olarak değiştirin. Stili açılır listeden veya Kaynaklar penceresinden seçebilirsiniz.



    Bu stil, düğme rengini vurgu rengi colorAccent olarak değiştirir. Vurgu rengi, res/values/colors.xml dosyasında tanımlanır.


colors.xml dosyası, uygulamanızın varsayılan renklerini içerir. Uygulamanızın gereksinimlerine göre projenize yeni renk kaynakları ekleyebilir veya mevcut renk kaynaklarını değiştirebilirsiniz.

Örnek colors.xml dosyası:

<?xml version="1.0" encoding="utf-8"?>
<resources>
   <color name="colorPrimary">#008577</color>
   <color name="colorPrimaryDark">#00574B</color>
   <color name="colorAccent">#D81B60</color>
</resources>

2. adım: BİTTİ düğmesini stilize edin

  1. Özellikler bölmesinde Layout_Margin > Top'ı (Düzen_Kenar Boşluğu > Üst) seçerek üst kenar boşluğu ekleyin. Üst kenar boşluğunu layout_margin olarak ayarlayın. Bu değer, dimens.xml dosyasında tanımlanır.


  2. Açılır menüden fontFamily özelliğini roboto olarak ayarlayın.


  3. Metin sekmesine geçin ve yeni eklenen düğme için oluşturulan XML kodunu doğrulayın.
<Button
   android:id="@+id/done_button"
   style="@style/Widget.AppCompat.Button.Colored"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content"
   android:layout_gravity="center_horizontal"
   android:layout_marginTop="@dimen/layout_margin"
   android:fontFamily="@font/roboto"
   android:text="@string/done" />

3. adım: Renk kaynağını değiştirin

Bu adımda, düğmenin vurgu rengini etkinliğinizin uygulama çubuğuyla eşleşecek şekilde değiştirirsiniz.

  1. res/values/colors.xml dosyasını açın ve colorAccent değerini #76bf5e olarak değiştirin.
<color name="colorAccent">#76bf5e</color>

HEX koduna karşılık gelen rengi, dosya düzenleyicinin sol kenar boşluğunda görebilirsiniz.

Tasarım düzenleyicideki düğme renginin değiştiğini fark edin.

  1. Uygulamanızı çalıştırın. Düzenleme metninin altında stil verilmiş bir DONE (BİTTİ) düğmesi görmeniz gerekir.

Kullanıcı bir takma ad girip BİTTİ düğmesine dokunduktan sonra takma ad, TextView görünümünde gösterilir. Bu görevde, renkli arka plana sahip bir metin görünümü ekleyeceksiniz. Metin görünümünde kullanıcının takma adı star_image simgesinin üzerinde gösterilir.

1. adım: Takma ad için bir TextView ekleyin

  1. Palet bölmesinden bir metin görünümünü Bileşen Ağacı'na sürükleyin. Metin görünümünü done_button öğesinin altına ve star_image öğesinin üstüne yerleştirin.


  2. Yeni TextView görünümü için aşağıdaki özellikleri ayarlamak üzere Özellikler bölmesini kullanın:

Özellik

Değer

id

nickname_text

style

NameStyle

textAlignment

(merkez)

2. adım: TextView'un görünürlüğünü değiştirin

visibility özelliğini kullanarak uygulamanızdaki görünümleri gösterebilir veya gizleyebilirsiniz. Bu özellik üç değerden birini alır:

  • visible: Görünüm görünür durumdadır.
  • Invisible: Görünümü gizler ancak görünüm, düzende yer kaplamaya devam eder.
  • gone: Görünümü gizler ve görünüm, düzende yer kaplamaz.
  1. Uygulamanızın bu metin görünümünü ilk başta göstermesini istemediğiniz için Özellikler bölmesinde nickname_text metin görünümünün visibility özelliğini gone olarak ayarlayın.



    Özellikler bölmesinde özelliği değiştirdiğinizde nickname_text görünümünün tasarım düzenleyicisinden kaybolduğunu unutmayın. Görünüm, düzen önizlemesinde gizlenir.
  2. nickname_text görünümünün text özellik değerini boş bir dizeyle değiştirin.

Bu TextView için oluşturulan XML kodunuz aşağıdaki gibi görünmelidir:

<TextView
   android:id="@+id/nickname_text"
   style="@style/NameStyle"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textAlignment="center"
   android:visibility="gone"
   android:text="" />

Düzen önizlemeniz aşağıdaki gibi görünmelidir:

Button nesnesindeki (veya herhangi bir görünümdeki) bir tıklama işleyicisi, düğmeye (görünüm) dokunulduğunda gerçekleştirilecek işlemi belirtir. Tıklama etkinliğini işleyen işlev, düğmeyi (görünüm) içeren düzeni barındıran Activity içinde uygulanmalıdır.

Tıklama işleyici genellikle bu biçimdedir. Burada, iletilen görünüm, tıklama veya dokunma işlemini alan görünümdür.

private fun clickHandlerFunction(viewThatIsClicked: View) {
// Add code to perform the button click event
}

Tıklama işleyici işlevini düğme tıklama etkinliklerine iki şekilde ekleyebilirsiniz:

  • XML düzeninde, <Button> öğesine android:onClick özelliğini ekleyebilirsiniz. Örneğin:
<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

VEYA

  • Bu işlemi, setOnClickListener işlevini çağırarak çalışma zamanında onCreate() içinde programatik olarak yapabilirsiniz.Activity Örneğin:
myButton.setOnClickListener {
   clickHanderFunction(it)
}

Bu görevde, done_button için programatik olarak bir tıklama dinleyicisi ekleyeceksiniz. Tıklama işleyiciyi, MainActivity.kt olan ilgili etkinliğe eklersiniz.

addNickname adlı tıklama dinleyici işleviniz şunları yapar:

  • nickname_edit metni düzenle'den metni alın.
  • Metni nickname_text metin görünümünde ayarlayın.
  • Düzenleme metnini ve düğmeyi gizleyin.
  • Takma adı gösterin TextView.

1. adım: Tıklama işleyici ekleyin

  1. Android Studio'da java klasöründe MainActivity.kt dosyasını açın.
  2. MainActivity.kt içinde, MainActivity sınıfına addNickname adlı bir işlev ekleyin. view adlı bir giriş parametresi ekleyin. Bu parametrenin türü View olmalıdır. view parametresi, işlevin çağrıldığı View'dir. Bu durumda, view, DONE düğmenizin bir örneği olur.
private fun addNickname(view: View) {
}
  1. addNickname işlevinin içinde, nickname_edit düzenleme metnine ve nickname_text metin görünümüne referans almak için findViewById() kullanın.
val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)
  1. nicknameTextView metin görünümündeki metni, kullanıcının editText alanına girdiği metin olarak ayarlayın ve bu metni text özelliğinden alın. 
nicknameTextView.text = editText.text
  1. editText öğesinin visibility özelliğini View.GONE olarak ayarlayarak takma ad EditText görünümünü gizleyin.

Önceki bir görevde, Düzen Düzenleyici'yi kullanarak visibility özelliğini değiştirdiniz. Burada da aynı işlemi programatik olarak yaparsınız. 

editText.visibility = View.GONE
  1. visibility özelliğini View.GONE olarak ayarlayarak BİTTİ düğmesini gizleyin. Düğmenin referansı, işlevin giriş parametresi olarak zaten mevcut (view). 
view.visibility = View.GONE
  1. addNickname işlevinin sonunda, visibility özelliğini View.VISIBLE olarak ayarlayarak TextView takma adı görünümünü görünür hale getirin.
nicknameTextView.visibility = View.VISIBLE

2. adım: Tıklama işleyicisini BİTTİ düğmesine ekleyin

DONE (BİTTİ) düğmesine dokunulduğunda gerçekleştirilecek işlemi tanımlayan bir işleviniz olduğuna göre, bu işlevi Button görünümüne eklemeniz gerekir.

  1. MainActivity.kt içinde, onCreate() işlevinin sonunda DONE Button görünümüne bir referans alın. findViewById() işlevini kullanın ve setOnClickListener numaralı telefonu arayın. Tıklama işleyici işlevine bir referans iletin, addNickname().
findViewById<Button>(R.id.done_button).setOnClickListener {
            addNickname(it)
        }

Yukarıdaki kodda it, bağımsız değişken olarak iletilen görünüm olan done_button'yi ifade eder.

  1. Uygulamanızı çalıştırın, bir takma ad girin ve BİTTİ düğmesine dokunun. Düzenleme metninin ve düğmenin, takma ad metin görünümüyle nasıl değiştirildiğine dikkat edin.

Kullanıcı BİTTİ düğmesine dokunduktan sonra bile klavyenin görünür kaldığını unutmayın. Bu davranış varsayılandır.

3. adım: Klavyeyi gizleyin

Bu adımda, kullanıcı DONE (Bitti) düğmesine dokunduktan sonra klavyeyi gizlemek için kod ekleyeceksiniz.

  1. MainActivity.kt içinde, addNickname() işlevinin sonuna aşağıdaki kodu ekleyin. Bu kodun nasıl çalıştığı hakkında daha fazla bilgi edinmek istiyorsanız hideSoftInputFromWindow dokümanlarını inceleyin. 
// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
  1. Uygulamanızı tekrar çalıştırın. BİTTİ'ye dokunduktan sonra klavyenin gizlendiğini fark edeceksiniz.

Kullanıcılar BİTTİ düğmesine dokunduktan sonra takma adı değiştiremez. Bir sonraki görevde, uygulamayı daha etkileşimli hale getirecek ve kullanıcıların takma adı güncelleyebilmesi için işlevsellik ekleyeceksiniz.

Bu görevde, takma ad metin görünümüne bir tıklama dinleyicisi ekleyeceksiniz. Tıklama dinleyicisi, takma ad metin görünümünü gizler, düzenleme metnini ve BİTTİ düğmesini gösterir.

1. adım: Tıklama işleyici ekleyin

  1. MainActivity içinde, takma ad metin görünümü için updateNickname(view: View) adlı bir tıklama dinleyici işlevi ekleyin. 
private fun updateNickname (view: View) {
}
  1. updateNickname işlevinde, nickname_edit düzenleme metnine ve BİTTİ düğmesine referans alın. Bunun için findViewById() yöntemini kullanın.
val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)
  1. updateNickname işlevinin sonuna, düzenleme metnini göstermek, BİTTİ düğmesini göstermek ve metin görünümünü gizlemek için kod ekleyin.
editText.visibility = View.VISIBLE
doneButton.visibility = View.VISIBLE
view.visibility = View.GONE
  1. MainActivity.kt içinde, onCreate() işlevinin sonunda nickname_text metin görünümünde setOnClickListener işlevini çağırın. Tıklama işleyici işlevine (updateNickname()) bir referans iletin.
findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}
  1. Uygulamanızı çalıştırın. Bir takma ad girin, DONE (Bitti) düğmesine ve ardından takma ad TextView görünümüne dokunun. Takma ad görünümü kaybolur, düzenleme metni ve BİTTİ düğmesi görünür.


Varsayılan olarak EditText görünümünün odaklanmadığını ve klavyenin görünmediğini unutmayın. Kullanıcının, takma ad metin görünümünün tıklanabilir olduğunu anlaması zordur. Bir sonraki görevde, odak ve stil ekleyerek takma ad metin görünümünü düzenleyeceksiniz.

2. adım: Odak noktasını EditText görünümüne ayarlayın ve klavyeyi gösterin

  1. updateNickname işlevinin sonunda odağı EditText görünümüne ayarlayın. requestFocus() yöntemini kullanın. 
// Set the focus to the edit text.
editText.requestFocus()
  1. updateNickname işlevinin sonuna klavyeyi görünür kılacak kodu ekleyin.
// Show the keyboard.
val imm = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
imm.showSoftInput(editText, 0)

3. adım: Takma ad TextView görünümüne arka plan rengi ekleyin

  1. nickname_text metin görünümünün arka plan rengini @color/colorAccent olarak ayarlayın ve @dimen/small_padding alt dolgusunu ekleyin. Bu değişiklikler, kullanıcıya takma ad metin görünümünün tıklanabilir olduğu konusunda ipucu verir.
android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"
  1. Son uygulamanızı çalıştırın. Düzenleme metni odaklanmış durumda, takma ad düzenleme metninde gösteriliyor ve takma ad metin görünümü stilize edilmiş.

Şimdi etkileşimli AboutMe uygulamanızı bir arkadaşınıza gösterin.

Android Studio projesi: AboutMeInteractive
  • Android Studio'daki Layout Editor aracı, görsel tasarım düzenleyicisidir. Kullanıcı arayüzü öğelerini düzeninize sürükleyerek uygulamanızın düzenini oluşturmak için Düzen Düzenleyici'yi kullanabilirsiniz.
  • EditText, kullanıcının metin girmesine ve değiştirmesine olanak tanıyan bir kullanıcı arayüzü öğesidir.
  • Button, kullanıcının bir işlem gerçekleştirmek için dokunabileceği bir kullanıcı arayüzü öğesidir. Düğmeler metin, simge veya hem metin hem de simge içerebilir.

Tıklama işleyiciler

  • Tıklama dinleyici ekleyerek herhangi bir View öğesinin dokunmaya yanıt vermesini sağlayabilirsiniz.
  • Tıklama işleyicisini tanımlayan işlev, tıklanan View öğesini alır.

Bir View öğesine tıklama dinleyici işlevi eklemenin iki yolu vardır:

Udacity kursu:

Android geliştirici belgeleri:

Bu bölümde, bir eğitmenin yönettiği kurs kapsamında bu codelab'i tamamlayan öğrenciler için olası ödevler listelenmektedir. Eğitmen, aşağıdakileri yapmalıdır:

  • Gerekirse ödev atayın.
  • Öğrencilere ev ödevi ödevlerini nasıl göndereceklerini bildirin.
  • Ödevlere not verin.

Eğitmenler bu önerileri istedikleri kadar kullanabilir ve uygun olduğunu düşündükleri diğer ödevleri verebilirler.

Bu codelab'i kendi başınıza tamamlıyorsanız bilginizi test etmek için bu ödevleri kullanabilirsiniz.

Bu soruları yanıtlayın

1. Soru

EditText hangi sınıfın alt sınıfıdır?

  • View
  • LinearLayout
  • TextView
  • Button

2. Soru

Aşağıdaki visibility özellik değerlerinden hangisi bir görünümde ayarlanırsa görünüm gizlenir ve düzende yer kaplamaz?

  • visible
  • Invisible
  • gone
  • hide

3. Soru

EditText görünümlerinde ipuçları giriş alanını karıştırdığından ipucu vermek iyi bir uygulama değildir. Doğru mu yanlış mı?

  • Doğru
  • Yanlış

4. Soru

Aşağıdaki ifadelerden hangisi Button görünümleri hakkında doğrudur?

  • Button görünümü, bir görünüm grubudur.
  • Ekran başına yalnızca üç Button görünüm olabilir.
  • Button görünümleri tıklanabilir ve tıklama üzerine eklenen tıklama işleyici bir işlem gerçekleştirir.
  • Button, ImageView'ın uzantısıdır.

Bir sonraki derse başlayın: 2.3: Düzen Düzenleyici'yi kullanarak kısıtlama düzeni oluşturma

Bu kurstaki diğer codelab'lerin bağlantılarını Android Kotlin Hakkında Temel Bilgiler codelab'leri açılış sayfasında bulabilirsiniz.