[iOS] Setting에서 Larger Accessibility Sizes 설정에 따른 레이아웃 변경

애플의 '손쉬운 사용' 설정에 들어가면 'Larger Accessibility Sizes' 을 조절할 수 있다. 

 

일단 Accessibility의 경우 모든 사람들이 애플의 디바이스를 편하게 사용할 수 있도록 지원하는 기능이다. 

 

'손쉬운 사용'(= Accessibility)의 경우 VoiceOver, Dynamic Type 등의 기능을 제공하고 있다. 

이 중 'Larger Accessibility Sizes'의 경우 시력이 나쁜 사람들을 위해 글씨의 크기를 설정할 수 있는 곳이다. 

만약 UI 요소가 adjustsFontForContentSizeCategory를 true로 해놓고 Font style을 system이 아닌 스타일 설정을 해놓았다면 'Larger Accessibility Sizes' 설정에 따라 글씨가 바뀌게 된다. 

 

이는 애플 공식 문서 Scailing Fonts Automatically를 보면 찾아볼 수 있다.

위 그림에서 처럼 Font의 Text Styles를 스토리 보드에서 직접 설정해주거나, 코드로 구현해주면 된다. 

 

만약 코드로 이를 구현한다면 아래처럼 해주면 된다. 

label.font = .preferredFont(forTextStyle: .title1)
label.adjustsFontForContentSizeCategory = true

 

이렇게 해준다면 'Larger Accessibility Sizes'를 변경하는 것에 따라 글씨 크기가 변경되게 된다. 

 

하지만 이렇게 설정에 따라 글씨 크기가 바뀌게 된다면 기존에 잡아놓았던 AutoLayout으론 UI 구성이 이상해질 수 있다. 

 

따라서 애플에선 이 때 레이아웃을 어떻게 변경하면 좋을 지 아래 그림처럼 설명하고 있다. 

(이는 WWDC 2017 : Building Apps with Dynamic Type에서 설명하고 있다)

즉 글씨가 잘리거나 두 줄로 나오는 것보다는 Horizontal로 있던 Label을 Vertical로 바꾸는 것이 낫다고 권장하고 있다. 

 

그렇다면 'Larger Accessibility Sizes'에서 설정 값이 변경되었는지 알림을 받는 것이 필요하다.

 

그럼 어떻게 알람을 받을 수 있을까?? 

 

이는 아까 링크를 걸어놓았던 Scailing Fonts Automatically에서 찾아볼 수 있다. 

 

To detect such changes, override the traitCollectionDidChange(_:) method in your view or view controller, and check for changes to the content size category trait. You can also observe didChangeNotification and update the font when the notification arrives.

 

즉 이런 변화를 찾고 싶다면 didChangeNotification을 통해 notification을 받을 수 있다고 하고 있다. 

이는 UIContentSizeCategory에 만들어져 있는 Notification.Name이다.

 

코드로 적어본다면 다음처럼 하면 된다. 

 

일단 viewDidLoad에서 옵져버를 추가해줬다. 

 

override func viewDidLoad() {
    super.viewDidLoad()
    NotificationCenter.default.addObserver(self,
                                           selector: #selector(setLayoutByDynamicType),
                                           name: UIContentSizeCategory.didChangeNotification,
                                           object: nil)
}

 

이 때 해당 변경이 관찰되었을 때 어떻게 행동할 것인지는 selector를 통해 정해주면 된다. 

@objc private func setLayoutByDynamicType() {
    [visitorsStackView, locationStackView, durationStackView].forEach {
        let isLargerText = traitCollection.preferredContentSizeCategory.isAccessibilityCategory
        $0?.axis = isLargerText ? .vertical : .horizontal
    }
}

아래 코드는 특정 StackView에 대해 Font가 특정 사이즈 이상으로 커지게 된다면 StackView의 axis를 horizontal로 바꿔주는 코드이다. 

 

그렇다면 Font가 특정 사이즈 이상으로 커지게 되었는지는 어떻게 알 수 있을까?

 

이는 traitCollection.preferredContentSizeCategory.isAccessibilityCategory를 통해 확인할 수 있다. 

 

그럼 isAccessibilityCategory의 기준은 무엇일까??

 

이는 아까 언급했던 Larger Accessibility Sizes 설정 화면이다. 여기서 빨간 색으로 표시된 부분으로 글씨를 키우게 되면 isAccessiblityCategory가 true를 반환하게 된다. 

 

즉, accessibilityMedium, accessibilityLarge, accessibilityExtraLarge, accessibilityExtraExtraLarge, accessibilityExtraExtraExtraLarge 에서 true를 반환하게 되는 것이다. 

 

Larger Accessibility Sizes를 활성화하기 전에는 빨간 색 이전까지는 설정을 해줄 수 있다. 

 

그래서 이를 활용해 삼항 연산자를 사용하여 isAccessibilityCategory가 true면 StackView의 axis를 Vertical로, false라면 StackView의 axis를 Horizontal로 변경하도록 구현했다. 

 

그 결과는 다음과 같다.

Larger Accessibility Sizes를 활성화한 후

Larger Accessibility Sizes를 활성화하기 전

 

이를 공부하면서 애플이 정말 다양한 사람들이 디바이스를 사용할 수 있도록 많은 것을 고려하고 있다는 것을 알 수 있었다.