天天看點

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

使用 Interface Builder 相容 iOS6 和iOS7

當你在更新你的App到iOS 7的平台時遇到最大的挑戰之一就是確定不要遺忘那些還在使用iOS 6平台的使用者,在此我們提供一些建議使你的App應用在iOS 6和iOS 7上同時保留視覺吸引力和技術功能.

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

此圖為Interface Builder中頂部和底部布局指南

設定正确的Interface Builder Storyboard 或者正确設定XIBs檔案,對于iOS 6 和iOS7的開發大有幫助,使得開發更加容易。我們的第一個建議是為全部的UIViewController建立Storyboard, UIViewControl是合成的或者是跨越整個螢幕高度的控制試圖(Control Views).如果你正在做的項目是使用XIBs檔案開發的,而沒有使用Storyboards,那麼Storyboards可以盡可能的簡化為帶有視圖容器(View Container)的“UIViewController",将來你可以從NIB檔案加載。我們這樣建議的主要原因是這樣操作你可以獲得通路在Interface Builder中頂部和底部布局指南的權限。

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

Interface Builder中”View as“ 配置,這個設定是每個檔案(NIB 或者Storyboard)的基礎設定。

另外,我們還建議您把所有的XIBs和Storyboard中的 View as 設定為 iOS 7 and Later,這種設定方式将更加容易降低未來的iOS 6的支援,此外,如果您沒有使用自動布局,那麼就會更加容易更加直覺的使用iOS 6/7 Delta 。

調整狀态欄

在iOS 7中狀态欄後面的區域變為有用的螢幕空間。是以iOS 7的視窗比iOS6要高出20個點,這就導緻了在iOS 7中螢幕頂部的内容顯示在狀态欄的下面,調整View可以使用或者避免iOS 7中額外的空間導緻在iOS 6中的錯位

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7
使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

iOS 7-内容顯示在狀态欄下面             iOS 6 内容顯示在螢幕外面

如果你的項目沒有使用自動布局(Auto Layout),那麼可以通過Spring,Struts以及iOS 6/7 Deltas來解決因為iOS 6/7差異導緻的狀态欄的問題。為了避免内容顯示在狀态欄下面,僅需簡單的把内容移到下面,不管怎樣都需要移動幾個點來得到狀态欄下面的内容。然而,這也同時會導緻iOS 6的内容往下移,這顯然不是我們所期望的,因為這個内容在iOS6中原本不在狀态欄的下方。為了解決這個問題,我們可以通過設定iOS 6/7 Delta來解決,設定一個負值在Y Delta等同于在iOS中向下移動幾個點。 比方說,我們在iOS 7中向下移動内容20點,那麼我們需要把Y Delta設定為 -20。為了把靠近螢幕底部的内容放置到螢幕底部相對位置,使用正确的Sping,Struts配置會更加容易更加可靠,而不是使用iOS 6/7 Deltas。同理而言,我們可以使用相似的方法調整需要跨越整個螢幕高度的視圖(Views)。可以通過在Storyboard 或XIB中調整高度或者起始原點來獲得類似iOS 7的大小和位置,以及在Delta中使用Y值或高度設定,結合Sping 和Struts來解決iOS 6中的大小和位置的問題。

以下,提供了簡單的範例,使用兩個圖檔Views(一個在螢幕頂部,一個在螢幕底部)

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7
使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

Interface builder 設定                               Interface Builder設定

持續保持頂部的UIImageView在狀态欄的下方   防止UIImageView離開螢幕底部 

如前所述,假設你正在使用Storyboard,簡單的使用由Interface Builder提供的頂部和底部布局的向導,那麼自動布局可以更加簡單的解決由狀态欄差異造成的問題。如果你設定你的頂部和底部的NSLayoutConstraint 是相對于頂部和底部的布局向導(而非root view的頂部和底部),那麼在iOS 6和iOS 7中,iOS将自動的做出必要的調整來使得所有資訊都顯示在螢幕上并且露出狀态欄。如果你不能使用Storyboards,你将可能需要通過代碼來通路頂部和底部的布局向導。

下面是和以前一樣的例子,但是不同于先前,下面是通過使用自動布局和NSLayoutConstraint 中設定頂部和底部相對性來解決這個問題

(部落客ps:xcode6.1 點中uiimageview  然後ctrl-drag時要先把uiimageview的y軸設定大于1,不然如下圖

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

,其他版本未測試,

正确的操作後應該是下圖,是image.Top-》Top Layout Guide.Bottom,反之也對)

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

相對的在UIImageView的頂部限制(constraint)中設定 Top Layout Guide

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

相對的在UIImageView的底部限制(constraint)中設定 Bottom Layout Guide

