-
Préparez vos apps tvOS pour les polices dynamiques
Avec les polices dynamiques, les utilisateurs parcourent votre app et interagissent facilement avec elle en leur permettant de choisir la taille de texte qui leur convient le mieux. Vous apprenez à préparer votre app afin d'utiliser les polices dynamiques sur tvOS grâce à des techniques pratiques pour mettre en œuvre la mise à l'échelle des polices et adapter vos mises en page à des contenus de taille supérieure. Vous découvrez également comment optimiser vos interfaces multimédias, telles que les grilles et les carrousels, afin de garantir une expérience exceptionnelle à tous ceux qui comptent sur différentes tailles de texte.
Chapitres
- 0:01 - Introduction
- 2:46 - Identify common issues
- 6:13 - Adapt your layout
Ressources
Vidéos connexes
WWDC24
-
Rechercher dans cette vidéo…
-
-
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.