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 metniTextView
görünümüne ayarlama.View
veViewGroup
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.
Bu görevde kullanıcının rumuz girmesine olanak tanımak için EditText
giriş alanı eklersiniz.
1. Adım: Başlayın
- Ö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.
- Android Studio'da aboutMeInteractive-Starter projesini açın.
- 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
- Android Studio'da, Tasarım sekmesindeki
activity_main.xml
düzen dosyasını açın. - 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 fazlaEditText
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. - Bir PlainText düzenleme metnini Bileşen Ağacı'na sürükleyip
name_text
'nın altına vestar_image
öğesinin üzerine yerleştirin. EditText
özelliğinde aşağıdaki özellikleri ayarlamak için Özellikler bölmesini kullanın.
Özellik | Değer |
|
|
|
|
|
|
- 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
string.xml
dosyasına ipucu için yeni bir dize kaynağı ekleyin.
<string name="what_is_your_nickname">What is your Nickname?</string>
- Aşağıdaki özellikleri
EditText
görünümüne ayarlamak için Özellikler bölmesini kullanın:
Özellik | Değer |
|
|
|
|
|
|
- Özellikler bölmesinde
Name
değerinitext
özelliğinden kaldırın. İpucunun gösterilebilmesi içintext
ö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:
nickname_edit
düzenleme metni içininputType
özelliğinitextPersonName
olarak ayarlayın.- 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.) - Özellikler bölmesinde
EditText
görünümünün aşağıdaki özellikleri için değerleri doğrulayın:
Özellik | Değer |
|
|
|
|
|
|
|
|
|
|
|
|
| (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
- 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. done
adlı yeni bir dize kaynağı oluşturun. DizeyeDone
değeri verin.
<string name="done">Done</string>
- Yeni eklenen
Button
görünümünde aşağıdaki özellikleri ayarlamak için Özellikler bölmesini kullanın:
Özellik | Değerler |
|
|
|
|
|
|
|
|
layout_gravity
özelliği, görünümü LinearLayout
üst düzeninde ortalar.
- 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 rengires/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
- Ö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ımlananlayout_margin
olarak ayarlayın. - Açılır menüden
fontFamily
özelliğiniroboto
olarak ayarlayın. - 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.
res/values/colors.xml
öğesini açın vecolorAccent
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.
- 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
- 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 vestar_image
öğesinin üzerine yerleştirin. - Yeni
TextView
görünümü için aşağıdaki özellikleri ayarlamak üzere Özellikler bölmesini kullanın:
Özellik | Değer |
|
|
|
|
|
|
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.
- Uygulamanızın bu metin görünümünün ilk olarak gösterilmesini istemediğiniz için Özellikler bölmesinde
nickname_text
nickname_text
görünümününvisibility
değerinigone
olarak ayarlayın.
Özellikler bölmesinde özelliği değiştirdiğinizdenickname_text
görünümünün tasarım düzenleyiciden kaybolduğuna dikkat edin. Görünüm, düzen önizlemesinde gizlenir. nickname_text
görünümününtext
ö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çindeonCreate()
içindesetOnClickListener
ç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
- Android Studio'daki
java
klasöründeMainActivity.kt
dosyasını açın. MainActivity.kt
içinde,MainActivity
sınıfının içineaddNickname
adlı bir işlev ekleyin.View
türündeview
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) {
}
nickname_edit
işlevi metni venickname_text
metin görünümüne ilişkin referans almak içinaddNickname
işlevinin içindefindViewById()
kullanın.
val editText = findViewById<EditText>(R.id.nickname_edit)
val nicknameTextView = findViewById<TextView>(R.id.nickname_text)
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
editText
içinvisibility
özelliğiniView.GONE
olarak ayarlayarakEditText
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
visibility
özelliğiniView.GONE
olarak ayarlayarak BİTTİ düğmesini gizleyin. İşlev giriş parametresiview
olan düğme referansınıza zaten sahipsiniz.
view.visibility = View.GONE
addNickname
işlevinin sonunda,visibility
takma adınıView.VISIBLE
olarak ayarlayarakTextView
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.
MainActivity.kt
öğesindeonCreate()
işlevinin sonunda BİTTİButton
görünümüne referans alın.findViewById()
işlevini kullanın vesetOnClickListener
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.
- 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.
MainActivity.kt
içinde,addNickname()
işlevinin sonuna aşağıdaki kodu ekleyin. Bu kodun işleyiş şekli hakkında daha fazla bilgi edinmek istersenizhideSoftInputFromWindow
dokümanlarına bakabilirsiniz.
// Hide the keyboard.
val inputMethodManager = getSystemService(Context.INPUT_METHOD_SERVICE) as InputMethodManager
inputMethodManager.hideSoftInputFromWindow(view.windowToken, 0)
- 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
MainActivity
içinde, takma ad metni görünümü içinupdateNickname(view: View)
adlı bir tıklama işleyici işlevi ekleyin.
private fun updateNickname (view: View) {
}
updateNickname
İşlevinin içindenickname_edit
düzenleme metni için bir referans, BİTTİ düğmesi için de referans alabilirsiniz. Bunu yapmak içinfindViewById()
yöntemini kullanın.
val editText = findViewById<EditText>(R.id.nickname_edit)
val doneButton = findViewById<Button>(R.id.done_button)
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
MainActivity.kt
içinde,onCreate()
işlevinin sonunda,nickname_text
metin görünümündesetOnClickListener
çağrısı yapın. Tıklama-dinleyici işlevine (updateNickname()
) atıfta bulunun.
findViewById<TextView>(R.id.nickname_text).setOnClickListener {
updateNickname(it)
}
- 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
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()
- 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
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"
- 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:
- XML düzeninde
android:onClick
özelliğini<
View
>
öğesine ekleyin. - Programatik olarak, ilgili
Activity
içindekisetOnClickListener(View.OnClickListener)
işlevini kullanın.
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:
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.