IOS) Dynamic UIScrollView in Code

안녕하세요 후루륵 짭짭 입니다.

이번에는 Code로 Dynamic ScrollView를 만드는 방법에 대해서 알아보려고 합니다.

고정된 ScrollViews도 많이 사용하지만 어떤 내용을 보여줄 때 고정된 값 보단 

Dynamic하게 보여주는 것도 나쁘지 않기 때문에 ㅎㅎㅎ 

지금 부터 바로 가시죠!

 

** View 구성하기 **

class TableViewController: UIViewController {
    
    let scrollView : UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.alwaysBounceVertical = true
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        return scrollView
    }()
    
    let stackView : UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()
    
    let textField : UITextView = {
       
        let textfield = UITextView()
        textfield.backgroundColor = .brown
        textfield.text = "Hello world"
        textfield.isScrollEnabled = false
        textfield.translatesAutoresizingMaskIntoConstraints = false
        return textfield
        
    }()
    
    ,,,, 생략 
    
 }

이렇게 위에 처럼 ScrollView와 StackView 그리고 TextView를 만들어 준다.

여기서 ScrollView안에 StackView를 넣을 것이고 TextView를 StackView 안에 넣을 예정 입니다.

이때 StackView의 Distribution을 Fill로 채워서 각 뷰의 크기에 맞게 자동으로 조절 하도록 해줍니다.

그리고 여기서 Vertical로 해주므로서 상하로 View들이 채워지도록 합니다.

 

** AutoLayout 적용하기 **

    
    private func configureScrollView(){
        view.addSubview(scrollView)
        
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
    }
    private func configureStackView(){
        scrollView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
    }
    

일단 ScrollView와 StackView의 AutoLayout을 적용하도록 하겠습니다.

ScrollView는 SuperView의 상하좌우에 맞도록 Constraint를 적용하도록 합니다.

그리고 StackView는 상하좌우를 ScrollView에 맞도록 하고 

그리고 너비도 ScrollView에 맞도록 합니다.

하지만 여기서 중심적으로 볼것이 height(높이)에 대한 Constraint는 없다는 것 입니다.

 

여기서 높이는 StackView의 내용물에 따라서 적용이 되도록 한 것 입니다.

그리고 StackView는 alignment가 fill로 되어 있기 때문에,

 private func configureTextField(){
        stackView.addArrangedSubview(textField)
        
    }

textField를 그냥 넣어주면 그에 맞게 적용이 됩니다.

override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .yellow
        configureScrollView()
        configureStackView()
        

        configureTextField()
 
        let kittenImageView1 = UIImageView(image: UIImage(named: "Icon"))
        kittenImageView1.translatesAutoresizingMaskIntoConstraints = false
//        kittenImageView1.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
        kittenImageView1.heightAnchor.constraint(equalToConstant: 200).isActive = true
        self.stackView.addArrangedSubview(kittenImageView1)
        // Do any additional setup after loading the view.
    }

그리고 이미지 까지 넣어주면 됩니다.

( 참고로 여기서 autoLayout을 적용해줬기 때문에, frame 방식은 적용이 안됩니다.

그리고 alignment를 fill로 줬기 때문에 이미지 너비에 대한 constraint를 주지 않아도 됩니다. )

 

전체 코드 : 

class DynamicViewController: UIViewController {
    
    let scrollView : UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.alwaysBounceVertical = true
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        return scrollView
    }()
    
    let stackView : UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.distribution = .fill
        stackView.alignment = .fill
        stackView.translatesAutoresizingMaskIntoConstraints = false
        return stackView
    }()
    
    let textField : UITextView = {
       
        let textfield = UITextView()
        textfield.backgroundColor = .brown
        textfield.text = "Hello world"
        textfield.isScrollEnabled = false
        textfield.translatesAutoresizingMaskIntoConstraints = false
        return textfield
        
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .yellow
        configureScrollView()
        configureStackView()
        

        configureTextField()
 
        let kittenImageView1 = UIImageView(image: UIImage(named: "Icon"))
        kittenImageView1.translatesAutoresizingMaskIntoConstraints = false
//        kittenImageView1.widthAnchor.constraint(equalTo: scrollView.widthAnchor).isActive = true
        kittenImageView1.heightAnchor.constraint(equalToConstant: 200).isActive = true
        self.stackView.addArrangedSubview(kittenImageView1)
        // Do any additional setup after loading the view.
    }
    
    private func configureScrollView(){
        view.addSubview(scrollView)
        
        
        NSLayoutConstraint.activate([
            scrollView.topAnchor.constraint(equalTo: view.topAnchor),
            scrollView.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            scrollView.trailingAnchor.constraint(equalTo: view.trailingAnchor),
            scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor)
        ])
        
    }
    private func configureStackView(){
        scrollView.addSubview(stackView)
        
        NSLayoutConstraint.activate([
            stackView.topAnchor.constraint(equalTo: scrollView.topAnchor),
            stackView.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor),
            stackView.trailingAnchor.constraint(equalTo: scrollView.trailingAnchor),
            stackView.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor),
            stackView.widthAnchor.constraint(equalTo: scrollView.widthAnchor)
        ])
    }
    
    private func configureTextField(){
        stackView.addArrangedSubview(textField)
        
    }


}

 

참고 사이트 : 

 

Dynamic ScrollView 외국 사이트 : 

medium.com/@evanhughes3/creating-a-uiscrollview-without-using-interface-builder-434dfac1a320

Creating a UIScrollView without using Interface Builder