Android Programlama Ders 06 Kullanıcı Arayüzü Tasarımı

featured

Merhaba,

Bu makalemizde text field ve button içeren basit bir kullanıcı ara yüzü tasarlayacağız. Bir sonraki dersimizde de buttona basıldığında text field değerini başka bir etkinlikte kullanacağız.

Bir Android uygulamasında grafik kullanıcı arayüzü View ve ViewGroup nesnelerinin hiyerarşik yapısıyla oluşturulur.  View nesneleri genellikle butonlar, text fieldlar gibi kullanıcı arabirim nesneleridir. Viewgroup nesneleri ise görünmeyen view tanımlamaları içerir. Görünmeyen view tanımlamalarından kasıt XML’deki child yapısıdır aslında. Grid, vertical list gibi child view gibi nesneleri içerir (daha önce asp.net ile uğraştıysanız ne demek istediğimi çok iyi anlayacaksınız).

Android, View ve ViewGroup’ların alt sınıflarına karşılık gelen bir XML sözcük yapısı içerir Böylece kullanıcı arabiriminizde kullanacağınız View’ları bir hiyerarşi kullanarak tanımlayabilirsiniz.

Layoutlar (düzenler ) Viewgroup alt sınıflarıdır. Bu makalemizde LinearLayout ile çalışma yapacağız.

Aşağıdaki resimde View ve Viewgroup nesnelerini içeren bir hiyerarşik yapı örnek olarak verilmiştir.

Androi_ Programlama_Ders_06_Kullanici_Arayuzu_Tasarimi_01

Linear Layout (Doğrusal Düzen) Oluşturma

1. Android Studio içinde res/layoutklasörü içinde activity_my.xml dosyasını açın. (Daha önceki makalelerde BlankActivity şablonu ile oluşturduğumuz “Hello World!” içeren proje ile çalışıyoruz). Component Tree bölümünde RelativeLayout kökü içinde TextView child viewini göreceksiniz.

Androi_ Programlama_Ders_06_Kullanici_Arayuzu_Tasarimi_02

2.

Yukarıda resimde gösterilen alan Preview Pane (Önizleme bölmesi) ‘dir. Preview Pane ilk açıldığında dizayn görünümünde görürsünüz. Text’e tıklayarak gerçekte var olan XML dosyasını görür ve değiştirebilirsiniz. Text’e tıklayın ve XML yapısını inceleyin (1. Maddenin en sonunda TextView ile ilgili verilen bilgiyi XML’de okumaya çalışın). Bundan sonraki adımlarda XML dosyası ile çalışacağız.

  1. <TextView> elemanını silin
  2. <RelativeLayout>elemanını <LinearLayout> olarak değiştirin.
  3. android:orientation özelliği ekleyin ve değerini de “horizontal” olarak ayarlayın.
  4. android:padding özelliklerini ve tools:context özelliğini silin

Değişikliklerden sonra res/layout/activity_main.xml dosyanız şu şekilde olacak:
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:orientation=”horizontal”

android:layout_height=”match_parent”>

</LinearLayout>

Component Tree panelinde kökün artık LineatLayout olduğunu görürsünüz. Bu kök içinde ise şimdilik herhangi bir view yok. android:orientation özelliği tarafından belirlenen dikey ya da yatay child viewlar içerebilir. LinearLayout’un her child’ı XML’deki sırasına göre ekranda belirir.

android:layout_width ve    android:layout_height özelliği boyutlarını ayarladığı için tüm viewlar için gereklidir. LinearLayout kök view’dır ve tamamen ekranı kaplaması için bu özellikleri match_parent olarak belirlenmiştir.

Layout’lar ile ilgili daha detaylı bilgi için https://developer.android.com/guide/topics/ui/declaring-layout.html (erişim tar: 28.12.2014 23:00) adresini ziyaret edebilirsini. Sırası geldikçe bu site üzerinde de bilgiler verilecektir.

Text Alanı Ekleme

Her view nesnesi gibi, EditText nesnesininde özelliklerini XML dosyasında tanımlamanız gerekir.

  1. </LinearLayout> elemanı içinde id değeri @+id/mesaj_duzenle olan bir <EditText> elemanı tanımlayın.
  2. layout_widthve layout_heightözellikleri tanımlayın ve değerini wrap_content olarak belirleyin.
  3. hint özelliği tanımlayın ve değerini mesaj_duzenle yapın.

LineatLayout Root’u altına eklediğimiz EditText child’ı aşağıdaki şekilde oldu:
<EditText android:id=”@+id/mesaj_duzenle”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:hint=”@string/mesaj_duzenle”/>

