针对动态字体准备好你的 Apple tvOS App

借助动态字体，用户能够选择最适合自己的文本大小，以便轻松自在地阅读，并与你的 App 进行交互。你将了解如何通过一些实用技巧来实现字体缩放并针对大字号内容调整布局，从而让你的 App 为 tvOS 上的动态字体做好准备。你还将探索如何优化以媒体为中心的界面 (如网格和轮播)，确保每一位需要调整文本大小的用户都能获得出色的体验。

章节

资源

相关视频

WWDC24

动态字体体验入门

大家好，我是Isis，是无障碍功能团队的工程经理。

今年，Apple tvOS 27的无障碍功能带来了好消息。大字体支持现已推出，为平台上的每个App带来全系统范围的文字缩放功能。许多人需要或偏好不同的文字大小，让你的App支持动态调整可以帮助每个人获得出色的体验。你的Apple tvOS App用户一直在等待这项无障碍功能。我将向你展示如何在App中充分利用这一功能。此外，你还可以在 App Store的Apple tvOS 无障碍营养标签中标注对大字体的支持。这是接触专门寻找支持大字体的无障碍App的用户的好方法，以及支持大字体的App。

在本讲座中，我将首先介绍大字体在Apple tvOS上的工作原理，以及用户在哪里可以找到它。然后，我将介绍如何识别 App中需要调整的小部分，以适应更大的文字大小。最后，我将列举几个示例，说明如何根据文字大小调整布局。

让我们先来了解概况。如果你熟悉iOS上的 Dynamic Type，你已经有了良好的开端！ Dynamic Type在Apple tvOS上的工作方式相同。 UIKit和SwiftUI可以根据用户的偏好自动调整文字大小，基于他们的偏好设置。这让人们能够控制文字大小，以匹配他们的需求和偏好。用户可以在"设置"App中开启大字体。导航至"辅助功能"、"显示"，然后选择"文字大小"。他们可以选择文字大小，从"大"一直到 "无障碍XXXL"。我正在开发一款媒体App，让用户发现并观看他们最喜爱的电影。下面展示这款App如何适应这些更大的文字大小。这款媒体App顶部有一个用于导航的标签栏。有一个大标题，以及几个操作按钮，下方是一个收藏视图，展示可以浏览的电影海报。开启大字体后，顶部的导航标题变得更大了。在标签栏中，每个标签现在更大了，界面中的所有文字都显著放大了。标准的UIKit和SwiftUI组件，如标签、按钮和导航标签栏，会自动处理这些变化。对于你的App，你只需识别并更新任何可能需要处理的自定义元素。

在检查App的大字体支持时，有几类需要识别的问题。当你的App以更大的文字大小运行时，你需要确保避免使用固定字体大小，这会阻止文字缩放。不适应Dynamic Type的界面，如硬编码的大小或约束，可能会导致文字截断等问题，或UI元素被裁剪。你可能还需要调整布局，以满足某些元素变大时所需的内边距和间距。这里有一个来自我的媒体App的示例，展示了电影描述的显示方式。顶部显示了标题，底部有文字标签和控件。

将文字设置为最大大小时，大多数文字变大了…… 但左侧有一个文字元素没有缩放。那是显示"注册信息"的说明文字，位于让用户注册的控件上方，购买或租借电影。现在，这样的说明文字可能有硬编码的文字大小，是出于特定的布局原因。例如，它可能最初放在一个具有静态尺寸或刚性约束的容器中。虽然这在创建可预测布局时看起来很有吸引力，但不推荐这样做。这种方法缺乏灵活性，无法适应大字体。相反，应让布局更灵活，并移除硬编码的值。以下是代表我的媒体App 描述视图的代码。它有一个VStack，包含 "注册信息"说明文字，以及一个包含按钮的HStack，以及关于电影的其他文字信息。此代码包含一些大字体方面的不同挑战。它指定了固定的字体大小，不会自动适应，当有人更改其大小偏好时。

在文字视图上，有一个固定宽度约束为300点。

