개발하는 동글 :]

[TIL],[UIKit],[코드로 유동적인 높이를 가진 Scrollview 만들기] 본문

카테고리 없음

[TIL],[UIKit],[코드로 유동적인 높이를 가진 Scrollview 만들기]

동글하다 2023. 8. 26. 20:50

1. ScrollView 만들기

    private let contentScrollView = UIScrollView()

1. 먼저 ScrollView 컴포넌트를 생성해 준다.

    private func setUpContentScrollView(){
        view.addSubview(contentScrollView)
        contentScrollView.snp.makeConstraints{ make in
            make.edges.equalTo(view.safeAreaLayoutGuide)
        }
    }

2. 뷰에 addSubView를 해준 다음 스크롤 뷰의 상, 하, 좌, 우 제약을 잡아준다.

2. ContentView 만들기

    private let contentView = UIView()

1. ContentView를 UIView로 생성해 준다.

    private func setUpContentView(){
        contentScrollView.addSubview(contentView)
        contentView.backgroundColor = .yellow
        contentView.snp.makeConstraints{ make in
            make.edges.equalToSuperview()
            make.width.equalTo(contentScrollView.snp.width)
        }
    }

2. ScrollView에 addSubVIew를 해준다

3. 세로 스크롤을 할 것이기에 ContentView의 제약을 상.하,좌,우 제약을 잡아준 뒤 넓이를 scrollView와 동일하게 설정해 준다.

-가로 스크롤을 원할 시 높이를 scrollView와 동일하게 설정해 준다.

3. ContentVIew에 컴포넌트 추가하기

    private let titleLabel = UILabel()
    private let infoLabel = UILabel()
    private let imageView = UIImageView()
    private let contentLabel = UILabel()

1. 사용할 컴포넌트들을 생성해 준다.

    private func setUpTitleLabel(){
        contentView.addSubview(titleLabel)
        titleLabel.text = "titleLabel"
        titleLabel.font = UIFont.boldSystemFont(ofSize: 32)
        titleLabel.numberOfLines = 0
        titleLabel.backgroundColor = .white
        titleLabel.snp.makeConstraints{ make in
            make.top.equalToSuperview()
            make.left.equalToSuperview().offset(CGFloat.defaultPadding)
            make.right.equalToSuperview().offset(-CGFloat.defaultPadding)
        }
    }
    private func setUpInfoLabel(){
        contentView.addSubview(infoLabel)
        infoLabel.textColor = .systemGray
        infoLabel.text = "info Label"
        infoLabel.font = UIFont.systemFont(ofSize: 16)
        infoLabel.textAlignment = .right
        infoLabel.backgroundColor = .white
        infoLabel.snp.makeConstraints{ make in
            make.top.equalTo(titleLabel.snp.bottom).offset(CGFloat.defaultPadding)
            make.left.equalToSuperview().offset(CGFloat.defaultPadding)
            make.right.equalToSuperview().offset(-CGFloat.defaultPadding)
        }
    }
    private func setUpImageView(){
        contentView.addSubview(imageView)
        imageView.backgroundColor = .white
        imageView.snp.makeConstraints{ make in
            make.top.equalTo(infoLabel.snp.bottom).offset(CGFloat.defaultPadding)
            make.centerX.equalToSuperview()
            make.left.equalToSuperview().offset(CGFloat.defaultPadding)
            make.right.equalToSuperview().offset(-CGFloat.defaultPadding)
            make.height.equalTo(240)
        }
    }
    private func setUpContentLabel(){
        contentView.addSubview(contentLabel)
        contentLabel.numberOfLines = 0
        contentLabel.backgroundColor = .white
        contentLabel.text = "contentLabel"
        contentLabel.snp.makeConstraints{ make in
            make.top.equalTo(imageView.snp.bottom).offset(1000)
            make.left.equalToSuperview().offset(CGFloat.defaultPadding)
            make.right.equalToSuperview().offset(-CGFloat.defaultPadding)
            make.bottom.equalToSuperview() // 하단의 제약을 상위뷰와 동일하게 잡아준다.
        }
    }

2. 컴포넌트들의 제약을 잡아주고 최하단에 위치할 컴포넌트의 하단의 제약은 상위뷰의 하단에 제약을 맞춰 준다.

 

4. 실행화면

 

저작자표시