Bu derste Android etkileşim içinde layout-dosya oluşturmayı öğreneceğiz.Sonra XML kodları inceleyeceğiz ve ekranın pozisyonunun nasıl ayarlanması gerektiğini öğreneceğiz…
1 – Etkileşim içinde Layout – dosya oluşturma
Geçen derste etkileşimin ( Activity) ne olduğunu öğrendik. Etkileşim, layout dosyayı okuyor ve layout’un içindekilerini yansıtıyor. Bu derste etkileşimin hangi layout’u çalıştırması gerektiğini nereden anladığını da göreceğiz.
Şimdi yeni projeyi açalım:
- Project name: P004-LayoutFiles
- Build Target: Android 4.2
- Application name: LayoutFiles
- Package name: tr.androidApp.LayoutFiles
- Create Activity: MainActivity
Proje geliştirdiğimiz zaman etkileşim için bir java – klas açılıyor.
Proje açıldığında ve etkileşim çalıştığı zaman uygulama bu klasın metodunu çağıracak. Bu metodları (Fonksiyonları) kodlayarak etkileşimin davranışını değiştirebiliriz.
Projeyi yaratırken ve etkileşimi belirlendiği zaman ona MainActivity ismi veriyorduk.
MainActivity yaratıldığı zaman Eclipse aynı zamanda bir java klas yaratıyor. Şimdi bu klası inceleyelim:src/ tr.androidApp.LayoutFiles /MainActivity.java
MainActivity’yi çift tıklandığında karşımıza böyle bir pencere gelecek:
Adres olarak program dosyanın ID’sini kullanıyor. Bu ID’lerin dosya yolu şu şekilde: gen/ tr.androidApp.LayoutFiles /R.java ve program bu yolu otomatik olarak yaratıyor.
Bu dosyayı açabilirsiniz ama değişiklik yapmanızı şimdilik tavsiye etmiyorum. Proje R klasta tüm ID’leri tutuyor. Res/layout/main.xml dosyasını açalım ve orada nelerin var olduğuna bakalım
Uygulamayı çalıştıralım (CTRL+F11).
Etkileşim main.xml dosyanın içeriğini yansıttı. Şimdi başka bir dosyanın içeriğini yansıtmayı deneyelim. Bunu yapmak için yeni bir layout dosya yaratacağız. Mesela myscreen.xml. res/layout dosyasını seçelim ve “yeni dosya yarat” tuşuna basalım.
Karşımıza böyle bir pencere gelecektir:
File: seçiminde myscreen.xml ismini girdikten sonra Finish butonuna basacağız.
Bu dosyayı açalım ve Properties’i kullanarak TextView’u ekleyelim. Mesela “Bu ekranın özellikleri main.xml değil myscreen.xml dosyada belirleniyor”.
Aynı anda Eclipse bize hata oluştuğunu bildirecektir.
[I18N] Hardcoded string “…”, should use @string resource. Şimdilik bu hatayı dikkate almayalım. Sonraki derslerde onun nasıl çözüleceğini de öğreneceğiz. R.java dosyasında değişikliklerin oluşması için mutlaka projeyi kaydedelim: CTRL+ SHIFT+S. Şimdi etkileşimi öyle ayarlayalım ki layout main.xml’i kullanmasın. Fakat onun yerine yeni myscreen.xml layout’u kullansın. MainActivity.java dosyasını açalım ve SetContentView satırını değiştirelim. R.layout.main yerine R.layout.myscreen değerini gireceğiz.
Değişiklikleri kaydedelim ve uygulamayı çalıştıralım.
Ekranda görüyoruz ki etkileşim bizim yeni myscreen.xml dosyadan bilgi okumuş.
2 – Layout – dosya XML şeklinde
Main.xml açıldığında onu bir görsel olarak karşınızda görüyorsunuz. Yani ekranda ise Main.xml’ın nasıl görüneceğini gösteriliyor. Aşağıda iki tane düğüme görebilirsiniz: Graphical Layout ve main.xml. Şimdi main.xml’i açalım.
Burada xml isimleri View elementlerin klaslarıdır, tırnak işareti içerisinde olan uzantılar ise bizim Properties sekmede değiştirdiğimiz View’lerın özellikleridir. Properties sekmede yaptığımız değişiklikleri burada da yapabiliriz. Mesela TextView içeriği değiştirelim. Örnekte “yeni text” yazdık.
Kaydedelim ve Graphical Layout’a açalım.
Genelde Android kitapları yazanlar, layout dosyanın içeriğini xml formatta veriyorlar. XML parçaları kopyalayıp yapıştırabiliriz. Bu bize zaman tasarrufu sağlayacaktır.
3 – Layout – dosyanın ekranın pozisyon değişiminde davranışı
Layout dosya ekranın pozisyonu otomatik olarak dikey olarak sayıyor. Mesela tableti yatay pozisyonuna getirdiğimiz zaman ne olacak? Deneyelim.
Myscreen.xml’i değiştirelim. Yeni dört tane butonu ve bir yazı ekleyelim.
Xml kodunu projenize kopyalayabilirsiniz.
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”ekranda dikey pozisyon”>
</TextView>
<LinearLayout
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:id=”@+id/linearLayout1″
android:orientation=”vertical”>
<Button
android:id=”@+id/button1″
android:layout_width=”wrap_content”
android:layout_height=”116dp”
android:text=”Button1″ >
</Button>
<Button
android:id=”@+id/button2″
android:layout_width=”wrap_content”
android:layout_height=”118dp”
android:text=”Button2″ >
</Button>
<Button
android:id=”@+id/button3″
android:layout_width=”wrap_content”
android:layout_height=”122dp”
android:text=”Button3″ >
</Button>
<Button
android:id=”@+id/button4″
android:layout_width=”wrap_content”
android:layout_height=”126dp”
android:text=”Button4″ >
</Button>
</LinearLayout>
</LinearLayout>
Projeyi çalıştıralım. Gördüğümüz gibi dikey pozisyonunda tüm butonlar normal görünüyor.
Şimdi emülatorde Ctrl+F12 basalım. Ekranın pozisyonu yatay şeklini aldı ve bizim dördüncü butonumuz ekrana sığmıyor.
Bu problemi çözmek için bir tane layoutu daha ekleceğiz. Bu layout bizim butonları yatay pozisyonuna yerleştirecek. Etkileşimsiz dikey pozisyonda dikey layoutu kullanacak ve yatay pozisyonda yatay layoutu kullanacak. İlk önce yeni bir klasör oluşturalım res/layout-land ve onun içinde myscreen.xml dosyayı. Bu dosyayı yatay pozisyonda kullanacağız.
Klasör oluşturmak için res klasöre farenin sağ düğmesine basıyoruz(res, New > Folder, Folder name = layout-land).
Sonra yeni bir xml dosya oluşturacağız (layout-land, New > Android XML File, File name = myscreen.xml) ve Finish butonuna basıyoruz.
Aşağıdaki kodu yeni myscreen.xml dosyaya kopyalayınız.
<?xml version=”1.0″ encoding=”utf-8″?>
<LinearLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
android:orientation=”vertical”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<TextView
android:id=”@+id/textView1″
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”ekranda yatay pozisyon”>
</TextView>
<LinearLayout
android:layout_height=”wrap_content”
android:layout_width=”match_parent”
android:id=”@+id/linearLayout1″
android:orientation=”horizontal”>
<Button
android:text=”Button1″
android:id=”@+id/button1″
android:layout_height=”100dp”
android:layout_width=”100dp”>
</Button>
<Button
android:text=”Button2″
android:id=”@+id/button2″
android:layout_height=”100dp”
android:layout_width=”100dp”>
</Button>
<Button
android:text=”Button3″
android:id=”@+id/button3″
android:layout_height=”100dp”
android:layout_width=”100dp”>
</Button>
<Button
android:text=”Button4″
android:id=”@+id/button4″
android:layout_height=”100dp”
android:layout_width=”100dp”>
</Button>
</LinearLayout>
</LinearLayout>
Uygulamayı çalıştıralım Ctrl+F11
Gördüğünüz gibi kodumuz başarıyla çalışarak yeni layout’ta, butonları ekrana sığdırarak düzgün bir şekilde görüntüledi.
Bu derste etkileşim içinde layout-dosya oluşturmayı ve Eclipse’te XML kodları gördük. Sonra ekranın pozisyon nasıl değiştirmesi gerektiğini öğrendik. Gelecek dersimizde layout’un çeşitleri olan LinearLayout, TableLayout, RelativeLayout ve AbsoluteLayout’u inceleyeceğiz. Yeni derslerde görüşmek üzere Technopat’ı takip etmeye devam edin…
Text View altınada bir buton ekliyorum yazı çok fazla olduğunda butonun üzerinden geçiyor yada buton görünmüyor leyaut çeşitlerini denedim bir türlü olmadı…TextView in yüksekliğine 350dp gibi bir değer veriyorum bu seferde farklı ekran çözünürlüklerinde güzel olmuyor…
Text View altınada bir buton ekliyorum yazı çok fazla olduğunda butonun üzerinden geçiyor yada buton görünmüyor leyaut çeşitlerini denedim bir türlü olmadı…TextView in yüksekliğine 350dp gibi bir değer veriyorum bu seferde farklı ekran çözünürlüklerinde güzel olmuyor…
Yardımcı olursanız sevinirim…