您的键盘布局指南

您的键盘布局指南

探讨如何使用键盘布局指南来管理 iOS 或 iPadOS app 内的键盘工作方式。了解在您使用 UIKeyboardLayoutGuide 和 UITrackingLayoutGuide 将键盘集成到您的界面时如何避免写入冗长的代码块，帮助人们在您的 app 中使用屏幕键盘时获得更加顺畅、更加愉悦的体验。为了能充分了解本节内容，我们建议您先熟悉 Auto Layout 和 UILayoutGuide。

资源
- Adjusting Your Layout with Keyboard Layout Guide
- - 高清视频
  - 标清视频
相关视频

WWDC23
- 跟上键盘发展
WWDC21
- 使用摄像头在您的 app 中进行键盘输入
下载

♪ ♪
大家好我是凯希雅欧沃是键盘界面团队的工程师今天由我担任各位的向导带领你们畅游键盘布局我真的很兴奋今天可以跟各位介绍如何把键盘从过去以框架为主的方式带往自动布局的未来旅程第一站会先介绍新指南接着会介绍一些新功能让你能更全面地把键盘整合进布局最后我们会说明键盘本身就哲学上而言要考虑的键盘种类以及一些你可能不会马上联想的状况现在就开始我们的旅程吧跟很多事一样一切要从远古时代说起如果你之前有在app处理过键盘就知道自古以来处理键盘的方式是通过登录以获得通知从通知中的信息获知适当的偏移和动画运行一些演算最后用那些数据调整你的布局现在通知依然存在我们没有要贬低它们如果有兴趣的话可以参考 2017年“获得更好文字输入经验的秘诀”有更多信息现在看个快速示例用自定义指南要如何使用通知现在不要复制任何代码因为我们等一下会取代代码不过这是iOS 15之前处理键盘的方式你会创建自己的自定义指南和定位点以响应通知接着登录适当的通知通常至少要有出现和隐藏的指令不过有时候还会有框架更改等接着你会通过从通知取得的框架信息响应上述通知确保你调整自己的视图以及安全区域指南如果键盘离开屏幕的话然后你会从通知获得动画信息最后更改你的指南以相符现在没那么难但是可能很快变得复杂今天我很开心可以宣布自动布局集合会有一个全新的附加功能界面键盘布局指南现在在我们深入之际先别太兴奋在iOS 15 键盘布局指南是全新内容那是一份布局指南可以在原有的布局中约束视图与指南如果你对布局指南不熟悉布局指南是在布局中不使用视图来代表空间的一种方式其定位点与视图完全一样键盘布局指南会代表键盘在app中占据的空间所以可以依此分配布局就这样！主要重点都说完了现在来聊聊更新刚才看到的代码改用这个这里是通知的代码先不要复制等到出现绿色的勾选符号好的现在可以开始了移除刚才追踪的定位点从你的布局指南改变成视图的键盘布局指南
我们就不需要再登录通知我们也不需要回应它们就这样所有代码浓缩成一行准备好看看实际运行了吗？这就是使用通知代码叫出键盘的样子这是用指南叫出键盘的样子
你可能注意到除了在地化之外看起来都一样但是这就是重点你不用做那么多事就能获得一样的结果接下来就来谈谈怎么更新指南那是界面视图的属性大部分情况下你只要更新到使用指南的顶端定位点就好指南会与键盘的动画相符例如叫出和收起其也会遵照高度变化因为有时候键盘比较高有时候比较矮但是指南会调整以符合显现的尺寸当键盘依默认设定而浮动时指南会掉到屏幕底部跟窗口等宽你绑在顶端定位点的东西都会跟着移动那可以解释为安全区域嵌入所以你也不用再担心那个部分针对基础用户大概只需要了解这些就好但是现在我们要谈有趣的部分为什么我们要选择使用新的类别而不要直接用一般的布局指南？我们希望你现在能用键盘做得事能比过往还多下一站会把键盘完全整合进你的app 为什么我会说“整合”呢？我经常在听人提起键盘时说得好似那是需要避开的项目或好似会与布局相赤可是键盘是app的一部分界面键盘布局指南背后有个主要动机是要以一种前所未有的方式让你和开发者有能力用不同方法响应让用户可以输入文字并让你真的完全把键盘视为布局的一部分我真的很期待看到你们利用这些新功能所以我们的下一站是什么让键盘布局指南不只是一个布局指南？
有了界面键盘布局指南你就能够以化身之姿完全跟随键盘如果你这样选择的话通过使用新功能跟随浮动键盘在默认值会被视为错误但如果你设定成正确指南就会在键盘浮动或漂浮时跟随键盘让你对布局如何响应键盘位置有很大的控制权限
再也不会自动掉到底部浮动时不会再听到隐藏键盘通知布局指南会跟着键盘走不过获得这个信息的重点在于其代表你可以更意识到你的布局如何响应不同类型的键盘所以界面键盘布局指南是一个子集隶属另一个新的布局指南界面追踪布局指南我们称之为追踪布局指南是因为当它在屏幕上移动时其会追踪你想要更改的约束你可以赋予它约束数组在靠近特定边缘时激活离开时停用及或一连串指令当特别远离边缘时激活靠近时停用现在看这个示例了解怎么作用以及你实现目标所需的代码这是测试的app 我有一个文字栏还有一些控制钮可以位在键盘上可是当它靠近屏幕顶端时
我希望它们掉到底部以防跑到屏幕外
当键盘左右移动时我希望其余界面切换一下让键盘有更多空间那么要怎么做呢？我们要看一些代码在接下来几张投影片中编辑视图是有文字栏和控制钮的视图图像视图则是图像的画面好的注意我们在这里应该使用标识符你可在示例代码中找到但是在投影片上这个大小比较刚好先说说垂直轴发生什么事首先我们定义出一个数组把编辑视图绑在键盘布局指南顶端
接着把它们设定为只在指南远离顶端时激活那么在其靠近时就会停用
接着我们定义另一个约束数组指定键盘靠近视图顶端时我们想要有的约束所以不用键盘布局指南的顶端我们改选安全区域的底部这里有个快速画面可以辅助这是指南和编辑视图目前远离顶端因此远离顶端约束的指令被激活了但是当你把指南移动到靠近顶端远离的约束指令就会停用靠近顶端约束就会被激活将其降至视图底部我们回到远离顶端就会发生相反状况现在看看水平移动键盘远离前缘和后缘时我希望编辑视图位于键盘中央我希望图像视图也位于画面中央因此我定义那些约束并设定为远离前缘和后缘时激活
现在来设定看我们靠近边缘时会发生什么事
我希望当我们位于后缘时编辑视图可以移开而往前缘移动所以首先先处理这个我希望图像视图稍微远离键盘一点这样当我们靠近两侧就能它从中间移到键盘对侧当键盘在后缘时朝前缘移动反之亦然接着我把这些设定为当我靠近适当边缘时激活当键盘进入该区域时它们会激活键盘离开时就停用就这样！把非常先进的键盘整合进你专属的布局再来看一次画面这是我的编辑视图跟漂浮的键盘在一起当我们朝顶端移动时其会掉到底部当我们左右移动时刚刚说的改动就发生了非常酷！接下来要来介绍“靠近”和 “远离”对键盘的意义固定的键盘会被视为靠近底部远离其他边缘
浮动和分开的键盘可能远离所有边缘或靠近顶缘如果是漂浮键盘有可能靠近或远离所有边缘也可能同时间靠近两个邻近边缘这会导致一些可能很有趣的冲突你应该要了解现在以上状况只适用于你把跟随浮动键盘设定为真时我们谈到的其余内容是假设我们可能造成的状况好的最后阶段完整键盘整合的考量键盘就是键盘只是键盘直到它不再是键盘当你选择要跟随浮动键盘时得多考虑一些问题设计你的布局时应该注意哪些事呢？一定要注意漂浮键盘有可能远离所有东西如果其远离所有边缘你有充分信息可以正确参照吗？另外当键盘远离底部边缘或靠近顶部会发生什么状况呢？你也要留心键盘的顶端定位点因为它有可能跑到很上面！所以务必注意解决方法是设定约束当键盘远离底部边缘时把键盘顶端定位点的视图移开并下移到安全区域布局指南的底部
用户也能随时移动键盘因此你不能想着它会在特定地方这个也要放在心上
这里有个罕见的样本分开的键盘分开且浮动的键盘远离所有边缘直到太靠近顶端如同固定键盘一样其也一直远离前缘和后缘现在来介绍一些新东西有个新方法可以把文字融入你的app 今年用相机吧
它依然是键盘所以也一样可以使用指南
跟一般固定键盘一样只是它是其中一种可以调整到近乎全屏幕的键盘想知道更多今年如何利用相机输入文字请不要错过 “用相机当键盘在app输入” 继续刚刚提到的新东西如果有附加硬件键盘呢？今年新增的功能我们有附加快捷栏不再是全幅宽度会根据你使用的语言以及快捷栏有多少按钮而改变
之前的宽度一直都跟屏幕等宽但现在如果你跟随浮动键盘事实上可以使用快捷栏真正的前缘及后缘所以边缘有什么重要的？在正常的位置下它一直都靠近底部远离其他三边但是其可以缩小！如果你把它缩小它也能靠近前缘或后缘
对了这是使用键盘的宽度定位点时可能想要多留心的几个原因之一其也可能缩得非常小或与屏幕等宽接下来进入这趟旅程最有趣的地方如果你不是屏幕上唯一的app 你在跟随浮动键盘呢？首先记得键盘可以让你的app有空间发生这种状况时我们要以键盘收起的状况处理第二当你的app处于最窄状态会显现顶端与底部边缘但是前缘与后缘保持远离无论键盘是否叠到你的app 另外指南也会测量键盘哪个部分叠到app窗口如果你不是屏幕上唯一的app的话现在来看一下一些画面让你知道我在说什么这些状况只适用于如果你有把跟随浮动键盘设定为真如果你还没设指南会位于屏幕底部与窗口等宽当你切换成全屏幕键盘漂浮且位于中间你就会远离所有东西所有的远离约束都被激活所有的靠近约束都被停用
当另一个app出现在屏幕上如果你是比较宽的app 你还是够宽可以让键盘远离所有东西但是不用移动太多就能靠近水平边缘这也类似画肖像画但是在半屏幕时位于同样位置的键盘现在靠近你的前缘指南只能缩小到符合键盘叠到app的那部分
当你是狭窄的应用程序指南总是会想要远离水平边缘跟iPhone或固定键盘一样不过你依然可以靠近顶端边缘
再次注意指南会缩小到只叠到app的部分当你固定键盘它又变成全尺寸其也远离前缘、后缘和顶端边缘再次注意布局指南又再次与叠到app的部分一样大如果你是滑动的app 也会随之重新调整尺寸有了前面的示例和我们的示范代码这应该都能处理得很好你只要切记你有可能处于其中一种状况就好你现在应该准备好把你的app 带入键盘整合的下个阶段所以使用键盘布局指南吧如果你的app可以的话利用界面追踪布局指南的先进功能最重要的如果你曾经把键盘布局视为一场战斗或想避开键盘现在开始转念思考怎么把它整合进你的布局而如果你已经有这样的想法现在你有更多工具可以了解你的全面视野我们的旅程也进入尾声离开前别忘了您的随身物品也别忘了逛逛礼品店祝您有愉快的WWDC体验 [飘逸的打击乐]

