UIKit: UIScrollView

UIScrollView ile uygulamanıza sığmayan içerik problemini aynı bir internet sitesi gibi aşağı ve yukarı kaydırarak çözebilirsiniz.

Merhaba sevgili TurkishKit okuyucuları 😌 Swift ile UIKit serimizin bu yazısında fiziksel ekranlardaki sınırları kaldırıp sonsuza kadar kaydırılabilir sayfalar yaratmamızı sağlayan UIScrollView elementini inceleyeceğiz. Eğer iOS uygulamalarınızın içeriği fiziksel ekran boyutundan daha fazla alana ihtiyaç duyuyorsa, haydi başlayalım!

UIScrollView Nedir?

Sınır tanımayan insanların yarattığı cihazlarımızda da sınır yoktur. UIScrollView bu noktada sınırları kaldırmamızı sağlar. UIScrollView sayesinde kullanıcı ekranı aşağı veya yana doğru kaydırarak diğer içeriklere erişebilir. Özellikle küçük ekranlar düşünüldüğünde UIScrollView kullanımı önem kazanıyor. UITableView, UICollectionView ve UITextView gibi diğer UIKit elementleri de bu yapıyı kullanıyor.

Safari’de UIScrollView kullanımı

UIScrollView Sınıfının Özellikleri

UIScrollView Sınıfının Özellikleri

• contentSize: UIScrollView elementinin boyutunu belirler. Height ile yüksekliğini, Width ile genişliğini belirleyebilirsiniz. Örneğin yana kaydırılan bir UIScrollView var ise width değeri daha büyük olacaktır.
• contentOffset: UIScrollView içerisinde gösterilen içeriğin UIScrollView elementinin orijin noktasından ne kadar uzaklaştığını veren değerdir. Örneğin contentOffset.y = 100, aşağı doğru 100 birim indiğimizi gösterir.
• isScrollEnabled: UIScrollView elementinin kaydırılabilir olup olmadığını belirleyen Bool türündeki değerdir. true ise kaydırılabilir, false ise kaydırma özelliği kapalıdır.
• isPagingEnabled: UIScrollView içerisinde bulunan içeriğin sayfalara ayrılıp ayrılmadığını belirler. true değeri aldığında sayfa yapısını alır ve kullanıcı sayfalar arası kaydırma yapabilir. false değeri aldığında UIScrollView genellikle aşağı doğru uzanan akıcı şeklini alır. Facebook NewsFeed false, hava durumu uygulamasındaki lokasyonlar arası geçiş ise true değerine örnektir.
• bounces: UIScrollView alanının sonuna gelindiğinde UIScrollView elementinin nasıl bir aksiyon alacağını belirleyen Bool türünden bir değerdir. true değeri aldığında kullanıcı en sona kadar kaydırdığında sayfa hafiften yukarı doğru seker. false değerinde ise kaydırma işlemi kesin ve ani bir şekilde sona erer.

UIScrollView Nasıl Kodlanır?

UIScrollView elementini Interface Builder aracılığı ile yaratabilirsiniz. Normalde ekrana sığmayacak bir boyutta olan bir form sayfası tasarlayacağız. UIScrollView sayesinde kullanıcının aşağı doğru kaydırarak bu formu doldurmasını sağlayacağız. Bu formda Kullanıcı Adı, İsim, Yaş, Cinsiyet gibi bilgileri girebileceğiz. UIScrollView bize bu elemanları ekrana koyabilmemizde yardımcı olacak.

Hazırlık

Yeni bir Xcode projesi açıyoruz. Projemizin Main.storyboard dosyasına tıklıyoruz. UIScrollView sayesinde görünen alanı aşacak sayıda UILabel ve UITextField ekleyeceğiz. Ancak bunu yapmak için görünen alanı değiştirmemiz gerekiyor. Bunun için Size Inspector kısmına geliyoruz. Burada varsayılan olarak bize gösterilen alan “Fixed” olarak işaretli. Bunu değiştiriyoruz ve “Freeform” diyoruz. Artık yüksekliği değiştirebiliriz. Buradaki yükseklik değerine 1000 veriyoruz ancak siz kendi istediğiniz alanı belirleyebilirsiniz.

UIScrollView Elementini Ekleme

Yeni boyutumuza bir adet UIScrollView ekliyoruz. Ekranın tamamına yayıyoruz ve “Add new Constraint” kısmına gelerek tüm kenarları 0 yapıyoruz.

UILabel, UITextField ve UIButton Elementlerini Ekrana Yerleştirme

Şimdi birkaç UITextField ve UILabel eklememiz gerekiyor. Sona ise bir UIButton ekleyeceğiz. UILabel ile ne tür bir bilgi istediğimizi belirtip, UITextField ile kullanıcıdan bilgi alacağız. Sondaki UIButton ise bir uyarı kutucuğunda kullanıcının girdiği bilgileri tekrardan bize göstecek. Arayüz elemanlarının son hali bu şekilde:

UILabel, UITextField ve UIButton Elementlerini Koda Bağlama

