개요

가독성 있는 컨텐츠를 실현하는 가이드 Readable Content Guide 로, 스크롤 뷰를 사용하는 경우의 대응 방법을 설명합니다.

Readable Content Guide 정보

iOS에는 Readable Content Guide라는 레이아웃 가이드가 있습니다.

예를 들어, 텍스트 등을 표시하는 경우, iPhone의 경우는 화면폭 가득 텍스트를 표시해도 좋지만, iPad등의 큰 화면이라면, 왼쪽 화면 끝에 조금 텍스트가 들려 버리는 경우가 있을까 생각합니다. (Left To Right의 경우)

Readable Content Guide를 사용하면 기기와 방향에 따라 읽을 수 있는 최적화된 영역에서 콘텐츠를 볼 수 있습니다.

iPad의 가로 방향이 특히 현저하고, Readable Content Guide의 유무로 좌우의 틈이 바뀌어, 문장이 중앙에 들러 읽어지기 쉬워지는 것을 알 수 있습니다.
장치와 각 방향의 틈새 조정도 Readable Content Guide를 제공합니다.


Readable Content Guide 없음
Readable Content Guide 있음






htps : //로 ゔぇぺぺr. 아 ぇ. 이 m/네 ws/? 아니 d = xcb564
의 Keep your content readable 의 항목도 참고해 주세요.

Readable Content Guide 구현 방법

인터페이스 빌더

Interface Builder로 대응하는 경우의 순서는 이하입니다.

Readable Content Guide에 대응시키고 싶은 뷰의 Superview에 대해 Follow Readable Width를 체크한다

Readable Content Guide에 대응시키고 싶은 뷰의 제약 leading, trailing을 Safe AreaではなくSuperviewのmarginに対してequalに設定 하고, Relative to margin에 체크를 넣는다

leading의 제약은 이런 느낌이 됩니다.

Readable Content Guide + UIScrollView (본제)

위의 문장은 iPad라고 해도 너무 길기 때문에, 세로 스크롤 할 수 있도록 UIScrollView에 내포합니다.
그러나 여기서 문제가 발생합니다.

화면 가득 UIScrollView를 표시하고 컨텐츠를 세로 스크롤하는 경우 다음과 같은 구성이 될 것이라고 생각합니다.

표시 할 콘텐츠 (이 경우 UILabel)를 Content Layout Guide로 제한합니다.

Frame Layout Guide는 표시할 컨텐츠의 가로폭으로 한다

그러나 이 경우 Frame Layout Guide의 가로폭은 화면폭 자체이므로 Readable Content Guide를 참조한 것이 아니라 화면폭 가득 콘텐츠가 표시됩니다.
내용이 UIScrollView의 Readable Content Guide를 참조할 수 없습니다.

대응

UIScrollView 안에 우선은 컨텐츠를 나타내는 View를 두고, Content Layout Guide의 4방향과 Frame Layout Guide의 양쪽에 제약을 설정해, 컨텐츠 View안에, 스크롤 하고 싶은 컨텐츠(이번의 경우 UILabel)를, 컨텐츠 View 의 Readable Content Guide에 맞추면 OK입니다.

Interface Builder로 대응

UIScrollView 바로 아래에 ContentView를 두고, Content Layout Guide의 4방향과 Frame Layout Guide의 양쪽에 제약을 설정해, Follow Readable Width의 체크를 해, 안의 UILabel는 Superview의 margin를 참조하고 있습니다.

코드로 대응

UIScrollView에는 콘텐츠를 보여주는 contentLayoutGuide 뷰 안에, 스크롤하고 싶은 컨텐츠(이번의 경우 UILabel)를 readableContentGuide에 맞추면 OK입니다.

        let scrollView = UIScrollView()
        let contentView = UIView()

        scrollView.addSubview(contentView)
        contentView.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            contentView.topAnchor.constraint(equalTo: scrollView.contentLayoutGuide.topAnchor),
            contentView.bottomAnchor.constraint(equalTo: scrollView.contentLayoutGuide.bottomAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.contentLayoutGuide.trailingAnchor),
            contentView.leadingAnchor.constraint(equalTo: scrollView.frameLayoutGuide.leadingAnchor),
            contentView.trailingAnchor.constraint(equalTo: scrollView.frameLayoutGuide.trailingAnchor),
        ])

        let label = UILabel()
        label.text = text
        label.numberOfLines = 0
        contentView.addSubview(label)
        label.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            label.topAnchor.constraint(equalTo: contentView.topAnchor),
            label.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
            label.leadingAnchor.constraint(equalTo: contentView.readableContentGuide.leadingAnchor),
            label.trailingAnchor.constraint(equalTo: contentView.readableContentGuide.trailingAnchor),
        ])

표시

이런 식으로 표시할 수 있습니다.

마지막으로

자동으로 디바이스나 화면의 방향에 맞추어 스페이스를 비워 주는 편리한 Readable Content Guide입니다만, SwiftUI에는 iOS 14.4의 시점에서는 대응되어 있지 않은 것 같기 때문에, SwiftUI의 경우는 Size Classes에 응한 마진을 취하는 대응이 필요할 것 같습니다.