MOBİL UYGULAMA GELİŞTİRME

Transkript

1 MOBİL UYGULAMA GELİŞTİRME PELİN YILDIRIM FATMA BOZYİĞİT YZM 3214 Celal Bayar Üniversitesi Hasan Ferdi Turgutlu Teknoloji Fakültesi

2 Bu Derste Andoid App Dizayn Prensipleri Ekranlarda kullanabileceğimiz elemanlar Ekran düzenleme çeşitleri (frame, linear, relative) 2

3 Android Terminoloji Activity: Appnizde görünen ekranlara karşılık gelir. View: Bir aktivity için ekranda görünen birimleri içerir. layout: Pozisyon ve büyüklükleri ayarlayan görünmez kabtır. widget: Buton ve textfield gibi GUI kontrolleridir event: Kullanıcı ekranla etkileşim yaptığında olan aksiyonlardır. (dokunma, yazma, scrolling, ) 3

4 Ekran Bileşenleri - System Bar 1 - Status Bar (durum çubuğu): Bekleyen bildirimleri ve anlık durumları (pil seviyesi, sinyal gücü, zaman). Aşağı doğru çekerek bildirim detaylarına bakılabilir 2 - Navigation Bar (Yönlenme çubuğu): Kendinden butonları olmayan cihazlarda gözükür ve geri, ana ekran ve son kullanılanlara erişimi sağlar. 4

5 Ekran Bileşenleri - Bildirimler Bildirimler (Notifications) kullanıcıya bilgi vermek, güncellemek yada hatırlatmak için kullanılan kısa mesajlardır. Önemli fakat kullanıcının çalışmasını kesip ekranı meşgul edecek kadar önemli olmayan mesajlar için kullanılır. Tıklanıp detayına ulaşılabilir yada kaydırarak silinebilir. 5

6 Ekran Bileşenleri - Action Bar 1- App Ikonu 2- Ekran kontrol kısmı: Ekranlar arası geçişi sağlar. Eğer alternatif ekranların ne olduğu önemli ise tab ler kullanılabilir. Eğer geçiş gerekmeyen bir ekransa ekran başlığını içerir. 3- Aksiyon butonları: en önemli butonları listeleriz. Buraya koyacağımız butonlar için kriterlerimiz Acaba 10 kerenin en az 7sinde bu butonlar kullanılacak mı? Bu butonların gözükmesi önemli mi? Bu butonlar tipik olarak her appde burada mı gözükür? 4- Diğer (taşan) Aksiyonlar (Action Overflow): Daha az öneme sahip butonları barındırır 6

7 Ekran Bileşenleri - Sekmeler (Tabs) Ekranlar arası geçişi kolaylaştırırlar. Sabit sekmeler (Fixed tabs): Aynı anda bütün ekran seçenekleri görünür. Ekranda her sekmenin ismi eşit genişlikte yer alır. Kaydırılabilir sekmeler (Scrollable tabs): Kaydırarak ekranda gözükmeyen sekmelere ulaşılır Dahası: 7

8 Ekran Bileşenleri - Listeler Standart list: Çok satırlı elemanları dikey olarak düzenlemeye yarar. Grid list: Hem dikey hemde yatay düzenlemeye yarar 8

9 Ekran Bileşenleri - Kaydırma Çubukları (Scrolling) Kaydırma belirteci İndeksli kaydırma 9

10 Ekran Bileşenleri - Butonlar Butonlar butona dokunulduğunda nasıl bir aksiyon olacağını belirtmek için yazı, resim veya hem resim hem yazı kullanabilirler. önemli özellikler (key attributes) android:clickable= bool" (butona tıklanabilir mi tıklanamaz mı?) android:id="@+id/theid" (Java kodunda kullanılmak üzere unique ID) android:onclick="function" (Tıklandığında çağrılacak metod (public, void, View argumanı alır) ) android:text="text" (Buton üstündeki text) Java kodunda Button sınıfı ile temsil edilir. Button b = (Button) findviewbyid(r.id.theid); 10

