ScrollView

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.

Mentorluk

Randevu OluşturKredi Al

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.

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ö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:

Sıradaki

TableView Giriş

Liste halindeki bilgileri göstermek için kullanılan “Table View” yapısının özelliklerini öğreneceksiniz.

Videolar

Swift Temellerine Giriş
Swift Temellerine Giriş
Teknolojinin Dili Kodlama
Teknolojinin Dili Kodlama
Playground Temelleri
Playground Temelleri
Veri Tipleri & Sabitler ve Değişkenler
Veri Tipleri & Sabitler ve Değişkenler
Operatörler
Operatörler
Kontrol Akışı
Kontrol Akışı
Fonksiyonlar
Fonksiyonlar
String'ler
String'ler
Objeler, Metotlar ve Özellikler
Objeler, Metotlar ve Özellikler
Xcode ile Tanışın
Xcode ile Tanışın
Struct
Struct
Class
Class
Koleksiyonlar
Koleksiyonlar
Döngüler
Döngüler
Xcode
Xcode
“Build”, “Run” ve “Debug”
“Build”, “Run” ve “Debug”
Arayüz Elemanlarını Yakından Tanıyın
Arayüz Elemanlarını Yakından Tanıyın
Dokümantasyon
Dokümantasyon
“Interface Builder” Temelleri
“Interface Builder” Temelleri
"UIKit" ile Kullanıcı Arayüzüne Giriş
"UIKit" ile Kullanıcı Arayüzüne Giriş
İlk Uygulama
İlk Uygulama
Kontrol Elemanları
Kontrol Elemanları
Autolayout & Stackview
Autolayout & Stackview
Optionals
Optionals
Tip Dönüşümleri
Tip Dönüşümleri
Guard
Guard
Uygulama Hayat Döngüsü ve Veri Modelleme
Uygulama Hayat Döngüsü ve Veri Modelleme
Scope Sabit & Değişken
Scope Sabit & Değişken
Enumerations
Enumerations
Protokoller
Protokoller
Segue ve Navigation Controller
Segue ve Navigation Controller
TabbarController
TabbarController
View Controller Hayat Döngüsü
View Controller Hayat Döngüsü
Basit Akışlar Oluşturmak
Basit Akışlar Oluşturmak
Uygulama Anatomisi ve Hayat Döngüsü
Uygulama Anatomisi ve Hayat Döngüsü
Model View Controller
Model View Controller
Uygulamanızda Veri Kaydedin
Uygulamanızda Veri Kaydedin
ScrollView
ScrollView
TableView Giriş
TableView Giriş
TableView İleri
TableView İleri
Verileri Kaydetmek
Verileri Kaydetmek
System View Controllers
System View Controllers
Uygulama Geliştirin
Uygulama Geliştirin
Karmaşık Veri Girişi Ekranları Oluşturmak
Karmaşık Veri Girişi Ekranları Oluşturmak
Closures
Closures
Extensions
Extensions
Pratik Animasyonlar
Pratik Animasyonlar
İnternet ile İletişime Geçin
İnternet ile İletişime Geçin
İnternet ile Çalışmak
İnternet ile Çalışmak
JSON
JSON
Concurrency
Concurrency