UINavigationBar

Uygulamaların neredeyse hepsinde bulunan UINavigationBar ile uygulamanızın navigasyonunu basit bir şekilde ayarlayabilirsiniz.

Halil Özel
Aug 27, 2018 · 5 min read
Image for post
Image for post

Bugünkü yazımda iOS dünyasında sıklıkla kullanılan bir arayüz elementi olan olan UINavigationBar’dan bahsedeceğim. Kullanım alanlarını, özelliklerini ve nasıl kullanılacağını anlatacağım yazım için hazırsanız haydi başlayalım!

Navigation Bar Nedir?

Bir iOS uygulamasında ekranın en üstünde bulunan ve operatör, saat, pil durumu gibi göstergeleri bir arada sunan yapıya UIStatusBar adını veririz. UINavigationBar ise hemen altındadır ve kullanıcıya bulunduğu sayfa hakkında bilgiler verir. NavigationBar tek başına kullanılabildiği gibi bir objesi ile birlikte de kullanılabilir.

Image for post
Image for post
TurkishKit — navigationBar

Navigation Bar Bileşenleri

Temel bileşenler back(geri) butonu, ortalanmış bir başlık ve kullanımı opsiyonel olan right(sağ) butonu. NavigationBar’a eklenen butonlar türündedir ve yazı yerine projenizde bulunan veya Apple’ın iOS’de kullandığı ikonları da tercih edebilirsiniz.

Image for post
Image for post
TurkishKit — navigationBar_bilesenleri

Navigation Bar Başlıkları

O an ekranda bulunan sayfanın başlığını navigation bar üzerinde göstermeyi tercih edin. Bir başlık çoğu zaman kullanıcıya ne tür bir içeriğe baktığını anlamasına yardımcı olur. Fakat bir navigation bar başlığı gereksiz görünüyorsa başlığı boş bırakabilirsiniz. Örneğin, Apple’ın Notes uygulaması bir başlığa ihtiyaç duymaz çünkü her bir not kendi başlığını belirtir.

Image for post
Image for post
TurkishKit — navigationBar_basliklari

Göstermekte olduğunuz içerik üzerinde ekstra vurgu sağlamanız gerekiyorsa large title(büyük başlık) tercih edebilirsiniz. Bazı uygulamalarda başlığın büyük ve kalın olması, kullanıcılara aradıkları içeriğe hızlıca ulaşmaları konusunda yardımcı olabilir.Apple’ın Phones uygulaması bu yaklaşımı kullanır; Ayrıca Music uygulamasında albümler, sanatçılar, oynatma listeleri ve radyo gibi içerik alanlarını ayırt edilmesi amacıyla büyük başlık kullanılır.

Large Title Kullanımı

Bir navigation bar üzerinde large title kullanımı oldukça basittir. Öncelikle Storyboard dosyanıza gidin. Eğer Storyboard kullanmıyorsanız UINavigationController objesi oluşturduğunuz kod satırına gidin. Ardından navigation bar için özelliğinin değerini true olarak ayarlayın.


Navigation Bar Kullanım Tavsiyeleri

Navigation Bar, iOS dünyasında sıklıkla tercih edilir fakat çoğunun kullanımı hatalıdır. Uygulamalarınızda bu yapıyı kullanırken dikkat etmeniz gereken bazı kurallar vardır.

Bir Navigation Bar üzerine gereğinden fazla kontrol eklemeyin.

Genel olarak, bir Navigation Bar, mevcut sayfanın başlığını ve bir back(geri) butonunu içerir. Eğer Navigation Bar’da bir segmented control mekanizması kullanıyorsanız, bu Navigation Bar için bir başlık eklememelisiniz.

Standart geri butonunu kullanın.

Uygulamanızı ilk defa kullanacak olan insanlar, standart bir geri butonunun kendilerini önceki sayfaya yönlendireceğini bilirler. Ancak tasarımı tamamen özel bir geri butonu kullanmayı düşünürseniz bunun gerçek bir geri butonuna benzediğinden ve uygulamanınızı her noktasında aynı tasarımı kullandığınızdan emin olun.

Metin içeren butonlara yeterli alan verin .

