Translate

1 Temmuz 2013 Pazartesi

Building a Simple User Interface - Basit bir Kullanıcı Arayüzü oluşturma

Building a Simple User Interface - Basit bir Kullanıcı Arayüzü oluşturma

Android'de grafik kullanıcı arayüzü View ve ViewGroup nesnelerini kullanan bir hiyerarşik yapı içerisinde oluşturulur. View nesneleri textfield veya butonlar gibi kullanıcı arayüzü bileşenlerinden oluşur, ViewGroup nesneleri ise View nesnelerinin nasıl görüntüleneceğini belirleyen grid veya dikey liste gibi görünmez konteyner nesnelerinden oluşur.

Android View ve ViewGroup alt sınıflarına karşılık gelen XML kütüphanesi desteği vermektedir. Böylece kullanıcı arayüzü elemanlarını bir hiyerarşi içinde XML'de tanımlayabilirsiniz.

Şekil 1. Bir ViewGroup  nesnesinin View nesneleri ile birlikte diğer ViewGroup  esnelerini nasıl barındırdığı ile ilgili ağaç yapısı.

Bu yazımızda bir textfield ve bir butona sahip bir XML planının nasıl oluşturulacağı anlatılacaktır.

Create a Linear Layout - Lineer Düzen Oluşturma

res/layout/ klasörünün altında bulunan activity_main.xml dosyasını açın.

Not: Eclipse'de bir düzen (Layout) dosyası açtığınızda, ilk önce Grafiksel Düzen Editörü görüntülenir. Bu editör grafik arayüzünü kolay olarak tasarlayabilmek için kullanılan bir araçtır. Bu yazımızda direk olarak XML ile çalışma anlatılacağından XML editörünü açmak için ekranın altında bulunan activity_main.xml tabını tılamanız gerekmektedir.

activity_main.xml dosyasını içeren ilk projenizi oluşturduğunuz zaman bir RelativitLayout temel görünümü ve bir TextView alt görünümü ile birlikte BlankActivity şablonunu seçmiş oldunuz.

İlk önce <TextView> elemanını silin ve <RelativeLayout> elemanını <LinearLayout> elemanına değiştirin. Daha sonra android:orientation özelliğini ekleyip değerini "horizontal" olarak ayarlayın. Sonuç aşağıdaki gibi olmalı.

<?xml version="1.0" encoding="utf-8"?>
<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" >
</LinearLayout>

LinearLayout android:orientation özelliğinde belirtilen dikey(vertical) veya yatay(horizontal) alt görünümü oluşturmayı sağlayan bir görüntü grubudur (ViewGroup alt sınıfıdır). LinearLayout'ın her elemanı XML dosyasına ekleniş sırası ile ekranda görüntülenir.

Diğer iki özellik olan, android:layout_width ve android:layout_height bütün görünümlerde layout ölçülerini verebilmek için gereklidir.

Bu uygulamada LinearLayout ana layout olduğundan mümkün olan bütün ekran alanını kaplaması gerekir. Bu yüzden yukarıda bahsettiğimiz iki özelliğin de değerlerinin "match_parrent" olarak ayarlanması gerekir. Bu değer uygulamanın açıldığı ekranın ölçülerinde olmasını sağlar.

Add a Textfield - Bir TextField Ekleme

Kullanıcının giriş yapabileceği bir metin alanı oluşturmak için, <LinearLayout> içine <EditText> elemanını eklemeniz gerekir. 

Her View nesnesi gibi EditText nesnesinin özelliklerini belirlemek için XML özelliklerinin tanımlanması gereklidir. Aşağıda <EditText> elemanının <LinearLayout> içinde bildirilme şekli gösterilmiştir.

    <EditText android:id="@+id/edit_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="@string/edit_message" />

Kodlar Hakkında:

android:id

Görünüm için benzeri olmayan bir kimlik tanımlar, bu kimlik sayesinde nesneyi okumak ve işlemek için referans elde edilmiş olunur. Bunlardan daha sonra detaylı olarak bahsedilecek. 

