Proje 1. Arayüz Tasarımı

Transkript

1 Proje 1. Arayüz Tasarımı 1. Yeni bir android projesi oluşturalım. Proje ismi: ArayuzTasarimi ve aktivity adı: ArayuzTasarimi olarak yazalım. 2. Projejiyi oluşturduktan sonra bize hazır olarak gelen dosyalar: - ArayuzTasarimi.java -> java kodlarını yazdığımız dosyalar(src) - activity_arayuz_tasarimi.xml programın arayüz tasarımı yaptığımız xml dosyaları (res/layout) - strings.xml: değişkenleri tanımladığımız dosya (res/values) 3. İlk önce activity_arayuz_tasarimi.xml dosyasını açarak projemize başlıyoruz. Bu dosya ArayuzTasarimi.java dosyası ile ilişkilidir ve ilk açılışta görüntülenir. O yüzden bu dosyada program ilk başladığında kullanıcıya göstereceğimiz arayüzü tasararlayacağız. 4. Bu sayfada kullanıcı adı ve şifre girilebilecek bir metin kutusu ve bu metin kutularına ait etiketleri oluşturalım. Bunun için öncelikle ilk açılışta gelen HelloWorld ismindeki TextView elamanını silelim. Silme işlemini xml kodlarında ya da grafik görünümünden yapabiliriz. 5. Kodlarda RelativeLayout var, bu eleman içine başka elamanlar (buton, textview gibi) sürükleyip bırakılarak yerleri değiştirilebilir. Bir de benzer işleve sahip LinearLayout vardır. Bunun içinde ise diğer elamanlar sağa sola (horizantal) ve yukarı aşağı (vertical) hizalanarak tasarım yapılır. activity_arayuz_tasarimi.xml sayfamızda RelativeLayout kodlarını da silelim. Sayfamız tamamen boş hale geldi. Şimdi grafik görünümüne geçelim. Paletten ->Layouts bölümünden LinearLayout (vertical) sürükleyip çalışma alanımıza bırakalım. 6. Çalışma alanımızda bir tane LinearLayout var, kodlarına bakarsak: > bu şekilde olduğunu görürüz. Aşağı doğru hizalama işlemi yapalım. Bunu ister kod sayfasına elle, istersek de LinearLayout seçili iken Properties penceresinden yapabiliriz. Yapacağımız işlem android:orientation="vertical" kodlarını eklemektir. Sonuç olarak kodlar: bu şekli alacaktır. 7. Bundan sonraki eklemelerimizi bu LinearLayout içine yapacağız. Bunun içine iki tane daha LinearLayout ekleyelim. Fakat orientation (hizalama özelliği) özelliğini her ikisinde de horizantal yapalım. Grafik modunda ekleyebiliriz. İlk eklediğimizde tıklayamayabiliriz, bu eklemediğimiz anlamına gelmez. Kodlarına bakarak eklendiğini görebiliriz. Varsayılan olarak yükseklik

2 olarak gelir. Bunu olarak değiştirelim. Kodların son görünümü: android:orientation="horizontal" > android:orientation="horizontal" > şeklinde olacaktır. İlk oluşturduğumuz LinearLayout u veritical yaptığımız için ikinci oluşturduklarımız alt alta geldi. İkinci oluşturduğumuz LinearLayout ları horizantal yaptık, demekki bunların içine gelecek olan elemanlar yan yana hizalanacak. 8. Horizantal olan iki LinearLayout un her ikisinin de içine iki tane form elemanı ekleyeceğiz, bunlar Form Widgets: TextView ve Text Fields: Plain Text (abc). Ekleme işlemini yaparken, önce ekleyeceğimiz LinearLayout u Outline bölümünden seçersek ekleme işlemi daha doğru olur. Ekledikten sonra birinci TextView text özelliğine Ad, ikinci TextView in text özelliğini Soyad olarak değiştiriyoruz. Ayrıca düzgün bir görünüm için her iki TextView in genişliğini 60dip olarak ayarlayalım. Kodların son hali: > android:id="@+id/textview1" android:layout_width="60dip" android:text="ad : " /> <EditText android:id="@+id/edittext1" android:layout_width="wrap_content" android:layout_weight="1" android:ems="10" > <requestfocus />

3 </EditText> > android:layout_width="60dip" android:text="soyad : " /> <EditText android:id="@+id/edittext2" android:layout_width="wrap_content" android:layout_weight="1" android:ems="10" /> bu şekildedir. 9. En dışta bir LinearLayout var, bunun içinde iki tane LinearLayout var. Şimdi en dıştaki LinearLayout un için (diğer iki LinearLayout un altına) bir tane buton ekliyoruz. Butonu eklerken Outline penceresinden en dıştaki LinearLayout u seçiyoruz. Butonun genişliğini fill_parent olarak seçiyoruz ve butonun ismini de Gönder olarak değiştiriyoruz. Buton ekleme kodu:. önceki kodlar. <Button android:id="@+id/button1" android:text="gönder" /> bu şekildedir. İlk sayfamızın tasarımını böylelikle tamamladık.

