iOS

[iOS/Swift] ImageView Zoom기능: Scrollview 보다 Imageview가 커지는 문제

ohlee52 2023. 12. 7. 13:11
반응형

 

스크롤뷰(scrollview)와 핀치제스쳐를 이용하여 이미지를 확대시키는 화면 만들기.

1. 스크롤뷰와 이미지뷰 제작(이미지뷰 프레임 설정 주의)

2. 스크롤뷰 델리게이트 할당

3. 스크롤뷰델리게이트 프로토콜 함수 생성

4. 탭제스쳐 설정

 

코드는 어렵지 않은데, 막혔던 부분이 있었다.

이미지가 스크롤뷰의 프레임을 넘어가는 크기일때, 이미지 크기가 스크롤뷰 크기에 맞춰지는게 아니라,

스크롤뷰의 컨텐트뷰가 늘어나서 약간 확대되어 보인다는 점이었다.

이유는 기존에 이미지뷰의 Constraints를 잡을때 make.edges.equalToSuperview()로 잡아서였다.

크기를 설정한게 아니라, 수퍼뷰와 끝을 맞게 설정해버려서,

아마 스크롤뷰 특성상 컨텐트뷰가 서브뷰인 이미지뷰의 크기에 맞게 늘어난거같다. 

가로세로 길이를 스크롤뷰 크기에 맞게 바꾸니 해결.

 

import SnapKit
final class ImageDetailView: BaseView {
  
    let imageView: UIImageView = {
       let view = UIImageView()
        view.contentMode = .scaleAspectFit
        view.clipsToBounds = true
        return view
    }()
    let scrolView: UIScrollView = {
       let view = UIScrollView()
        view.zoomScale = 1
        view.minimumZoomScale = 1
        view.maximumZoomScale = 3.0 // 원하는 최대 확대 배율 설정
        view.showsVerticalScrollIndicator = false
        view.showsHorizontalScrollIndicator = false
        return view
    }()
    
    override func configure() {
        super.configure()
        [scrolView].forEach{addSubview($0)}
        scrolView.addSubview(imageView)
        backgroundColor = .clear
//        scrolView.frame = bgView.bounds
    }
    override func setConstraints() {
        super.setConstraints()
        scrolView.snp.makeConstraints { make in
            make.top.equalToSuperview().inset(40)
            make.horizontalEdges.equalToSuperview().inset(8)
            make.bottom.equalToSuperview().inset(12)
        }
        imageView.snp.makeConstraints { make in
            make.center.equalToSuperview()
            make.width.height.equalToSuperview()
        }

    }
}

 

 

 

extension ImageDetailVC: UIScrollViewDelegate {
    @objc func handlePinchGesture(_ gestureRecognizer: UIPinchGestureRecognizer) {
            if let view = gestureRecognizer.view {
                view.transform = view.transform.scaledBy(x: gestureRecognizer.scale, y: gestureRecognizer.scale)
                gestureRecognizer.scale = 1.0
            }
        }
    func viewForZooming(in scrollView: UIScrollView) -> UIView? {
        return mainView.imageView
        }
}
반응형