iPhone X home指示键适配

以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具


iPhone X home指示键适配

众所周知,苹果公司推出了iPhone X。随之而来的是一个新的白色线条,幸福地坐在底部的触摸板上,它替代了原有了home键。这也唤起了人们对物理home键的怀旧情结。

对消费者来说,这意味着苹果公司在硬件和软件创造出了美丽的奇迹,到时可以在预定期预定给予支持。对很多开发者来说,这意味着我应该做什么?谢天谢地,答案相当简单。

本周,我们将看看苹果公司在适配Home指示键上给我们提供了什么。

首先

iPhone X home指示键适配

我们并不是每天都有新视频和硬件公告,但这正是此后不久发生的事情:

在“为iPhone X而设计”一文中,苹果公司元老级设计大师迈克·斯特恩(Mike Stern)制定了一些基本规则。所有的东西都是平等的,在你使用下面的新功能之前,你先停住脚步,看看你的使用方法是否符合相关要求。

尝试避免在home指示键附近区域做交互式控制,尤其是通过手势识别驱动的交互控制。

不要隐藏指示键、在它周围添加任何装饰品、或者试图改变它的外观。在iPhone X顶部的相机遮光板也是如此。

通常情况下,你不希望隐藏home指示键,除非你有被动观看体验(如:视频,照片幻灯片等)。

TL; DR - 苹果公司表示, 大多数时候,不要去理会糟糕的指示键。

但是,这篇文章说的是特殊时间。

UI视图控制器新增功能

不管你是喜欢在每个控制器的基础上适配状态栏,还是对你来说适配都是令人厌恶的,苹果公司一直在以实例的方式做出这样的决定,而不是选择一个全球的所有设计。

隐藏home指示键基本上与适配状态栏的方式相同:

class ViewController: UIViewController

{

override func prefersHomeIndicatorAutoHidden() -> Bool

{

return true

}

}

如上所述,这样的场景应该是异常的,因为这样的默认实现返回false。然而,文件中有一个特别的评论:

这个系统会考虑你的偏好,但返回YES并不能保证home指示键被隐藏。

似乎没有提到为什么或者在什么时候UIKit会不尊重你所选择的偏好,尽管它认为苹果会强制执行自己认为最好的。当苹果认为它是最好时-就会不顾布尔值。因此,这应该是一些有趣的Stack Overflow 帖子。

此外,这可能看起来很明显,但可能是最初令人困惑的根源。特别提到的功能名称是以自动隐藏结束而不是隐藏,这就是说从这里返回到true意味着UIKit会在它的状态良好并准备就绪时隐藏指示键(通常情况下是指,控制器几秒钟都没有接收任何触摸事件),而不是立即隐藏指示键。

UIKit信号

继续并行使用应用程序状态栏,只是简单地覆盖或分配给有条件地控制覆盖函数的变量是不够的。我们还有另一个新增的功能来查看控制器强大的setNeedsSomethingDone函数:

class ViewController: UIViewController
{
    var shouldHideHomeIndicator = false
override func prefersHomeIndicatorAutoHidden() -> Bool
    {
        return shouldHideHomeIndicator
    }
override func viewDidAppear(_ animated: Bool)
    {
        super.viewDidAppear(animated)
        self.shouldHideHomeIndicator = true
        self.setNeedsUpdateOfHomeIndicatorAutoHidden()
    }
}

这是一个传递函数,因为它只是向UIKit发出信号,我们改变了先前选择的用于home指示键可见性的值。不过,与状态栏不同的是,自UIKit自己隐藏它之后,这并没有技术上的动效。因此,像这样的代码没有效果:

override func viewDidAppear(_ animated: Bool)

{

super.viewDidAppear(animated)

DispatchQueue.main.asyncAfter(deadline: .now() + 1.0) {

self.shouldHideHomeIndicator = true

UIView.animate(withDuration: 1, animations: {

self.setNeedsUpdateOfHomeIndicatorAutoHidden()

})

}

}

对setNeedsUpdateOfHomeIndicatorAutoHidden()发送一个简单的任务都将执行一个轻微的alpha渐变,这与它是否包含在动画区块中无关。

容器控制器

查看控制器的最后一个新增加功能是通知UIKit子视图控制器是否应该指示home指示键的可见性。如果你开发iOS足够长时间,你可能会利用容器视图控制器来更好地促进抽象和封装模式。

override func childViewControllerForHomeIndicatorAutoHidden() -> UIViewController?

{

return myChildController

}

这些控制器可能会发现自己靠近屏幕底部,如果是这样 - 你可能希望home指示键忽略你。一个简单的覆盖返回隐藏的实例或是正在执行的实例解决了这个问题:

如果你确实指出子控制器应该指示其可见性,你也有责任重写以前讨论的函数:

class MyChildViewController: UIViewController

{

override func prefersHomeIndicatorAutoHidden() -> Bool

{

return true

}

}

该函数的特性是允许零返回值。 如果是这种情况,那么UIKit将依靠当前的控制器作出决定 - 如果你选择不覆盖该函数,那么这个决定将是“显示home指示键”。

这也可以是一个运行时决定, UIKit将再次要求你调用它的我们刚刚提及的函数来通知框架应该再次查询prefersHomeIndicatorAutoHidden():

override func childViewControllerForHomeIndicatorAutoHidden() -> UIViewController?
{
    return myChildController
}
func initializeChildController()
{
    myChildController = MyChildController()
    self.setNeedsUpdateOfHomeIndicatorAutoHidden()
}

以上函数就是实现这种功能。

虽然可以将其视为需要应用于日常iOS事件(即处理控制器)的更多思考过程,但你将发现应用程序界面几乎与现有的处理类似问题的UIKit函数相同。

更新:回答读者问题

F* Kuenzel提问:

新的home指示键还将放在网站的底部导航之上吗?

详细回答请看这里:

iPhone X 网页设计

<meta name=’viewport’ content=’initial-scale=1, viewport-fit=auto’>

我现在不是一个网络开发人员,但似乎有一个可以处理自动输入的元标签:

默认值为auto,它应该是需要插入内容的- 虽然你可以对此忽视而选择封面覆盖整个视口的内容。但是,如果你应该选择整个屏幕,则使用一个新的CSS函数,常量(),可以使用预定义的常量来对围绕安全区域的元素进行填充。这类似于iOS的应用程序界面安全区域布局指南。

这是指南中的一个实例:

.post {

padding: 12px;

padding-left: constant(safe-area-inset-left);

padding-right: constant(safe-area-inset-right);

}

Bogdan有更全面的理解:

我不明白为什么在默认情况下苹果不关闭home指示键,或者至少给用户一个选项来关闭。将新用户引入操作是一个很好的功能,但最终情况是(如用户使用手机10分钟后),每个人都会记得如何切换应用程序,那么这时候就是一个令人讨厌和令人分心的线条。我说错什么了吗?

这是一个很好的观点。

就像一个凹槽不仅仅是一个凹槽,它更接近于是硬件的一部分及iPhone的品牌认知度,我认为软件和home指示键同等重要。它是其DNA的一部分,另外我还怀疑,苹果公司的想法是,它的出现使用户对UX有信心。它避免了一系列的问题,诸如:“为什么现在已经消失了? 它什么时候会显示? 什么时候会隐藏? 我返回的时候还会显示吗

也就是说,我同意你的看法 - 这些是常见的假设,这似乎有点多,但我还没有使用iPhone X,所以我会在正式体验后再做出判断。

Will Kampmann 提问:

你知道当全屏显示应用如玩游戏时会发生什么吗?Home指示键会被不同的滑动方式唤醒吗?如推送通知及常用iPhone上的控制中心?

有一个应用程序来忽视这个操作,但是苹果真的真的希望你不要这样做。他们提到的一个使用情景是什么? 全屏游戏。以下是关于此问题的人机界面指南:

在极少数情况下,像游戏这样的沉浸式应用可能需要自定义的、优先于系统的屏幕边缘手势, 第一个滑动调用特定于应用的手势,而第二次滑动则会调用系统手势。

这是一个简单的可覆盖任何视图控制器的实例:

override func preferredScreenEdgesDeferringSystemGestures() -> UIRectEdge {

return .top

}

总结:

iPhone X 注意事项:

对iOS工程师来说,它仅仅设计之后表现出的成就感,还是另一个视图控制器对修复和编码的考虑? 也可能是两者的混合。如果时间在软件开发的连续统一体中教会了我们什么,那就是时间流逝+一个生态系统=新的应用程序界面。在今天的智能手机领域,更现实的说法是,时间流逝+苹果的生态系统=新的硬件=新的应用程序界面。

我们通过增加iPhone的高度成功适配了。我们通过不同的决议来推动进程。我们可以处理导航栏中的一个小相机配件,以及靠近底部挡板的2点线条。

原文作者:Jordan Morgan

原文地址:https://medium.com/the-traveled-ios-developers-guide/iphone-x-dealing-with-home-indicator-2e8e47f5647f

Mockplus做原型,更快更简单,现在下载Mockplus,免费体验畅快的原型设计之旅。

iPhone X home指示键适配

上一篇:android: activity之间切换的抽屉效果


下一篇:回顾2017系列篇(二):移动端APP设计趋势