Swift 4 ScrollView Kullanımı

Mobil uygulamalarda en sık kullandığımız objelerden biride kaydırılabilir kısımlardır. Sayfa kaydırma, Fotoğraf kaydırma gibi birçok alanda kaydırılabilir obje kullanıyoruz. Swift’te scrollView nasıl kullanılır gelin bakalım.

Tasarımla başlayalım

İlk olarak View Controllerımıza bir ScrollView atalım. Sınırlarını kullanmak istediğimiz yere göre belirleyelim.

Görsellik açısından pageControl‘de ekleyebilirsiniz. Bu sayede hangi sayfada olduğunuzu kolayca anlaşılabilir.

Ekle menüsü

Projemize ekle kısmından View ekleyelim. Ardından Yine ekle kısmından Coco Touch Class‘tan View alt sınıfını ekleyelim.

Oluşturulan view‘ımıza ( Slide.xib ) gidelim ve istediğimiz tasarımı yapalım.

Slide.xib

Tasarım aşamasını bitirdiğimize göre kod kısmına geçebiliriz. İlk olarak Slide.xib dosyamızı Slide.swift dosyamıza bağlamamız gerekiyor.

Slide.xib Slide.swift’e bağlanmış oldu.

Şimdi Sıra Kodlamada 💻

Objelerimizi kod satırlarımıza bağlayalım bunun için Control ile tutup sürüklememiz yeterli. Dilediğimiz ismi vererek bağlayalım. Bağlama işleminden sonra buradaki işimiz bitti, aynı şekilde Main.Storyboard‘daki objelerimizi de ViewController.Swift dosyamıza bağlayalım.

ViewController.swift

ViewController‘ımıza yeni bir sınıf ekleyelim: UIScrollViewDelegate

Sınıfımızı eklediğimize göre viewDidLoad altına ScrollView‘ımızın delegesini belirtmemiz gerekiyor.

scrollview.delegate = self

Ardından sayfalarımızı tutacak bir dizi oluşturalım.

var slides:[Slide] = []

Bu işlemden sonra bir fonksiyon yaratmamız gerekiyor. Bu fonksiyonumuz bizim sayfalarımızı gireceğimiz yer.

func sliders() -> [Slide]
    
{
        
        
let slide1:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide
        
slide1.imageView.image = UIImage(named: "yivli.JPG")
        
slide1.titleLabel.text = "Yivli Minare"
        
slide1.descText.text = "Antalya Kalekapısı semtinde bulunan ve çok sayıda Selçuklu yapıtından oluşan eserler topluluğudur."
        
        

let slide2:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide
        
slide2.imageView.image = UIImage(named: "kursunlu.JPG")
        
slide2.titleLabel.text = "Kurşunlu Şelalesi"
        
slide2.descText.text = "Kurşunlu Şelalesi Tabiat Parkı Antalya'nın Aksu İlçesi sınırları içinde yer alan doğal güzelliği ile ziyaretçilerinin kendine hayran bıraktıran bir yerdir"
        
        

let slide3:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide
        
slide3.imageView.image = UIImage(named: "duden.JPG")
        slide3.titleLabel.text = "Düden Şelalesi"
        
slide3.descText.text = "Düden şelâlesi, Antalya'yı simgeleyen tabiat güzelliklerindendir. 20 metre yükseklikten dökülür. Ana kaynağı Kırkgöz mevkisidir"
        
        

let slide4:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide
        
slide4.imageView.image = UIImage(named: "termessos.JPG")
        
slide4.titleLabel.text = "Termessos Milli Parkı"
        
slide4.descText.text = "Antalya Korkuteli yolunun 12. km sinde sol tarafta Güllük Dağı Termessos Milli Parkı girişi, sağ tarafta ise Karain Mağarası yolu yer almaktadır. Aynı güzergahtan Antalya'ya dönerseniz dönüş de Güver Kanyonu (Güver uçurumu) Tabiat Parkına uğrayabilirsiniz."
        
        

let slide5:Slide = Bundle.main.loadNibNamed("Slide", owner: self, options: nil)?.first as! Slide
        
slide5.imageView.image = UIImage(named: "perge.JPG")
        
slide5.titleLabel.text = "Perge Antik Kenti"
        
slide5.descText.text = "Antalya şehir merkezinin 17 km. doğusundaki, Aksu sınırları içinde yer alan Perge Antik Kenti, sadece bölgenin değil, tüm Anadolu'nun en düzenli Roma dönemi kentlerinden biridir."
        
        
return [slide1, slide2, slide3, slide4, slide5]
    
}
ScrollView Sayfalarımız

Bir sonraki fonksiyonumuz ise bu sayfalarımızın eklenmesini sağlayacak.

//    Scrollview bilgileri ve kaydırılabbilir öğelerin eklenmesi
    
func setScrollView(slides: [Slide])
    
{
        
scrollView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.height)
        
scrollView.contentSize = CGSize(width: view.frame.width * CGFloat(slides.count), height: view.frame.height)
        
