Text size에 따라 유동적으로 크기를 가지는 ScrollView 만들기

김동현·2022년 9월 9일
0

iOS

목록 보기
2/13


대부분의 앱에서는 이용약관 같은 정책을 노출시키는 페이지가 존재합니다.
회사 운영 방침에 따라 민감한 정보가 될 수 있는 정보들이기 때문에,
추가적인 앱의 업데이트 없이 바로 수정을 진행 할 수 있도록
배포 진행에 있어 비교적 제약이 없는 WebView를 사용하곤 합니다.

그런데 배포 방식을 떠나서 만약 WebView가 아닌 네이티브로 구현한다고 했을때 어떤 방식으로 진행하면 좋을까요?
이용약관의 컨텐츠는 텍스트가 전부인 케이스가 대다수일 것이라고 생각합니다.
즉 제한된 크기를 벗어나면 스크롤 동작을 통해 추가적인 컨텐츠를 확인 할 수 있도록
ScrollView를 활용하면 좋지 않을까 싶은데요!

오토레이아웃을 사용하여 ScrollView를 구현하는 과정에 대해 소개 해보려 합니다.


먼저 ScrollView를 생성 해보겠습니다.

private let scrollView = UIScrollView()


그리고 ScrollView 내부 컨텐츠가 될 UILabel을 생성하겠습니다.

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

numberOfLines을 설정하여 UILabel의 최대 라인 수를 무한으로 설정합니다.


이제 레이아웃 잡아볼껀데 Sanpkit이라는 라이브러리를 사용해보겠습니다.
해당 라이브러리는 Anchor로 오토레이아웃을 잡을때의 번거로움을 삭감 시켜주기도 하며,
적은 코드량으로도 제약조건 설정이 가능하다는 면에서 아주 편리하고 많이 쓰이는 라이브러리입니다.

		view.addSubview(scrollView)
        
        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()
        }

view에 scrollView를 addSubView 해주고
edge를 safeAreaLayoutGuide에 맞춰주면
scrollView의 사방은 safeAreaLayoutGuide에 맞춰집니다.
Label도 ScrollView에 마저 addSubView 한 뒤에 레이아웃을 설정합니다.
여기서 주의할 것은 따로 Label의 height에 대한 제약조건은 설정하지 않았다는 것입니다.
numberOfLines의 값을 0으로 설정했기 때문에 text가 늘어날수록,
제한되어있는 특정 width 값을 넘어 가면서 UILabel의 height 값도 늘어날 수 있도록 하기 위해서입니다.
많은 양의 text를 설정해서 확인해보면 아래와 같이 스크롤을 통해 노출되지 못했던 부분을 확인할 수 있다는 걸 볼 수 있습니다.![](https://velog.velcdn.com/images/devddong/post/52b6960d-ef0c-4bc0-9adf-43b121a2c6b2/image.png)

profile
iOS 개발자 김동현입니다 :)

0개의 댓글