Cihaz ekran boyutundan daha büyük bir içeriği görüntülemek için kullanılan “Scroll View” yapısını öğreneceksiniz. Ayrıca, “Scroll View” yapısını Auto Layout ile nasıl kullanabileceğinizi keşfedeceksiniz.
UIScrollView ile uygulamanıza sığmayan içerik problemini aynı bir internet sitesi gibi aşağı ve yukarı kaydırarak çözebilirsiniz.

Bu dersimizde 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.

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österecek. 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 {
    @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!
    }

    @IBAction func kaydetButton(_ 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 kaydetButton() fonksiyonumuzun içerisine yazıyoruz:

    
        @IBAction func kaydetButton(_ 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.

//// Kod Hazırlanacak ////

UIAlertController kullanarak Uyarı Kutusunda Ö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.

    
    let uyariKutusu = UIAlertController(title: "Başarılı", message: metin, preferredStyle: .alert)
    let tamamButonu = UIAlertAction(title: "Tamam", style: .default, handler: nil)
    let iptalButton = UIAlertAction(title: "İptal", style: .destructive, handler: nil)

    uyariKutusu.addAction(iptalButonu)
    uyariKutusu.addAction(tamamButonu)
    
    self.present(uyariKutusu, animated: true, completion: nil)

    //Uyarı mesajını "Tamam" yada "İptal" butonları ile kapattıktan sonra daha önceden 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: