Android Kotlin Fundamentals 02.2: Kullanıcı etkileşimini ekleme

Bu codelab, Android Kotlin Temelleri kursuna dahildir. Codelab'ler üzerinden sırayla çalışıyorsanız bu kurstan en iyi şekilde yararlanabilirsiniz. Tüm kurs codelab'leri Android Kotlin Fundamentals codelabs açılış sayfasında listelenmektedir.

Bilmeniz gerekenler

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

Neler öğreneceksiniz?

  • EditText görünümü kullanarak kullanıcı girişini alma.
  • EditText görünümündeki metni kullanarak metni TextView görünümüne ayarlama.
  • View ve ViewGroup ile çalışma.
  • View etiketinin görünürlüğü nasıl değiştirilir?

Yapacaklarınız

  • Önceki bir codelab'den gelen HakkındaMe adlı uygulamaya etkileşim ekleyin.
  • Kullanıcının metin girmesi için bir EditText ekleyin.
  • Bir Button ekleyin ve tıklama işleyicisini uygulayın.

Bu codelab'de, kullanıcı etkileşimi eklemek için aboutMe uygulamasını genişletirsiniz. Takma ad görüntülemek için bir takma ad alanı, BİTTİ düğmesi ve metin görünümü eklersiniz. Kullanıcı bir takma ad girip BİTTİ düğmesine dokunduğunda, metin görünümü, girilen rumuzu gösterecek şekilde güncellenir. Kullanıcı, metin görünümüne dokunarak takma adı tekrar güncelleyebilir.

Hakkımda uygulaması

Bu görevde kullanıcının rumuz girmesine olanak tanımak için EditText giriş alanı eklersiniz.

1. Adım: Başlayın

  1. Önceki bir codelab'den Hakkında Hakkında uygulamanız yoksa StartMeInteractive-Starter başlangıç kodunu indirin. Bu, önceki codelab'de tamamladığınız kodla aynıdır.
  2. Android Studio'da aboutMeInteractive-Starter projesini açın.
  3. Uygulamayı çalıştırın. Kaydırma görünümünde bir ad metni görünümü, yıldız resmi ve uzun bir metin segmenti görürsünüz.



    Kullanıcının metni değiştiremeyeceğine dikkat edin.

Uygulamalar, kullanıcı etkileşimde bulunabiliyorsa (örneğin kullanıcı metin girebilirse) daha ilgi çekicidir. Android, metin girişini kabul etmek için metin düzenleme adlı bir kullanıcı arayüzü (UI) widget'ı sağlar. Düzenleme metnini, TextView ürününün alt sınıfı olan EditText kullanarak tanımlarsınız. Düzenleme metni, aşağıdaki ekran görüntüsünde gösterildiği gibi, kullanıcının metin girişi girmesine ve metin girişini değiştirmesine olanak tanır.

2. Adım: Düzenleme Metni ekleyin

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



    TextView Metin olan Ab TextView, Palet bölmesindeki metin öğeleri listesinin en üstünde gösterilir. Ab TextView altında birden fazla EditText görüntülemesi var.

    Palet bölmesinde, TextView simgesinin alt çizgi olmadan Ab harflerini nasıl gösterdiğine dikkat edin. Bununla birlikte, EditText simgelerinde Ab ifadesi altı çizili olarak gösterilir. Alt çizgi puanı, görünümün düzenlenebilir olduğunu gösterir.

    EditText görünümlerinin her biri için Android farklı özellikler ayarlar ve sistem, uygun yumuşak giriş yöntemini (ör. dokunmatik klavye gibi) görüntüler.
  3. Bir PlainText düzenleme metnini Bileşen Ağacı'na sürükleyip name_text'nın altına ve star_image öğesinin üzerine yerleştirin.


  4. EditText özelliğinde 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 metni içeren 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üzün stilini belirlersiniz.

1. Adım: İpucu metni ekleyin

  1. string.xml dosyasına 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 Name değerini text özelliğinden kaldırın. İpucunun gösterilebilmesi için text özellik değerinin boş olması gerekir.

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

