iOS Navigation Controller Kullanımı ve Örnekleri

Merhaba Arkadaşlar,
mobilhanem.com da iOS Uygulama Geliştirme eğitim serimize kaldığımız yerden Navigation Controller dersi ile devam ediyoruz. Bir önceki derste iOS View Controller Kullanımı ve View Controller Yaşam Döngüsü konusunu işledik. Navigation Controller  yazacağımız çok sayfalı iOS uygulamaları yazarken sıklıkla kullanacağımız bir bileşendir. Örneğin login, register ve ana sayfanın olduğu ve ana sayfasında login ve register ekranlarına yönlendiren 2 adet buton olsun. Bu uygulamayı UINavigationController kullanarak yapabiliriz. Dilerseniz öncelikle navigation controller’ı uygulamamıza ekleyerek başlayalım. Navigation controller’ı eklemenin 2 yolu var ve birazdan bu 2 yolu da göstereceğim. Dilerseniz ilk yöntemimiz olan Storyboard ile oluşturalım.

1) Navigation Controller’ı Storyboard Kullanarak Oluşturmak

• İlk olarak Main.storyboard’un içine gidelim.
• Ardından resimdeki gibi ViewController’ı seçip Editor -> Embed In -> Navigation Controller tıklayalım.

NOT: Burada dikkat etmeniz gereken nokta mavi ile gösterdiğim yerden view controller’ı seçmiş olmanız.

• View Controller’a Navigation Controller eklenmiş oldu.

2) Navigation Controller’ı Storyboard Kullanmadan Kod ile Oluşturmak

• İlk olarak projenizden Main.storyboard’u silin.
• Ardından projeyi dizininizdeki resimdeki gibi Project -> General -> Deployment Info -> Main Interface içinde bulunan Main storyboard ismini de silin.

• Daha önceki yazılarımızda anlattığımız gibi MainVC isminde XIB oluşturalım ve Giriş Yap & Kayıt ol isminde 2 adet buton koyalım.
• Şimdi sırada AppDelegate’de yapacağımız değişikliklere geldi. Burada navigationController’ı tanımlayıp bunun ilk controllerı’na biraz sonra oluşturacağımız view controller’ı vereceğiz. Kodunuz aşağıdaki gibi gözükmeli.

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
        window = UIWindow(frame: UIScreen.main.bounds) // 1
        let mainVC = MainVC() // 2
        let navigationController = UINavigationController(rootViewController: mainVC) // 3
        window?.rootViewController = navigationController // 4
        window?.makeKeyAndVisible() 
        return true
    }

1. Her uygulamanın çalıştığı bir window vardır. Siz bir uygulamayı başlattığınızda o window oluşturulur.
2. Biraz önce XIB ile oluşturduğumuz MainVC’yi oluşturuyoruz.
3. Navigation Controller’ı oluşturup root view controller olarak mainVC’yi veriyoruz.
4. Uygulamamızın window’una yani kullanıcının göreceği ekrana root view controller olarak biraz önce oluşturduğumuz navigation controller’ı veriyoruz.

Uygulamayı çalıştırdığınızda karşınıza resimdeki gibi giriş yap ve kayıt ol adında 2 buton göreceksiniz.

Bu arada RegisterVC ve LoginVC isminde 2 View Controller oluşturdum. MainVC içerisindeki giriş yap ve kayıt ol butonlarının aksiyonlarını aşağıdaki gibi tanımlayalım.

    @IBAction func girisYapBtnPressed() {
        let login = LoginVC() // 1
        navigationController?.pushViewController(login, animated: true) // 2
    }

    @IBAction func kayitOlBtnPressed() {
        let register = RegisterVC()
        navigationController?.pushViewController(register, animated: true)
    }

1. LoginVC’nin değişkenini navigation’a eklemek için oluşturuyoruz.
2. pushViewController() metodunu kullanarak oluşturduğumuz LoginVC’yi navigation stack’ine ekliyoruz.

Eğer çok sayfalı ve birbirine bağlamanız gereken ekranlar varsa NavigationController kullanmanız en ideal çözüm olacaktır. Aklınıza şöyle bir soru takılmış olabilir. PushViewController() metodunu kullanarak bir sonraki sayfaya geçişimizi sağladık peki bir önceki sayfaya dönmek için ne yapmamız gerekiyor? Normal şartlar altında Apple’ın NavigationController’a otomatik olarak eklediği back butonu bizim bir önceki sayfaya dönmemizi sağlıyor, ancak uygulamanızın o sayfasında bir butonunuz var ve bu butona bastığınızda geri dönmek istiyorsunuz. Bunun için kullanacağımız metodu ise gelin hep beraber inceleyelim.

