개발/아이오에스

swift] 코드로 UIscrollView 구현하기

dev.jake 2021. 7. 28. 13:30
    let scrollView: UIScrollView = {
       let sv = UIScrollView()
        sv.translatesAutoresizingMaskIntoConstraints = false
        sv.backgroundColor = .systemRed
        return sv
    }()
    let viewInScroll: UIView = {
        let uv = UIView()
        uv.translatesAutoresizingMaskIntoConstraints = false
        uv.backgroundColor = .systemBlue
        return uv
    }()
    
    //스크롤뷰와 스크롤뷰 안에 들어 갈 뷰를 선언해준다.

func initLayout(){
	 view.addSubview(scrollView)
        scrollView.topAnchor.constraint(equalTo: naviTopView.bottomAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
        scrollView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor).isActive = true
        scrollView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor).isActive = true
        //우선 UIscrollView의 위아래와 양 옆의 Anchor을 view의 safeAreaLayoutGuide에 맞게 선언해준다.

        scrollView.addSubview(viewInScroll) //스크롤 뷰 안에 view를 넣는다.
        viewInScroll.topAnchor.constraint(equalTo: scrollView.topAnchor).isActive = true
        viewInScroll.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor).isActive = true
        viewInScroll.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor).isActive = true
        viewInScroll.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor).isActive = true
        viewInScroll.widthAnchor.constraint(equalTo: scrollView.widthAnchor, multiplier: 1.0).isActive = true //가로로 스크롤 할 필요가 없을 때는 이처럼 스크롤뷰와 안에 뷰의 width값을 같게한다.


        }
        
}

스크롤뷰 안에 있는 뷰는 스크롤뷰의 위아래, 양 옆과 같이 constraint를 정해준다. 

run - 

systemRed인 스크롤뷰가 화면에 가득차 있고, 스크롤뷰의 안에 뷰(systemBlue)는 보이지 않는다.(뷰의 크기가 정해지지 않음)

이때

viewInScroll.heightAnchor.constraint(equalToConstant: 350).isActive = true 처럼 heightAnchor- 높이를 정해주면 

이런식으로 스크롤뷰안에 뷰가 보여진다.

viewInScroll.heightAnchor.constraint(equalToConstant: 800).isActive = true 높이를 화면 크키보다 크게 늘려 적용을 하면 

 

스크롤이 되는 모습을 볼 수 있다.