inputType özelliği, kullanıcıların EditText görünümüne girebileceği giriş türünü belirtir. Android sistemi, giriş türü grubuna 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ı tıklayın veya alanın yanındaki üç noktayı ... tıklayın. Şu anda etkin olan giriş türü işaretli olarak kullanabileceğiniz tüm giriş türlerini gösteren bir liste açılır. 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ı tuş takımı gösterilir ve kullanıcı yalnızca rakam girebilir.

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

  1. nickname_edit düzenleme metni için inputType özelliğini textPersonName olarak ayarlayın.
  2. Bileşen Ağacı bölmesinde bir autoFillHints uyarısına dikkat edin. Bu uyarı, bu uygulama için geçerli değil ve bu codelab'in kapsamı dışında. Dolayısıyla bu uyarıyı yoksayabilirsiniz. (Otomatik doldurma hakkında daha fazla bilgi edinmek istiyorsanız Uygulamanızı otomatik doldurma için optimize etme başlıklı makaleye bakın.)
  3. Özellikler bölmesinde EditText görünümünün aşağıdaki özellikleri için değerleri 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 işlem gerçekleştirmek için dokunabileceği bir kullanıcı arayüzü öğesidir. Düğmeler metin, simge veya hem metin hem de simgeden oluşabilir.

Bu görevde kullanıcının takma ad girdikten sonra dokunduğu BİTTİ düğmesini eklersiniz. Düğme, EditText görünümünü, takma adı gösteren bir TextView görünümüyle değiştirir. Takma adı güncellemek için kullanıcı TextView görünümüne dokunabilir.

1. Adım: BİTTİ düğmesi ekleyin

  1. Palet bölmesinden bir düğmeyi Bileşen Ağacı'na sürükleyin. Düğmeyi nickname_edit düzenleme metninin altına yerleştirin.

  2. done adlı yeni bir dize kaynağı oluşturun. Dizeye Done değeri 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ü LinearLayout üst düzeninde 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 menüden veya Kaynaklar penceresinden seçebilirsiniz.



    Bu stil, düğme rengini vurgu rengi olarak (colorAccent) 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 yeni renk kaynakları ekleyebilir veya projenizdeki 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üğmesinin stilini belirleyin

  1. Özellikler bölmesinde Layout_Margin >Üst'i seçerek üst kenar boşluğu ekleyin. Üst kenar boşluğunu dimens.xml dosyasında tanımlanan layout_margin olarak ayarlayın.


  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 aksan rengini, etkinliğinizin uygulama çubuğuna uyacak şekilde değiştirirsiniz.

  1. res/values/colors.xml öğesini 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üzenleyicisinin sol kenar çubuğunda görebilirsiniz.

Tasarım düzenleyicide düğme rengindeki değişikliğe dikkat edin.

  1. Uygulamanızı çalıştırın. Düzenleme metninin altında stilize edilmiş bir BİTTİ düğmesi görürsünüz.


Kullanıcı bir rumuz 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ü eklersiniz. Metin görünümünde kullanıcının takma adının üzerine star_image eklenir.

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

  1. Palet bölmesinden, Bileşen Ağacı'na bir metin görünümü sürükleyin. Metin görünümünü done_button altına ve star_image öğesinin üzerine 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

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

  • visible: Görünüm görünür.
  • Invisible: Görünümü gizler ancak görünüm düzende yer kaplar.
  • gone: Görünümü gizler ve görünüm, düzende herhangi bir alanı kaplamaz.
  1. Uygulamanızın bu metin görünümünün ilk olarak gösterilmesini istemediğiniz için Özellikler bölmesinde nickname_textnickname_text görünümünün visibility değerini gone olarak ayarlayın.



    Özellikler bölmesinde özelliği değiştirdiğinizde nickname_text görünümünün tasarım düzenleyiciden kaybolduğuna dikkat edin. 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şturduğunuz XML kodu şu şekilde olacaktır:

<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ünecektir:

Button nesnesindeki (veya herhangi bir görünümdeki) tıklama işleyici, düğmeye (görünüm) dokunulduğunda yapılacak işlemi belirtir. Tıklama etkinliğini işleyen işlev, düzeni düğmeyle (görünüm) barındıran Activity öğesinde uygulanmalıdır.

