Basit Kullanıcı Arayüzü Oluşturmak
Bu bölümde text alanı ve buton içeren basit bir XML arayüz tasarımını nasıl gerçekleştireceğimizi göreceğiz. Bu bölümün devamında text alanların içeriklerini başka bir activity'e nasıl göndereceğimizi de irdeleyeceğiz.
Android uygulamalar için grafik kullanıcı arayüzleri, View ve View Group nesnelerine ait hiyerarşi içerisinde oluşturulur. View nesneleri genel olarak button, text fields gibi. Kullanıcı arayüzü (User Interface) widgetlerinden oluşur. ViewGroup nesneleri ise genel olarak, LinearLayout veya grid, vertical list gibi görünmeyen arayüz elemanlarıdır.
Android aracılığı ile XML yapısına karşılık gelen bu View ve ViewGroup alt sınıflarını kullanarak XML hiyerarşisinde kullanıcı arayüzleri tasarlayabilirsiniz.
Layoutların, ViewGroupların alt sınıfları olduğundan bahsetmiştik. Bu bölümde LinearLayout özelliği ile çalışacağız.
ViewGroup nesnelerinin Layout'lara dallanması ve diğer View nesnelerini kapsadığı hiyerarşi
LinearLayout Oluşturmak
Android Stüdyo'da sol kısımda yer alan kaynaklar explorer'de layout dizini altında yer alan xml dosyasını açıp aşağıdaki kodu yazarak LinearLayout oluşturuyoruz.
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"></LinearLayout>
Bu tür tanımlamalarda, android:layout_width ve android:layout_height niteliklerini tanımlamak zorundayız. Bu nitelikler üç özellik alırlar. Bunlar;
-match_parent - API Level 8'den sonra fill_parent yerinde gelmiştir. İçinde bulunduğu container'in sınırlarına kadar geniş bir alanı kapsar
-fill_parent - match_parent ile aynı özelliğe sahiptir. API Level 8 e kadar olan kısımda kullanılır.
-wrap_content - bu özellik ile nesne sahip olduğu içerik kadar alanı kaplayacaktır.
TextField Eklemek
Az önce oluşturduğumuz LinearLayout içerisine aşağıdaki XML kodu yardımıyla text alanı ekliyoruz.
<EditText
android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message/>
android:layout_width ve android:layout_height özelliklerinden bahsettik.
- android.id - nesnemiz için benzersiz bir ad tanımlaması yaptığımız niteliktir. Bu ismin benzersiz olması gerekir. Çünkü program kodlarını yazarken bu alanlara erişimi bu isim üzerinden yapacağız. @ simgesi XML dosyasından herhangi bir resource erişirken kullanmamız gereken bir işarettir. + işareti ise ilk defa bir resourceID tanımlaması yaparken kullanılır.
-android:hint - text alanının boş olduğu durumlarda bu kısımda görünmesini istediğimiz değeri yazdıran niteliktir. Referans olarak @string/edit_message tanımlaması yaparak, values/string.xml dizininde yer alan bu referansı yazdırır.
String Kaynakları Eklemek
values/strings.xml dosyasına kaynaklarımızı tanımlayıp XML üzerinden istenen yerden erişim sağlayabiliriz. Bu çalışmamızda kullandığımız kaynak tanımları aşağıdaki gibidir.
<resources>
<string name="app_name">My First App</string>
<string name="edit_message">Enter a message</string>
<string name="button_send">Send</string>
<string name="action_settings">Settings</string>
<string name="title_activity_main">MainActivity</string>
</resources>
Button Eklemek
Az önce EditText ile eklemiş olduğumuz text alanının devamında, yine LinearLayout içerisine aşağıdaki kod yardımıyla bir button eklemesi yapıyoruz.
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/button_send"/>
Burada butona id ataması yapmadık çünkü activity kodunda şimdilik referans alınmıyor.
XML dosyamız aşağıdaki hâli almış olmalı
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<EditText android:id="@+id/edit_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
Cihaz veya Emülatör ekranında oluşacak olan görüntü.
Performans İpucu: Eğer EditText alanında layout_weight="1" ve layout_width="0dp" tanımlarsanız aşağıdaki görüntüyü elde edersiniz. weight tanımlaması yaptığınızda width özelliğini 0dp yapmalısınız.
Bu düzenleme layout performansını arttırır çünkü genişlik olarak"wrap_content" kullanılırsa, sistem size tamamen alakasız bir genişlik hesaplamak için efor sarfeder. Weight değeri kalan alanı doldurmak için başka bir hesaplama yapar. Burada alınan 1 değeri, wrap_content ile hesaplanan işleme göre sistemi daha hızlı kılar.
Bu düzenlemeden sonra kodumuz;
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<EditText android:id="@+id/edit_message"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:hint="@string/edit_message" />
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/button_send" />
</LinearLayout>
