MOBİL UYGULAMA GELİŞTİRME

PELİN YILDIRIM

FATMA BOZYİĞİT

Celal Bayar Üniversitesi Hasan Ferdi Turgutlu

Teknoloji FakültesiYZM 3214

Bu Derste

Andoid App Dizayn Prensipleri

Ekranlarda kullanabileceğimiz elemanlar

Ekran düzenleme çeşitleri (frame, linear, relative)

2

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

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

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

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

Dahası: https://developer.android.com/design/patterns/actionbar.html

6

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ı: https://developer.android.com/design/building-blocks/tabs.html

7

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

Ekran Bileşenleri - Kaydırma Çubukları (Scrolling)

Kaydırma belirteci

İndeksli kaydırma

9

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

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 için @drawable/foo kullanın

11

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 için @drawable/foo kullanın

12

Ekran Bileşenleri - Textfield

Tek satır yada çoklu satır olabilirler.

Numara, mesaj, email 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

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

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

Ekran Bileşenleri - String Örneği

16

Ekran Bileşenleri - Spinner Örneği

17

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

18

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

Ekran Bileşenleri - Aktivite Belirteçleri ve Gelişme Süreci

Çubukları (Progress bar, Activity Indicator)

Süreç çubukları (progress bar)

20

• Aktivite belirteçleri

• Ne kadar süreceği bilinmeyen veya tam

hesaplanamayan durumlar için kullanılır

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

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

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

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

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

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

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

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.

http://developer.android.com/guide/topics/ui/layout/linear.html

28

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

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.

http://developer.android.com/guide/topics/ui/layout/relative.html

30

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

Linkler

Wireframe siteleri:

http://developer.android.com/training/design-navigation/screen-planning.html

http://developer.android.com/training/design-navigation/wireframing.html

http://ninjamock.com/

https://proto.io/

http://www.justinmind.com/mobile

http://wireframesketcher.com/

Android API:

http://developer.android.com/reference/packages.html

32

Kaynaklar

Android Design Principles

Google I/O 2013 - Enchant, Simplify, Amaze: Android's Design Principles ( https://www.youtube.com/watch?v=s0HIP8EdlnE )

https://developer.android.com/design/get-started/principles.html

http://developer.android.com/guide/topics/ui/overview.html

Stanford Android Development Course

http://web.stanford.edu/class/cs193a/lectures.shtml

Udacity - Developing Android Apps (Google tarafından)

https://www.udacity.com/course/viewer#!/c-ud853/l-1395568821/m-1643858569

33