为 tvOS 构建 SwiftUI app

使用 SwiftUI 为你的 tvOS app 添加新的维度。我们将向你展示如何构建由 SwiftUI 驱动的布局以及如何使用自定义按钮自定义界面，如何使用环境菜单在应用程序中提供更多功能，检查视图是否是焦点并管理默认焦点。为了充分利用本视频，你需要先适应 SwiftUI。有关入门知识，请观看“ SwiftUI 简介：构建你的第一个 app”和“在所有设备上使用 SwiftUI”。

资源

相关视频

WWDC20

SwiftUI 新功能

WWDC19

下载

（你好）（2020 全球开发者大会）你好欢迎来到全球开发者大会大家好我叫 Tanu Singhal 是 Apple tvOS 团队的一位工程师（为 tvOS 构建 SwiftUI app）今天我们要讨论的是为 Apple TV 构建 SwiftUI apps 我们将引入新的 API、探讨最佳做法接着会通过一些实例来帮大家创建出 TV 用户所熟悉的界面和外观体验首先我们会讨论 Apple tvOS 14 上新的按钮样式和右键菜单

接着我们会谈到 apps 的聚焦管理

最后我们会学习如何创建布局即便放在家里最大的屏幕上也依旧美观有一些按钮样式是 TV 特有的我们来看一个例子比如说我们要在 Apple TV 上构建一个音乐流媒体 app

这是设计团队发来的一个模型（热门专辑）他们让我们创建的这些按钮需要在拖动 Siri Remote 时产生挪动的效果如“专辑”下方的按钮所示在 SwiftUI 中我们可以使用新的“卡片按钮样式”创建出这样的按钮

一个卡片按钮会创建一个盘在被选中聚焦时会升起并显示高亮效果当你拖动 Siri Remote 时它还会使按钮向不同方向移动

要想创建一个卡片按钮你只要将按钮样式修饰符添加到任意按钮然后设置成 CardButtonStyle

CardButtonStyle 会给按钮外观带来显著提升不过也许在某些情况下你并不想要预设按钮样式中默认的高亮和聚焦效果这种情况下你可以创建自定义按钮样式它不会给按选和聚焦状态添加预设效果而且自定义按钮样式的用户化设定十分简单易上手

要想创建自定义按钮样式你需要先与 ButtonStyle 协议相匹配…

接着在 makeBody 方法中通过调整配置来返回任何视图

按钮样式设定好之后就可以通过按钮样式修饰符添加到任意按钮上了现在我们设置好了 app 的按钮而这时又收到了另一项功能请求当长按专辑按钮时我们想要唤出一些快捷操作如屏幕中所示（添加到收藏夹查看艺术家类似专辑）这些都能在 SwiftUI 中运用右键菜单轻松实现右键菜单可以被添加进任何按钮或视图中并通过长按手势唤出

我们可以用常规按钮在右键菜单中加入操作

这里的代码展示了如何创建一个右键菜单只要加入右键菜单修饰符我们就能在其中添加一些按钮了如你所见新的按钮样式和右键菜单都非常易于使用我们认为以上这些功能会给你的 apps 带来不错的效果

接下来我们谈谈聚焦聚焦是我们与 TV app 交互的主要方式因此能够聚焦于视图以及判断聚焦是否在某个视图上就显得极为重要

为了进一步了解聚焦我们来看音乐 app 的另一个例子

现在屏幕上显示的是“正在播放” 我们想要聚焦在正在播放的歌曲上对于聚焦中的歌曲我们希望显示艺术家的名字和专辑名称以及一些音乐表情符号对于非聚焦状态的歌曲我们不显示专辑名称而只显示艺术家的名字

要想实现这点首先我们要能够聚焦在歌曲视图上一种方法是使用可聚焦修饰符可聚焦修饰符会在已有视图上创建一层可聚焦包装

要注意的是这个修饰符并不适用于本身就可聚焦的视图也就是说如果你有一个按钮或是菜单或者是一个 UIKit 视图可以在 UIKit 中管理聚焦那最好不要在那之上添加可聚焦修饰符因为这个修饰符会在已有视图上再添加一层可聚焦包装为了在 Apple tvOS 13 上管理聚焦状态你必须通过聚焦变更回调来使用可聚焦修饰符

但在全新的 Apple tvOS 14上我们引进了 isFocused 环境变量

即使在一个视图不可聚焦的情况下也能帮你检测它是否处于聚焦状态

如果视图的最近可聚焦祖先处于聚焦状态那么isFocused环境变量将返回真值

