Xamarin.Android : Arayüz Üzerine

   Android makale dizisinin önceki makalelerini daha çok tanışma ve arka taraftaki mimari üzerine ayırmıştım. Önemli olduğunu düşündüğüm bu konularda yeterli bir bilgi düzeyine ulaştığımızı düşünerek artık yavaş yavaş programlama ayağına doğru geçiş yapmayı düşünüyorum. Bu makalemde arayüz tasarımına değineceğim.

   Masaüstü uygulama geliştiricileri için arayüz tasarımı görece daha kolaydır, doğrudan kodla ya da Visual Studio içerisinde yer alan tasarım bileşeni ile yapılabilir. Visual Studio üzerinde yaptığınız tasarımlarında arka planda kod dönüştürüldüğünü düşünecek olursak; aslında masaüstü için arayüz tasarımının tek bir yolu vardır. Öte yandan Xamarin’i bir kenara bile bıraksak Android üzerine arayüz geliştirmenin iki yolu vardır. Android ile arayüz geliştirmeyi WPF ya da web tabanlı uygulamalar ile kıyaslayabiliriz aslında; kod ile ya da bir markup dosyası ile… Xamarin.Android tasarımcısı da bu konsepti devam ettirmekte. Xamarin.Android ile arayüz geliştirmek kod içerisinden ya da xml tabanlı tanımlama dosyaları ile yapılabilmekte.

   “Merhaba” makalesinde oluşturduğumuz projemize geri dönüp arayüz açısından inceleyecek olursak kod ile bir arayüz oluşturmanın söz konusu olmadığını görebiliriz.

SetContentView(Resource.Layout.Main);

   Activity1 sınıfı içerisinde yer alan yukarıdaki satır bize arayüz tanımlamasının Resource -> Layout klasörü altında yer alan Main.axml dosyası yardımıyla yapılacağını anlatmakta. Solution Explorer’dan bu dosyayı açtığımızda Xamarin.Android arayüz tasarımcısı karşımıza çıkacaktır;

Xamarin-Android arayüz tasarımcısı

 

   Bu tasarımcının da aynı ASP.Net’te olduğu gibi tasarım ve kaynak kodu için sekmelere sahip olduğunu görebilirsiniz.  Arayüzü tasarım sekmesinde Toolbox’tan sürümle bırak ile bileşen ekleyebilir, Properties pencerisi yardımıyla seçili bileşenin özelliklerini değiştirebilirsiniz. Dilerseniz Source sekmesine geçerek xml üzerinden de düzenleme yapmanız mümkün;

Arayüz tasarımcısı "source" görünümü

   Source sekmesindeki xml’i dikkatlice inceleyecek olursanız, text alanında yer alan ifade dikkatinizi çekecektir, arayüzde gördüğümüz “Hello World, Click Me!” yazısı yer almıyor. Bu alanda yer alan özel ifade sayesinde butonun üzerine yazılacak olan yazı kaynak (resource) dosyasından çekilmektedir. Bu ifade Android’e text alana yazılacak yazıyı string kaynak dosyası içerisinde yer Hello anahtarı ile bulması gerektiğini anlatmaktadır. string kaynak dosyasının yeri ise Resources –> Values  klasörü altında Strings.xml’dir.

Strings kaynak dosyası

   Strings.xml dosyasının özellikleri incelenecek olursa Build Action olarak AndroidResource değerine sahip olduğu görülecektir. Bu sayede derleme sırasında ara bir işleme tabi tutularak kaynak olarak paket içerisine dahil edilebilmektedirler. Derleme sırasındaki bu ara işlem kod içerisinden de bu ifadelere ulaşmamızı sağlayacak olan sınıflar oluşturacaktır. Bu örnek için konuşacak olursak; kod içerisinden bu string ifadenin id’sine Resource.String.Hello şeklinde ulaşabiliriz. Bu id yardımıyla da aşağıdaki kod parçacığındaki gibi yerelleştirilmiş string’e ulaşabiliriz;

Resources.GetString(Resource.String.Hello);

   Aynı işlemi Design sekmesine geçerek görsek olarak da yapabilmemiz mümkün. Bunu için butonumuz seçili iken Properties penceresinden text özelliğini seçerek yanında bulunan “…” butonuna basmak yeterli olacaktır. Bu buton bize proje ve framework içerisinde yer alan kaynak dosyalarını listeleyerek bir seçim yapabilmemizi sağlayacaktır.