随着文字增大，300点可能不足以容纳文字，这可能导致文字截断。要使这个说明文字适应大字体，我将用语义文字样式替换硬编码的字体样式。在这种情况下，我将使用"caption"。

完成这些更改后，文字大小现在可以动态增长了，但内容现在被截断了。

要解决这个问题，用灵活约束替换固定宽度，让视图按需增长。在文字视图上，我将替换固定宽度，使用参数maxWidth，并将其设置为infinity。这告诉SwiftUI为内容使用尽可能多的宽度。完成这些更改后，我的文字视图与大字体完美配合，并有足够的空间来显示其内容。完美！要在你的App中找到这类常见问题，搜索硬编码的文字大小，并迁移到标准样式。

在你的App中搜索硬编码的高度和宽度约束，并使用灵活约束让内容增长。如果你使用UIKit，方法类似，但需要额外一步。用文字样式替换硬编码字体，并将adjustsFontForContentSizeCategory 设置为true。这告诉UIKit在偏好设置更改时自动更新。

有时仅修复硬编码的值还不够。你可能希望根据大字体调整布局，同时为默认大小保留原始布局。

考虑这个收藏视图。它包含六张电影海报，每张下方都有标题。使用标准文字大小时，完整标题能舒适地显示在图片下方的空间中。启用大字体时，没有足够的空间水平显示六个标题。文字变大时，这个布局需要进行调整。以下是该视图的SwiftUI代码。它呈现了一个水平滚动视图，带有一个LazyHStack。在容器内，我为每个单元格设置了一个按钮。

要调整这个布局，我将首先读取dynamicTypeSize 环境键路径。然后，我将更改单元格上的 columnCount参数，在containerRelativeFrame修饰符中。

当启用大字体时，我将把布局设置为一次显示4列，而不是6列。

这提供了更宽的单元格尺寸，给每个标题更多的增长空间。为了适应更长的文字，考虑使用自定义跑马灯策略。

这是我将在这款App中调整布局的另一个示例。我的App的这部分包含不同类型内容的卡片，如海滩视频或露营视频。这些内容卡片每张都包含一张图片、标题和副标题。使用大字体时，元素之间的视觉间距不够，而且文字在其空间内容易被截断。一种解决方案是提供条件布局，用于开启大字体时。以下是如何在SwiftUI中实现条件布局。首先，读取dynamicTypeSize 环境值，以检测何时开启了无障碍字体大小。然后，创建一个VStackLayout 或HStackLayout，取决于是否使用了大字体。 AnyLayout让你抽象这两种类型。像使用其他堆栈一样使用新布局。它将根据文字大小在水平和垂直之间动态切换，取决于文字大小。在UIKit中，使用UIStackView 并更新axis属性，基于preferredContentSizeCategory。 isAccessibilityCategory。

调用registerForTraitChanges 并传递UITraitPreferredContentSizeCategory，以在App运行时响应大小变化更新布局。

让我们来看看它在我的App 内容卡片中的实际效果。开启大字体时，布局切换为垂直堆栈。这让标题和副标题能增长到单元格的整个宽度，而不是与图片共享宽度。这种布局还允许单元格变得更高，以提供更多空间用于内容显示。

现在你已准备好在Apple tvOS上测试具有大字体的App了。通过使用系统文字样式发现可以改进的地方，并调整布局以优先考虑文字可读性。以下是你的行动计划。使用标准文字样式而不是硬编码字体。

在启用大字体的情况下系统性地测试。

在需要时调整布局以获得最佳体验。并标注对大字体的支持，在你App的Apple tvOS 无障碍营养标签中。

现在轮到你让你的Apple tvOS App 对所有人都无障碍了！

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.

探索“入门汇总”

及时了解最新动态

探索“平台”

精选

探索“技术”

精选

探索“社区”

精选

探索“文档”

发布说明

探索“下载”

精选

探索“支持”

精选

快速链接

针对动态字体准备好你的 Apple tvOS App

章节

资源

相关视频

WWDC24