MOBİL UYGULAMA GELİŞTİRME

Transkript

1 MOBİL UYGULAMA GELİŞTİRME Hedefler Bu üniteyi çalıştıktan sonra; Layout çeşitlerinin ve aralarındaki farkları açıklayabilir, Android projesinde farklı Laoyut kullanabilir, Android projesinde TextView, EditText ve Button bileşenlerini kullanabilir.

2 2 Layout Çeşitleri ve Görsel Bileşenler Mobil Uygulama Geliştirme İçindekiler LAYOUT ÇEŞİTLERİ VE GÖRSEL BİLEŞENLER Layout Çeşitleri Görsel Bileşenler TextView EditText Button

3 Mobil Uygulama Geliştirme Öğr.Gör. Nevzat TAŞBAŞI Layout Çeşitleri Android uygulamalarında Activity lerde bulunacak bileşenler layoutlar yardımıyla oluşturulur. Layoutlar bileşenlerin ekran üzerinde nasıl yerleşeceğini belirlemek için kullanılır. Birden fazla layout çeşiti vardır. Android uygulamalarında birden fazla layout çeşidi kullanılabilir. Linear Layout Bu layout yapısında bileşenler ekrana düz bir hat üzerinde eklenirler. Eğer layout un android:orientation özelliği vertical olarak belirlenirse bileşenler dikey olarak, horizontal olarak belirlenirse bileşenler yatay olarak yanyana gelecek şekilde eklenecektir. <LinearLayout xmlns:android=" tools:context=".mainactivity" android:orientation="horizontal" > android:text="merhaba" /> android:text="android" /> android:text="programlama" /> </LinearLayout> Horizontal yerleşim <LinearLayout xmlns:android=" tools:context=".mainactivity" android:orientation="vertical" > android:text="merhaba" /> android:text="android" />

4 4 Layout Çeşitleri ve Görsel Bileşenler Mobil Uygulama Geliştirme android:text="programlama" /> </LinearLayout> Relative Layout Vertical yerleşim Ralative layout türünde bileşenler ekrana birbirlerinin pozisyonlarına göre yerleştirilirler. Bir bileşen diğerinin sağında, solunda, üstünde veya altında olabilir. Eclipse de proje tasarım sırasında ekranın varsayılan layoutu Relative Layouttur. Bir bileşen diğer bileşenin; solunda gösterilmesi isteniyorsa layout_toleftof, sağında gösterilmesi isteniyorsa layout_torightof, üzerinde gösterilmesi isteniyorsa layout_above, altında gösterilmesi için layout_below ile diğer bileşenin id değeri yazılır. Bir bileşen diğer bileşenin; sol kenarına göre konumlanacaksa layout_alignleft, sağ kenarına göre konumlanacaksa layout_alignright, üst kenarına göre konumlanacaksa layout_aligntop, alt kenarına göre konumlanacaksa layout_alignbottom kullanılır. Bir bileşen ebeveyninin; sol kenarına göre konumlanacaksa layout_alignparentleft, sağ kenarına göre konumlanacaksa layout_alignparentright, üst kenarına göre konumlanacaksa layout_alignparenttop, alt kenarına göre konumlanacaksa layout_alignparentbottom kullanılır. Bileşen ekranın dikeyde ortasında olması için layout_centervertical, yatayda ortasında olması için layout_centerhorizontal kullanılır. <RelativeLayout xmlns:android=" android:orientation="vertical" tools:context=".mainactivity" >

5 Mobil Uygulama Geliştirme Öğr.Gör. Nevzat TAŞBAŞI 5 android:id="@+id/textview1" android:text="merhaba" /> android:id="@+id/textview2" android:layout_alignleft="@+id/textview1" android:layout_below="@+id/textview1" android:text="android" /> android:id="@+id/textview3" android:layout_alignleft="@+id/textview2" android:layout_below="@+id/textview2" android:text="programlama" /> </RelativeLayout> Relative Layout Absolute Layout Absolute layout türünde her bileşenin ekranda bulunması istenilen yer, koordinat verilerek belirlenir. Bilşenin ekrandaki konumunu belirlemek için layout_x ve layout_y etiketleri kullanılır. Konum değerleri dp olarak belirlenebilir. dp: Ekranın farklı cihazlarda 160,240,360,480,600,720 parçada biridir. Ekran değiştiği değiştikçe tekrar hesaplanır. <AbsoluteLayout xmlns:android=" android:orientation="vertical" tools:context=".mainactivity" > android:id="@+id/textview1" android:layoutdirection="" android:text="merhaba" /> android:id="@+id/textview2" android:layout_x="40dp" android:layout_y="40dp" android:text="android" /> android:id="@+id/textview3"

