Ekran Tasarımı (Layout Temel Bilgiler – Mobil Uygulamalar Dersi)

Bu başlık altında düzenler hakkında bilinmesi gereken temel bilgiler ve düzen çeşitleri hakkında bilgi verilecektir. Öncelikle bilmemiz gereken temel bilgileri öğrenelim. Sonrasında düzen çeşitleri hakkında bilgi verilecektir. (Android Programlama ve Uygulama Rehberi isimli kitabımın 6.Bölümü olan User Interface (Kullanıcı Ara yüzü) kısmından alınmıştır. )

User Interface(Kullanıcı Arayüzü) Kavramı

Kullanıcı arayüzü, uygulama ve kullanıcı arasındaki etkileşim ve iletişimi sağlayan bir kavramdır. Kullanıcı arayüzü elemanları, View ve ViewGroup nesneleri yardımıyla oluşturulur. View nesnesi ile ekrana istediğiniz herhangi bir çizimi yapabilirsiniz. Çizilen bu eleman kullanıcı ile etkileşime girebilir. ViewGroup ise hem View hem de diğer ViewGroup elemanlarını tutmayı sağlayan nesnelerdir.

View nesnelere örnek olarak; butonlar, text alanları verilebilir. Kullanıcı bu kontroller ile iletişim ve etkileşimde bulunur.

ViewGroup nesnelerine örnek olarak; linear veya relative düzenleri verilebilir. Kontroller bu düzenlere yerleştirilir.

Yukarıdaki grafik aradaki ilişkiyi en iyi şekilde göstermektedir. ViewGroup nesneleri, View elemanlarını içerisinde tutabilen ve bunları düzenleyebilen yapılardır. Bu yapılar görünmezler. Temel amacı; kontrolleri tutmak ve bunları dizayn etmektir. View nesneleri ise, kullanıcı girişini veya etkileşimini sağlayan kontroller ve widget nesnelerini ifade etmektedir.

Layouts(Düzenler) Hakkında Temel Bilgiler

Layout(Düzen), kullanıcı arayüzü için görsel bir yapı tanımlamak için kullanılır. Activity gibi bir bileşen için tasarım yapmak istediğimizde düzenleri kullanırız.

Layout yani düzenleri iki şekilde oluşturabiliriz;

XML Etiketleri; Android sistemin sağlamış olduğu etiketler yardımıyla XML dosya yapısında arayüz tasarlayabiliriz. En çok tercih edilen yöntemdir. En büyük avantajı uygulamanın tasarım ve kodunun birbirinden ayrılmasını sağlamasıdır. Java Kodları; XML dosya yapısını kullanmadan, doğrudan Java kodları ile arayüz tasarımı yapılabilir. İhtiyaç halinde tercih edilir.

XML Etiketleri ile Arayüz Tasarlamak

XML etiketlerini kullanarak kullanıcı arayüzü tasarlayabilirsiniz. Her bir kontrol için sistem tarafından tanımlı etiketler vardır.  Her bir düzenin bir kök elamanı olmalıdır. Diğer tüm kontroller bu kök elemana yerleştirilir. Aşağıda örnek bir kullanım gösterilmiştir

<?xml version="1.0" encoding="utf-8"?>
<!--LinearLayout: bu düzen kontrollerin yatay veya dikey yönde hizalanmasını sağlar. Root yani kök elemanı bu düzendir. Aşağıdaki kontroller bu kök düzene yerleştirilmiştir.-->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
         <!--EditText: Kullanıcıdan veri girişi alabilmek için kullanılır.-->
    <EditText
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:hint="Mesajınızı giriniz..." />
    <!--Button: Kullanıcın eylemleri gerçekleştirmesi için kullanılır.-->
    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Gönder" />
</LinearLayout>

XML Dosyasını Java Koduna Yüklemek

XML dosya yapısı kullanarak tasarladığımız arayüzü Java koduna yüklemek için setContentView() metodunu kullanırız. Bu metodu, Activity bileşeni içinde bulunan onCreate() metodu içinde çağırmalıyız. Yukarıda hazırladığımız XML dosyasının ismi activity_main.xml olsun. Bu dosyayı yüklemek için aşağıdaki kodu kullanırız.

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
}

Uygulamayı çalıştırdığımızda aşağıdaki gibi bir sonuç gösterilir.

Sonraki yazıda Linear Layout düzeni hakkında bilgi vereceğiz. Şimdilik bu kadar…