讓不懂編程的人愛上iPhone開發(2018秋iOS12+Swift4.2+Xcode10版)-13

繼續我們的iPhone開發學習。這裡我們還將繼續美化遊戲的界面。

去掉狀態欄只是萬里長征第一步，我們還需要讓界面變得更漂亮。

當前我們的界面看起來是這樣的：

我們期望中的界面應該是這樣的：

實際的控制項和動作並沒有發生變化，不過我們將要用圖片來美化界面，同時調整一下一些顏色，字體設計（正是產品和設計人員的拿手好戲）。

我們可以在背景中使用圖片，在按鈕上使用圖片，甚至在滑動條上使用圖片。

需要注意的是，在iOS產品開發中，我們應儘可能使用PNG格式的圖片。你可以完全使用自己的圖片，我這裡也準備了幾個備用的。

如果你是個Photoshop達人，那麼完全可以設計一套自己的美術素材。

如果你對設計一竅不通，Don』t panic~ 本教程附帶的Resources文件夾中有一個Images子文件夾，你首先需要把它導入Xcode項目中。

在Xcode的項目導航部分找到Assets.xcassets，點擊它。

點擊中間這個面板下面的+號，會出現彈出式菜單：

選擇這裡的Import…

Xcode會提供一個文件選擇器，選擇該教程對應的資源文件夾下面的Images文件夾,用?+A的方式來選中Images文件夾中的所有文件。最後點Open就好了。

注意，如果Xcode添加了一個名為Images的文件夾，而非單個的圖片文件，請重新嘗試，並確保選中了文件夾中的圖片，然後再點擊Open。

小技巧：

除了使用Import…菜單命令，你還可以直接從Finder中將所需的文件拖到Xcode asset中。

科普- 1x,2x和3x顯示

注意到在asset catalog的分類中有四個空格區：1x,2x,Retina 4 2x和3x。通過提供相同圖片的不同版本，可以更好的適應iPhone和iPad的屏幕尺寸。

1x代表低解析度屏幕，目前所有低解析度的iPhone設備都不再被iOS11支持。因此，除非你希望應用可以支持iOS9的設備，那麼可以提供1x的圖片。

2x代表高清Retina解析度，包含主流的iPhone和iPad設備。高清Retina圖片是低清的2倍大小，因此用2x代表。我們剛才導入的只是2x圖片。

3x是iPhone 高端設備的專屬。如果我們需要為土豪機型提供最好的體驗，可以把3x的圖片放到這裡。

我們的「絕地打靶」遊戲並非一個universal應用，因此1x圖片可以免了。不過僅僅是提醒你，你也可以在iPad上運行這個遊戲。iPad的一大好處是可以在特殊的模擬模式下運行所有的iPhone應用。在這種情況下應用會使用2x圖片。

還有一個特殊的命名習慣。如果圖片資源的名稱後面有@2x或@3x，那麼就是說它是為Retina或者Retina HD版本量身定做的。低清解析度圖片不需要加任何後綴（不需要@1x）。

更換背景圖片

準備就緒了，讓我們首先更換背景圖片吧。

在Xcode中打開Main.storyboard，在Xcode右側面板的Object Library中找到Image View。

小技巧：在Object Library底部的搜索欄中輸入image，就可以快速過濾掉其它的視圖。

把這個Image View拖到我們已有的用戶界面上，先別管放在哪兒，待會兒我們會調整位置。

選中Image View，在右側的面板中切換到Size Inspector，，設置X和Y為0，Width為568，Height為320。這樣圖片就會覆蓋整個屏幕。

然後繼續選中Image View，在右側的面板中切換到Attributes Inspector，按照下圖的提示將Image部分選擇為Background。

當然，現在背景圖片覆蓋了其它控制項。我們需要讓其它控制項的顯示在背景之上。這一點很簡單。

在Xcode的菜單欄中選中Editor,選擇Arrange- Send to Back，就好了。不過有時候可能你會發現這個選項是灰色的，那麼有一種可替代的更直觀的方式（我個人傾向使用），在Interface Builder的布局面板中把Image View拖到其它視覺元素的上面，就可以了。

此時你的界面看起來應該是類似下面的：

點擊工具欄上的編譯運行按鈕，來測試下效果。

優化標籤

讓我們繼續前進，接下來我們將優化標籤的顯示。

因為背景圖片比較暗，所以需要讓標籤中文本的色彩變亮。

在storyboard中選擇頂部的標籤，在Xcode的右側面板中切換到Attributes Inspector，然後點擊Color（注意具體的位置跟Xcode的版本有關。自從Scott Forstall被趕出蘋果後，Xcode在這些細節上是一塌糊塗），然後從列表中選擇Custom…

要選擇實際的色塊，而不是旁邊的文字選項。