Tıklama dinleyici, genel olarak bu biçimdedir. Burada geçilen görünüm, tıklama veya dokunmayı 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 android:onClick özelliğini <Button> öğesine ekleyebilirsiniz. Örneğin:
<Button
   android:id="@+id/done_button"
   android:text="@string/done"
   ...
   android:onClick="clickHandlerFunction"/>

VEYA

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

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

addNickname adlı tıklama işleyici fonksiyonunuz aşağıdakileri yapar:

  • nickname_edit düzenleme metninden metni alın.
  • Metni nickname_text metin görünümünde ayarlayın.
  • Düzenleme metnini ve düğmesini gizleyin.
  • TextView takma adını görüntüleyin.

1. Adım: Bir tıklama işleyici ekleyin

  1. Android Studio'daki java klasöründe MainActivity.kt dosyasını açın.
  2. MainActivity.kt içinde, MainActivity sınıfının içine addNickname adlı bir işlev ekleyin. View türünde view adlı bir giriş parametresi ekleyin. view parametresi, işlevin çağrıldığı View'dir. Bu durumda, view BİTTİ düğmenizin bir örneği olacaktır.
private fun addNickname(view: View) {
}
  1. nickname_edit işlevi metni ve nickname_text metin görünümüne ilişkin referans almak için addNickname işlevinin içinde 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, text özelliğinden alınan kullanıcı editText metnine girdiği metin olarak ayarlayın.
nicknameTextView.text = editText.text
  1. editText için visibility özelliğini View.GONE olarak ayarlayarak EditText takma adı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. İşlev giriş parametresi view olan düğme referansınıza zaten sahipsiniz.
view.visibility = View.GONE
  1. addNickname işlevinin sonunda, visibility takma adını View.VISIBLE olarak ayarlayarak TextView takma adının görünümünü görünür hale getirin.
nicknameTextView.visibility = View.VISIBLE

2. Adım: Tıklama dinleyiciyi, BİTTİ Düğmesine ekleyin

Artık BİTTİ düğmesine dokunduğunuzda gerçekleştirilecek işlemi tanımlayan bir işleviniz olduğuna göre işlevi Button görünümüne eklemeniz gerekir.

  1. MainActivity.kt öğesinde onCreate() işlevinin sonunda BİTTİ Button görünümüne referans alın. findViewById() işlevini kullanın ve setOnClickListener işlevini çağırın. Tıklama-dinleyici işlevine (addNickname()) bir referans iletin.
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 anlamına gelir.

  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 metni görünümüyle nasıl değiştirildiğine dikkat edin.

Kullanıcı, BİTTİ düğmesine dokunsa bile klavyenin görünür olduğunu unutmayın. Bu davranış varsayılan ayardır.

3. Adım: Klavyeyi gizleyin

Bu adımda, kullanıcı BİTTİ düğmesine dokunduktan sonra klavyeyi gizlemek için kod eklersiniz.

  1. MainActivity.kt içinde, addNickname() işlevinin sonuna aşağıdaki kodu ekleyin. Bu kodun işleyiş şekli hakkında daha fazla bilgi edinmek isterseniz hideSoftInputFromWindow dokümanlarına bakabilirsiniz.
// 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'e dokunduktan sonra klavyenin gizlendiğini unutmayın.

Kullanıcının BİTTİ düğmesine dokunduktan sonra takma adı değiştirmesi mümkün değildir. Bir sonraki görevde uygulamayı daha etkileşimli hale getirir ve kullanıcının takma adı güncelleyebilmesi için işlev eklersiniz.

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

1. Adım: Bir tıklama işleyici ekleyin

  1. MainActivity içinde, takma ad metni görünümü için updateNickname(view: View) adlı bir tıklama işleyici işlevi ekleyin.