现在我们来看之前歌曲视图的代码

里面只包含一张图片以及后面的一些文本标签

我们将文本标签重构成了 DetailsView

在 DetailsView 内我们就可以使用 isFocused 环境变量来检测这个视图是否处于聚焦状态

所以如果歌曲视图也就是 DetailsView 的父视图是聚焦的那我们的 isFocused 变量就为真

我们会根据这个 isFocused 变量来显示艺术家姓名和专辑名以及表情符号而在视图处于非聚焦状态时只显示艺术家姓名

要注意在歌曲视图下我们使用的是一个按钮所以完全不需要用到可聚焦修饰符因为按钮本身已经是可聚焦的了

使用按钮还有另外一个优势就是附带选择和辅助功能

之前我们已经添加了自定义的按钮样式因为我们不想要预设按钮样式中默认的高亮和聚焦效果

到了这一步我们的 app 已经基本设置好了可以开始使用音乐流媒体服务了

但我们还想添加一个付费版本的 app 使用户能够收听高端内容

要想创建付费版本我们首先要设置一个登录页面（我的音乐用户名登录）这个页面只有用户名和密码输入区以及下方的登录按钮可以看到用户名输入区是默认聚焦的 Apple tvOS 会运用几何学计算出视图加载后应该聚焦的区域一般是最顶端区域或者是页面上主要的可聚焦视图

这个案例中用户名输入区处于聚焦状态是合理的

但有时用户名和密码已经填写好了这时我们就会希望登录按钮是聚焦的（登录）要在 SwiftUI 中实现这点我们可以使用全新的默认聚焦 API

这里我们引入 prefersDefaultFocus 修饰符它使你能够指定默认状态下应该获取聚焦的视图此外我们还要确保当你在小自定义视图上操作时不会意外地改变全局视图层级的聚焦为了支持这点我们创建了聚焦范围修饰符它能将你的默认聚焦偏好限制在一个特定的视图内我们现在来看之前登录页面的代码这是一个 VStack 函数包含一个文本区一个安全区和一个按钮现在我要加入一些聚焦管理的代码

一下子看不过来没关系我们会逐条进行讲解

我们用一个状态变量来识别凭证是否输入完成现在我们在文本区加入偏好默认聚焦修饰符这个修饰符的第一个参数是一个Boolean 如果视图偏好为默认聚焦则它应该是真值在这个例子中输入凭证前用户名偏好为默认聚焦我们在登录按钮上也添加同样的修饰符但只有在输入凭证后它的偏好才会是默认聚焦

接着我们想把聚焦偏好限制在我们当前所处的 VStack 函数上为此我们要创建一个命名空间命名空间是一种动态属性它能为我们提供一个独一无二的 ID 可以用来识别任意视图

我们将这个命名空间添加到之前已经被我们放入 VStack 函数中的聚焦范围修饰符

接着我们将同样的命名空间传递给偏好默认聚焦修饰符来作为第二个参数这样一来默认聚焦偏好就设置好了而且只应用于这个 VStack 函数所以如果只需要在 VStack 函数内聚焦那么根据凭证的输入状态用户名或者登录按钮其一就会获取聚焦但如果聚焦应该在视图层级的其它区域我们的修饰符就不会影响到全局的聚焦这正是我们想要的除了设置默认聚焦我们有时候还需要重置聚焦这可以通过全新的重置聚焦环境操作来完成这个环境操作会将聚焦重置为默认状态同理聚焦的变更只会在你提供的命名空间范围内再回到之前登录页面的例子上假设我们还想添加一个清除按钮用来清除用户名和密码并且将聚焦重置到用户名上要实现这点我们就会用到重置聚焦环境操作

接着在点击清除按钮后我们在原本的聚焦范围内对同一个命名空间调用重置聚焦

由于凭证在这个时候已经被清除了聚焦就会被重置回用户名上通过以上这部分内容我们学习了 isFocused 环境变量以及新的修饰符和环境操作它们都可以用来控制默认聚焦我们认为这些内容对于你创建自己的 SwiftUI apps 会非常有帮助

最后我们来学习如何构建 Apple TV 上常见的布局这是我们之前看过的音乐流媒体 app 的视图你或许在各种 Apple TV 的 apps 上见过类似的布局

它由一排排水平滚动的框架组成

我们可以用新的 Lazy Grids 实现这个界面

Lazy Grids 将子视图整理在一个网格容器内可以水平或垂直滚动

