-
Prepara tus apps de tvOS para Tamaño de letra dinámico
La funcionalidad Tamaño de letra dinámico permite a las personas leer e interactuar cómodamente con tu app, ya que les permite elegir el tamaño de letra que mejor se adapte a sus necesidades. Aprenderás a preparar tu app para Tamaño de letra dinámico en tvOS mediante técnicas prácticas para implementar el ajuste del tamaño de fuentes y adaptar tus diseños a contenidos de mayor tamaño. También descubrirás cómo optimizar tus interfaces centradas en los medios, como las cuadrículas y los carruseles, para garantizar una experiencia excelente a todas las personas que utilizan diferentes tamaños de texto.
Capítulos
- 0:01 - Introducción
- 2:46 - Identifica problemas comunes
- 6:13 - Adapta tu diseño
Recursos
Videos relacionados
WWDC24
-
Buscar este video…
-
-
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 } } }
-