1. 程式人生 > >iPhone X home指示鍵適配

iPhone X home指示鍵適配

以下內容由Mockplus團隊翻譯整理,僅供學習交流,Mockplus是更快更簡單的原型設計工具


眾所周知,蘋果公司推出了iPhone X。隨之而來的是一個新的白色線條,幸福地坐在底部的觸摸板上,它替代了原有了home鍵。這也喚起了人們對物理home鍵的懷舊情結。

對消費者來說,這意味著蘋果公司在硬件和軟件創造出了美麗的奇跡,到時可以在預定期預定給予支持。對很多開發者來說,這意味著我應該做什麽?謝天謝地,答案相當簡單。

本周,我們將看看蘋果公司在適配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函數相同。

更新:回答讀者問題

Fabian 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指示鍵適配