Navigation Bar’ınızda birden çok metin içeren buton varsa, bu butonların metni birbiri içerisine girebilir ve böylece ayırt edilemez hale gelebilir. Bu tğr bir sorunu butonlar arasına ögesi ekleyerek çözebilirsiniz.

Uygulamanızın bilgi hiyerarşisini daha anlaşılabilir hale getirmek için Navigation Bar’a bir segmented control ekleyin.

Navigation Bar’da bir segmented control yapısı kullanırsanız, bunu yalnızca ekranın en üstünde hiyerarşisinde yapın ve alt düzeyde bir geri butonu eklediğinizden emin olun.

Image for post
Image for post
TurkishKit — navigationBar_segmentedControl

Navigation Bar’ı yakından tanıdığımıza göre artık uygulamamıza geçebiliriz. Beraber basit bir uygulama geliştireceğiz ve anlattıklarımın Xcode’da nasıl kullanılacağını göreceğiz. Haydi zaman kaybetmeden örneğimize geçelim :D

Adım 1

Yeni bir Xcode projesi oluşturun ve Main.storyboard dosyasına gidin. Burada sizi bekleyen View Controller’a bir adet Navigation Bar’ı arayüz elementlerinin bulunduğu menüden sürükleyerek ekleyin.

Image for post
Image for post

Navigation Bar varsayılan olarak “Title” başlığı ile birlikte gelmektedir. Bizler bu başlığı özelleştirerek daha hoş ve işlevsel hale getireceğiz.

Adım 2

Öncelikle Navigation Bar üzerinde iki kez tıklayın ve sağ menüde açılan ayarlardan başlığı isteğinize göre değiştirin.

Image for post
Image for post

Adım 3

Oluşturduğumuz Navigation Bar’ın sağ ve sol yanlarına birer buton ekleyeceğiz. Bunun için arayüz elementlerinin bulunduğu menüden UIBarButton araması yapın. Bir adet butonu Navigation Bar’ın sağ tarafına diğerini ise sol tarafına sürükleyin.

Image for post
Image for post
Image for post
Image for post

Adım 4

Eklediğiniz butonların üstüne tıklayın ve sağ tarafra açılan sayfanın “System Item” bölümünden bir ikon belirleyin. Ardından diğer butonunuzun yazısını aynı sayfadan isteğinize göre düzenleyin.

Image for post
Image for post
Image for post
Image for post

Adım 5

Oluşturduğunuz Navigation Bar’a eklediğimiz butonları sayfamızın kontrolcüsü olan ViewController.swift dosyasındaki kodumuza bağlamalıyız. Bu sayede kullanıcı butonlarımız ile etkileşime geçtiği zaman istediğimiz aksiyonları alabiliriz.

Image for post
Image for post

Öncelikle Storyboard’dan “Assistant Editor” sayfasını açıyoruz. Ardından sağ pencerede açılan ViewController.swift dosyamıza bağlamak istediğimiz butonun üstünden kontrol tuşuna basılı tutarak bir bağlantı çekiyoruz.

Image for post
Image for post

Hemen ardından açılan ufak pencereden bu aksiyona vermek istediğimizi adı belirtiyoruz ve “enter”, işlem tamam!

Image for post
Image for post

Aksiyonunuz aşağıdaki gibi görünecektir ve kullanıcı butonunuz ile etkileşimi geçtiği zaman bu fonksiyon çalışacaktır!

Image for post
Image for post

Son

Swift ile UIKit serimin Navigation Bar kullanımı ile ilgili olan blog yazısının sonuna geldik. Umarım faydalı olmuştur ve beğenmişsinizdir. Bir sonraki TurkishKit yazısında görüşmek üzere. Kendinize çok iyi bakın ve hoşçakalın!

TurkishKit

Apple dünyasında sınırları belirleyecek nitelikte…

Halil Özel

Written by

Android Developer 👨🏻‍💻

TurkishKit

Apple dünyasında sınırları belirleyecek nitelikte uygulamalar tasarlamak ve geliştirmek isteyen lise & üniversite öğrencilerinin buluşma noktası.

Halil Özel

Written by

Android Developer 👨🏻‍💻

TurkishKit

Apple dünyasında sınırları belirleyecek nitelikte uygulamalar tasarlamak ve geliştirmek isteyen lise & üniversite öğrencilerinin buluşma noktası.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store