id özelliği eşsiz bir değerdir ve daha sonra bu EditText’e ulaşmak için kullanacağız. @ sembolü XML’de herhangi bir kaynaktaki nesneye atıf yaparken gerekli bir imzadır. Bunu kaynak türü takip eder (@+id dendiğinde kaynak türü id’dir), daha sonra / işareti ve kaynak adı yer alır. @ : atıf yapılıyor, +id : kaynak türü id, /mesaj_duzenle : kaynak adı mesaj_duzenle demektir.

+ işaretinden sonra yazılan kaynak tipi daha önce hiç tanımlanmamışsa yani ilk defa bu kaynak tanımlanıyorsa gereklidir. Uygulamayı derlerken SDK araçları projenizin gen/R.java dosyasında tanımlanan EditText kaynağını kullanır. + işareti stringler ve layout’lar gibi somut nesneler için gerekli değildir (EditText özellikleri içinde EditText içerisindeki string ifadeyi belirleyen hit özelliğinde + işareti kullanılmamıştır). R.java dosyasını düzenlememelisiniz.

android:layout_width ve android:layout_height özellikleri ile EditText’in genişlik ve yükseklik değeri belirtilebilir. Özel bir değer girmek yerine “Wrap_content” girilerek genişlik ve yüksekliği bu view’in ihtiyaç duyduğu kadar olması gerektiği söylenmiştir. match_parent olarak değer girilmiş olsaydı ebeveynini dolduracaktı, ebeveyni de linearlayout olduğu için ve linearlayout’da ekranı kapladığı için bu EditText’de ekranı kaplayacaktı.

android:hint özelliği ile Text alanı boş iken gösterilecek varsayılan bir string belirtmiş olduk. Direkt bir değer yazacak olsaydık android:text özelliği ile yazardık. Değer olarak yazılmış bir string yerine @string/mesaj_duzenle kullandık ki bunun amacı ayrı bir sayfada yazılmış string değerini (mesaj_duzenle) alacak demektir. + kullanmadık çünkü bu somut bir kaynağa atıfta bulunacak. Ayrıca henüz mesaj_duzenle stringini tanımlamadık derleyicideki hatayı bu yüzden görüyorsunuz ya da run dediğinizde göreceksiniz. Bir sonraki adımda string tanımlayarak bu hatayı da ortadan kaldırmış olacaksınız.

Not: Bu tanımlanacak kaynak stringin ID değeri mesaj_duzenle olmalıdır. Çünkü yukarıda android:hint özelliğinde bu id’den alacağını belirttik

String Kaynakları Ekleme

Varsayılan olarak Android projeniz string kaynaklarını res/values/strings.xml yolunda tutar. İşte tam burada “mesaj_duzenle” adlı yeni bir string ekleyeceğiz ve değerini de “Lütfen bir şeyler gir” olarak belirleyeceğiz.

  1. Android Studio içinde res/value yolundaki strings.xml dosyasını açın
  2. “mesaj_duzenle” adında string için bir satır ekleyin ve değerini de “Lütfen bir şeyler gir” olarak belirleyin
  3. “buton_gorunen” adında string içi bir satır ekleyin ve değerini de “Gönder” olarak belirleyin. (Bu stringi de Buton oluşturduğumuzda kullanacağız)
  4. Değeri “Hello World!” olan strini silin. Bunu kullanmayacağız.

strings.xml dosyanız aşağıdaki gibi:

<?xml version=”1.0″ encoding=”utf-8″?>

<resources>

<string name=”app_name”>My Application</string>

<string name=”action_settings”>Settings</string>

<string name=”mesaj_duzenle”>Lütfen bir şeyler gir</string>

<string name=”buton_gorunen”>Gönder</string>

</resources>

Kullanıcı arayüzünde kullanacağınız her string için burada bir kaynak belirtin. Bu string kaynağı tek bir yerden tüm uygulamanın string kaynaklarını yönetmenize yardımcı olacak. Farklı dillere göre ayarlanması da kolay olur.

Buton Ekleme

  1. activity_main.xml dosyamızı tekrar açalım. (EditText’imize “Lütfen bir şeyler gir” değerinin geldiğini göreceksiniz)
  2. EditText elemanından sonra, tabiki linearlayout root elemanı altında <Button> elemanı tanımlayın ve bunu kendiniz yapmayı deneyin. andriod:hint kullanarak değil android:text özelliği kullanarak görünecek değerini verin.

Kendi kendinize oluşturduğunuz buton aşağıdaki şekle benziyorsa şuana kadar anlatılanları çok iyi anlamışsınız demektir.

<Button

android:id=”@+id/buton_gorunen”

android:text=”@string/buton_gorunen”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

Ancak butona herhangi bir atıfta bulunmayacağımız ve butonun herhangi bir değerini de kullanmayacağımız için android:id özelliği eklemenize gerek yok.