RegisterVC içerisine geri dön adında bir buton ekledim. Bu butonun action’u aşağıdaki gibi tanımlayalım.

    @IBAction func backBtnPressed() {
        navigationController?.popViewController(animated: true)
    }

Navigation Controller tıpkı stack mantığında çalışır. Stack ile ilgili mobilhanem.com yazımıza buradan ulaşabilirsiniz. Kısaca değinmek gerekirse bir sonraki sayfaya geçmek için view controller’ı navigation stack’ine pushViewController ile ekleriz, bir önceki sayfaya dönmek için popViewController ile navigation stack’inden çıkarırız.

NavigationBar nedir ve nasıl özelleştirilir?

NavigationController’ı uygulamamıza eklediğimizde view controller’ın en üstüne bir bar ekler. İsterseniz bu barı özelleştirebilir ve/veya yeni elementler ekleyebilirsiniz. Gelin nasıl yapacağımızı inceleyelim.

• Title 

Navigation Bar’ın ortasında yer alan sayfanın başlığını oluşturur. Özelleştirmek isterseniz ilgili View Controller’ın viewDidLoad() metodu şöyle gözükmeli;

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Ana Sayfa"
    }

• leftBarButtonItem

İlgili View Controller’ın sol tarafında yer alır.  Özelleştirmek isterseniz ilgili View Controller’ın viewDidLoad() metodu şöyle gözükmeli;

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.leftBarButtonItem = UIBarButtonItem(title: "Menu",
                                                           style: .plain,
                                                           target: self,
                                                           action: #selector(menuBtnPressed))
    }

    @objc func menuBtnPressed(_ sender: Any) {
        print("Menu Item'a basıldı")
    }

• rightBarButtonItem

leftBarButtonItem olur da hiç rightBarButtonItem olmaz olur mu ? rightBarButtonItem ise ilgili View Controller’ın sağ tarafında yer alır.  Özelleştirmek isterseniz ilgili View Controller’ın viewDidLoad() metodu şöyle gözükmeli;

    override func viewDidLoad() {
        super.viewDidLoad()
        navigationItem.rightBarButtonItem = UIBarButtonItem(title: "Logout",
                                                           style: .plain,
                                                           target: self,
                                                           action: #selector(logoutBtnPressed))
    }

    @objc func logoutBtnPressed(_ sender: Any) {
        print("Logout Item'a basıldı")
    }

• backBarButtonItem

Navigation Controller kullanarak ileri gittiğiniz sayfalarda bir önceki sayfanın title değişkenine ne atadıysanız onu görürsünüz yani şu anki durumda ilk sayfamızın adı Ana Sayfa olduğu için Giriş Yap veya Kayıt Ol butonuna bastığınızda geri butonunuzun da başlığı resimdeki gibi Ana Sayfa olacaktır.

Ancak siz uygulamanızda bunu değiştirmek istiyorsunuz. Bunu yapabilmek için Apple sağolsun bizlere backBarButtonItem isminde bir değişken vermiş. Bunu kullanarak aşağıdaki kod parçasındaki gibi bu başlığı değiştirebiliriz.

    override func viewDidLoad() {
        super.viewDidLoad()
        title = "Ana Sayfa"
        navigationItem.backBarButtonItem = UIBarButtonItem(title: "İlk Ekran", style: .plain, target: self, action: nil)
    }

Yalnız burada dikkat etmeniz gereken kural backBarButtonItem gittiğiniz view controller’a değil önceki View Controller’a aittir. Yani bizim örneğimizde MainVC içerisinde bu değişikliği yapmamız gerekiyor.

Projenin tamamlanmış halinin kodlarına buradan ulaşabilirsiniz.

ÖZET

Bu yazımızda birden fazla sayfası olan iOS uygulamalarımızda sayfalarımızı birbirine bağlamak için kullandığımız temel komponentlerden birisi olan UINavigationController’ın tanımını, nasıl ve hangi yollarla oluşturulduğunu ve Navigation Controller kullanırken bir sonraki ve önceki sayfaya nasıl gideriz konularına değindik. Yazıyla alakalı değerli görüşlerinizi, soru veya yorumlarınızı yorumlar kısmına ya da buradan soru cevap kısmına yazabilirsiniz. Diğer derste görüşmek dileğiyle.

Tüm iOS Dersleri için tıklayınız.