-
Dynamic Type을 위해 tvOS 앱 준비하기
Dynamic Type은 사용자가 자신에게 가장 적합한 텍스트 크기를 선택하여 편하게 읽고 앱과 상호작용할 수 있도록 해 줍니다. 서체 크기 조정을 구현하고 더 큰 콘텐츠에 맞게 레이아웃을 조정하는 실용적인 기법들을 통해 tvOS에서 Dynamic Type을 지원할 수 있도록 앱을 준비하는 방법을 알아봅니다. 또한 그리드와 캐러셀 같은 미디어 중심 인터페이스를 최적화하는 방법을 살펴보며, 다양한 텍스트 크기를 사용하는 모든 사용자에게 멋진 경험을 선사할 수 있습니다.
챕터
- 0:01 - Introduction
- 2:46 - Identify common issues
- 6:13 - Adapt your layout
리소스
관련 비디오
WWDC24
-
비디오 검색…
-
-
4:58 - Adopt standard text styles
// Adopt standard text styles VStack(spacing: 20) { Text("Signup information") .font(.caption.bold()) .lineLimit(1) .foregroundStyle(.secondary) .frame(width: 300, alignment: .leading) HStack(alignment: .top, spacing: 40) { //* ... *// } } -
5:10 - Use flexible constraints
// Adopt standard text styles VStack(spacing: 20) { Text("Signup information") .font(.caption.bold()) .lineLimit(1) .foregroundStyle(.secondary) .frame(maxWidth: .infinity, alignment: .leading) HStack(alignment: .top, spacing: 40) { /* ... */ } } -
5:55 - Dynamic Type with text styles in UIKit
// Hard coded text size in UIKit titleLabel.font = UIFont.boldSystemFont(ofSize: 28) // Dynamic Type with text styles in UIKit titleLabel.font = UIFont.preferredFont(forTextStyle: .headline) titleLabel.adjustsFontForContentSizeCategory = true -
7:09 - Adapt layout in response to dynamic type
// A view that shows a collection of movie posters struct MovieShelf: View { @Environment(\.dynamicTypeSize) private var dynamicTypeSize var body: some View { ScrollView(.horizontal) { LazyHStack(spacing: 40) { ForEach(Asset.allCases) { asset in Button { /* ... */ } label: { asset.portraitImage Text(asset.title) } .containerRelativeFrame( .horizontal, count: dynamicTypeSize.isAccessibilitySize ? 4 : 6, spacing: 40) } } } } } -
8:07 - Provide a conditional layout for when larger sizes are turned on
// A view that shows content in a card struct CardContentView: View { @Environment(\.dynamicTypeSize) private var dynamicTypeSize var asset: Asset var body: some View { let layout = dynamicTypeSize.isAccessibilitySize ? AnyLayout(VStackLayout(alignment: .leading, spacing: 10)) : AnyLayout(HStackLayout(alignment: .top, spacing: 10)) layout { /* ... */ } } } -
8:31 - UIKit adaptive layout that responds to content size changes
// UIKit adaptive layout that responds to content size changes class AdaptiveLayoutViewController: UIViewController { let stackView = UIStackView() override func viewDidLoad() { super.viewDidLoad() updateLayout() let sizeTraits: [UITrait] = [UITraitPreferredContentSizeCategory.self] registerForTraitChanges(sizeTraits, action: #selector(updateLayout)) } private func updateLayout() { if traitCollection.preferredContentSizeCategory.isAccessibilityCategory { stackView.axis = .vertical } else { stackView.axis = .horizontal } } }
-
-
- 0:01 - Introduction
Large Text support is now available system-wide on tvOS 27, allowing apps to automatically scale text to match someone's needs and preferences. By supporting Dynamic Type, your app can adapt its layout and display its accessibility support in its Accessibility Nutrition Labels.
- 2:46 - Identify common issues
When accommodating larger text, avoid fixed font sizes and rigid constraints that prevent text from scaling and cause truncation or clipping. Ensure all UI elements are flexible and responsive rather than relying on hardcoded values that break layouts at larger sizes.
- 6:13 - Adapt your layout
Find and replace hardcoded sizes with standard text styles to allow interfaces to grow. In cases where standard scaling isn't enough, adapt your view's layout dynamically—such as reducing the number of columns in a grid—by checking the current `dynamicTypeSize` environment value.