Merhaba Arkadaşlar,
mobilhanem.com da iOS Uygulama Geliştirme Eğitimi ‘nde Xcode Storyboard Kullanımı dersi ile Xcode Storyboard ı kullanımını öğrenerek kaldığımız yerden devam ediyoruz. iOS dersi yapmayalı uzun zaman oldu. Bu zaman içinde de Apple dünyasında hem iOS hem Mac OS alanlarında birçok değişimler ve gelişimler yaşandı. Bizde bu zamanı lehimize çevirerek hem değişimleri anlatarak hem de uyum sağlayarak derslerimizi yapmaya devam edeceğiz. Bundan sonra her haftanın aynı günü dersimiz yayınlanmış olacağız. Hem dersler içerisinde hem de derslere ek olarak bilgi amaçlı ilgilisine Apple dünyasında yaşan gelişmeleri anlatıyoruz olacağız. Bunların ilki olarak iOS 13 ile Gelen Yenilikler ilgili yazıma buradan bakabilirsiniz.
Xcode 11 ile SwiftUI
Dersimize başlamadan önce bu kısımda bahsetmem gereken yenilikler var. Geçen zaman içerisinde iOS 13 tanıtımının yapıldığı WWDC 2019 da bahsedildiği gibi Xcode 11 güncellemesi yayınlandı ve kendisi ile yenilikler getirdi. Bu yeniliklerin ilki SwiftUI. SwiftUI Apple’ın Apple ürünleri geliştiricileri için geliştirdiği yeni uygulama geliştirme yöntemi. Daha önceleri UIKit, Storyboard ve Auto Layout gibi yapılar kullanılıyordu, tam olarak şu an değil ama çok kısa bir süre içerisinde bunlar neredeyse hiç kullanılmayan yapılar olacak.
SwiftUI ile ilgili daha geniş bir yazı yazacağım ve buraya linkini koyacağım. ss-1 de gördüğünüz gibi artık yeni proje oluştururken Storyboard kısmında SwıftUI diye bir seçenek var eskiden sadece Storyboard vardı. Buradan dileyen SwiftUI seçeceğini seçip onunla uygulama geliştirmeye devam edebilir.
Apple veriye önem veren bir firma ve daha önce iOS 8 ile çıkan iCloud ile entegre olarak uygulama geliştirmeyi sağlayan CloudKit API özelliği Xcode 11 ile artık ss-2’de görüldüğü gibi Xcode girişte proje oluşturma kısmında seçilebiliyor. Çok önemli bir proje kullanmıyorsanız kullanabilirsiniz, gerçi projeniz önemli değilse bulut da saklamaya gerek olur mu bilemedim.
Storyboard Arayüz Oluşturucuyu (Interface Builder) Tanıyalım
Önceki dersleri okuyan ve uygulayan arkadaşlar artık Xcode hakkında az çok bir bilgiye sahiptirler. Eğer ilk olarak buradan derslere başladıysanız daha erkenken ilk derslere buradan bakmanızı tavsiye ederim, sağlam temel sağlam bina demektir. İlk uygulamamızın arayüzünü tasarlamaya başlayalım. Proje Gezgini (Project Navigator) kısmından Main.StoryBoard’ı tıklayarak Storyboard u açalım. Karşımıza ss-3 de görüldüğü gibi Interface Builder yani arayüz oluşturucu gelecektir.
İOS uygulamaları geliştirirken, görünümler (Views), kullanıcı arayüzünüzü oluşturmak için temel yapı taşlarıdır. Her view’in kendi işlevi vardır. Örneğin, storyboard gördüğünüz view, buttons, labels, image views, vb. gibi ve diğer görünümleri tutmak için kullanılan bir container view’dir.
Alt kısımda belirttiğim Arayüz Oluşturucu düzenleyicisinin Belgeler görünümü size tüm view’lere ve belirli bir view’in altındaki nesneleri görmenizi ve bunları kolaylıkla kontrol edebilmenizi sağlar. Belgeler, Storyboard da belirli bir nesneyi seçmek istediğinizde çok işinize yarayacaktır. Belgeler ekranda görünmüyorsa, Resim ss-3’te gösterdiğim gibi Belgeleri göster/gizle seçim düğmesini kullanın.
Storyboard Nesneler Kütüphanesi
Dersler ilerledikçe bu alana daha fazla hakim olacaksınız şu an tüm ayrıntıları ile anlatmaya gerek yok. Sadece en önemli ve en çok kullanacağımız kısım olan nesneler kütüphanesine bakalım. ss-3 te gösterildiği gibi Xcode 11 Storyboard da için sağ üst kısımda bulunan ‘+’ işaretine basarak açabilirsiniz, karşınıza ss-4 te olduğu gibi bir ekran gelcek.
Nesne kütüphanesi, kullanıcı arayüzünüzü tasarlamanız için buton, etiket (label), resim görünümü gibi mevcut UI nesnelerini içerir. Nesne kütüphanesini liste görünümü ve togle (simge) görünümü olmak üzere iki farklı mod da görüntüleyebilirsiniz. Bu geçişleri sağmak için Liste/Togle butonunu kullanabilirsiniz.
Bunlara ek olarak Xcode 11 ile nesnelerin açıklamasız olarak sadece simge ve isimleri bulunan bir seçenekte eklendi. Ben şahsen her zaman açıklama bulunmasını isterim. Ürünü birde üreticisinden dinlemek lazım.
Storyboard Yapılandırma Çubuğu
Son olarak bahsede bileceğim, arayüz tasarımı yaparken cihaz seçimini yapabileceğiniz arayüz oluşturucu’da bir Yapılandırma Çubuğu var. Bu alanı Storyboard da ortaya çıkarmak için, ss-5’te gördüğünüz Views as: iPhone 11 yani görünüm iPhone 11 kısmına bir kere tıklayarak açabilirsiniz
Interface Style kısmından iOS 13 ile gelen dark mode stiline geçiş yaprak uygulamanızın dark mode modunda nasıl görünmesini istiyorsanız tasarlayabilirsiniz. Yani dark mode için nasıl uygulama geliştirebilirim diye düşünmeniz gerek yok.
Generation kısımından ise tasarladığınız arayüzün yatay ekranda nasıl göründüğünü görebilir ya da nasıl görünmesini istiyorsanız öyle tasarlayabilirsiniz. Bu olayların tamamı arayüz tasarlamanın en önemli kısmı olan responsive ile ilgili konular, derslerimiz bittiğinde bu konuda gayet yetkinlik sahibi olacaksınız.
Device kısmı ise cihaz seçimi yapabilmemizi sağlıyor. Resim ss-6 da yaptığımız gibi iPad Pro 9.7″ cihazını seçtik ve Storyboard seçili cihaz için belirlenmiş şekle geçiş yaptı. Ayrıca Storyboardı ı yakınlaştırmak için ‘+’, uzaklaştırmak için ‘-‘ düğmelerini kullanabilirsiniz.
Storyboard Kullanıcı Arayüzünü Tasarlamak
Şimdi uygulamanın kullanıcı arayüzünü tasarlayacağız. İlk önce, görünüme bir “Hello World” düğmesi ekleyeceğiz. Nesne kütüphanesini göstermek için nesne kütüphanesi ‘+’ düğmesine tıklayın. Daha sonra UI nesnelerinden herhangi birini seçebilir ve görünümde sürükleyip bırakabilirsiniz. Nesne hakkında ayrıntılı açıklamayı görmek için nesnelerden herhangi birini tıklamanız yeterli.
Şimdi yapacağımız şey bir buton ekleyeceğiz. Nesneler arama kısmına Button yazarak buton seçenekleriniz arayabilirsiniz. Remim ss-7 de gördüğünüz gibi Button nesnesini tutup sürükleyip ekrana bırakıyoruz.
Button nesnesini görünüme sürüklediğiniz de, buton ortalamış ise yatay ve dikey kılavuzlar görürsünüz. Button nesnesini view’e yerleştirmek için sürüklemeyi bırakın. Ardından butonu yeniden adlandıralım, butonun etiketini düzenlemek için, çift tıklayın ve “Merhaba Dünya” yazın ve ‘Enter’ tuşuna tıklayın. Değişiklikten sonra, düğmeyi tekrar ortalamanız gerekebilir.
Eğer Xcode 10’dan daha düşük bir Xcode versiyonu kullanıyorsanız, Button nesnesi varsayılan bir büyüklük ile tanımlandığından yazınız sığmayacaktır. Nesnenin üzerine bir kere tıklayın köşelerden büyütebilirsiniz ya da Nesneye tıkladıktan sonra ‘Command’ + ‘+’ tuşları ile düzenli olarak büyütebilirsiniz.
Evet şimdi bu aşamada uygulamamızı test etmeye hazırız. Çalıştırıp bakalım ne yapmışız. Sol üst kısımda Run (çalıştır) butonun yanında cihaz olarak iPhone 11 seçelim, istediğiniz cihazı seçebilirsiniz, ardından Run butonuna basıp çalıştıralım.
Evet sonunda bir şey çalıştırmayı başardık. Resim ss-9 da olduğu gibi Merhaba Dünya butonu görüyor olacaksınız. Ama şu an butona tıkladığınızda bir şey olmadığını fark edeceksiniz çünkü henüz butona bir görev yüklemedik bunu için ise biraz kod yazmamız gerekecek. Ne duruyoruz hadi yazalım.
Kod yazmaya başlamadan önce şunu belirtmek isterim ki bir satır bile od yazmadan arayüz tasarlayabilme özelliği iOS’un bir ayrıcalığıdır. Çünkü Kullanıcı Arayüzü ve Code Arayüzü birbirinden ayrıdır.
Merhaba Dünya
Buradan sonraki derslerimiz hepsi Arayüz-Kod arasında gerçekleşecek. Arada özel bilgiler bulunacak ama uygulama geliştirme dil öğrenmeye benzemez iş hayatında neler yapılıyorsa onlar yapılacak sadece birazcık daha kolay. Tabi ilk olarak öğrenen kişilere o kadar kolay olmayabilir. Ama şöyle bir gerçek var “Abi çok zevkli bir şeymiş bu” diyeceksiniz.
İlk uygulamamızın kullanıcı arayüzünü tamamladığımıza göre, biraz kod yazmanın zamanı geldi. Proje gezgini içerisinde ViewController.swift dosyasını bulacaksınız. Başlangıçta Tek Görünüm Uygulaması (Single View Application) proje şablonunu seçtiğimizden, Xcode zaten ViewController.swift dosyasında bir ViewController sınıfı oluşturdu. Bu dosya aslında Storyboard’taki view denetleyicisi ile ilişkilendirildi. Butona basıldığında bir ‘Merhaba Dünya’ mesajı görüntülemenin kodunu yazacağız.
Merhaba Dünya Butonu
Önce butonumuzun kime göre neye göre işlem yapanını belirlediğimiz yani butonu muzu kodumuzun içinde tanıttığımız kısmı yapıyoruz. Tabi Bar menüden Editör seçiyoruz ve oradan da Assistan seçeneğini seçiyoruz. Assistan ile ss-10 da görüldüğü gibi iki ekranı birlikte kullanabilme özelliğine sahip oluyoruz. Ekranlardan birisini Storyboard diğerini ViewController.swift seçelim.
Storyboard ekranında bulunan butonu muzu klavyeden Control düğmesine basılı tutarken sürükleyip ViewController.swift dosyasında ViewController sınıfının içerisine bırakıyoruz. Buraya kadar anlamadığınız kısımları ss-10’dan tekrar kontrol ederek anlayabilirsiniz.
Sürükleyip bıraktıktan sonra karşınıza ss-11 de olduğu gibi nesnemizin özelliklerini tanımlayabileceğiniz bir ekran gelecektir. Bu ekranda önemli burada yapılan yanlış tanımlamalar kod da hatalara neden olabilir.
Button Özellikleri
Connection kısmında Nesnenizin alabileceği özellikler yer almaktadır Outlet, Action vb. şimdilik bizim kullanacağımız nesne buton olacağı için Action seçeceğini seçiyoruz sebebi ise nesneye tıklandığında bir aksiyon alması gerekiyor yani işlem yapması gerekiyor. Geri kalan seçenekleri kullanırken öğrenirseniz daha faydalı olur sizin için.
Object kısmında nesnenin dahil olacağı Calası seçiyoruz biraz OOP ile alakalı bir olay. Burada View Controller seçeceğini seçiyoruz.
Name kısmında butonumuza istediğimiz ismi verebiliyoruz, ben yazılımcı klasiği olarak MerhabaDunya ismini verdim. Türkçe karakter ve boşluk kullanmamaya özen gösteriyoruz.
Type kısmında önceden UIKit’te tanımlı UIButtonu seçiyoruz. Geri kalan iki kısıma is şimdilik biz müdahale etmiyoruz, seçtiğimiz Connection’a göre gerekli öğeler seçilecek. Son olarak Connect diyerek kapatıyoruz.
Şu an Assistant ile işimiz bitti kapatabiliriz. ViewController.swift dosyasının son hali ss-12 de olduğu gibi olması gerekiyor. Butonun yapması gereken işlevi yazacağımız kodu @IBAction func MerhabaDunya fonksiyonun içerisinde yazıyor olacağız.
Merhaba Dünya Butonunun Kodu
Yazacağımız koddan bahsedecek olursak let ile bir alert tanımlayarak ViewController sınıfına bir showMessage (sender: UIButton) yöntemi ekledik. Bu kod ile butona basıldığında ekrana bir alet olarak Merhaba Dünya yazısı yazdıracak ve OK tuşu ile sonlanmasını sağalayacak. Kod aşıdadır.
//
// ViewController.swift
// HelloWorld
//
// Created by mustafa erdogan on 19.10.2019.
// Copyright © 2019 ahmet erdogan. All rights reserved.
//
import UIKit
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
@IBAction func MerhabaDunya(_ sender: UIButton) {
let alertController = UIAlertController(title: "ILK iOS UYGULAMAM",
message: "MERHABA DUNYA",preferredStyle: UIAlertController.Style.alert)
alertController.addAction(UIAlertAction(title: "OK", style: UIAlertAction.Style.default,
handler: nil))
present(alertController, animated: true, completion: nil)
}
}
Not: Kodun bazı satırlarının “//” ile başladığını fark ettiniz mi? Swift’de, satır “//” ile başlıyor ise, bu kod satırı bir yorum satırı haline gelir.
Uygulamanızı Test Edin
Kodumuzu da yazdığımıza göre artık test yapabiliriz. Uygulamamızı çalıştırmak için ne yapmamız gerektiğini artık biliyorsunuz anlatmama gerek yok. Resim ss-13’e bakabilirsiniz.
Testimiz başarılı olarak sonuçlandı. Eğer herseyi yaptığım gibi yaptıysanız bir sorun olmaması lazım ve testiniz başarılı şekilde gerçekleşmesi lazım.
Evet erkadaşlar bu yazımızda iOS Uygulama Geliştirme eğitim serisinde kaldığımız yerden Xcode Storyboard Kullanımı dersi ile devam ettik. Dersimizde Interface Builder başlığı altında Xcode Storyboard’ı ve ViewController sınıfını tanıdık. Ve ilk iPhone uygulamamızı kodunu da yazarak oluşturmuş olduk Bir sonraki derste kaldığımız yerden devam edeceğiz. Eksik gördüğünüz bir yer olursa Soru- Cevap kısmından veya yorum kısmından iletişime geçmekten çekinmeyin. Bir sonraki dersimizde görüşmek üzere.
13