[IOS] Label의 text에따라 유동적인 ScrollView 만들기

프로젝트에서 이용약관을 보여줘야 하는 VC가 필요했다.

대부분 이용약관 text는 상당히 길다.

어떻게 표현할지 고민하다 ScrollView를 사용했는데

ScollView의 레이아웃을 잡는 과정을 포스팅 하려한다.

 

일단 ScollView를 만들겠다.

 

private let scrollView: UIScrollView = {
        let scrollView = UIScrollView()
        scrollView.isScrollEnabled = true
        scrollView.indicatorStyle = .black
        scrollView.showsVerticalScrollIndicator = true
        return scrollView
    }()

Scroll 사용 여부를 결정하는 Bool 값인 isScrollEnabled 속성은 true로 설정하고

Scroll 할 때 indicatorStyle로 우측에 indicator의 색상을 설정할 수 있다.

scrollView.showsVerticalScrollIndicator는 false로 설정하면 indicator를 보이지 않게 할 수 있다.

위에는 true로 설정해줬는데 

 

 

기본 값이 True여서 따로 숨기고 싶지 않을때는 설정을 해주지 않아도 보여진다.

 

이제 레이아웃을 잡아 볼껀데 그전에

라벨의 text에 따라 유동적인 ScrollView를 만들거니깐 라벨도 하나 만들겠다.

 

private let contentLabel: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.textAlignment = .center
        return label
    }()

 

이제 진짜 레이아웃 잡아볼껀데 오토레이아웃을 Snapkit으로 진행하겠다.

Anchor로 잡을때의 번거로움을 없에주는데 다음에 Snapkit과 Anchor와의 비교를 포스팅 하겠다.

 

	[scrollView].forEach {
            view.addSubview($0)
        }
        
        scrollView.snp.makeConstraints { (make) in
            make.edges.equalTo(view.safeAreaLayoutGuide)
        }
        
        scrollView.addSubview(contentLabel)
        
        contentLabel.snp.makeConstraints { (make) in
            make.top.equalTo(scrollView).inset(30)
            make.width.equalToSuperview().multipliedBy(0.85)
            make.centerX.equalToSuperview()
            make.bottom.equalToSuperview()
        }

일단 addSubView 해주고

edge를 safeAreaLayoutGuide에 맞춰주면 

safeAreaLayoutGuide에 사방이 맞춰진다.

따로 height을 설정하지 않았다.

 

그리고 Label도 height을 따로 설정하지 않고 top, width, centerX, bottom만 설정해놓은걸 볼 수 있다.

label의 numberOfLines을 0으로 설정하면 1줄에서 끝나는게 아니라 특성상 text양에 따라 줄이 추가되거나 감소해서

ScrollView와 같이 유동적으로 사이즈가 만들어저서 레이아웃이 잡히는걸 볼 수 있다.