4 10. Tasarlaığımız xml sayfasının bağlı olduğu java dosyasının kodlamasına geçebiliriz. ArayuzTasarimi.java dosyasını açalım, içindeki hazır olarak gelen kodlar aşağıdaki gibidir: package com.example.arayuztasarimi; import android.os.bundle; import android.app.activity; import android.view.menu; public class ArayuzTasarimi extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_arayuz_tasarimi); //kod yazmaya buradan başlıyoruz. public boolean oncreateoptionsmenu(menu menu) { getmenuinflater().inflate(r.menu.activity_arayuz_tasarimi, menu); return true; kod yazmaya buradan başlıyoruz yazısının bulunduğu satırdan yazmaya başlayalım. Önce xml dosyasındaki elemanları ekleyelim: Button buton = (Button) findviewbyid(r.id.button1); final EditText adbilgi = (EditText) findviewbyid(r.id.edittext1); final EditText soyadbilgi = (EditText) findviewbyid(r.id.edittext2); Bu kodlar gerekli 3 elamanı java dosyasına ekler. Final öneki tanımladığımız değişken isimlerinin başka bir yerde kullanılamayacağı ve değişmeyeceği anlamına geliyor. Şimdide butona tıklama olayını ayarlayalım. Tıklama kodları: buton.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { // kodları buraya yazıyoruz. ); bu kodları diğer kodlarda olduğu gibi tek te yazmıyoruz, ctrl+space ile kod tamamlaması yapıyoruz. Tıklandıktan sonra neler olacağını yazmaya devam ediyoruz: buton.setonclicklistener(new View.OnClickListener() { public void onclick(view v) { String ad = adbilgi.gettext().tostring(); String soyad = soyadbilgi.gettext().tostring(); ArayuzDetay.class); Intent i = new Intent(getApplicationContext(),

5 ); i.putextra("ad", ad); i.putextra("soyad", soyad); startactivity(i); Kodlar bu şekli alıyor. Tıklama işlemi gerçekleştikten sonra ad soyad formundan gelen iki bilgi diğer sayfaya gönderiliyor. 11. Ad soyad bilgilerinin gönderildiği sayfayı oluşturuyoruz. Öncelikle arayuz_detay.xml dosyasının içeriğini oluşturalım. Önce bir LinearLayout ekliyoruz. LinearLayout un içine de iki tane TextView ekliyoruz. LinearLayout un orientation özelliğini vertical yapıyoruz, böylelikle eklediğimiz iki TextView alt alta geliyor. Kodların yapısı: android:text="textview" /> android:text="textview" /> bu şekilde oluyor. Önceki sayfadan gelen ad ve soyad bilgilerini bu TextView lere yazdıracağız. Bu işlemi java dosyasının içinde yapacağız. Öncelikle ArayuzDetay.java dosyasını oluşturalım. Oluşan java dosyasına standart kodları ekleyelim. Kod yapısı: package com.example.arayuztasarimi; import android.app.activity; public class ArayuzDetay extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.arayuz_detay); // kodları yazmaya buradan başlıyoruz. Kodların varsayılan hali bu şekildedir. Bundan sonra kodları yazmaya gecelim. Önce arayuz_detay.xml dosyasında oluşturduğunuz TextView leri ekleyelim:

6 TextView adbilgi = (TextView) findviewbyid(r.id.gelenad); TextView soyadbilgi = (TextView) findviewbyid(r.id.gelensoyad); bunlar textview lere erişmemizi sağlıyor. Daha sonra önceki sayfadan gelen verileri karşılayalım. Bunu da yine Intent ile yapıyoruz: Intent i = getintent(); String ad = i.getstringextra("ad"); String soyad = i.getstringextra("soyad"); kodlar bu şekilde. Önce Intent oluşturuyoruz ve gelen verileri çekiyoruz. Son olarak bu gelen verileri, bu sayfadaki TextView lere atayalım: adbilgi.settext(ad); soyadbilgi.settext(soyad); atama işlemi de tamamlandı. Kodların genel hali: package com.example.arayuztasarimi; import android.app.activity; import android.content.intent; import android.os.bundle; import android.widget.textview; public class ArayuzDetay extends Activity { public void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.arayuz_detay); TextView adbilgi = (TextView) findviewbyid(r.id.gelenad); TextView soyadbilgi = (TextView) findviewbyid(r.id.gelensoyad); Intent i = getintent(); String ad = i.getstringextra("ad"); String soyad = i.getstringextra("soyad"); adbilgi.settext(ad); soyadbilgi.settext(soyad); bu şekilde olacaktır. 12. AndroidManifest.xml dosyasının düzenlenmesi. Bu dosyaya her oluşturduğumuz java dosyası için activity bilgisi ekliyoruz: <activity android:name=".arayuzdetay" android:label="@string/arayuz_detay"></activity> eklerken varsayılan activity nin hemen arkasına ekliyoruz.