@ işareti XML den herhangi bir kaynak nesnesine referans verileceği zaman kullanılır. @ işaretinden sonra kaynak tipi gelir (Bu örnek için id kullanıldı), ardından bir eğik çizgi ve daha sonra kaynak ismi (edit_message) yazılır. 

Kaynak tipinden önce kullanılan artı işaretine sadece bir kaynak id'sini ilk kez tanımladığınızda ihtiyaç duyulur. EditText elemanına referans olması için uygulamayı derlediğiniz zaman SDK araçları projenizin gen/R.java dosyasında yeni bir kaynak ID'si oluşturmak için ID ismini kullanır. Bir kez bu yolla kaynak ID'si bildirildiğinde diğer referanslarda artı işareti kullanmaya gerek kalmaz. Artı işareti sadece yeni kaynak ID'si belirlerken gereklidir ve stringler veya layoutlar gibi somut kaynakları belirlerken ihtiyaç olmaz.

android:layout_width and android:layout_height

Genişlik ve yükseklik için özel ölçüler kullanmaktansa, "wrap_content" değeri elemanın içeriğine göre şekillenmesini sağlayacaktır. Ancak içeriğindeki değer kadar büyük olur. Eğer bunun yerine "match_parrent" değeri kullanılmış olsaydı eleman bütün ekranı kaplayacaktı, çünkü "match_parrent" değeri EditText elemanının, üst elemanı olan LinearLayout'un ölçülerini almasını sağlayacaktı.

android:hint

TextField boş olduğu zaman görüntülenecek olan yazı değeridir. Kod içine gömülü bir string değeri göstermek yerine "@string/edit_message" değerini kullanmak özel bir dosyaya kaydedilmiş stringi referans etmektedir. Ancak bu stringi tanımlamadığımızdan ötürü bir derleme hatası alacağız. Bir sonraki bölümde string tanımlamalarının nasıl yapıldığından bahsedilecektir.

Not: Bu string kaynağının ismine bakıldığında elemanın ismi ile aynı olduğu görülmektedir. Buna rağmen, kaynaklara yapılan referanslar o kaynağın tipi ile yapılmaktadır. Yani aynı isimleri kullanmak çakışmalara sebep olmaz. Çünkü isimler aynı olsa bile veri tipleri farklı olduğu için sorun yaşanmaz.

Resource nesnesi hakkında

Bitmap, layout dosyası veya string gibi her bir resource (kaynak) nesnesi uygulamanın kaynağı ile ilişkili basit benzersiz bir integer isimdir. 
Her resource projenizin gen/R.java dosyasında tanımlanmış olan resource nesnesine karşılık gelir. android:hint özelliği için değer belirleme ihtiyacı gibi bir durum ile karşılaştığınızda, R sınıfını nesnelerinize bakınmak için kullanabilirsiniz. Aynı zamanda android:id özelliğini kullanan bir görünüm ile ilişkilendirilebilir ve başka bir koddaki referans olabilecek keyfi resource ID'leri de oluşturabilirsiniz.

Add String Resources - String Kaynakları Ekleme

Bir ara yüze bir metin eklemeniz gerektiğinde, kullanacağınız her stringi bir kaynak olarak tanımlamalısınız. String kaynakları kullanıcı arayüzü metinlerinizi tek bir bölgeden idare etmenizi sağlar. Bu metinlerinizi bulmanızı ve güncellemenizi kolaylaştırır. Stringlerinizi kodlarınızdan ayırma aynı zamanda uygulamanızın farklı dillere çevrilmesini kolaylaştırır.

Varsayılan olarak Android projelerinde res/values/strings.xml dosyasının içinde string kaynakları bulunmaktadır. Buraya adı "edit_message" ve değeri "Enter a message" olan yeni bir string ekleyin. (Aynı zamanda "Hello world" stringini kaldırabilirsiniz.)

Hali hazırda bu dosyanın içerisine girmişken "button_send" isminde ve "Send" değerine sahip bir string daha ekleyin. 

string.xml dosyasının görünümü aşağıdaki gibi olmalıdır:
<?xml version="1.0" encoding="utf-8"?>
<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>

