[swift] 코드로 horizontal scrollView 만들어보기 번외편

오늘은 horizontal scrollView 2번째 입니다!

지난 번에 굳이 이미지뷰를 3개 만들어 번거로웠더랬져?

오늘은 배열에서 불러오도록 해볼게요.

 

일단 기본 레이아웃은 숨겨둘게요.

1. horizontal 방향이니까 contentView의 edges는 scrollView의 contentLayoutGuide에, height는 frameLayoutGuide에 맞출 것

2. 사진을 3장 넣을 거라서 width의 UIScreen의 width의 3배

3. scrollView의 view와 똑같이 맞춰도 되지만, 인스타 느낌처럼 조금 작게 해봄

import UIKit
import SnapKit

class SecondHorizontalViewController: UIViewController {

    let scrollView = UIScrollView()
    let contentView = UIView()
    let images = ["뭉치1", "뭉치2", "뭉치3"]


    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        configureUI()
        scrollWithImageView()
    }
}

extension SecondHorizontalViewController {
    func configureUI() {
        setDetail()
        setLayout()
        setScrollView()
    }

    final private func setScrollView() {
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.delegate = self
    }
    
    func setDetail() {
        scrollView.backgroundColor = .blue.withAlphaComponent(0.5)
    }
    
    func setLayout() {
        view.addSubview(scrollView)
        scrollView.addSubview(contentView)
        
        scrollView.snp.makeConstraints { make in
            make.leading.trailing.equalToSuperview()
            make.top.equalToSuperview().inset(100)
            make.bottom.equalToSuperview().inset(300)
        }
        
        let width = UIScreen.main.bounds.width
        
        contentView.snp.makeConstraints { make in
            make.edges.equalTo(scrollView.contentLayoutGuide)
            make.height.equalTo(scrollView.frameLayoutGuide)
            make.width.equalTo(width * 3)
        }
    }
}

---

이제 extension을 통해 함수 하나를 추가해줍니다.

    func scrollWithImageView() {
        for index in 0..<images.count {
            let imageView = UIImageView()
            let positionX = self.view.frame.width * CGFloat(index)

            imageView.frame = CGRect(x: positionX, y: -190, width: self.view.bounds.width, height: self.view.bounds.height)
            imageView.image = UIImage(named: images[index])
            imageView.contentMode = .scaleAspectFit

            self.contentView.addSubview(imageView)
        }
    }

 

 

이번 작전(?)은 이미지의 갯수만큼 이미지뷰의 크기를 계산하여 해당 위치(x,y좌표)에 해당 이미지를 넣는 거에요.

positionX가 index(=이미지의 갯수)에 따라 계속 변하기 때문에 print를 찍어보면

0.0 -> 375.0 -> 750.0으로 변한답니닷.

 

---

위 방법은 scrollView와 ContentView를 만들고, 거기에 imageView를 addSubView하는 방식이었는데요!

imageView를 아예 scrollView에 더해주는 방법도 있답니당

 

 

위에 코드에서는 ContentLayoutGuide와 FrameLayoutGuide를 이용하여 contentView의 레이아웃을 잡아서 scrollView의 contentSize를 정해줬었는데요.

아래 코드에서는 직접 스크롤뷰의 contentSize라는 속성을 선언해서 만들어준 차이가 있습니당.

 

 

코드는 숨겨둘게요. (아래처럼 해도 동일한 결과가 나와요)

import UIKit
import SnapKit

class SecondHorizontalViewController: UIViewController {

    let scrollView = UIScrollView()
    let images = ["뭉치1", "뭉치2", "뭉치3"]
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        configureUI()
        scrollWithImageView()
    }
}

extension SecondHorizontalViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        print(scrollView.contentOffset)
        print("width: \(scrollView.frame.size.width)")
    }
    
    func scrollWithImageView() {
        for index in 0..<images.count {
            let imageView = UIImageView()
            let positionX = self.view.frame.width * CGFloat(index)
            imageView.frame = CGRect(x: positionX, y: -190, width: self.view.bounds.width, height: self.view.bounds.height)
            imageView.image = UIImage(named: images[index])
            imageView.contentMode = .scaleAspectFit
            scrollView.contentSize.width = imageView.frame.width * CGFloat(index + 1)
            self.scrollView.addSubview(imageView)
        }
    }
}

extension SecondHorizontalViewController {
    func configureUI() {
        setDetail()
        setLayout()
        setScrollView()
    }

    final private func setScrollView() {
        scrollView.isPagingEnabled = true
        scrollView.showsHorizontalScrollIndicator = false
        scrollView.delegate = self
    }
    
    func setDetail() {
        scrollView.backgroundColor = .blue.withAlphaComponent(0.5)
        //imageView.image = UIImage(named: "뭉치1")
    }
    
    func setLayout() {
        view.addSubview(scrollView)
        
        scrollView.snp.makeConstraints { make in
            make.leading.trailing.equalToSuperview()
            make.top.equalToSuperview().inset(100)
            make.bottom.equalToSuperview().inset(300)
        }
    }
}

---

스크롤뷰는 정말 정말 어려운 것 같아요.

제가 좌표체계를 두려워하기 때문인 것도 같고,,,

앞으로도 스크롤뷰에 대해 파헤쳐 가볼게요....ㅎㅎ

 

 

혹시 틀린 게 있으면 언제든지 알려주십셔 슨배님덜!