网格单元可以指定像是尺寸、对齐方式和间距之类的属性有助于构建布局你可以从以下两场讲座中了解到更多关于网格的信息（《SwiftUI 新增功能》《SwiftUI 的叠放、网格与轮廓》）不过本期内容中我们会学习如何借助 Lazy Grid 来构建我们之前看到的布局

在“框架视图”内我们创建了一个水平滚动的“滚动视图”

在水平滚动视图中我们加入了一个 LazyHGrid

我们可以往 LazyHGrid 里添加许多单元它们并不会全部同时初始化而是在我们滚动过程中需要它们的时候才会加载

我们还需要设置 Lazy Grid 的 GridItem GridItem 的尺寸可以是灵活的也可以是固定的并且我们可以自定义 GridItem 的间距

在 Lazy Grid 中我们只需添加想要显示在单元格里的内容

这样我们的框架就完成了然后我们可以将多组框架在 VStack 函数中堆叠再添加一些文本标签就能创建出我们之前看到的布局

在 Apple TV 中创建美观的网格布局就是如此轻而易举总而言之我们鼓励大家尝试 Apple tvOS 14 中全新的卡片按钮样式和右键菜单

它们易于使用而且能给你的 apps 带来非常棒的效果

新的聚焦 API 可以帮助你更好地进行 apps 的聚焦管理我们相信这些会对你非常有帮助

最后我们希望你可以借助 Lazy Grids 在 Apple tvOS 中快速构建布局我们迫不及待地想要看到你用 SwiftUI 构建的下一个作品了谢谢大家希望你们度过一场精彩的全球开发者大会（2020 全球开发者大会）（你好）（2020全球开发者大会）

1:42 - CardButtonStyle

Button(albumLabel, action: playAlbum)
    .buttonStyle(CardButtonStyle())

2:24 - Custom Button Styles

struct MyNewButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
           .background(configuration.isPressed ? … : …) // Custom styling
    }
}           

Button(albumLabel, action: playAlbum)
    .buttonStyle(MyNewButtonStyle())

3:19 - Context Menus

AlbumView()
    .contextMenu {
        Button("Add to Favorites", action: addAlbumToFavorites)
        Button("View Artist", action: viewArtistPage)
        Button("Discover Similar Albums", action: viewSimilarAlbums)
    }

5:47 - isFocused Environment Variable

struct SongView: View {
    var body: some View {
        Button(action: playSong) {
            VStack {
                Image(albumArt)
                DetailsView(...)
            }
        }.buttonStyle(MyCustomButtonStyle())
    }
}

struct DetailsView: View {
    ...
    @Environment(\.isFocused) var isFocused: Bool
    var body: some View {
        VStack {
            Text(songName)
            Text(isFocused ? artistAndAlbum : artistName)
        }
    }
}

8:42 - Login Screen (Default Focus)

var body: some View {
    VStack {
        TextField("Username", text: $username)

        SecureField("Password", text: $password)

        Button("Log In", action: logIn)

    }

}

8:51 - Default Focus

@Namespace private var namespace
@State private var areCredentialsFilled: Bool

var body: some View {
    VStack {
        TextField("Username", text: $username)
            .prefersDefaultFocus(!areCredentialsFilled, in: namespace)            
        SecureField("Password", text: $password)

        Button("Log In", action: logIn)
           .prefersDefaultFocus(areCredentialsFilled, in: namespace)
    }
    .focusScope(namespace)
}

11:12 - Reset Focus

@Namespace private var namespace
@State private var areCredentialsFilled: Bool
@Environment(\.resetFocus) var resetFocus

var body: some View {
    VStack {
        TextField("Username", text: $username)
            .prefersDefaultFocus(!areCredentialsFilled, in: namespace)            
        SecureField("Password", text: $password)

        Button("Log In", action: logIn)
           .prefersDefaultFocus(areCredentialsFilled, in: namespace)

        Button("Clear", action: { 
            username = ""; password = ""
            areCredentialsFilled = false
            resetFocus(in: namespace)
        })
    }
    .focusScope(namespace)
}

12:45 - Lazy Grids

struct ShelfView: View {
    var body: some View {
        ScrollView([.horizontal]) {
            LazyHGrid(rows: [GridItem()]) {
                ForEach(playlists, id: \.self) { playlist in                
                    Button(action: goToPlaylist) {
                        Image(playlist.coverImage)
                            .resizable()
                            .frame(…)
                    }
                    .buttonStyle(CardButtonStyle())
                }
            }
        }
    }
}

正在查找特定内容？在上方输入一个主题，就能直接跳转到相应的精彩内容。