Android Kotlin Fundamentals 02.1: Düzen Düzenleyici'nin kullanıldığı doğrusal düzen

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.
• LinearLayout ile ilgili temel bilgiler.
• LinearLayout ve TextView kullanan basit bir uygulama oluşturma.

Neler öğreneceksiniz?

• View ve ViewGroup ile çalışma.
• LinearLayout. kullanarak Activity içinde görünümleri düzenleme
• Kaydırılabilir içeriği görüntülemek için ScrollView nasıl kullanılır?
• View etiketinin görünürlüğü nasıl değiştirilir?
• Dize ve boyut kaynaklarını oluşturma ve kullanma.
• Android Studio'nun Düzen Düzenleyici'sini kullanarak doğrusal düzen oluşturma

Yapacaklarınız

• HakkındaMe uygulamasını oluşturun.
• Adınızı göstermek için düzene bir TextView ekleyin.
• Bir ImageView. ekleyin
• Kaydırılabilir metni görüntülemek için ScrollView ekleyin.

HakkındaMe uygulamasında, kendinizle ilgili ilginç gerçekleri öne çıkarabilir veya uygulamayı bir arkadaşınız, aile üyeniz ya da evcil hayvan için özelleştirebilirsiniz. Bu uygulamada bir ad, BİTTİ düğmesi, yıldız resmi ve kaydırılabilir bir metin görünür.

Bu görevde Hakkında Meer Android Studio projesi oluşturun.

1. Henüz açılmadıysa Android Studio'yu açın.
2. Android Studio'da zaten açık olan bir proje varsa Dosya > Yeni > Yeni Proje'yi seçin.
   
   
   
3. Proje henüz açık değilse Android Studio'ya hoş geldiniz iletişim kutusunda + Yeni bir Android Studio projesi başlat'ı seçin.
   
   
   
4. Yeni Proje Oluştur iletişim kutusundaki Telefon ve Tablet sekmesinde Boş Etkinlik şablonunu seçin. İleri'yi tıklayın.
   
   
   
5. Sonraki Yeni Proje Oluştur iletişim kutusunda, aşağıdaki parametreleri ayarlayın ve Bitir'i tıklayın.
   

Özellik	Değer
Uygulama Adı	Hakkımda
Şirket Adı android	com.android.example.AboutMe (veya kendi alanınız)
Konumu kaydet	Varsayılan konumu değiştirmeyin veya tercih ettiğiniz dizinle değiştirin.
Dil	Kotlin
Minimum API düzeyi	API 19: Android 4.4 (KitKat)
Bu proje hazır uygulamaları destekleyecek	Bu onay kutusunu boş bırakın.
AndroidX yapılarını kullanma	Bu onay kutusunu seçin.

Android Studio'nun proje dosyalarını oluşturması biraz zaman alır.

6. Uygulamanızı çalıştırın. Boş ekranda "Merhaba Dünya" dizesini görürsünüz.
   

Boş Etkinlik şablonu tek bir boş etkinlik (Mainactivity.kt) oluşturur. Şablon, activity_main.xml adlı bir düzen dosyası da oluşturur. Düzen dosyasının kök ViewGroup öğesi ConstraintLayout ve içeriği olarak tek bir TextView içerir.

Bu görevde oluşturulan ViewGroup kökünü LinearLayout olarak değiştirirsiniz. Ayrıca, kullanıcı arayüzü öğelerini dikey olarak da düzenlersiniz.

Grupları görüntüleyin

ViewGroup, diğer görünümler ve görünüm grupları olan alt görünümleri içerebilen bir görünümdür. Bir düzeni oluşturan görünümler, kök olarak bir görüntüleme grubu içerecek şekilde bir görüntüleme hiyerarşisi olarak düzenlenir.

LinearLayout görünüm grubunda, kullanıcı arayüzü öğeleri yatay veya dikey olarak düzenlenir.

Kök düzeni LinearLayout görünüm grubu kullanacak şekilde değiştirin:

1. Project > Android bölmesini seçin. app/res/layout klasöründe activity_main.xml dosyasını açın.
2. Metin sekmesini seçip ConstraintLayout olan kök görünüm grubunu LinearLayout olarak değiştirin.
3. TextView öğesini kaldırın. LinearLayout öğesine android:orientation özelliğini ekleyin ve vertical olarak ayarlayın.

Önce:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <TextView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="Hello World!"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Sonra:

<LinearLayout
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context=".MainActivity">

</LinearLayout>

Düzen Düzenleyici, Android Studio'nun içindeki bir görsel tasarım aracıdır. Uygulamanızın düzenini oluşturmak için XML kodunu manuel olarak yazmak yerine, kullanıcı arayüzü öğelerini tasarım düzenleyiciye sürüklemek için Düzen Düzenleyici'yi kullanabilirsiniz.

Düzen Düzenleyici'yi görmek için Tasarım sekmesini tıklayın. Aşağıdaki ekran görüntüsünde Düzen Düzenleyici'nin bölümleri gösterilmektedir.

Tasarım düzenleyici: Ekran düzeninizin tasarım görünümünde, şema görünümünde veya her ikisinde görsel temsilini gösterir. Tasarım düzenleyici, Düzen Düzenleyici'nin ana parçasıdır.

Araç çubuğu: Tasarım düzenleyicinizde düzeninizin görünümünü yapılandırmak ve bazı düzen özelliklerini değiştirmek için düğmeler sağlar. Örneğin, düzeninizin tasarım düzenleyicideki görünümünü değiştirmek için Tasarım yüzeyini seç açılır menüsünü kullanın:

• Düzeninizin gerçek bir önizlemesi için Tasarım'ı kullanın.
• Her görünüm için yalnızca dış çizgileri görmek için Blueprint'i kullanın.
• Her iki ekranı yan yana görmek için Tasarım + Şema seçeneğini kullanın.

Palet: Düzeninize veya Bileşen Ağacı bölmesine sürükleyebileceğiniz görünüm ve görünüm gruplarının listesini sağlar.

Özellikler: Seçili olan görünüm veya görünüm grubuna ilişkin özellikleri gösterir. Özelliklerin tam listesi ve yaygın olarak kullanılan özellikler arasında geçiş yapmak için bölmenin üst kısmındaki simgesini kullanın.

Bileşen Ağacı: Düzen hiyerarşisini bir görüntüleme ağacı olarak görüntüler. Bileşen Ağacı, tasarım düzenleyicide normalde seçemediğiniz küçük, gizli veya çakışan görünümleriniz olduğunda kullanışlıdır.

1. Adım: TextView ekleyin

1. Henüz açılmadıysa res/layout/activity_main.xml dosyasını açın.
2. Metin sekmesine gidin ve kodu inceleyin. Kodun kök görüntüleme grubu olarak LinearLayout bulunur. (Görünüm grupları, başka görünümler içeren görünümlerdir.)
   
   LinearLayout, varsayılan olarak layout_height, layout_width ve orientation özelliklerine sahiptir. Bu özellikler, varsayılan olarak vertical şeklindedir.
3. Düzen Düzenleyici'yi açmak için Tasarım sekmesine geçin.

Not: Tasarım ve Metin sekmesi, aynı düzeni yalnızca farklı bir şekilde gösterir. Bir sekmede yaptığınız değişiklikler diğerine de yansıtılır.

4. Palet bölmesinden metin görünümünü tasarım düzenleyiciye sürükleyin.
   
   
   
5. Bileşen Ağacı bölmesine dikkat edin. Yeni metin görünümü, üst görünüm grubu olan LinearLayout öğesinin alt öğesi olarak yerleştirilir.
   
   
6. Henüz açılmadıysa Özellikler bölmesini açın. (Bölmeyi açmak için, tasarım düzenleyicide yeni eklenen TextView simgesini çift tıklayın.)
7. Özellikler bölmesinde aşağıdaki özellikleri ayarlayın:

Özellik	Değer
Kimlik	name_text
kısa mesaj	Bu adı adınıza ayarlayın. (Metin alanlarından birinde, tools ad alanı için ingiliz anahtarı simgesi gösterilir. İngiliz anahtarı olmayan anahtar, android ad alanı içindir. Bu, istediğiniz metin alanıdır.)
textView > textSize [metin Boyutu]	20sp
textView > textColor (Metin Rengi)	@android:color/black
textView > text Hizalama	Orta

2. Adım: Bir dize kaynağı oluşturun

Bileşen Ağacı'nda TextView, öğesinin yanında bir uyarı simgesi görürsünüz. Uyarı metnini görmek için, aşağıdaki ekran görüntüsünde bulunan simgeyi tıklayın veya üzerine gelin.

Uyarıyı düzeltmek için bir dize kaynağı oluşturun:

1. Özellikler bölmesinde, adınız olarak ayarladığınız metin özelliğinin yanındaki üç noktayı tıklayın. Kaynak düzenleyici açılır.
   
   
   
2. Kaynaklar iletişim kutusunda Yeni kaynak ekle > Yeni dize Değeri'ni seçin.
3. New String Value Resource (Yeni Dize Değeri Kaynağı) iletişim kutusunda Resource name (Kaynak adı) alanını name olarak ayarlayın. Kaynak değeri alanını kendi adınıza ayarlayın. Tamam'ı tıklayın. Uyarının kaldırıldığına dikkat edin.
   
   
   
4. res/values/strings.xml dosyasını açın ve name adlı yeni oluşturulan dize kaynağını arayın.

<string name="name">Aleks Haecky</string>

3. Adım: Bir boyut kaynağı oluşturun

Az önce kaynak düzenleyiciyi kullanarak bir kaynak eklediniz. Yeni kaynak oluşturmak için kaynakları XML kodu düzenleyicisinde de ayıklayabilirsiniz:

1. activity_main.xml dosyasında Metin sekmesine geçin.
2. textSize satırına, sayıyı (20sp) tıklayın ve Alt+Enter yazın (Mac'te Option+Enter). Pop-up menüsünden Boyut kaynağını ayıkla'yı seçin.
3. Kaynak Çıkar iletişim kutusundaki Kaynak adı alanına text_size girin. Tamam'ı tıklayın.
   
   
   
4. Oluşturulan aşağıdaki kodu görmek için res/values/dimens.xml dosyasını açın:

<dimen name="text_size">20sp</dimen>

Not: dimens.xml dosyası zaten res/values klasörünüzde yoksa Android Studio bunu oluşturur.

5. MainActivity.kt dosyasını açın ve onCreate() işlevinin sonunda aşağıdaki kodu bulun:

setContentView(R.layout.activity_main)

setContentView() işlevi, düzen dosyasını Activity öğesine bağlar. Belirtilen düzen kaynağı dosyası: R.layout.activity_main

• R, kaynağa bir referanstır. Uygulamanızdaki tüm kaynakların tanımlarını içeren ve otomatik olarak oluşturulan bir sınıftır.
• layout.activity_main, kaynağın activity_main adlı bir düzen olduğunu belirtir.

6. Uygulamanızı çalıştırın. Adınızla bir TextView görüntülenir.
   
   

Uygulama ekranınıza baktığınızda adınız ekranın üst kısmına doğru itilir. Böylece dolgu ve kenar boşluğu eklersiniz.

Dolgu ve marj

Dolgu, bir görünümün veya öğenin sınırları içindeki alandır. Bu, aşağıda gösterildiği gibi görünümün kenarları ile görünüm içeriği arasındaki boşluktur.

Bir görünümün boyutu dolgusu içerir. Yaygın olarak kullanılan dolgu özellikleri şunlardır:

• android:padding, görünümün dört kenarının da dolgusunu belirtir.
• android:paddingTop, üst kenar için dolgu belirtir.
• android:paddingBottom, alt kenar için dolgu belirtir.
• android:paddingStart, görünümün başlangıç kenarı için dolgu belirtir.
• android:paddingEnd, görünümün "bitiş" kenarı için dolguyu belirtir.
• android:paddingLeft, sol kenar için dolgu belirtir.
• android:paddingRight, sağ kenar için dolgu belirtir.

Marj, görünümün kenarlıklarının dışına eklenen alandır. Bu, yukarıdaki resimde gösterildiği gibi, görünümün kenarından üst öğesine boşluktur. Genellikle kullanılan marj özellikleri:

• android:layout_margin, görünümün dört tarafı için de bir marj belirtir.
• android:layout_marginBottom, bu görünümün alt kenarının dışındaki alanı belirtir.
• android:layout_marginStart, bu görünümün "başlangıç" alanının dışında kalan alanı belirtir.
• android:layout_marginEnd, bu görünümün sonundaki alanı belirtir.
• android:layout_marginLeft, bu görünümün solunda alanı belirtir.
• android:layout_marginRight, bu görünümün sağ tarafındaki alanı belirtir.

Sağ/sol ve başlangıç/bitiş karşılaştırması

Uygulamanız soldan sağa (LTR) veya sağdan sola (RTL) akışı kullansa da her zaman ekranın sağ ve sol tarafını belirtir. "Başlangıç" ve "bitiş" daima akışın başlangıcını ve sonunu belirtir:

• LTR akışı için start = sol ve end=right başlar.
• RTL akışı için start=right ve end=left.

Uygulamanız API düzeyi 17'yi (Android 4.2) veya sonraki sürümleri hedefliyorsa:

• "Sol" ve "sağ" yerine "başlangıç" ve "bitiş" kullanın.
• Örneğin android:layout_marginLeft, LTL dillerini desteklemek için android:layout_marginStart olmalıdır.

Uygulamanızın Android 4.2'den önceki sürümlerle çalışmasını istiyorsanız (yani, uygulamanın targetSdkVersion veya minSdkVersion değeri 16 veya daha düşükse):

• "Sol" ve "sağ"ın yanı sıra "başlangıç" ve bitiş noktası ekleyin.
• Örneğin, hem android:paddingLeft hem de android:paddingStart kodunu kullanın.

1. Adım: Dolgu ekleyin

Adınız ile name metin görünümünün üst kenarı arasında boşluk bırakmak için üst dolgu ekleyin.

1. Tasarım sekmesinde activity_main.xml dosyasını açın.
2. Bileşen Ağacı'nda veya tasarım düzenleyicide, metin görünümünü tıklayarak Özellikler bölmesini açın.
3. Kullanılabilir tüm özellikleri görmek için Özellikler bölmesinin üst kısmındaki çift ok simgesini tıklayın.
4. Dolgu'yu arayın, genişletin ve top özelliğinin yanındaki üç noktayı ... tıklayın. Kaynaklar iletişim kutusu görünür.
5. Kaynaklar iletişim kutusunda Yeni kaynak ekle > Yeni dimen Değeri'ni seçin.
6. Yeni Boyut Değeri Kaynağı iletişim kutusunda, 8dp adlı, small_padding adlı yeni bir dimen kaynağı oluşturun.
   
   dp kısaltması, yoğunluktan bağımsız anlamına gelir. Bir kullanıcı arayüzü öğesinin farklı yoğunluklara sahip ekranlarda aynı boyutta görünmesini isterseniz ölçü birimi olarak dp'yi kullanın. Ancak metin boyutunu belirtirken her zaman sp (ölçeklendirilebilir pikseller) kullanın.
7. Tamam'ı tıklayın.

2. Adım: Bir kenar boşluğu ekleyin

name metin görünümünü üst öğenin ucundan taşımak için üst kenar boşluğu ekleyin.

1. Özellikler bölmesinde Layout_Margin'ı bulmak için "marj&`t; ifadesini arayın.
2. Layout_Margin'ı genişletin ve top özelliğinin yanındaki üç noktayı ... tıklayın.
3. layout_margin adlı yeni bir dimen kaynağı oluşturun ve 16dp yapın. Tamam'ı tıklayın.

3. Adım: Yazı tipi ekleyin

name metin görünümünün daha iyi görünmesi için Android Roboto yazı tipini kullanın. Bu yazı tipi, destek kitaplığının bir parçasıdır ve yazı tipini kaynak olarak eklersiniz.

1. Özellikler bölmesinde &font;&fontFamily&quot araması yapın.
2. fontFamily alanında, açılır oku tıklayın, listenin en altına kaydırın ve Diğer Yazı Tipleri'ni seçin.
3. Kaynaklar iletişim kutusunda rob için arama yapın ve Roboto'yu seçin. Önizleme listesinde Normal'i seçin.
4. Projeye yazı tipi ekle radyo düğmesini seçin.
5. Tamam'ı tıklayın.
   
   

res klasöründe artık roboto.ttf yazı tipi dosyası içeren bir font klasörü var. @font/roboto özelliği TextView cihazınıza eklenir.

4. Adım: Stili çıkarın

Stil bir görünümün görünümünü ve biçimini belirten bir özellikler koleksiyonudur. Stil, yazı tipi rengi, yazı tipi boyutu, arka plan rengi, dolgu, kenar boşluğu ve diğer yaygın özellikleri içerebilir.

name metin görünümünün stilini bir stile çıkarabilir ve stilini uygulamanızın Stilleri kullanmak, bu yaygın özellikleri tek bir konumda tutmanıza da olanak tanır.

1. Bileşen Ağacı'ndaki TextView öğesini sağ tıklayın ve Stili Çıkar ve Stili Çıkar'ı seçin.
2. Android Stilini Çık iletişim kutusunda, layout_width onay kutusunu, layout_height onay kutusunu ve textAlignment onay kutusunu temizleyin. Bu özellikler genellikle her görünüm için farklı olduğundan stilin bir parçası olmasını istemezsiniz.
3. Stil adı alanına NameStyle girin.
4. Tamam'ı tıklayın.
   
   
   
5. Stil, aynı zamanda bir kaynaktır. Bu nedenle, stil bir styles.xml dosyasına res/values/ klasörüne kaydedilir. styles.xml sayfasını açın ve NameStyle stili için oluşturulan kodu inceleyin. Bu, şuna benzer:

<style name="NameStyle">
   <item name="android:layout_marginTop">@dimen/layout_margin</item>
   <item name="android:fontFamily">@font/roboto</item>
   <item name="android:paddingTop">@dimen/small_padding</item>
   <item name="android:textColor">@android:color/black</item>
   <item name="android:textSize">@dimen/text_size</item>
</style>

6. activity_main.xml uygulamasını açın ve Metin sekmesine geçin. Oluşturulan stilin, metin görünümünde style="@style/NameStyle" olarak kullanıldığını unutmayın.
7. Uygulamayı çalıştırın ve yazı tipindeki değişiklikleri (TextView) etrafındaki dolguya dikkat edin.

Gerçek dünyadaki çoğu Android uygulaması, resimleri görüntülemek, metin görüntülemek ve metin veya tıklama etkinlikleri biçiminde kullanıcının girişini kabul etmek için görüntüleme kombinasyonlarından oluşur. Bu görevde bir resim görüntülemek için görünüm eklersiniz.

ImageView, resim kaynaklarını görüntülemek için kullanılan bir görünümdür. Örneğin, bir ImageView PNG, JPG, GIF veya WebP dosyası gibi Bitmap kaynaklarını veya vektör çizimi gibi Drawable kaynaklarını gösterebilir.

Android ile birlikte gelen örnek simgeler, avatarlar ve arka planlar gibi resim kaynakları vardır. Bu kaynaklardan birini uygulamanıza eklersiniz.

1. Düzen dosyasını Tasarım sekmesinde görüntüleyin, ardından Palet bölmesinden bir ImageView öğesini Bileşen Ağaç'ta name_text altına sürükleyin. Kaynaklar iletişim kutusu açılır.
2. Önceden seçilmemişse Çizilebilir'i seçin.
3. Android'i genişletin, kaydırın ve btn_star_big_on'ı seçin. Sarı yıldız .
4. Tamam'ı tıklayın.
   
   
   
   Yıldız resmi, adınızın altındaki düzene eklenir. Dikey bir LinearLayout sahip olduğunuz için eklediğiniz görünümler dikey olarak hizalanır.
   
   
5. Metin sekmesine geçin ve oluşturulan ImageView koduna bakın. Genişlik match_parent olarak ayarlandığı için görünüm, üst öğesi kadar geniş olacak. Yükseklik wrap_content olarak ayarlandı. Dolayısıyla görünüm, yüksekliği kadar yüksek olacak. ImageView, btn_star_big_on çekilişine referansta bulunabilir.

<ImageView
   android:id="@+id/imageView"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:srcCompat="@android:drawable/btn_star_big_on" />

6. ImageView öğesinin id öğesini yeniden adlandırmak için "@+id/imageView" simgesini sağ tıklayın ve Yeniden değerlendir ve yeniden adlandır'ı seçin.
7. Yeniden adlandır iletişim kutusunda id'yi @+id/star_image olarak ayarlayın. Yeniden düzenle'yi tıklayın.
   
   
   

İpucu: Yeniden düzenleme ve yeniden adlandırma, uygulama projenizdeki bir özellik veya değişken adının tüm oluşumlarını yeniden adlandırır.

8. Tasarım sekmesindeki Bileşen Ağacı'nda star_image öğesinin yanındaki uyarı simgesini tıklayın. Uyarı, ekran okuyucuların kullanıcıya resimleri açıklamak için kullandığı eksik contentDescription hakkındadır.
9. Özellikler bölmesinde, contentDescription özelliğinin yanındaki üç noktayı ... tıklayın. Kaynaklar iletişim kutusu açılır.
10. Kaynaklar iletişim kutusunda Yeni kaynak ekle > Yeni dize Değeri'ni seçin. Kaynak adı alanını yellow_star, Kaynak değeri alanını ise Yellow star olarak ayarlayın. Tamam'ı tıklayın.
11. Yıldız resmini addan ayırt etmek için yellow_star değerine 16dp (üst düzey) üst sınırı eklemek için Özellikler bölmesini kullanın.
12. Uygulamanızı çalıştırın. Adınız ve yıldız resmi uygulamanızın kullanıcı arayüzünde görüntülenir.
    
    

ScrollView, içine yerleştirilmiş görünüm hiyerarşisinin kaydırılabilmesini sağlayan bir görünüm grubudur. Kaydırma görünümü, alt öğe olarak yalnızca bir başka görünüm veya görünüm grubu içerebilir. Alt görüntüleme, genellikle LinearLayout şeklindedir. Bir LinearLayout içine başka görünümler ekleyebilirsiniz.

Aşağıdaki resimde, birkaç başka görünüm içeren bir LinearLayout içeren ScrollView örneği gösterilmektedir.

Bu görevde, kullanıcının kısa bir biyografiyi gösteren metin görünümünü kaydırmasına olanak tanıyan bir ScrollView eklersiniz. Tek bir görünümü kaydırılabilir hale getiriyorsanız bu görünümü doğrudan ScrollView görevine yerleştirebilirsiniz.

1. Adım: TextView içeren bir ScrollView ekleyin

1. Tasarım sekmesinde activity_main.xml dosyasını açın.
2. Bir kaydırma görünümünü, tasarım düzenleyiciye veya Bileşen Ağacı'na sürükleyerek düzene sürükleyin. Kaydırma görünümünü yıldız resminin altına yerleştirin.
3. Oluşturulan kodu incelemek için Metin sekmesine geçin.

// Auto generated code
<ScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <LinearLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:orientation="vertical" />
</ScrollView>

ScrollView öğesinin yüksekliği ve genişliği üst öğeyle eşleşir. name_text metin görünümü ve star_image resim görünümü, içeriğini görüntülemek için yeterli dikey alan kullandıktan sonra Android sistemi, ekrandaki mevcut alanın geri kalanını doldurmak için ScrollView öğesini ayarlar.

4. ScrollView öğesine bir id ekleyin ve bio_scroll adını verin. ScrollView öğesine bir id eklendiğinde Android sistemi, görünüm için bir tutma yerine sahip olur. Böylece kullanıcı cihazı döndürdüğünde sistem kaydırma konumunu korur.
5. Uygulamanızdaki kaydırılabilir yalnızca bir görüntüleme olduğu için ScrollView içinde LinearLayout kodunu kaldırın: TextView.
6. Palet'ten Bileşen Ağacı'na bir TextView sürükleyin. TextView öğesini bio_scroll altına, bio_scroll öğesinin alt öğesi olarak ekleyin.
   
   
7. Yeni metin görünümünün id özelliğini bio_text olarak ayarlayın.
8. Daha sonra, yeni metin görünümü için bir stil ekleyin. Özellikler bölmesinde, Kaynaklar iletişim kutusunu açmak için stil özelliğinin yanındaki üç noktayı ... tıklayın.
9. Kaynaklar iletişim kutusunda NameStyle için arama yapın. Listeden NameStyle'i seçin ve Tamam'ı tıklayın. Metin görünümünde artık önceki bir görevde oluşturduğunuz NameStyle stili kullanılıyor.
   
   

2. Adım: Biyografinizi yeni TextView'a ekleyin

1. strings.xml sayfasını açın, bio adında bir dize kaynağı oluşturun. Kendiniz veya istediğiniz herhangi bir konu hakkında uzun bir metin yazın.
   

Not:

• Satır sonu belirtmek için \n kullanın.
• Kesme işareti kullanırsanız ters eğik çizgiyle çıkış yapmanız gerekir. Örneğin:
  &You mustn\'t forget the backslash.
• Kalın metinler için: <b>...</b>, italik metin için <i>...</i> kullanın. Örneğin:
  "This text is <b>bold</b> and this text is <i>italics</i>."

Örnek biyografi:

<string name="bio">Hi, my name is Aleks.
\n\nI love fish.
\n\nThe kind that is alive and swims around in an aquarium or river, or a lake, and definitely the ocean.
\nFun fact is that I have several aquariums and also a river.
\n\nI like eating fish, too. Raw fish. Grilled fish. Smoked fish. Poached fish - not so much.
\nAnd sometimes I even go fishing.
\nAnd even less sometimes, I actually catch something.
\n\nOnce, when I was camping in Canada, and very hungry, I even caught a large salmon with my hands.
\n\nI\'ll be happy to teach you how to make your own aquarium.
\nYou should ask someone else about fishing, though.\n\n</string>

2. bio_text metin görünümünde, text özelliğinin değerini biyografinizi içeren bio dize kaynağı olarak ayarlayın.
3. bio_text metninin daha kolay okunmasını sağlamak için satırlar arasına boşluk ekleyin. lineSpacingMultiplier özelliğini kullanın ve 1.2 değerine sahip olun.
   
   
   
   Tasarım düzenleyicide, bio metninin ekranın yan kenarlarına kadar nasıl çalıştığına dikkat edin. Bu sorunu düzeltmek için kök LinearLayout öğesine sol, başlangıç, sağ ve bitiş dolgu özellikleri ekleyebilirsiniz. Alta dolgu eklemeniz gerekmez. Çünkü alt kısma kadar olan metinler kullanıcıya metnin kaydırılabilir olduğunu iletir.
4. Kök LinearLayout öğesine 16dp başlangıç ve bitiş dolgusu ekleyin.
5. Metin sekmesine geçin, boyut kaynağını çıkarıp layout_padding olarak adlandırın.
   
   

Not: API düzeyi 17'den başlayarak, uygulamanızı Arapça gibi RTL dillere uyarlamak için "sol" ve "sağ" yerine "sağ" ve "sağ" kullanın.

6. Uygulamanızı çalıştırıp metinde ilerleyin.
   
   

Tebrikler!

Sıfırdan eksiksiz bir uygulama oluşturdunuz ve harika görünüyor.

Android Studio projesi: Hakkımda

Not: Tüm kodlama sorgulamaları isteğe bağlıdır.

ScrollView içinde, TextView üzerinde bir ImageView ekleyin. Uygulamayı çalıştırdığınızda bu resim, yıldızın aksine metin yukarı kaydırıldığında görünümün dışına kaydırılır.

İpucu: Kaydırma görünümünde yalnızca bir alt görünüm olabilir. Kaydırılabilir iki görünümü (ImageView ve TextView) LinearLayout içinde sarmalamanız gerekir.

• ViewGroup, diğer görünümleri içerebilen bir görünümdür. LinearLayout ve ScrollView görünüm gruplarıdır.
• LinearLayout, alt görünümlerini yatay veya dikey olarak düzenleyen bir görünüm grubudur.
• Ekranda uzun metin veya resim koleksiyonu gibi içerikleri görüntülemeniz gerektiğinde bir ScrollView kullanın. Kaydırma görünümünde yalnızca bir alt görünüm bulunabilir. Birden fazla görünümü kaydırmak isterseniz ScrollView gibi bir LinearLayout gibi bir ViewGroup ekleyin ve kaydırılacak görünümleri ViewGroup içerisine yerleştirin.
• Düzen Düzenleyici, Android Studio'nun içindeki bir görsel tasarım düzenleyicidir. Uygulamanızın düzenini kullanıcı arayüzü öğelerini düzene sürükleyerek oluşturmak için Düzen Düzenleyici'yi kullanabilirsiniz.
• Stil, bir görünümün görünümünü belirten özellikler koleksiyonudur. Örneğin, stilde yazı tipi rengi, yazı tipi boyutu, arka plan rengi, dolgu ve kenar boşluğu belirtilebilir.
• Bir görünümün tüm biçimlendirmesini çıkarıp bir stilde toplayabilirsiniz. Uygulamanıza tutarlı bir görünüm vermek için stili diğer görünümlerde yeniden kullanın.

Udacity kursu:

• Kotlin ile Android Uygulamaları Geliştirme

Android geliştirici dokümanları:

• Düzenler
• ViewGroup
• View
• Doğrusal Düzen
• ScrollView
• Farklı piksel yoğunluklarını destekleme (dp)
• Düzen Düzenleyici ile kullanıcı arayüzü oluşturma
• Android Studio dokümanları
• Stiller ve Temalar

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

Aşağıdakilerden hangisi bir görüntüleme grubudur?

makbuz EditText

makbuz LinearLayout

makbuz TextView

makbuz Button

2. Soru

Aşağıda listelenen görünüm hiyerarşilerinden hangisi geçerli değildir?

▢ LinearLayout > TextView, TextView, ImageView

▢ ScrollView > LinearLayout > TextView, Button, Button, ScrollView > TextView

▢ TextView > TextView, ImageView, ScrollView

3. Soru

Stiller, styles.xml içinde tanımlanan kaynaklardır. Stilleri kullanarak bir görünümün renklerini, yazı tiplerini, metin boyutunu ve diğer birçok özelliğini tanımlayabilirsiniz. Doğru mu yanlış mı?

▢ Doğru

▢ yanlış

4. Soru

ScrollView, alt öğesi olarak herhangi bir sayıda görüntüleme veya görüntüleme grubu içerebilen bir görüntüleme grubudur. Doğru mu yanlış mı?

▢ Doğru

▢ yanlış

5. Soru

Uygulamanızda resim görüntülemek için hangi kullanıcı arayüzü öğesi kullanılabilir?

makbuz TextView

makbuz ImageView

makbuz Button

makbuz ScrollView

Sonraki derse başlayın: 2.2: Kullanıcı etkileşimi ekleme

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.