activity_main.xml dosyamızın içeriği son olarak şu halde:
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:orientation=”horizontal”

android:layout_height=”match_parent”>

<EditText android:id=”@+id/mesaj_duzenle”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content”

android:hint=”@string/mesaj_duzenle”/>

<Button

android:text=”@string/buton_gorunen”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

</LinearLayout>

Şimdi uygulamanızı çalıştırın ve test edin. Henüz butonumuz çalışmıyor, ama EditTexte yazabilirim. Bir sorun var değil mi? EditText’e kullanıcı uzunca bir değer girerse EditText de büyüyor. Bunun sebebi width ve height değerini wrap_content yapmış olmamız yani içeriğe göre uydur demiş olmamız. Şimdi bunu düzeltelim.

android: layout_weight özelliği sayısal değer alır ve kardeşler tarafından tüketilen miktara göre bir orandır. Bizim örneğimizde bir parent var buda LinearLayout. LinearLayout ekranı kaplıyor. EditText ve Button kardeş ve LinearLayout’un çocukları. EditText’in layout_weight özelliğine 1, buttonun layout_weight özelliğine 2 verirsek LinearLayout’u 3’e böler, 1 birimlik alana EditText, 2 birimlik alana da butonu ayarlar. Tüm viewlar için varsayılan değeri 0’dır. Tasarımda sadece bir view’ın layout_weight değeri belirlenirse, diğer viewların ihtiyaç duyduğu alanlar verilir sonra kalan alan olursa belirlenen değer kadar alan da, layout_weight değeri belirlenen view’a verilir.

Kalan alanı EditText ile doldurmak için aşağıdaki adımları gerçekleştirin:

  1. EditText elemanının layout_weight özelliği ekleyin ve değerini 1 yapın (değişikliği görün)
  2. EditText elamanının layout_width özelliğinin değerini 0dp yapın. Bunu sıfır yapmamızın sebebi biraz da performansı artırmak istememiz. Çünkü 1. Maddede yaptığımız ayar butonu oluşturduktan sonra geri kalan alanın tamamını EditText’e ayıracak demektir. Burada bir width ayarlanacağı için 2. Maddede 0 yaptık ki tekrar boş yere bir hesaplama yapmasın

activity_main.xml dosyamızın son hali:

<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android”

xmlns:tools=”http://schemas.android.com/tools”

android:layout_width=”match_parent”

android:orientation=”horizontal”

android:layout_height=”match_parent”>

<EditText android:id=”@+id/mesaj_duzenle”

android:layout_weight=”1″

android:layout_width=”0dp”

android:layout_height=”wrap_content”

android:hint=”@string/mesaj_duzenle”/>

<Button

android:text=”@string/buton_gorunen”

android:layout_width=”wrap_content”

android:layout_height=”wrap_content” />

</LinearLayout>

Şimdi uygulamanızı çalıştırarak test edin. Sonraki dersimizde butona tıklandığında nasıl işlemler yaptırabiliriz bunu inceleyeceğiz.

5 comments

  • iyi günler.bir proje için android studio ile ekranı ikiye bölmem ve her iki ekranda da gerçek zamanlı video görüntülemem gerekiyor. Andoid studio hakkında çok bilgim yok yeni başladım.yapabilir miyim ya da nasıl yapabilirim yardımcı olursanız sevinirim.

  • Hocam Android Studio’yu kurdum. Preview bölümünde görsel gözükmüyor. Lütfen Android Studio’yu güncelleyin diyor.Ben daha yeni indirdim buna rağman güncellememi(update) istiyorsa bunu nasıl yapmalıyım?
    Rendering Problems This version of the rendering library is more recent than your version of Android Studio. Please update Android Studio
    Tam olarak bu yazı geliyor

    • Uygulamada kullanmaya çalıştığınız API seviyesi ile Preview bölümündeki API seviyesi birbirine uyumlu değildir. Preview bölümünde bazı ayarlamalar var (keşke görsel ekleyebilsem buraya) örneğin cihaz yatay mı dikey mi, hangi tema (holo), hangi cihaza göre gösterilecek (Nexus4 vs.), işte tam bu preview ayarlamaların en sağında API seviyesi var. Bu API seviyesi ile preview bölümünde hangi seviyede gösterim yapılacak bunun ayarlaması yapılır. Uygulamanız ile aynı seviyede bir API seçin sorun düzelecektir. Eğer dediğim ayarlamayı bulamazsanız tekrar yazın, bu hata için görsel içerikli yeni bir makale yazalım

  • hocam herşey iyi güzelde keşke daha fazla görsellerle desteklesen makaleyi 1 numara olur

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Lütfen işlem sonucunu yazın *