1:31 - Using notifications with a custom layout guide

...
    keyboardGuide.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    keyboardGuide.topAnchor.constraint(equalTo: textView.bottomAnchor).isActive = true
    keyboardHeight = keyboardGuide.heightAnchor.constraint(equalToConstant: view.safeAreaInsets.bottom)

    NotificationCenter.default.addObserver(self, selector: #selector(respondToKeyboard), 
                                                     name: UIResponder.keyboardWillShowNotification, 
                                                   object: nil)
}

@objc func respondToKeyboard(notification: Notification) {
    let info = notification.userInfo
    if let endRect = info?[UIResponder.keyboardFrameEndUserInfoKey] as? CGRect {
        var offset = view.bounds.size.height - endRect.origin.y
        if offset == 0.0 {
            offset = view.safeAreaInsets.bottom
        }
        let duration = info?[UIResponder.keyboardAnimationDurationUserInfoKey] as? TimeInterval ?? 2.0
        UIView.animate(withDuration: duration, animations: {
            self.keyboardHeight.constant = offset
            self.view.layoutIfNeeded()
        })
    }
}

3:09 - Transitioning to keyboardLayoutGuide

view.keyboardLayoutGuide.topAnchor.constraint(equalToSystemSpacingBelow: textView.bottomAnchor, multiplier: 1.0).isActive = true

