Swift ile Uygulama Geliştirme: UIKit ile Kullanıcı Arayüzüne Giriş
UIKit ile uygulamanız için detaylı, güzel tasarlanmış ve harika bir kullanıcı deneyimi sunan arayüzler geliştirebilirsiniz!
Merhaba TurkishKit okuyucuları! 👋🏻 Bugünkü yazımızda UIKit’e giriş yapacağız ve nasıl etkileyici bir tasarım ile deneyimi bir arada sunan arayüzler yapabileceğimizi öğreneceğiz. Vakit kaybetmeden başlayalım!
UIKit Nedir?
UIKit uygulamanızı tasarlarken kullanacağınız bir framework’tür. İçerisinde UIButton, UILabel, UISwitch gibi iOS uygulamanızda kullanabileceğiniz temel elemanları bulundurur.
Arayüz Elemanları
Arayüz elemanları uygulamamızı kullanan kullanıcının gördüğü bütün elemanlardır.
Toolbar
Toolbar kullanıcıların uygulama sayfaları arasında geçiş yapabileceği birden çok opsiyon sunan bir arayüz elemanıdır. İçerisinde UIBarButtonItem türünde elemanlar barındırır. Eğer içerisine yeni butonlar eklemek isterseniz, Object Library içerisinden yeni bir buton sürükleyip bırakarak kolay bir şekilde Toolbar içerisine yeni bir button ekleyebilirsiniz. Toolbar elemanının temel amacı koyduğunuz butonların her ekranda doğru ve düzenli bir şekilde görünmesini sağlamaktır.
UIBarButtonItem Özellikleri
Bilmeniz gereken bazı UIBarButtonItem özelliklerini aşağıda bulabilirsiniz! 🚀
- Style: Butonun stilini (kalın, sade gibi) ayarlamanızı sağlar.
- System Item: Butona XCode içerisinde otomatik olarak gelen kaydet, bitti veya ekle gibi ikon veya yazıları butonunuza atamanızı sağlar.
- Tint: Butonunuzun rengini değiştirmenizi sağlar.
Toolbar içerisinde butonlar arasında aralık vermek için aynı yeni bir button eklerken yaptığımız gibi Object Library içerisinden Bar Button için “Fixed Space for Bar Button” (Sabit aralık) veya “Flexible Space for Bar Button” (Ayarlanabilir aralık) elemanlarından birini Toolbar içerisine sürükleyebilirsiniz.
Toolbar Özellikleri
Bilmeniz gereken bazı ToolBar özelliklerini aşağıda bulabilirsiniz! 🚀
- Translucent: Toolbar elemanının arka planını arkasındaki nesneye göre ayarlamasını sağlar. Örneğin mor bir ekranın üstüne “translucent” özelliği açık bir bar koyarsanız, barın rengi morumsu bir hale dönüşür ve daha güzel bir görünüm sağlar. Açık tutmanız tavsiye edilir.
- Bar Tint: Toolbar elemanının rengini değiştirmenizi sağlar.
Navigation Bar
Navigation Bar elemanı içerisinde bulunduğunuz sayfanın başlığını gösterir ve aynı zamanda içerisine butonlar eklenerek işlevsel bir hale getirilebilir. Navigation Bar içerisine aynı ToolBar elemanında olduğu gibi UIBarButtonItem türünden elemanlar alabilir. Bunu aklınızda şu şekilde tutabilirsiniz: İçerisinde “Bar” geçen elemanlar UIBarButton türünden buton elemanı alabilirler.
Navigation Bar Özellikleri
Bilmeniz gereken bazı Navigation Bar özelliklerini aşağıda bulabilirsiniz! 🚀
- Title Font: Navigation Bar elemanının font özelliğini değiştirmenizi sağlar.
- Title: Navigation Bar elemanının başlığını düzenlemenizi sağlar.
- Style: Navigation Bar elemanının stilini (dark, normal gibi) değiştirmenizi sağlar.
- Bar Tint: Navigation Bar elemanının rengini değiştirmenizi sağlar.
- Prefers Large Title: Navigation Bar elemanının başlığının boyutunu değiştirmenizi sağlar.
Tab Bar
Tab Bar ekranın aşağısında yan yana dizilmiş “tab” bölümlerini içeren, paralel hiyerarşi kurmanızı sağlayan ve farklı içerikleri göstermenizi sağlayan bir elemandır. Tab Bar, içerisine Tab Bar Item tipinden elemanlar alır. Bir Tab Bar içerisine Tab Bar Item eklemek istiyorsanız, yapmanız gereken şey Object Library içinden Tab Bar Item elemanını sürükleyerek Tab Bar içerisine bırakmanızdır. Apple Tab Bar içerisine beşden fazla “tab” elemanı eklememenizi tavsiye eder. Eğer beşten fazla “tab” kullanıyorsanız uygulamanızda bir sorun vardır. 😄
Tab Bar Item Özellikleri
Bilmeniz gereken bazı Tab Bar Item özelliklerini aşağıda bulabilirsiniz! 🎊
- Badge: Mevcut olan Tab Bar Item üzerinde bir baloncuk çıkartır. Genellikle bildirim sayısı göstermek için kullanılır. Badge rengini değiştirebilirsiniz.
- System Item: Tab Bar Item elemanının içeriğini Xcode’un bize temel olarak vermiş olduğu şablonlar ile değiştirmemizi sağlar. (Favoriler, geçmiş vb.)
- Selected Image: Tab Bar Item içerisindeki görseli değiştirmenizi sağlar.
Tab Bar Özellikleri
Bilmeniz gereken bazı Tab Bar özelliklerini aşağıda bulabilirsiniz 🚀
- Item Position: Tab Bar elemanının içerisindeki butonların pozisyonlarını belirlemenizi sağlar
- Style: Tab Bar stilini (Dark, Normal gibi) değiştirmenizi sağlar.
- Bar Tint: Bar elemanının rengini değiştirmenizi sağlar.
Kontrol Elemanları
Kontrol elemanları kullanıcının etkileşime girebildiği ve @IBAction kullanan yapılardır.
Yeni Bir View Controller Eklemek
Şimdi işimize çok yaracak birkaç kontrol elemanı göreceğiz fakat bundan önce Storyboard içerisine yeni bir View Controller eklememiz gerekiyor. Yeni bir View Controller eklemek için Object Library içerisinden bir View Controller elemanı alıp Storyboard içerisine sürüklememiz yeterli.
Unutmamanız gerekir ki eğer uygulamanızı çalıştırırsanız arayüz elemanlarının bulunduğu sayfa açılacaktır çünkü başlangıç View Controller elemanı olarak oluşturduğumuz View Controller elemanını seçmedik. Başlangıç olarak seçmek için ilk başta otomatik olarak oluşan View Controller elemanının başında oluşan oku oluşturduğumuz View Controller üzerine sürüklememiz yeterlidir.
Button
Butonlar kullanıcının rahatlıkla etkileşime girebileceği, çok fazla kullanılan elemanlardır. Butonların temel olarak “Image” ve “Title” olarak iki temel özelliği mevcuttur. Hadi gelin butonların özelliklerine yakından bakalım. 🔎
Button Özellikleri
Bilmeniz gereken bazı Button özelliklerini aşağıda bulabilirsiniz! 🚀
- Type: Butonun tipini Xcode’un temel tipleri ile (bilgilendirme, ekleme, karanlık vb.) veya özel bir tip ile değiştirmemizi sağlar.
- Image: Butona görsel eklemenizi sağlar.
- Text Color: Butonun yazı rengini değiştirmenizi sağlar.
- Font: Butonun font özelliğini değiştirmenizi sağlar.
Özel -custom- buton oluşturmaya kalktığınızda butonun yerini bembeyaz bir alanın aldığını görebilirsiniz. Xcode özel bir buton oluştururken bütün özellikleri temel özelliklere eşitler. Daha sonra butonunuzun font özelliğini, “image” özelliğini ve diğer özelliklerini ayarlayabilirsiniz.
Inset Kavramı
Inset, bir arayüz elemanının dış çeperine olan uzaklığını ifade eder. Örneğin bir butonun sol tarafındaki inset değerini arttırırsanız, buton sağa doğru kaymaya başlar yani sol taraftan uzaklaşır. Inset ayarlaması yapmak için sağ tarafta bulunan Size Inspector bölümüne gidebilirsiniz.
Segmented Control
Segmented Control elemanı, kullanıcının birden fazla opsiyonlar arasında geçiş yapmasına imkan sağlar.
Segmented Control Özellikleri
Bilmeniz gereken bazı Segmented Control özelliklerini aşağıda bulabilirsiniz! 🚀
- Selected Tint Color: Segmented Control içerisinde seçili olan opsiyonun rengini belirtir.
- Segments: Segmented Control içerisindeki opsiyonların sayısını ve şu anda hangi segment üzerinde olduğunuzu gösterir. Buradan segment ekleyebilir veya çıkartabilirsiniz.
- Title: Başlığı düzenlememizi sağlar.
TextField
TextField elemanı çok sık kullanılan, kullanıcının veri girmesini sağlayan, özelleştirilebilir bir elemandır. TextView ile arasındaki en büyük fark ise TextField tek satırlık bilgileri almak için kullanılırken TextView elemanının daha büyük bilgileri almak için kullanılmasıdır.
TextField Özellikleri
Bilmeniz gereken bazı TextField özelliklerini aşağıda bulabilirsiniz 🚀
- Placeholder: TextField içerisinde kullanıcıya ne yazması gerektiği hakkında bilgi veren, bir şeyler yazmaya başlayınca otomatik olarak gizlenen, sönük ve gri yazılardır.
- Text: TextField içerisinde gösterilecek olan yazıyı ayarlamanızı sağlar. Buraya yazı girmenizi önermiyoruz çünkü placeholder’ın aksine buradaki yazı, bir şeyler yazmaya başlayınca silinmez. Kullanıcının kendisi silmesi gerekir.
- Keyboard Type: Kullanıcı TextField elemanına tıkladığı zaman çıkan klavyenin tipini belirler. Örneğin kullanıcıdan telefon numarası istiyorsanız klavye tipini “Phone Pad” olarak ayarlamanız gerekir. Bu sayede kullanıcı sadece sayılardan oluşan bir klavye görmüş olacaktır.
Slider
Slider elemanı zincirleme bir değer aralığından bir değer seçmek için kullanılan, kaydırma animasyonu özelliği olan bir elemandır. Video oynatma uygulamasında videonun neresinde oldığumuzu göstermek ve ayarlamak gibi birçok yerde kullanılır.
Slider Özellikleri
Bilmeniz gereken bazı Slider özelliklerini aşağıda bulabilirsiniz! 📖
- Value: Slider değerini ayarlamanızı sağlar.
- Minimum: Slider elemanının alabileceği minimum değeri belirlemenizi sağlar.
- Maximum: Slider elemanının alabileceği maksimum değeri belirlemenizi sağlar.
- Thumb Tint: Slider elemanının sürüklemek için kullanılan butonunun rengini değiştirmenizi sağlar.
- Min Track: Sürükleme butonunun minimum değerinin yazılı olduğu alanın rengini değiştirmenizi sağlar.
- Max Track: Sürükleme butonunun maksimum değerinin yazılı olduğu alanın rengini değiştirmenizi sağlar.
Küçük bir bilgi: Eğer bir elemana tıklayıp “option” tuşuna basılı tutarsanız diğer elemanlara olan uzaklığını görebilirsiniz.
Switch
Switch, genellikle açma kapama işlevleri için kullanılan diğer elemanlara göre basit bir elemandır.
Switch Özellikleri
Bilmeniz gereken bazı Switch özelliklerini aşağıda bulabilirsiniz! 🔥
- State: Switch elemanının değerini değiştirmenizi sağlar. “On” ve “off” (açık ve kapalı) olarak değerlerini değiştirebilirsiniz.
- On Tint: Switch açık durumdayken gösterilecek rengi değiştirmemizi sağlar.
- Thumb Tint: Switch butonunun rengini değiştirmemizi sağlar.
Date Picker
Date Picker elemanı bir tarih seçmenizi sağlar. Bu elemanı kullanarak kullanıcılardan herhangi bir tarihi almak çok daha kolay bir hale geliyor. Date Picker içerisinde çalıştığı cihaza göre zaman dilimine, diline göre kendini ayarlar ve bu sayede üstümüzden çok büyük bir yükü alır. 😁
Date Picker Özellikleri
Bilmeniz gereken bazı Date Picker özelliklerini aşağıda bulabilirsiniz! 🚀
- Mode: Alacağınız zamanı belirlemenizi sağlar. Örneğin sadece ay ve gün (“mmm d”) veya ay, yıl ve gün (“mmm, yyy d”) gibi.
- Interval: Date Picker içerisindeki dakika aralığını belirlemenizi sağlar. Örneğin “1 minute interval” değeri belirlerseniz dakika seçme seçenekleri 1–2–3 olarak ilerler fakat eğer “3 minute interval” değeri belirlerseniz dakika seçme seçenekleri 3–6–9 olarak ilerler.
- Date: Date Picker açıldığı zaman gösterilen tarihi ayarlamanızı sağlar.
- Minimum Date: Gösterilen minimum tarihi ayarlamanızı sağlar.
- Maximum Date: Gösterilen maksimum tarihi ayarlamanızı sağlar.
Bu makalemizde UIKit içerisindeki en popüler elemanları ve bunları nasıl kullanabileceğimizi öğrendik. Umarım bu bilgilerle mükemmel arayüzler oluşturursunuz. Sonraki makalelerde görüşmek üzere. Bol kodlu günler diliyorum! 💻
Swift Öğrenin. Uygulama Geliştirin. Sınırların Ötesine Geçin.
Hem kod yazmaya yeni başlayanların hem de profesyonellerin rahatlıkla takip edebilecekleri 40 saatlik videolu eğitim ile Swift programlama dilini derinlemesine keşfedin. iOS geliştiricisi olma yolundaki ilk ve güçlü adımı atın. Kendi iPhone uygulamalarınızı geliştirmeye başlayın.
Birebir Mentorluk Desteği
İhtiyaç duyduğunuz her an desteğe hazır TurkishKit mentorları ile eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.
