[swift] 코드로 vertical scrollView 만들어보기 2

Vertical ScrollView는 지난 번에 만들어 보았는데요.

이번에는 야매(?) 세로 스크롤뷰(vertical scrollview)를 만들어보려구요.

 

 

보통 세로 스크롤뷰는 뷰보다 큰 내용을 담을 때 사용하잖아여?

근데 가끔은 내용이 많지 않을 때도 스크롤뷰가 필요할 경우가 있습니다. (또는 요구당할 경우)

예를 들어서 아래와 같이 말이져!

(지난 번 스크롤뷰 재활용 ㅋㅋㅋㅋ 하단에 버튼을 누르면 연결되게 해놨어요 ㅎㅎ)

스크롤이 없는 것보다는 있는 게 훨씬 유저에게 친숙하기도 하고, 완성된 느낌을 주는 것 같긴 합니당.

그래서 버튼 재활용을 통해 저 화면을 만들어볼게욧!

 

 

엄청 간단하답니다!

일단 기본 코드는 숨겨둘게요! 지난 번 코드에 버튼에 액션만 주었답니당!

 

import UIKit
import SnapKit

class VerticalViewController : UIViewController {
 
    
    let scrollView = UIScrollView()
    let contentView = UIView()
    let firstLabel = UILabel()
    let secondLabel = UILabel()
    let thirdLabel = UILabel()
    let firstImageView = UIImageView()
    let secondImageView = UIImageView()
    let thirdImageView = UIImageView()
    let lastButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setUI()
    }
    
    // ⭐️⭐️⭐️ 버튼의 액션 ⭐️⭐️⭐️
    @objc func buttonTapped(_ sender: UIButton) {
        let scrollVC = ScrollViewController()
        self.navigationController?.pushViewController(scrollVC, animated: true)
    }
}

// MARK: - SetUI
extension VerticalViewController {
    final private func setUI() {
        setDetails()
        setLayout()
        addTarget()
    }

    final private func setDetails() {
        firstLabel.text = "측면 뭉치"
        secondLabel.text = "정면 뭉치"
        thirdLabel.text = "서 있는 뭉치"
        
        [firstImageView, secondImageView, thirdImageView].forEach {
            $0.contentMode = .scaleAspectFit
            firstImageView.image = UIImage(named: "뭉치1")
            secondImageView.image = UIImage(named: "뭉치2")
            thirdImageView.image = UIImage(named: "뭉치3")
        }
        
        lastButton.setTitle("버튼입니다.", for: .normal)
        lastButton.setTitleColor(.white, for: .normal)
        lastButton.backgroundColor = .black
    }
    
    // ⭐️⭐️⭐️ 버튼에 액션 추가 ⭐️⭐️⭐️
    final private func addTarget() {
        lastButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
    }
    
    final private func setLayout() {
        [scrollView].forEach {
            view.addSubview($0)
        }


        scrollView.snp.makeConstraints {
            $0.leading.top.trailing.bottom.equalToSuperview()
        }
        
        scrollView.addSubview(contentView)

        [firstLabel, secondLabel, thirdLabel, firstImageView, secondImageView, thirdImageView, lastButton].forEach {
            contentView.addSubview($0)
        }

        
        contentView.snp.makeConstraints {
            $0.edges.equalTo(scrollView.contentLayoutGuide)
            $0.width.equalTo(scrollView.frameLayoutGuide)
            $0.height.equalTo(1200)
        }
        
        firstLabel.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.top.equalTo(contentView).offset(50)
        }
        
        firstImageView.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.top.equalTo(firstLabel.snp.bottom).offset(15)
            make.height.equalTo(300)
            make.leading.trailing.equalTo(contentView)
        }
        
        secondLabel.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.top.equalTo(firstImageView.snp.bottom).offset(50)
        }
        
        secondImageView.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.top.equalTo(secondLabel.snp.bottom).offset(15)
            make.height.equalTo(300)
            make.leading.trailing.equalToSuperview()
        }
        
        thirdLabel.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.top.equalTo(secondImageView.snp.bottom).offset(50)
        }
        
        thirdImageView.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.top.equalTo(thirdLabel.snp.bottom).offset(15)
            make.height.equalTo(300)
            make.leading.trailing.equalToSuperview()
        }
        
        lastButton.snp.makeConstraints { make in
            make.bottom.equalTo(contentView)
            make.leading.trailing.equalToSuperview().inset(20)
            
        }
    }
}

---

이번 야매 스크롤뷰는 지난 번 보다 더 간단한대요.

똑같이 스크롤뷰, 컨텐트뷰, 레이블을 만들어주고 레이아웃을 잡아줍니다.

import UIKit
import SnapKit
class ScrollViewController: UIViewController {

    let scrollView = UIScrollView()
    let contentView = UIView()
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        setUI()
    }
}

// MARK: - SetUI
extension ScrollViewController {
    final private func setUI() {
        setDetails()
        setLayout()
    }

    final private func setDetails() {
        label.text = "주문 내역이 없습니다."
    }
    
    final private func setLayout() {
        [scrollView].forEach {
            view.addSubview($0)
    	}
		
        
        scrollView.snp.makeConstraints {
            $0.top.equalTo(view.safeAreaLayoutGuide)
            $0.leading.trailing.equalToSuperview()
            $0.bottom.equalTo(view.safeAreaLayoutGuide).offset(4) // ⭐️⭐️⭐️
        }

        scrollView.addSubview(contentView)

        [label].forEach {
            contentView.addSubview($0)
        }

        contentView.snp.makeConstraints {
            $0.edges.equalTo(scrollView.contentLayoutGuide)
            $0.width.equalTo(scrollView.frameLayoutGuide)
            $0.height.equalTo(scrollView) // ⭐️⭐️⭐️
        }

        label.snp.makeConstraints {
            $0.centerX.centerY.equalTo(contentView)
        }
    }
}

 

여기서 주의할 점은 ⭐️⭐️⭐️ 부분인데요.

1. 스크롤뷰의 크기를 view의 크기와 똑같이 맞추면 스크롤이 되지 않더라구요! 스크롤뷰의 크기를 뷰보다 약간 크게 맞춰주세영!

 

2. 컨텐트 뷰는 이전과 같이 scrollView의 contentLayoutGuide와 frameLayoutGuide와 잘 맞춰주되, 높이를 스크롤뷰와 동일하게 맞춰줍니당! (또는 $0.height.equalToSuperview() 해도 동일하게 동작합니당!)

 

그리고 레이블을 컨텐트뷰의 정중앙에 놓게 되면, 주문 내역에서 자주 보던 그 스크롤 화면이 뙇 나옵니다!

 

 

처음에는 contentView를 view와 똑같이 맞춰야 한다고 생각했는데요. 이것도 동작을 안 하는 건 아니지만 스크롤이 길게 생겨서 제가 원하는 방향을 아니었어요. 혹시 몰라 view와 맞춘 모습도 코드와 화면을 올려놓고 갈게요.

        contentView.snp.makeConstraints {
            $0.edges.equalTo(scrollView.contentLayoutGuide)
            $0.width.equalTo(scrollView.frameLayoutGuide)
            $0.height.equalTo(view)
        }

만들고 보니, 생각보다 이런 식으로 구현된 많은 화면들이 많이 떠오르더라구요.

하지만 스크롤뷰는 여전히 어렵다,,,

(contentView 맞추기 어려워,,,)