private fun updateNickname (view: View) {
}
  1. updateNickname İşlevinin içinde nickname_edit düzenleme metni için bir referans, BİTTİ düğmesi için de referans alabilirsiniz. Bunu yapmak 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 için kod ekleyin, BİTTİ düğmesini gösterin ve metin görünümünü gizleyin.
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 çağrısı yapın. Tıklama-dinleyici işlevine (updateNickname()) atıfta bulunun.
findViewById<TextView>(R.id.nickname_text).setOnClickListener {
   updateNickname(it)
}
  1. Uygulamanızı çalıştırın. Bir takma ad girin, BİTTİ düğmesine ve ardından takma ad TextView görünümüne dokunun. Takma ad görünümü kaybolur ve düzenleme metni ile BİTTİ düğmesi görünür hale gelir.


Varsayılan olarak, EditText görünümünde odak yoktur ve klavye görünmez. Takma ad metni görünümünün tıklanabilir olduğunu anlamak zor olabilir. Bir sonraki görevde, takma ad metni görünümüne odak ve stil eklersiniz.

2. Adım: Odağı 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. Klavyenin görünür hale gelmesi için updateNickname işlevinin sonuna kod 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 alta @dimen/small_padding dolgu ekleyin. Bu değişiklikler, kullanıcılara takma ad metni görünümünün tıklanabilir olduğuna dair bir ipucu verir.
android:background="@color/colorAccent"
android:paddingBottom="@dimen/small_padding"
  1. Son uygulamanızı çalıştırın. Düzenleme metninde odak noktası, takma ad düzenleme metninde gösterilir ve takma ad görünümü stili belirlenir.

Şimdi etkileşimli Hakkında Mektubunuzu bir arkadaşınıza gösterin!

Android Studio projesi: AboutMeInteractive

  • Android Studio'daki Düzen Düzenleyici aracı, bir görsel tasarım düzenleyicidir. Uygulamanızın düzenini kullanıcı arayüzü öğelerini düzeninize sürükleyerek oluşturmak için Düzen Düzenleyici'yi kullanabilirsiniz.
  • EditText, kullanıcının metin girmesine ve değiştirmesine olanak sağlayan bir kullanıcı arayüzü öğesidir.
  • Button, kullanıcının işlem gerçekleştirmek için dokunabileceği bir kullanıcı arayüzü öğesidir. Düğmeler metin, simge veya hem metin hem de simgeden oluşabilir.

Tıklama işleyicileri

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

View için iki şekilde tıklama dönüşümü işlevi ekleyebilirsiniz:

Udacity kursu:

Android geliştirici dokümanları:

Bu bölümde, bir eğitmen tarafından sunulan kurs kapsamında bu codelab üzerinden çalışan öğrenciler için olası ev ödevi ödevleri listelenmektedir. Öğretmenin şunları yapması gerekir:

  • Gerekirse ev ödevini atayın.
  • Öğrencilere ev ödevlerinin nasıl gönderileceğini bildirin.
  • Ev ödevlerine not verin.

Öğretmenler bu önerileri istedikleri kadar kullanabilir veya uygun görebilir ve uygun olan diğer ev ödevlerini atayabilirler.

Bu codelab'de kendiniz çalışıyorsanız, bilginizi test etmek için bu ödevlerden yararlanabilirsiniz.

Bu soruları yanıtlayın

1. Soru

EditText, alt sınıfıdır.

  • View
  • LinearLayout
  • TextView
  • Button

2. Soru

Aşağıdaki visibility özellik değerlerinden biri bir görünümde ayarlanmışsa görünümün gizlenmesini ve düzende yer kaplamamasını sağlar.

  • visible
  • Invisible
  • gone
  • hide

3. Soru

EditText alanları giriş alanını karmaşık hale getirdiğinden, bu ipucu ipucu vermek için iyi bir uygulama değildir. Doğru mu yanlış mı?

  • Doğru
  • Yanlış

4. Soru

Button görüntülemeleriyle ilgili olarak aşağıdaki ifadelerden hangisi doğrudur?

  • Button görünümü bir görüntüleme grubudur.
  • Ekran başına yalnızca üç Button görünümünüz olabilir.
  • Button görüntüleme tıklanabilir. Ekteki tıklama işleyici de bir işlem gerçekleştirir.
  • Button, ImageView uzantısıdır.

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

Bu kurstaki diğer codelab'lerin bağlantılarına ulaşmak için Android Kotlin Fundamentals codelabs açılış sayfasına göz atın.