原文鏈接
作者：C4 開源項(xiàng)目
譯者：Crystal Sun
全部章節(jié)請(qǐng)關(guān)注此文集C4教程翻譯
校對(duì)后的內(nèi)容請(qǐng)看這里
在這一章里，我們會(huì)把所有的組件組裝在一起燥爷，創(chuàng)造統(tǒng)一優(yōu)秀的應(yīng)用和用戶體驗(yàn)蜈亩。
回顧一下，我們已經(jīng)完成了下列事情：
- 一個(gè) UIScrollview 的子類前翎，無限滾動(dòng)視圖
- Astrological Sign Provider（星座提供者）稚配，存儲(chǔ)所有的符號(hào)數(shù)據(jù)
- 星星背景，顯示持續(xù)滾動(dòng)的內(nèi)容港华，有八個(gè)不同的層級(jí)
- 非常棒的圓形菜單道川，具有各種復(fù)雜的動(dòng)畫效果和交互機(jī)制，有長(zhǎng)按效果
- 一個(gè)信息面包立宜，連接到 C4 的網(wǎng)站
現(xiàn)在冒萄，想讓 CSOMOS 活起來，我們需要做下面幾件事情：
- 增加菜單橙数、背景和信息面板
- 通過選擇行為和背景里的
goTo方法將菜單和背景連接起來 - 通過點(diǎn)擊信息按鈕把菜單和信息按鈕連接起來
- 增加一對(duì)環(huán)境音效音頻文件尊流，可以給應(yīng)用提供背景音樂
那么，讓我們開始吧灯帮。
1. The WorkSpace
大部分的工作都是在 WorkSpace 里完成的崖技，盡管我們還需要微調(diào)一些類逻住，WorkSpace 里的 setup() 方法是我們組合所有組件的主場(chǎng)。
首先迎献，如果你之前測(cè)試的時(shí)候使用的 WorkSpace瞎访，那么現(xiàn)在需要你清理一下代碼，把背景顏色改為 COSMOSbkgd忿晕。
更改內(nèi)容如下：
let COSMOSprpl = Color(red:0.565, green: 0.075, blue: 0.996, alpha: 1.0)
let COSMOSblue = Color(red: 0.094, green: 0.271, blue: 1.0, alpha: 1.0)
let COSMOSbkgd = Color(red: 0.078, green: 0.118, blue: 0.306, alpha: 1.0)
class WorkSpace: CanvasController {
override func setup() {
canvas.backgroundColor = COSMOSbkgd
}
}
2.Stars 星星
添加星星背景也是易如反掌装诡，只要?jiǎng)?chuàng)建 Stars 副本，添加到 canvas 上践盼，如下：
class WorkSpace: CanvasController {
let stars = Stars()
override func setup() {
canvas.backgroundColor = COSMOSbkgd
canvas.add(stars.canvas)
}
}
完成鸦采。運(yùn)行，現(xiàn)在 COSMOS 可以滾動(dòng)了咕幻。
3.Menu 菜單
添加菜單的方法很簡(jiǎn)單渔伯，在添加完背景后添加菜單，如下面所示：
class WorkSpace: CanvasController {
let stars = Stars()
let menu = Menu()
override func setup() {
canvas.backgroundColor = COSMOSbkgd
canvas.add(stars.canvas)
menu.canvas.center = canvas.center
canvas.add(menu.canvas)
}
}
3.1 菜單的 Frame（解釋過）
我們想讓菜單的表現(xiàn)如下：只有在用戶點(diǎn)擊菜單時(shí)才會(huì)打開菜單肄程，例如锣吼，不能點(diǎn)擊屏幕的其他地方。這也是我們把 canvas 設(shè)置的很小的原因（只有 8080）蓝厌。由于 frame 這么小玄叠，菜單的交互就限制在 8080 的界面上。
就是這樣拓提。
4.信息面板
這一步小事一樁读恃，給信息面包創(chuàng)建另外一個(gè)變量，接著在 setup() 方法里實(shí)例化代态，先添加到菜單上寺惫，再添加到 WorkSpace 的 canvas 上。
回到 InfoPanel.swift蹦疑，在 setup() 里增加下列方法：
self.canvas.opacity = 0.0
因?yàn)椴煌该鞫仁?
0.0西雀，canvas 不會(huì)接收任何點(diǎn)點(diǎn)擊行為，所以添加到菜單上是可行的歉摧，用戶能夠點(diǎn)擊菜單不受影響艇肴。
現(xiàn)在你的 WorkSpace 應(yīng)該是下面這個(gè)樣子：
class WorkSpace: CanvasController {
let stars = Stars()
let menu = Menu()
let info = InfoPanel()
override func setup() {
canvas.backgroundColor = COSMOSbkgd
canvas.add(stars.canvas)
menu.canvas.center = canvas.center
canvas.add(menu.canvas)
canvas.add(info.canvas)
}
}
5.關(guān)聯(lián)菜單和背景
想要關(guān)聯(lián)菜單和背景，我們需要使用一點(diǎn)小竅門：給菜單增加一個(gè)特殊的行為叁温，連到背景里的 goTo() 方法里豆挽。
回到 Menu.swift文件，在文件的最上面券盅，也就是聲明類的上面，增加下列代碼：
typealias SelectionAction = (selection: Int) -> Void
這是類型別名膛檀，能讓我從另一個(gè)類里制定方法锰镀。選擇行為實(shí)際上就是我們想發(fā)送給菜單的當(dāng)前行為娘侍。這句話翻譯的有問題，重新來一次泳炉。
創(chuàng)建變量來保存選擇行為的引用：
var selectionAction : SelectionAction?
回到 createGesture()憾筏，在 case .Cancelled: 閉包里增加下列代碼：
if let sa = self.selectionAction where self.menuSelector.currentSelection >= 0 {
sa(selection: self.menuSelector.currentSelection)
}
因?yàn)榕段覀冇袝r(shí)候需要把當(dāng)前的選項(xiàng)設(shè)置為 -1，才額外需要
where表達(dá)式花鹅。
會(huì)議一下來自第 12 章的這個(gè)方法：
func goto(selection: Int) {
let target = canvas.width * Double(gapBetweenSigns) * Double(selection)
let anim = ViewAnimation(duration: 3.0) { () -> Void in
self.bigStars.contentOffset = CGPoint(x: CGFloat(target),y: 0)
}
anim.curve = .EaseOut
anim.addCompletionObserver { () -> Void in
self.signLines.revealCurrentSignLines()
}
anim.animate()
signLines.currentIndex = selection
}
This method conforms to the same parameters as the SelectionAction type alias we just created. It also takes an integer and figures out a target and animates to that point in its scrollview.這句話還沒翻譯呢
最后氧腰，回到 WorkSpace，增加下列代碼：
menu.selectionAction = stars.goto
WorkSpace 里的代碼應(yīng)該是下面這樣：
class WorkSpace: CanvasController {
var background : ParallaxBackground?
var menu : Menu?
var info : InfoPanel?
override func setup() {
canvas.backgroundColor = COSMOSbkgd
background = ParallaxBackground()
canvas.add(background?.canvas)
menu = Menu()
menu?.canvas.center = canvas.center
canvas.add(menu?.canvas)
info = InfoPanel()
canvas.add(info?.canvas)
menu?.selectionAction = background?.goto
}
}
運(yùn)行刨肃，效果如下：
6.Link Menu and Info Panel
連接菜單和信息面板的步驟幾乎和之前一樣古拴。
在 Menu.swift 文件里，在最上面也就是在類的上面真友，增加下列代碼：
typealias InfoAction = () -> Void
同樣的黄痪，在 Menu.swift，增加下列類變量：
var infoAction : InfoAction?
接著盔然，滑到菜單手勢(shì)里的 .Cnacelled 部分桅打，增加下列代碼：
if let ib = self.menuSelector.infoButton {
if ib.hitTest(center, from: self.canvas),
let ia = self.infoAction {
delay(0.75) {
ia()
}
}
}
最后，回到 WorkSpace愈案，增加下列代碼
menu.infoAction = info.show
運(yùn)行挺尾，效果如下：
7.環(huán)境音效
工程里已有兩個(gè)音頻文件，在應(yīng)用啟動(dòng)后會(huì)立即播放音頻站绪。
在 WorkSpace遭铺，創(chuàng)建下面兩個(gè)變量：
let audio1 = AudioPlayer("audio1.mp3")!
let audio2 = AudioPlayer("audio2.mp3")!
在 setup()，循環(huán)播放崇众，如下：
audio1.loops = true
audio1.play()
audio2.loops = true
audio2.play()
聽起來像是在外太空了掂僵。
8.最初的星座偏移量
我們傾向選擇讓星星從特定的某個(gè)星座開始偏移，打開 Stars.swift顷歌，在 setup() 方法底部增加下列方法：
bigStars.contentOffset = CGPointMake(view.frame.size.width * CGFloat(gapBetweenSigns / 2.0), 0)
9.最后一步操作
如果下面的操作你還沒設(shè)置過锰蓬，那么現(xiàn)在來設(shè)置吧。
點(diǎn)擊 Xcode 上邊的 COSMOS 工程眯漩，在 General 分頁(yè)下芹扭，找到 Deployment Info 部分，選擇下列設(shè)置：
- Portrait: 勾選
- Upside Down: 勾選
- Landscape left: 不勾選
- Landscape right: 不勾選
- Hide Status Bar: 勾選
- Requires Full Screen: 勾選
終終終終終
于
完
成
了赦抖。
本文由 SwiftGG 翻譯組翻譯舱卡，已經(jīng)獲得作者翻譯授權(quán)。