6 6 Layout Çeşitleri ve Görsel Bileşenler Mobil Uygulama Geliştirme android:layout_x="80dp" android:layout_y="80dp" android:text="programlama" /> </AbsoluteLayout> Table Layout Absolute Layout Bu layout türünde bileşenler ekrana satırlar halinde getirilir. Satır eklemek amacıyla TableRow etiketi kullanılır. Frame Layout Bir layout içerisinde birden fazla bileşenin üstüste bulunucak şekilde yer alması istenildiğinde kullanılan layout çeşitidir. ScrollView Eğer bileşen ekranda gösterilemeyecek kadar büyükse bileşen kaydırma çubukları yardımıyla gösterilebilir. <ScrollView xmlns:android=" android:orientation="vertical" tools:context=".mainactivity" > android:layout_width="fill_parent" android:layout_height="fill_parent" android:text="6\n1\n2\n3\n4\n5\n\n6\n1\n2\n3\n4\n5\n\n6\n1\n2\n3\n4\n5\n\n6\n1\n2\n3\n4\n5\n\ n6\n1\n2\n3\n4\n5\n\n6\n1\n2\n3\n4\n5\n\n6\n1\n2\n3\n4\n5\n\n6\n1\n2\n3\n4\n5\n\n" /> </ScrollView>

7 Mobil Uygulama Geliştirme Öğr.Gör. Nevzat TAŞBAŞI 7 ScrollView 5. ANDROİD GÖRSEL BİLEŞENLERİ Android programını geliştirirken kullanıcıdan verileri almak, kullanıcıya bilgi vermek, çeşitli olayları tetiklemek amacıyla görsel bileşenler kullanılır. 5.1 TextView Ekrana bilgi çıkarmak amacıyla kullanılan bileşenlerden biridir. Bileşenin Text özelliğine girilen değer ekranda gösterilir. TextView bileşeninde varolan bileşeni değiştirmek için SetText metodu kullanılır. 5.2 EditText Kullanıcıdan veri almak aamcıyla kullanılan bileşenlerden biridir. EditText bileşeninden değer almak için EditText sınıfının gettext metodu kullanılır. android:inputtype özelliği ile kullanıcıdan alınacak verinin türü belirlenir (number,time v.b.).

8 8 Layout Çeşitleri ve Görsel Bileşenler Mobil Uygulama Geliştirme 5.3 Button Çeşitli olayları tetiklemek amacıyla kullanılacak butonları oluşturmak amacıyla kullanılır. Butonlara tıklama olayı atamak için aşağıdaki iki yöntem kullanılabilir. Birinci yöntem Button bileşenine layout tasarımında android:onclick özelliğine çalışacak olayı belirttikten sonra java dosyasında olayı oluşturmak. İkinci yöntem: Oluşturulan buton bileşeninin setonclicklistener metoduna olay eklemek yeterli olacaktır. <bileşenin_adı>.setonclicklistener( new public void onclick(view arg0) { <olay gerçekleştiğinde çalışacak kodlar>. } <RelativeLayout xmlns:android=" tools:context=".mainactivity" > <Button android:id="@+id/button1" android:layout_alignparentleft="true" android:layout_below="@+id/edittext1" android:layout_marginleft="20dp" android:layout_margintop="48dp" android:text="faktoriyeli" /> <EditText android:id="@+id/edittext1" android:layout_alignleft="@+id/textview3" android:layout_alignparenttop="true" android:layout_margintop="36dp" android:ems="10" android:inputtype="number" > <requestfocus /> </EditText>

9 Mobil Uygulama Geliştirme Öğr.Gör. Nevzat TAŞBAŞI 9 android:id="@+id/textview3" android:layout_alignleft="@+id/button1" android:layout_below="@+id/edittext1" android:layout_marginleft="68dp" android:layout_margintop="18dp" android:text="" /> android:id="@+id/textview1" android:layout_alignbottom="@+id/edittext1" android:layout_alignparentleft="true" android:layout_marginleft="19dp" android:text="sayı=" /> android:id="@+id/textview2" android:layout_alignbaseline="@+id/textview3" android:layout_alignbottom="@+id/textview3" android:layout_alignleft="@+id/button1" android:text="sonuc=" /> </RelativeLayout> package com.example.faktoriyel; import android.app.activity; import android.os.bundle; import android.view.menu; import android.view.view; import android.view.view.onclicklistener; import android.widget.button; import android.widget.edittext; import android.widget.textview; public class MainActivity extends Activity {

10 10 Layout Çeşitleri ve Görsel Bileşenler Mobil Uygulama protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); final TextView tx1=(textview) findviewbyid(r.id.textview3); final EditText edt=(edittext) findviewbyid(r.id.edittext1); Button btn=(button) findviewbyid(r.id.button1); btn.setonclicklistener(new public void onclick(view v) { double faktor=1; int sayi=integer.parseint(edt.gettext().tostring()); for(int i=1;i<=sayi;i++) faktor*=i; tx1.settext(""+faktor); } }); public boolean oncreateoptionsmenu(menu menu) { // Inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; } }

11 Mobil Uygulama Geliştirme Öğr.Gör. Nevzat TAŞBAŞI 11