11 Ekran Bileşenleri - ImageButton Tıklanabilir resim önemli özellikler (key attributes) android:clickable="bool" butonu etkisiz hale getirmek için false yapın android:id="@+id/theid" : tekil ID android:onclick="function" activity içindeki çağrılan metod (public, void ve View parameter) android:src="@drawable/img" kullanılacak resim, app/src/main/res/drawable klasorunde olmalı. foo.png resmi kullanın 11

12 Ekran Bileşenleri - ImageView Sadece resim, tıklanamaz Kodla resmi değiştirmek için findviewbyid ile ImageView ı alın setimageresource metoduna parametre olarak R.drawable.filename kullan önemli özellikler (key attributes) android:id="@+id/theid" : tekil ID android:src="@drawable/img" kullanılacak resim, app/src/main/res/drawable klasorunde olmalı. foo.png resmi kullanın 12

13 Ekran Bileşenleri - Textfield Tek satır yada çoklu satır olabilirler. Numara, mesaj, adres gibi farklı text girişlerini almaya ayarlı tipleri olabilir Otomatik olarak yazılanı tamamlayan ve seçim yapmanıza yardımcı olan türleri vardır. 13

14 Ekran Bileşenleri - EditText İçeriği değiştirilebilen textbox olarak ayarlı textview dır önemli özellikler (key attributes) android:hint="text" : kullanıcı yazmaya başlamadan önce gösterilir android:id="@+id/theid" : tekil ID android:inputtype="type" : girilen veri tipi number, phone, date, time,... android:lines="int" : kaç satır giriş görünür android:maxlines="int" : max izin verilen satır android:text="text" android:textsize="size" text büyüklüğü Diğerleri: capitalize, digits, fontfamily, letterspacing, linespacingextra, minlines, numeric, password, phonenumber, singleline, textallcaps, textcolor, typeface 14

15 Ekran Bileşenleri - Spinners Spinnerler bir küme veriyi listelemek için kullanılırlar. Normal durumda seçili veriyi gösterirler ve dokununca menü halinde diğer seçenekleri gösterirler. Form üzerinde bir dizi veriden seçim için kullanılabilirler. Aksiyon çubuğu üzerinde ekranlar arası geçiş için kullanılırlar. Ekranlar arası geçiş çok olmuyorsa spinner kullanılabilir, çokça oluyorsa tab (sekme) kullanmayı tercih edin. Önemli özellikler (key attributes) clickable, id, entries android:entries="@array/array" : string.xml de belirtilen bir array, opsiyonlar listesi android:prompt="@string/text" : seçildiğinde görünen başlık Seçim olduğunda olacakları tanımlayan metodu setonitemselectedlistener ile kodda tanımlamalıyız. 15

16 Ekran Bileşenleri - String Örneği 16

17 Ekran Bileşenleri - Spinner Örneği 17

18 Ekran Bileşenleri - Spinner Olayı Örneği 18

19 Ekran Bileşenleri - Kaydırma Çubukları (Seek Bars, Sliders) Ses, parlaklık ve renk seçimi gibi durumlarda kullanılabilir En düşük değer solda, en büyük değer sağdadır. 19

20 Ekran Bileşenleri - Aktivite Belirteçleri ve Gelişme Süreci Çubukları (Progress bar, Activity Indicator) Süreç çubukları (progress bar) Aktivite belirteçleri Ne kadar süreceği bilinmeyen veya tam hesaplanamayan durumlar için kullanılır 20

21 Ekran Bileşenleri - Checkbox, Radiobox, Switch Checkbox önemli özellikler (key attributes) checked, clickable, id, onclick, text CheckBox cb = (CheckBox) findviewbyid(r.id.theid); cb.toggle(); cb.setchecked(true); cb.performclick(); Radiobox (RadioGroup içinde olmalı) önemli özellikler (key attributes) checked, clickable, id, onclick, text Switch 21