6:46 - Vertical positioning

let awayFromTopConstraints = [
    view.keyboardLayoutGuide.topAnchor.constraint(equalTo: editView.bottomAnchor),
]
view.keyboardLayoutGuide.setConstraints(awayFromTopConstraints, activeWhenAwayFrom: .top)

let nearTopConstraints = [
    view.safeAreaLayoutGuide.bottomAnchor.constraint(equalTo: editView.bottomAnchor),

]
view.keyboardLayoutGuide.setConstraints(nearTopConstraints, activeWhenNearEdge: .top)

7:44 - Horizontal positioning

let awayFromSides = [
    view.keyboardLayoutGuide.centerXAnchor.constraint(equalTo: editView.centerXAnchor),
    imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
]
view.keyboardLayoutGuide.setConstraints(awayFromSides, activeWhenAwayFrom: [.leading, .trailing])


let nearTrailingConstraints = [
    view.keyboardLayoutGuide.trailingAnchor.constraint(equalTo: editView.trailingAnchor),
    imageView.leadingAnchor.constraint(
        equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 1.0)
]
view.keyboardLayoutGuide.setConstraints(nearTrailingConstraints, activeWhenNearEdge: .trailing)

let nearLeadingConstraints = [
    editView.leadingAnchor.constraint(equalTo: view.keyboardLayoutGuide.leadingAnchor),
    view.safeAreaLayoutGuide.trailingAnchor.constraint(
        equalToSystemSpacingAfter: imageView.trailingAnchor, multiplier: 1.0)
]
view.keyboardLayoutGuide.setConstraints(nearLeadingConstraints, activeWhenNearEdge: .leading)

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

提交你查询的内容时出现错误。请检查互联网连接，然后再试一次。

资源

相关视频

WWDC23

WWDC21