使用swift在sprite中顯示圓角UIButton按鈕

標籤：style   http   color   使用   os   檔案   

我對objective-C不是很熟，UIKit以前沒有用過，SpriteKit也只看了遍教程，然後看了一遍swift語言教程，此時開始編寫這個程式，所以遇到的問題比較小兒科，解決方案也是曲線救國，希望有高人指點解決這些問題的簡單方法，有好的解決方案後，我會隨時進行本日誌的修改，以免誤導他人。

程式介面很是簡單

然後點擊中間的遊戲空間，會roll色子，隨機產生1~6的數字，飛機前進若干步，遇到梯子向前跳若干步，而遇到蛇則後退若干步，指導抵達25格，遊戲結束。

上面有一個標籤，顯示遊戲狀態和Roll點值。

下面有一個RESTART按鈕，用來重新開始遊戲，本日誌的關鍵就是這個按鈕。

起先我想法很簡單，就是在sprite的scene裡邊添加一個按鈕，但是SpriteKit裡邊我並沒有發現類似按鈕控制項什麼的，開始我使用Label替代按鈕的功能，就是在點擊事件中判斷控制項，然後再執行按鈕相關代碼，這種方法一是按鈕太醜，二是點擊時沒有按鈕的動作，三是按鈕的方法調用實在是太山寨了。

後來我發現了UIButton，我參考了下面添加按鈕的Objective-C代碼：

CGRect frame = CGRectMake(90, 200, 200, 60);    UIButton *someAddButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];    someAddButton.backgroundColor = [UIColor clearColor];    [someAddButton setTitle:@"動態添加一個按鈕!" forState:UIControlStateNormal];    someAddButton.frame = frame;    [someAddButton addTarget:self action:@selector(someButtonClicked) forControlEvents:UIControlEventTouchUpInside];    [self.view addSubview:someAddButton];

在此首先得看蘋果一個官方文檔，Using Swift with Cocoa and Objective-C

怎樣修改OC代碼到swift，按理上述代碼和說明，第二行理應該改為

var someAddButton = UIButton.buttonWithType(.RoundedRect) as UIButton

其中按住command鍵單擊buttonWithType函數，可以看出這是一個類型函數，並且返回AnyObject!類型，所以使用了as，但是並不能如我所願，因為UIButtonType沒有圓角矩形這個枚舉類型

enum UIButtonType : Int {    case Custom // no button type    case System // standard system button        case DetailDisclosure    case InfoLight    case InfoDark    case ContactAdd}

那我先放棄這個圓角矩形，使用一個普通按鈕吧

        var btn  = UIButton()        btn.setTitle("RESTART",forState: .Normal)                btn.frame = CGRect(x:screen.bounds.size.width/2-50, y:screen.bounds.size.height-100,width:100,height:50)                self.addChild(btn)        //self.view.addSubview(btn)

問題又出現了，btn根本不是一個SKNode，無法添加上去,看OC的樣本，明顯btn是添加在view上的，於是改為注釋的那一句，但是運行後，並沒有顯示按鈕。這可如何是好呀。

於是我又開始尋找資料，終於我發現了蘋果另一個程式碼範例文檔：UICatalog: Creating and Customizing UIKit Controls in Swift，這個範例程式碼我下載後，並沒能運行，但是其中的各種控制項使用樣本肯定是不會錯的，UIButton是添加在ViewController裡邊的，我的工程中就3個swift檔案，其中一個就是GameViewController.swift，我看到裡邊的代碼後就明白了，GameScene都是添加到這裡邊顯示的，所以按鈕也應該是添加到這兒。

所以在GameViewController的viewDidLoad方法中寫添加按鈕的代碼：

    var btn:UIButton = UIButton()    var gameScene:GameScene?    override func viewDidLoad() {        super.viewDidLoad()        if let scene = GameScene.unarchiveFromFile("GameScene") as? GameScene {            // Configure the view.            let skView = self.view as SKView            skView.showsFPS = true            skView.showsNodeCount = true                        /* Sprite Kit applies additional optimizations to improve rendering performance */            skView.ignoresSiblingOrder = true                        /* Set the scale mode to scale to fit the window */            scene.scaleMode = .AspectFill            skView.presentScene(scene)                        var screen = UIScreen.mainScreen()            println("screen width:\(screen.bounds.size.width),height:\(screen.bounds.size.height)")            btn.setTitle("RESTART",forState: .Normal)            btn.backgroundColor = UIColor.redColor()            btn.frame = CGRect(x:screen.bounds.size.width/2-50, y:screen.bounds.size.height-100,width:100,height:50)                        skView.addSubview(btn)            gameScene = scene        }    }

這樣添加後，按鈕總算是出來了，但還是無比的難看，我試過那個按鈕類型，沒有一個是能用的。

一是沒有圓角矩形，二是一點沒有按鈕那種凸起感覺。

我又看了幾個UIButton的幾個方法，發現可以同時設定背景圖片和設定按鈕文字，那我不就可以弄一個按鈕的圖片，來製作一個圓角矩形的按鈕了麼。

於是我製作了下面的按鈕圖片：

需要注意：這個圖片最好是png格式，這個橙色地區就是圖片的全部，並沒有白色底背景。我是使用蘋果內建的圖片預覽的智能套索剪下的。

然後使用如下代碼即可產生本日誌開始的按鈕：

class GameViewController: UIViewController {    var btn:UIButton = UIButton()    var gameScene:GameScene?    override func viewDidLoad() {        super.viewDidLoad()        if let scene = GameScene.unarchiveFromFile("GameScene") as? GameScene {            // Configure the view.            let skView = self.view as SKView            skView.showsFPS = true            skView.showsNodeCount = true                        /* Sprite Kit applies additional optimizations to improve rendering performance */            skView.ignoresSiblingOrder = true                        /* Set the scale mode to scale to fit the window */            scene.scaleMode = .AspectFill            skView.presentScene(scene)                        var screen = UIScreen.mainScreen()            println("screen width:\(screen.bounds.size.width),height:\(screen.bounds.size.height)")                        let buttonTitle = NSLocalizedString("RESTART", comment: "you will restart the game")            btn.setTitle(buttonTitle,forState: .Normal)                        var image = UIImage(named:"button")            btn.setBackgroundImage(image,forState: .Normal)                        btn.frame = CGRect(x:screen.bounds.size.width/2-50, y:screen.bounds.size.height-100,width:100,height:50)                        btn.addTarget(self, action: "buttonClicked:", forControlEvents: .TouchUpInside)            skView.addSubview(btn)            gameScene = scene        }    }    func buttonClicked(sender: UIButton) {        print("A button was clicked: \(sender).")        if let scene = gameScene? {            println("board width:\(scene.spriteBoard.size.width),height:\(scene.spriteBoard.size.height)")            var alert = scene.gameRestartAsk()            presentViewController(alert, animated: true, completion: nil)        }    }}

本人在IOS是個初學者，請多多指教，謝謝。