Arayüz üzerinden kaynak seçimi

   Text değerini doğrudan yazmak yerine bu şekilde bir kaynak dosyasından okutmamızın amacı uygulamamızın birden fazla dile aynı anda destek vermesidir. Aynı diğer Android uygulamalarında olduğu gibi Xamarin.Android uygulamaları da yerelleştirme desteğine sahiptir. Bu konuyu ayrı bir makalede paylaşmayı planlıyorum.

  Design sekmesinde butonumuz seçili iken properties penceresini inceleyecek olursak burada, masaüstü uygulamalardan alışkın olduğumuz, olayların listelenmediğini görebiliriz. uDolayısıyla da, örneğin, butona basıldığında tetiklenmesini istediğimiz kod bloğunu arayüz tasarım ekranında verebilmemiz mümkün değil. Bu aslında mantıklı bir yaklaşım; çünkü Main.axml dosyası sadece bir arayüz tasarım dosyası ve içerisinde iş mantığına dair bir bilgi barındırmamalı. Bu sayede birden fazla aktivite tarafından kullanılabilecek olan bu arayüz tanımı, a aktivitesinde butona tıklandığında bir iş yaparken b aktivitesinde tamamen başka bir iş yapabilecektir. Bu da bize iş mantığı ile arayüzü net çizgilerle ayırma şansı sunmakta. Tabi bu durumda butona tıklanması durumunda çalışacak kodu nasıl belirtebiliriz sorusu akıllara gelecektir. Bu sorunun cevabı için Activity1 sınıfımıza geri dönmeliyiz. Sınıfımızın içinde yukarıda ilettiğim şekilde aktiviteye ait arayüz tanımının ilişkilendirildiği satırın hemen ardından aşağıdaki kod gelmekte;

var button = FindViewById<Button>(Resource.Id.MyButton);

button.Click += delegate {
    button.Text = string.Format("{0} clicks!", count++);
};

  Bu kod parçacığını inceleyecek olursak; ilk satırında buton nesnemize ulaştığımız görülecektir. “Görünüm içerisinde tanımlı olan ve id’si MyButton olan nesneyi bul ve onu Buton olarak bana getir” diyoruz. Devamında da alışkın olduğumuz bir kod bloğu yer alıyor. Butonun click olayına bir delegate bağlıyoruz. Bu sayede butona basıldığında yapılacak olan için tanımlamış olduk. Bu noktada Resource.Id.MyButton ifadesi tanıdık gelecektir. Main.axml dosyasına geri dönerek Source segmesine geçiş yapacak olursak buton’u id alanı için "@+id/MyButton" değerinin verildiğini görebiliriz. Aynı string ifadelerde olduğu gibi arayüz bileşenlerinin id alanları için de bu şekilde tanımlama yaparak kod içerisinde kullanabileceğimiz referans sınıfların otomatik olarak üretilmesini sağlayabiliriz.

 

   Şimdiye kadar paylaştıklarımda bir arayüz tanım dosyası yardımıyla nasıl arayüzler oluşturabileceğimiz konusunda fikir sahibi olduğunuzu tahmin ediyorum. Bu yöntem en çok kullanacağınız yöntem olacaktır diye tahmin etmekle birlikte, elimizdeki diğer alternatifi de paylaşmam doğru olacaktır; kod üzerinden arayüz oluşturma.

var layout = new LinearLayout(this) {
    Orientation = Orientation.Vertical
};

var button = new Button(this) {
    Text = Resources.GetString(Resource.String.Hello)
};

button.Click += delegate {
    button.Text = string.Format("{0} clicks!", count++);
};

layout.AddView(button);

SetContentView(layout);

  Yukarıdaki kod parçacığıyla aslında daha önceden Main.axml dosyası ile yaptığımız işlemi tekrar etmiş olduk. Programsal olarak arayüzümüzü oluşturduk. Öncelikle LinearLayout oluşturup dikey oryantasyonda olmasını talep ettik. Ardında string kaynak dosyasından aldığımız Hello ifadesini de kullanarak bir buton oluşturduk. Butonumuzun tıklanması durumunda çalışacak olan kodu eklememiz ardından da butonu layout içerisine ekledik. Son olarak da layout’u aktivitenin görünümü olarak ayarladık.

Fatih Boy

Ankara'da yaşayan Fatih, bir kamu kurumunda danışman olarak çalışmaktadır. ALM süreçleri, kurumsal veri yolu sistemleri, kurumsal altyapı ve yazılım geliştirme konularında destek vermektedir. Boş zamanlarında açık kaynak kodlu projeler geliştirmeyi ve bilgisini yazdığı makalelerle paylaşmayı seven Fatih, aynı zamanda Visual C# ve Visual Studio teknolojileri konusundan Microsoft tarafından altı yıl üst üste MVP (En Değerli Profesyonel) ödülüne layık görülmüştür. İş hayatı boyunca masaüstü uygulamaları, web teknolojileri, akıllı istemciler gibi konularda Asp.Net, Php, C#, Java programlama dilleri ve MySql, MsSql ve Oracle gibi veritabanı yönetim yazılımları ile çalışmıştır. İngilizce ve Türkçe olarak yayınlanan makalelerini gerek İngilizce bloğunda, gerekse de Türkçe bloğunda bulabileceğiniz gibi web sitesinden de açık kaynak kodlu geliştirdiği yazılımlarına ulaşabilirsiniz. vCard - Twitter - Facebook - Google+

1 Yorum

  1. ibrahim   •  

    Çok teşekkürler, geç kalınca devamı gelmeyecek diye endişelenmiştim :]

Bir Cevap Yazın

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