24 Haziran 2012 Pazar

Android Kullanıcı Arayüzü 3.Bölüm - Viewlar ve ToDo List Örneği

Şu ana kadar Android'de kullanıcı arayüzü dizaynı ile ilgili temel olarak dikkat edilmesi gerekenlerden ve layoutlardan ve layoutların nasıl kullanıldığından bahsettim. Artık View'ları ve nasıl kullanıldıklarınıda inceleyip basit bir uygulama arayüzü oluşturmanın zamanı geldi.

View Kavramı

Bir android arayüzünde kullandığınız textbox'lar, listler, labellar, butonlar vs. bunlar viewları oluşturur. Aşağı yukarı hepsinin arayüzlerde kullanımları ufak farklarla birbirine benzemektedir.

TextView: Bu view'ın adı sizi yanıltmasın, bu bir textbox değildir. Aksine diğer dillerde textbox'ları kullanıcıya tanıtma amacıyla kullanılan label'lardır. Kullanıcıya bilgi verme amacıyla kullanılan ve kullanıcı tarafın değiştirilemeyen form elemanıdır.
EditText:Bu view diğer programlama dillerinden alışık olduğunuz textboxlardır. Kullanıcıdan girdi almak için kullanılırlar. Bu form elemanı üzerinde kullanıcı uygulamanın izin verdiği her türlü işlemi gerçekleştirebilir.
Buttons:Adından da anlaşıldığı gibi butonlardır. Genellikle onay almak için veya bir sonraki aktiviteye geçmek için kullanılırlar.
ImageView:Arayüzünüzde bir resim görüntelemek istediğinizde kullanmanız gereken viewlardır.
ImageButton:ImageButton view'larını button ve imageview'ın karışımı şeklinde düşünebilirsiniz. ImageButton nesnesinin olması sizi normal butonların üzerinde ikon görüntüleyemediğiniz düşüncesine itmesin. Butonlarınızda da ikon kullanabiliyorsunuz.
ListView:ListView'lar birden fazla veriyi kullanıcıya listeleme amacıyla kullanılan view'lardır.
GridView: GridView'lar ListView'lara benzer yapıdadırlar. Aralarındaki fark ise GridView'ı kolonlara bölerek kullanmanız kolaydır.
Spinner:ComboBox'ların Android Sdk'daki karşılığıdır. Bilmeyenler içinde aşağı doğru açılan liste kutularıdır.
CheckBox ve RadioButton: Diğer dillerdekiyle aynı form elemanlardır ve isimlerinden de anlaşılacağı gibi checkbox'lar birden fazla seçeneği işaretleme olanığı sağlayan işaret kutuları, radioButton ise birden fazla seçenek arasından sadece bir tanesini seçmeyi sağlayan işaret kutularıdır.

ToDo List

Şimdi basit bir ToDo List uygulaması yaparak arayüz tasarlamayı daha iyi görelim. Öncelikle yeni bir Android projesi oluşturarak ToDoList adını verin ve package name'e com.example.todoList girerek android 2.1'i seçin.

Şimdi projemizde arkaplanımızda kullanmak için bir gradient oluşturalım. Proje adınıza sağ tıklayıp new>Android XML File'ı seçin.

Resource type olarakta Shape'i seçip, xml dosyanıza background.xml adını verin.








Şimdi arkaplan renklemizi oluşturmak için background.xml dosyamızı aşağıdaki gibi kodlayalım.



Arkaplanımızı oluşturduktan sonra şimdi kullanıcı arayüzümüzü oluşturabiliriz. Bu işlem için 1 LinearLayout(horizontal) 1 EditText ve 1de ListView'a ihtiyacımız var.

main.xml layout dosyamızın kodu aşağıdaki gibidir.


Son olarak artık aktivitemizin kodlarını da yazarak uygulamamızı çalıştırabilir hale getirebiliriz.


Artık uygulamanızı compile edip emülator üzerinde deneyebilirsiniz. Aktivite kodunda yabancı olduğunuz bazı kısımları açıklamam gerekirse, bir ListView'a aktivite üzerinden eleman eklemek istediğinizde bir adapter nesnesine ihtiyacınız vardır. Genellikle bunun için ArrayAdapter kullanılırken ileride göreceğiniz veritabanı işlemlerinde ise SimpleCursorAdapter kullanılır. Kodumuzda ise eklediğim to-do'ları hafıza tutmak için String olarak bir ArrayList oluşturduk ve EditText'ımızın onKeyEventChanged methodunu kullanarak emülatorümüzün orta D-pad tuşuna basıldığında edittex üzerine kullanıcının girmiş olduğu yazıyı arraylist'imize ekledik ve son olarakta adapter nesnemizin notifyDataSetChanged() methodunu çağırarak ArrayAdapterımıza ArrayList üzerindeki elemanları eklemiş bulunduk.

Şimdilik android üzerinde xml dosyaları kullanarak arayüz oluşturmayı, listView üzerinde veri işlemleri gerçekleştirmeyi gördük. Bundan sonra ise birden fazla aktivitelerle çalışmayı, aktiviteler arasında veri alış-verişini görücez. Bir sonraki yazımda görüşmek üzere.

2 yorum:

  1. Değerli blog kullacısı sitenizi çok beğendik Grandofis mobilyası şirketi olarak paylaşımlarınızı ve makalelerinizin devamını diler teşekkür ederiz...

    YanıtlaSil
  2. erken rezervasyon olarak sitenizdeki paylaşımlar sayesinde büyük bilgi edindik teşekkürler...

    YanıtlaSil