接上篇

http://www.reibang.com/p/04bed658abed

在本節(jié)里喘沿，我們將對現(xiàn)有的界面進行一些美化奥帘，包括添加導(dǎo)航欄骆莹，添加背景圖片，貪吃蛇圖標(biāo)圖片靶草，添加食物圖片等等蹄胰。

1 添加導(dǎo)航欄
打開Matin.storyboard,點擊Snake View Controller

之后選擇 Editor > Embed In > Navigation Controller。

2 給貪吃蛇添加背景圖片
在項目左側(cè)導(dǎo)航欄，找到Assets.xcassets,點擊派继，之后點擊右下角的『+』(綠色圈)帮坚，選擇New Image Set。

將下面的圖片拖入2x位置

背景

let backgroundImage = UIImage(named: "background")!
        
view.backgroundColor = UIColor(patternImage: backgroundImage)

這段代碼將修改view的背景圖片节视。
點擊左上角的運行按鈕，現(xiàn)在我們的背景圖片變成剛才添加的圖片了假栓，如下圖：

3 給蛇增加圖片寻行。
點擊左側(cè)的Assets.xcassets，點擊右下角的『+』匾荆，選擇New Folder拌蜘，將New Folder重命名為snake杆烁。在snake中添加如下兩張圖片，分別為snake head和snake body简卧。

分別添加完成后兔魂，將名字修改為snakeHead和snakeBody，如下所示：

setImage(UIImage(named: "snakeHead"), forState: .Normal)

找到SnakeBody的定義铜涉，在let body = ListBodyItem(frame: frame)后加入

body.setImage(UIImage(named: "snakeBody"), forState: .Normal)

之后點擊運行智玻，現(xiàn)在我們的蛇像這樣：

現(xiàn)在整個蛇還很不美觀，不僅周圍有灰色的空白芙代，而且蛇的身體使用方形也并不好看尚困。
我們將蛇的頭和身體做圓角化處理。在剛才的SnakeHead背景后面添加如下代碼：

layer.cornerRadius = 17
clipsToBounds = true //去除邊界

這兩句將對蛇頭的圖標(biāo)做圓角處理链蕊。
在對蛇的身體處理時事甜，我們需要增加一個漸變效果，這將使得蛇的身體不斷變小滔韵，我們通過不斷增加cornerRadius的值來實現(xiàn)逻谦，首先在SnakeBody中增加如下存儲屬性：

var startRadius: CGFloat = 20.0

之后在conBody()中增加如下代碼：

body.layer.cornerRadius = startRadius
body.clipsToBounds = true
startRadius += 0.5

經(jīng)過修改后整個SnakeBodyList的代碼如下:

import UIKit

class ListBodyItem: UIButton {
    override var frame: CGRect {
        set {
            if let next = nextItem {
                next.frame.origin = frame.origin
            }
            
            super.frame.origin = newValue.origin
        }
        
        get {
            return super.frame
        }
    }
    
    var nextItem: ListBodyItem?
    
    override init(frame: CGRect) {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class SnakeHead: ListBodyItem {
    init() {
        super.init(frame: CGRect(x: 90, y: 90, width: 30, height: 30))
        setImage(UIImage(named: "snakeHead"), forState: .Normal)
        layer.cornerRadius = 17
        clipsToBounds = true
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

class SnakeBody {
    var startRadius: CGFloat = 20.0
    var bodys = [ListBodyItem]()
    
    //初始化身體時只有一段
    init() {
        bodys.append(conBody(CGRect(x: 60, y: 90, width: 30, height: 30)))
    }
    
    //為蛇添加一段(完成一次吃食后調(diào)用)
    func addOne(view: UIView) {
        let curLast = bodys.last!
        
        bodys.append(conBody(curLast.frame))
        curLast.nextItem = bodys.last
        
        view.addSubview(bodys.last!)
    }
    
    //構(gòu)造一個bodyItem
    func conBody(frame: CGRect) -> ListBodyItem {
        let body = ListBodyItem(frame: frame)
        body.setImage(UIImage(named: "snakeBody"), forState: .Normal)
        body.layer.cornerRadius = startRadius
        body.clipsToBounds = true
        startRadius += 0.5
        
        return body
    }
}

點擊左上角的運行，現(xiàn)在陪蜻，我們的蛇是這個樣子：

相比剛才邦马，要好看了一些。

4 給食物增加圖標(biāo)
點擊左側(cè)的Assets.xcassets宴卖，和上面一樣滋将，新增一個food文件夾。本來可以在food中多添加幾張圖片症昏，并對食物做一個隨機處理随闽，目前為了簡化先只添加一張圖片。如下圖：

將圖片拖入image中肝谭，并將image重命名為chicken

setImage(UIImage(named: "chicken"), forState: .Normal)
layer.cornerRadius = CGFloat(foodX/2)
clipsToBounds = true

現(xiàn)在Food.init的代碼如下

init(view: UIView) {
    //初始化在屏幕中央
    super.init(frame: CGRect(x: 180, y: 330, width: foodX, height: foodY))
        
    setImage(UIImage(named: "chicken"), forState: .Normal)
    layer.cornerRadius = CGFloat(foodX/2)
    clipsToBounds = true

    //將Food添加到主view中顯示
    view.addSubview(self)
    //注冊點擊事件
    addTarget(self, action: "changeFood:", forControlEvents: .TouchDown)
}

點擊左上角的運行，效果如下：

5 修改app圖標(biāo)
app圖標(biāo)的修改相對簡單攘烛，點擊左側(cè)的Assets.xcassets魏滚，找到AppIcon，將下面的圖片拖入App iOS 7-9 60pt的2x中

icon.png

如下圖所示：