在色彩拾取器裡面選擇RGB Sliders，然後選擇R:255,G:255,B:255,透明度100%，也就是純白色，會用PS的都知道。

仍然在Attributes inspector視圖中（下面的操作除非特別說明都不變），然後點擊Shadow，將其設置為R:0,G:0,B:0,透明度50%。

然後把Shadow Offset設置為Width:0,Height :1，這樣陰影會顯示在標籤下面。

接著點擊Font屬性的[T]小圖標，這裡就可以設置字體了。你可以設置自己喜歡的字體，也可以直接參考下圖的設置。

然後確保Autoshrink選項為Fixed font size。

此時當文本比標籤大時，Autoshrink功能將會自動調整字體大小以適應標籤大小。

接下來選擇Xcode頂部菜單中的Editor的Size to Fit Content。（有時菜單欄上會顯示灰色，這是Xcode的bug，就不必為這個操心了），快捷鍵command =

對於其它標籤哥就不廢話了，不然就沒完沒了了。具體怎麼設置您說了算。

最終的效果類似下面：

科普：關於iOS開發中所使用的字體

Interface Builder中所顯示的字體是你的Mac電腦上有的字體，但不能確保在iPhone上也有。實際上iPhone所支持的字體要遠遠少於Mac上的字體。

怎麼辦呢？建議你到這個網站來看看iOS中可以用的字體：

http://iosfonts.com

美化滑動條

對滑動條的美化要稍微複雜一些，事實上如果單純使用Interface Builder的話我們只能稍微修改滑動條的外觀。

這個時候，手寫控制項的靈活性就會體現出來了。

比如，為了設置按鈕的色彩，我們既可以在Interface Builder中直接設置，也可以使用代碼setTitleColor()來實現。

當然，通過可視化的設計方式（所見即所得）可以大大提高開發效率。不過對於某些特殊的情況，比如這裡的滑動條，我們也不得不直接手動控制項來修改其屬性。誰讓蘋果開發團隊偷懶沒給它提供在Interface Builder中直接修改的方式呢。

在Xcode中切換到ViewController.swift，在viewDidLoad()方法中添加幾行代碼：

override func viewDidLoad() {
super.viewDidLoad()

//設置滑動條的外觀
let thumbImageNormal = UIImage(named: "SliderThumb-Normal")!
slider.setThumbImage(thumbImageNormal, for: .normal)
let thumbImageHighlighted = UIImage(named: "SliderThumb-Highlighted")!
slider.setThumbImage(thumbImageHighlighted, for: .highlighted)
let insets = UIEdgeInsets(top: 0, left: 14, bottom: 0, right: 14)
let trackLeftImage = UIImage(named: "SliderTrackLeft")!
let trackLeftResizable = trackLeftImage.resizableImage(withCapInsets: insets)
slider.setMinimumTrackImage(trackLeftResizable, for: .normal)
let trackRightImage = UIImage(named: "SliderTrackRight")!
let trackRightResizable = trackRightImage.resizableImage(withCapInsets: insets)
slider.setMaximumTrackImage(trackRightResizable, for: .normal)
startNewGame()
}


在上面的代碼中，我們為滑動條準備了四種圖片：兩個結點圖片，兩個滑動背景圖片。結點圖片和按鈕類似，因此有一個正常狀態，還有一個高亮狀態。同時滑動條對於結點兩邊的滑動背景也採用不同的圖片。左邊的是綠色，右邊的是灰色。

如果你看不懂上面的代碼怎麼辦？按住option鍵，點自己需要看的方法imageNamed,或者setThumbImage，就可以查看詳細的幫助說明。

點擊Run運行遊戲，現在我們的遊戲界面看起來就比較順眼了！

小提示：關於文件名名稱

你可以還記得我們導入圖片資源庫（asset catalog)中的文件名是類似SliderThumb-Normal@2x.png。

當我們創建一個UIImage對象時，並不會使用原始的文件名，而是在asset catalog中的文件名，比如SliderThumb-Normal。這就意味著我們無需添加@2x後綴。

本人聯繫方式：

微信：iseedo

郵件：eseedo@gmail.com

QQ討論群： 375143733

示例項目：https://github.com/eseedo/iOSCourse

如有疑問，請先發送郵件到我的郵箱：eseedo@gmail.com

我會在收到郵件後儘早答覆。

也可以加微信，但可能不是很合適的答疑途徑。

另外，為了節省大家的寶貴時間，提高溝通效率，請在提問的時候盡量附上項目源代碼以及以下信息：

1.開發環境（系統版本，Xcode和iOS版本）

3.為解決問題所做的努力（做了哪些嘗試，分別是怎樣的結果）

4.具體對應的是哪一課的內容

好了，這一課就到這裡結束了，讓我們享受下福利吧~