Add a Button - Bir Buton Eklemek

Şimdi <EditText> elemanından hemen sonra <Button> elemanını ekleyin:

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/button_send" />
Görüldüğü gibi yükseklik ve genişlik değeri "wrap_content" olarak ayarlanmış böylece butonun büyüklüğü ancak butonun üzerinde yazan metin kadar olacaktır. Bu butonun android:id özelliğine ihtiyacı yoktur. Bunun sebebi activity kodundan her hangi bir referansı bulunmayacak olmasıdır.

Make the Input Box Fill in the Screen Width - Ekran Genişliğinde Giriş Kutusu Dodurma

Şu ana kadar yaptığımız layoutda kullanılan elemanlar içerikleri kadar boyuta sahip oluyordu. Kullanmış olduğumuz EditText ve Button'un görüntülerini aşağıda bulabilirsiniz:




Şekil 2. "wrap_content" olarak ayarlanmış EditText ve Button araçları

Bu kullanım buton için iyi bir kullanım olabilir ancak textfield için iyi değildir. Çünkü kullanıcı çok uzun bir metin yazabilir. Bu yüzden ekranın kullanılmayan alanının genişliği kadar textfield oluşturup bunu sabitlemek hoş bir görünüm sağlayabilir. Bu işlemi yapmak için LinearLayout'un weight özelliği android:layout_weight ile kullanılabilir.

Weight değeri her görünümdeki kalan boşluğun miktarını belirleyen bir sayı değeridir, bu değer yanındaki elemanların kullandığı genişlik miktarına bağlıdır. Bu bir meyve kokteyline benzetilebilir. 2 ölçek şeftali suyu 1 ölçek elma suyu ile karıştırıldığında bu karışımın 3 te 2 sinin şeftali suyu olduğu anlamına gelir. Örneğin bir elemana (Google kaynağında elemanlar için view denilmektedir) 2 ağırlık değeri verildiğinde ve diğer elemana 1 ağırlık değeri verilirse toplam 3 olur. Bu şu anlama gelmektedir; ilk eleman ekranın genişliğinin 2/3 ünün dolduracaktır ikinci eleman ise ekran genişliğinin 1/3 ünü dolduracaktır. Eğer üçüncü bir eleman ekleyip ona da 1 ağırlık değerini verirseniz, bu kez toplam 4 olacaktır ve ilk eleman ekranın 2/4 ünü yani yarısı kadar genişliği, ikincisi 1/4 genişliği ve 3. eleman ise yine 1/4 kadar genişliği kaplayacaktır.

Bütün elemanlar için varsayılan ağırlık değeri 0 dır, Böylece sadece bir eleman için 0 dan büyük bir değer tanımlarsanız, değerini tanımlamadığınız eleman bu elemandan arta kalan bütün ekran genişliğini alır.

    <EditText
        android:layout_weight="1"
        ... />

Genişlik değerini belirlediğinizde layout etkinliğini arttırmak için EditText  lemanının width değerini (0dp) ye değiştirmelisiniz. Genişliği 0 a ayarlamak layout performansını geliştirecektir. Çünkü yükseklik olarak "wrap_content" kullanmak sistemin yüksekliği hesaplamasına ihtiyaç duyar.

    <EditText
        android:layout_weight="1"
        android:layout_width="0dp"
        ... />

Şekil 3 bütün ağırlığın EditText elemanın verildiği zamanki sonucu görüntülemektedir.





Şekil 3. Bütün ağırlığın EditText elemanına verildiği durum görüntülenmekte.

Bütün layout en sonunda aşağıdaki gibi görüntülenecektir:


<?xml version="1.0" encoding="utf-8"?>
<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>
Bu layout, proje oluştururken varsayılan SDK araçları tarafından oluşturulan Activity sınıfına uygulanır. Bunu projenize ekleyip projenizi çalıştırarak sonuçları Android cihazınızda veya Emulator de görüntüleyebilirsiniz.

Hiç yorum yok:

Yorum Gönder