scrollView.isPagingEnabled = true
        

        

for i in 0 ..< slides.count
        
{
            
slides[i].frame = CGRect(x: view.frame.width * CGFloat(i), y: 0, width: view.frame.width, height: view.frame.height)
            
scrollView.addSubview(slides[i])
        
}
    
}

Artık her şey hazır sayılır şimdi PageController‘ımızı ayarlayıp küçük bir animasyon ekleyelim.

func scrollViewDidScroll(_ scrollView: UIScrollView)
    
{
        
let pageIndex = round(scrollView.contentOffset.x/view.frame.width)
   
pageController.currentPage = Int(pageIndex)
        

//        Dikey durum
        
let maximumHorizontalOffset: CGFloat = scrollView.contentSize.width - scrollView.frame.width
        
let currentHorizontalOffset: CGFloat = scrollView.contentOffset.x

//        Yatay durum
        
let maximumVerticalOffset: CGFloat = scrollView.contentSize.height - scrollView.frame.height
        
let currentVerticalOffset: CGFloat = scrollView.contentOffset.y
        
//        Yatay ve dikey olarak kaçıncı scrollView'de olduğumuzu anlamak için bulunan view / maximum view
        
let percentageHorizontalOffset: CGFloat = currentHorizontalOffset / maximumHorizontalOffset
        
        
let percentageVerticalOffset: CGFloat = currentVerticalOffset / maximumVerticalOffset
        
        
let percentOffset: CGPoint = CGPoint(x: percentageHorizontalOffset, y: percentageVerticalOffset)

        

if(percentOffset.x > 0 &amp;&amp; percentOffset.x <= 0.25) 
{
            
            
slides[0].imageView.transform = CGAffineTransform(scaleX: (0.25-percentOffset.x)/0.25, y: (0.25-percentOffset.x)/0.25)

slides[1].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/0.25, y: percentOffset.x/0.25)
            
        
} 
else if(percentOffset.x > 0.25 &amp;&amp; percentOffset.x <= 0.50) 
{
            
slides[1].imageView.transform = CGAffineTransform(scaleX: (0.50-percentOffset.x)/0.25, y: (0.50-percentOffset.x)/0.25)
            
slides[2].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/0.50, y: percentOffset.x/0.50)
            
        
} 
else if(percentOffset.x > 0.50 &amp;&amp; percentOffset.x <= 0.75) 
{
            
slides[2].imageView.transform = CGAffineTransform(scaleX: (0.75-percentOffset.x)/0.50, y: (0.75-percentOffset.x)/0.50)
            
slides[3].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/0.75, y: percentOffset.x/0.75)
            
        
}
else if(percentOffset.x > 0.75 &amp;&amp; percentOffset.x <= 1) 
{
            
slides[3].imageView.transform = CGAffineTransform(scaleX: (1-percentOffset.x)/0.75, y: (1-percentOffset.x)/0.75)
            
slides[4].imageView.transform = CGAffineTransform(scaleX: percentOffset.x/1, y: percentOffset.x/1)
            
        
}
    
}

Bu kodda Animasyon için kullandığımız kısım kafa karıştırabilir. Özellikle if kısımları. Burada yaptığımız işlem ilk olarak sayfa boyutlarını belirledik X ve Y olarak bunları birbirine bölüp nerede hangi sayfada olduğunu anlamasını sağladık. Ardından 5 sayfa için 4 kaydırma yaparak son sayfaya ulaşabiliyoruz yani toplam sayfa sayısının bir eksiği kadar kaydırma işlemimiz var. Her sayfa için 0.25 pay olarak 1’e bölerek buluyoruz. Ardından if kontrolleriyle hangi sayfada olduğumuzu anlayıp ona göre fotoğraflar kaydırılırken küçülmesini sağlıyoruz. Kaydırdığımızı nasıl anlıyoruz diye soracak olursanız kodumuzu eklediğimiz fonksiyon kaydırma işlemi sırasında çalışıyor.

Tüm bunları bitirdiğimize göre son adımımıza geçelim. Burada ViewDidLoad altında fonksiyonlarımızı çağıracağız.

slides = sliders()
setScrollView(slides: slides)
        

//        Sayfa belirteçlerinin başlangıç ayarı
        
pageController.numberOfPages = slides.count
        pageController.currentPage = 0
        
view.addSubview(pageController)
        

//        Dikey kaydırmayı devre dışı bırakmak için
        
self.scrollView.contentSize.height = 1.0

Bu kısımda yaptığımız işlem sayfalarımızı belirleyip diziye atamak ardından bu diziyi scrollView’a kullanmak için hazır hale getirmek. Sayfa belirtecini ayarladıktan sonra dikey kaydırmayı kapattık bu proje için dikey kaydırma kullanmayacağız. 

Artık tüm işlemlerimiz tamamdır. Projemizi çalıştırabiliriz. Tek seferde çalışması dileğiyle. 🤞

Projenin dosyasına erişmek için GitHub

Leave a comment

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

ten + 4 =