現在,無論使用Struts,Spring還是iOS 6/7 Dletas又或者使用自動布局和頂部底部布局向導,所有資訊都可以被正确的在iOS 6 和iOS 7中顯示。

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7
使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

在Interface Builder 調整後的iOS 7界面      在Interface Builder調整後的iOS 6界面

 使用iOS 7半透明的UINavigationBar調整UINavigationController

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

Interface Builder中UINavigationBar 的半透明設定

當用Interface Builder同時支援iOS 6和iOS 7中遇到的最常見的挑戰是為iOS 7設定UINavigationController的UINavigationBar為半透明,将UINavigationBar設定為半透明會對你的視圖(Views)有非常大的影響,并且需要你做出一些改變。

使用 Interface Builder 相容 iOS6 和iOS7 使用 Interface Builder 相容 iOS6 和iOS7

Interface Build在Extend Edges(邊界擴充)中的設定

如果在一個UIViewController裡把Extend Edges設定為Under Top Bars,你将發現在Interface Builder中切換Translucent(半透明)設定将導緻視圖上下移動.在iOS 7中将UINavigationBar設定為半透明将導緻視圖在UINavigationBar的下面向上移動,而由于iOS 6中不支援設定半透明的UINavigationBar,這個設定在iOS 6中沒有任何變化;視圖始終保持在UINavigationBar下面,你可以留意到在iOS 6中Black Translucent UIBarStyle被标注為不适用(Deprecated),而其他的UIBarStyle可在iOS 6中建立不透明的UINavigationBar.這個原因導緻的情況和我們前面章節讨論的關于新的狀态欄的問題非常相似,也就是我們提到的在iOS 7中的可用的螢幕空間高于iOS 6中的情況。

絕大部分由于調整UINavigationBar半透明度所導緻的問題可以通過我們前面介紹的方法來解決,然而不論怎樣,如果有一個或者多個在UINavigationBar下面向上移動的視圖,額外的步驟也就是UIScrollView(或者UIScrollView的子類,比方說UITableView)都是必要的. 如果你使用Storyboard來擴建在UINavigationBar下面向上移動的UIScrollView(或者子類),那麼内容插圖将被自動設定。自動調整的内容插圖為了確定内容在UIScrollView内,将在UINavigationBar下面設定初始的偏移量,因而對使用者來說會立即可見。不管怎樣,如果使用不太直接的方式操作在UINavigationBar下面向上移動的UIScrollView(或者子類),這裡不太直接的方法比如說通過XIB建立,之後加載到容器視圖(container view),那麼你就需要自己去設定内容插圖了。

在Interface Builder中也是可以設定内容插圖的,但是針對這種情況,我建議在代碼中做這個設定,我們有很多的理由這樣建議您,首先,我們隻想在iOS 7中而非iOS 6中設定插圖,而Interface Builder是不可能實作這樣的設定的,其次,我們隻想在運作iOS 7時設定内容插圖,我們可以使用Top Layout Guide(頂部布局向導)來幫助我們設定内容插圖(即便你的Storyboard或XIB沒有使用自動布局)。 下面是一個示例來告訴如何通過代碼完成這個設定,在這裡示例中,我使用了一個UITableView而沒使用UIScrollView,因為這是更加普遍的情況。 在通路UIViewController的屬性topLayoutGuide之前,必須確定你在iOS 7上或者更高的版本。

1

if

([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0f) {

2

CGFloat topInset = self.tableView.contentInset.top + [self.topLayoutGuide length];

3

CGFloat leftInset = self.tableView.contentInset.left;

4

CGFloat bottomInset = self.tableView.contentInset.bottom;

5

CGFloat rightInset = self.tableView.contentInset.right;

6

7

self.tableView.contentInset = UIEdgeInsetsMake(topInset, leftInset, bottomInset, rightInset);

8

}

特别的指出,因為每個App都有唯一的構造,讓你的App在視覺吸引力以及全部功能都能完美的運作在iOS 6和iOS 7上是一件非常有挑戰的工作。對于同時支援iOS 6和iOS 7,處理相容性的問題,在這裡做出預測以及覆寫所有可能的情況,這幾乎是不可能做到的事情,是以希望通過這篇文章幫助大家處理一些常見的情況,并且幫助你在正确的方向上以便更好的處理罕見或複雜的狀況

原文位址:http://www.doubleencore.com/2013/12/reconciling-ios-6-ios-7-using-interface-builder/

本文中的所有譯文僅用于學習和交流目的,轉載請務必注明文章譯者、出處、和本文連結

我們的翻譯工作遵照  CC 協定,如果我們的工作有侵犯到您的權益,請及時聯系我們