讓不懂程式設計的人愛上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中可以用的字型：
ofollow,noindex">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)中的檔名是類似[email protected]。
當我們建立一個UIImage物件時，並不會使用原始的檔名，而是在asset catalog中的檔名，比如SliderThumb-Normal。這就意味著我們無需新增@2x字尾。
本人聯絡方式：
微信：iseedo
QQ討論群： 375143733
示例專案： https:// github.com/eseedo/iOSCo urse
如有疑問，請先發送郵件到我的郵箱： [email protected]
我會在收到郵件後儘早答覆。
也可以加微信，但可能不是很合適的答疑途徑。
另外，為了節省大家的寶貴時間，提高溝通效率，請在提問的時候儘量附上 專案原始碼以及以下資訊 ：
1.開發環境（系統版本，Xcode和iOS版本）
2.問題描述及重現（想實現什麼效果，結果是怎樣的，具體涉及到什麼操作）
3.為解決問題所做的努力（做了哪些嘗試，分別是怎樣的結果）
4.具體對應的是哪一課的內容
好了，這一課就到這裡結束了，讓我們享受下福利吧~