22 Ekran Bileşenleri - Dialog; Alerts, Popups, Toast Alert: Başlıklı yada başlıksız olabilir. Butonları ve ne yapacağını tanımlarsınız. Popup: Seçim yapıldığında yada ekranın popup harici herhangi bir yerine tıklandığında kaybolurlar. Toast: Kısa bir süre ekranda mesaj gözükür ve kaybolur. Kullanıcıyı bilgilendirmek için kullanılır. 22

23 Ekran Bileşenleri - Seçiciler (Pickers) Bir küme veriden bir tanesinin seçiminde kullanılır. Ekranda çok yer kapladıkları için dialoglar içinde kullanılması önerilir. Ekran içinde kullanılacaksa spinner tercih edilmelidir. Tarih ve saat için bunların kullanımı istenilen formatta veri almayı kolaylaştırır. 23

24 Gestures - Dokunarak komut iletim çeşitleri Tek Dokunuş (Single Touch) Kaydırma (Swipe) Uzun Dokunuş (Long Touch) Çift Dokunma (Double Touch) Uzun Dokun ve Sürükle (Long Touch and Drag) 24

25 Olaylara (Event) Karşılık Verecek Metodu Yaratmak App de olaylara karşılık vermek için, her bir olay için dinleyici (listener) metod yazmalı ve bu metodu GUI widgetına bağlamalıdır. Bunun için; Design view da widget ı seç Properties penceresinden onclick metodunu bul Olay olduğuna karşılık verecek metodun ismini yazın TextView görünümüne geçip XMLde butonu bulun Lamba işaretinin üstüne tıklayın ve metodu yaratı seçin. 25

26 Widgetlara Koddan Erişim Dizayn da widgeta unique ID verin Java kodunda findviewbyid metodunu kullanarak widget objesine erişin R.id.your_unique_ID yi findviewbyid metoduna parametre olarak gönderin Dönen değeri widget tipi (Button, TextView, etc.) cinsinden atayın. 26

27 Ekran Düzenleme Çeşitleri Ekrandaki elemanları (textview, listview, ) düzenlemek için çeşitli yöntemler vardır: Frame Layout (Çerçeve Düzenleme) Basit düzenlemeler içindir. Genelde tek veya aynı hizadaki birçok ekran elemanını düzenlemek için kullanılır Linear Layout (Lineer Düzenleme) Bir dizi aynı elemanı yatay yada dikey hizada listelemek ve ekranı aynı oranda paylaştırmak için iyidir. Relative Layout (Bağıl Düzenleme) Daha kompleksdir. Ekrandaki diğer elemanlara yada ebevyn elemana göre düzenlenir. 27

28 Ekran Düzenleme Çeşitleri - Linear Layout Linear Layout (Lineer Düzenleme) Bir dizi aynı elemanı yatay yada dikey hizada listelemek ve ekranı aynı oranda paylaştırmak için iyidir. Ekran sonuna gelindiğinde elemanlar bir sonraki satıra geçmezler. 28

29 Ekran Düzenleme Çeşitleri - Frame Layout layout_width ve layout_height özellikleri için sabitler: wrap_content: İçinde olduğun kaba göre kendi büyüklüğünü ayarla match_parent (fill_parent API Level 8 öncesinde) içinde bulunduğun kab müsade ettiği kadar büyük ol. Frame Layout (Çerçeve Düzenleme) Basit düzenlemeler içindir. Genelde tek veya aynı hizadaki birçok ekran elemanını düzenlemek için kullanılır Genelde fragmentlarla birlikte kullanılırlar 29

30 Ekran Düzenleme Çeşitleri - Relative Layout Relative Layout (Çerçeve Düzenleme) Elemanlar bir üst seviyedeki yada aynı seviyedeki elemanlara göre düzenlenebilir. 30

31 Android Studioda Ekran Tanımlamak fragment_main.xml dosyasını değiştirerek çalıştırın ve nelerin değiştiğini görün. 31

32 Linkler Wireframe siteleri: Android API: 32

33 Kaynaklar Android Design Principles Google I/O Enchant, Simplify, Amaze: Android's Design Principles ( ) Stanford Android Development Course Udacity - Developing Android Apps (Google tarafından)