Bu tasarımı oluşturduktan sonra sol üstte yer alan“Assistant Editor” kısmını açarak yarattığımız elemanları kodumuza bağlıyoruz. Kodun son hali aşağıdaki gibi oluyor:

class ViewController: UIViewController {
    // Arayüz elemanlarını koda bağlamak
    @IBOutlet weak var isimTextField: UITextField!
    @IBOutlet weak var soyisimTextField: UITextField!
    @IBOutlet weak var yasTextField: UITextField!
    @IBOutlet weak var cinsiyetTextField: UITextField!
    @IBOutlet weak var konumTextField: UITextField!
    // Fonksiyonlar
    @IBAction func kaydetPressed(_ sender: Any) {
    }
}

UIButton elementine basıldığında çalışacak fonksiyon

Kodumuzu yazdıktan sonra aldığımız verilerin ekranda görünmesi çok hoş olabilir. Bunun için önce verileri aldığımızdan emin olmalıyız. Bunun için “if-let” kavramını kullanacağız. Bu yapı, eğer UITextField elementleri içerisine kullanıcı tarafından bir değer girildiyse fonksiyonun çalışmasını sağlayacak. Gerekli olan bu kodları kaydet butonuna basınca çalışacak olan kaydetPressed() fonksiyonumuzun içerisine yazıyoruz:

@IBAction func kaydetPressed(_ sender: Any) {
    if let isim = isimTextField.text,
       let soyisim = soyisimTextField.text,
       let yas = yasTextField.text,
       let cinsiyet = cinsiyetTextField.text,
       let konum = konumTextField.text
}

If-let içinde de metin adında bir sabit yaratarak paragraf tutmasını sağlıyoruz. Bu paragraf bize çıktı alacağımız bilgileri verecek.

let konum = konumTextField.text {
    // Alt alta paragraf şeklinde gözükmesini istediğimiz için """ kullanıyoruz.
    let metin = """
        Merhaba \(isim), aramıza hoş geldin. Bilgilerin aşağıda:
        İsim Soyisim: \(isim) \(soyisim)
        Yaş: \(yas)
        Cinsiyet: \(cinsiyet)
        Konum: \(konum)
    """
}

UIAlertController Kullanarak Alert Objesinde Önceden Girilen Bilgileri Göstermek

Son olarak if-let yapısı içerisinde oluşturduğumuz ve gerekli değerleri kullanıcıdan aldığımız paragrafı ekrana yazdırıyoruz. Bunu ekranda uyarı kutusu göstermeyi sağlayan UIAlertController ile gerçekleştiriyoruz.

// Uyarı kutusunda sunulan butonları yaratma
let uyariKutusu = UIAlertController(title: "Başarılı", message: metin, preferredStyle: .alert)
let tamamButonu = UIAlertController(title: "Tamam", style: .default, handler: nil)
let iptalButonu = UIAlertController(title: "İptal", style: .destructive, handler: nil)
uyariKutusu.addAction(iptalButonu)
uyariKutusu.addAction(tamamButonu)
// Uyarı kutusunu gösterme
self.present(uyariKutusu, animated: true, completion: nil)
// Uyarı kutusunu "Tamam" ya da "İptal" butonları ile kapattıktan sonra daha önce girilen bilgilerin sıfırlanmasını istiyoruz.
isimTextField.text = ""
soyisimTextField.text = ""
yasTextField.text = ""
cinsiyetTextField.text = ""
konumTextField.text = ""

Şimdi bu kodu biraz inceleyelim. Öncellikle UIAlertController ile bir uyarı kutusu oluşturduk. Başlık belirledikten sonra içinde gösterilecek mesajı if-let içerisinde oluşturduğumuz “metin” değeri olarak belirledik. Daha sonra uyarı kutularını kapatmayı sağlayan butonları oluşturduk. “İptal” butonu silme eylemi gibi önemli bir buton olduğundan “Destructive”. türünde yani kırmızı olarak belirledik. Son olarak oluşturduğumuz UITextField elementlerinin değerlerini boş bir metine eşitleyerek sıfırlanmalarını sağlıyoruz. Bu sayede uyarı kutusunu kapattıktan sonra tekrardan yeni bilgiler girebileceğiz. Artık uygulamamız hazır:

Projenin kaynak kodlarını TurkishKit GitHub hesabımızda bulabilirsiniz.

TurkishKit/UIScrollView

Eğer siz de Gradient efektli Kaydet butonu yaratmak istiyorsanız CAGradientLayer konulu önceki yazımıza göz atabilirsiniz.

Core Animation | CAGradientLayer

UIScrollView elementinin bize sunduğu sınırları kaldırma prensibinin hayatınızın ve uygulamalarınızın merkezi olması dileğiyle. Keyifli kodlamalar😉

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. Eğitim boyunca karşılaşacağınız problemleri birebir online görüşmelerde çözün.

Bizi daha yakından takip etmek istiyorsanız, sosyal medya hesaplarımıza aşağıdan ulaşabilirsiniz.

Twitter | Instagram | Facebook