-
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 - Identifier les problèmes courants
- 6:13 - Adapter votre mise en page
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 } } }
-