iOS 8 Swift 第三方鍵盤建置簡易新手教學——一個屬於你自己的鍵盤！

6 月142015

作者：超級efly 發布：2015-06-14 19:52 分類：電腦閱讀：15,357

二、實現基礎鍵盤功能

1、首先我們把Xcode原本所提供的代碼（即 class 內代碼）刪除或註釋掉

2、我們先在添加一個在鍵盤界面中創建新按鈕的函式（函數）：（將代碼放入 class 中，下同）

    func createButtonWithTitle(title: String) -> UIButton {
    
        let button = UIButton.buttonWithType(.System) as! UIButton
        button.frame = CGRectMake(0, 0, 20, 20)
        button.setTitle(title, forState: .Normal)
        button.sizeToFit()
        button.titleLabel!.font = UIFont.systemFontOfSize(15)
        button.setTranslatesAutoresizingMaskIntoConstraints(false)
        button.backgroundColor = UIColor(white: 1.0, alpha: 1.0)
        button.setTitleColor(UIColor.darkGrayColor(), forState: .Normal)
    
        button.addTarget(self, action: "didTapButton:", forControlEvents: .TouchUpInside)
    
        return button
    }

func createButtonWithTitle(title: String) -> UIButton {

let button = UIButton.buttonWithType(.System) as! UIButton

button.frame = CGRectMake(0, 0, 20, 20)

button.setTitle(title, forState: .Normal)

button.sizeToFit()

button.titleLabel!.font = UIFont.systemFontOfSize(15)

button.setTranslatesAutoresizingMaskIntoConstraints(false)

button.backgroundColor = UIColor(white: 1.0, alpha: 1.0)

button.setTitleColor(UIColor.darkGrayColor(), forState: .Normal)

button.addTarget(self, action: "didTapButton:", forControlEvents: .TouchUpInside)

return button

}

3、然後，我們需要設定按鈕按下後（ TouchUpInside ）所執行的 Function didTapButton ：

    func didTapButton(sender: AnyObject?) {
        
        let button = sender as! UIButton
        let title = button.titleForState(.Normal)
        var proxy = textDocumentProxy as! UITextDocumentProxy
        
        proxy.insertText(title!)
    }

func didTapButton(sender: AnyObject?) {

let button = sender as! UIButton

let title = button.titleForState(.Normal)

var proxy = textDocumentProxy as! UITextDocumentProxy

proxy.insertText(title!)

}

4、接着，我們在 viewDidLoad 內加入添加按鈕「A」的 Function

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let button = createButtonWithTitle("A")
        self.view.addSubview(button)
        
    }

override func viewDidLoad() {

super.viewDidLoad()

let button = createButtonWithTitle("A")

self.view.addSubview(button)

}

5、現在我們運行鍵盤，應該就可以看到一個可點擊的「A」按鈕放在了我們鍵盤的左上角

6、讓我們稍微修改一下 viewDidLoad 的代碼，創建包含一行字母的Array：

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let buttonTitles = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
        var buttons = [UIButton]()
        var keyboardRowView = UIView(frame: CGRectMake(0, 0, 320, 50))
        
        for buttonTitle in buttonTitles{
            
            let button = createButtonWithTitle(buttonTitle)
            buttons.append(button)
            keyboardRowView.addSubview(button)
        }
        
        self.view.addSubview(keyboardRowView)
    }

override func viewDidLoad() {

super.viewDidLoad()

let buttonTitles = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]

var buttons = [UIButton]()

var keyboardRowView = UIView(frame: CGRectMake(0, 0, 320, 50))

for buttonTitle in buttonTitles{

let button = createButtonWithTitle(buttonTitle)

buttons.append(button)

keyboardRowView.addSubview(button)

}

self.view.addSubview(keyboardRowView)

}

7、如果你現在直接運行這段代碼，將只會顯示「P」這一個字母，所以我們還需要新增一個 addIndividualButtonConstraints Function 來對其進行排版：

說明：該段代碼通過使用了「AutoLayout」對一行按鈕進行了自動排版、於每一按鍵的上下左右分別加入了 1px 的空隙（以其相鄰的按鍵作爲參考標誌）

    func addIndividualButtonConstraints(buttons: [UIButton], rowView: UIView){
        
        for (index, button) in enumerate(buttons) {
            
            var topConstraint = NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .LessThanOrEqual, toItem: rowView, attribute: .Top, multiplier: 1.0, constant: 1.0)
            var bottomConstraint = NSLayoutConstraint(item: button, attribute: .Bottom, relatedBy: .GreaterThanOrEqual, toItem: rowView, attribute: .Bottom, multiplier: 1.0, constant: -1.0)
            
            var rightConstraint : NSLayoutConstraint!
            
            if index == buttons.count - 1 {
                
                rightConstraint = NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .GreaterThanOrEqual, toItem: rowView, attribute: .Right, multiplier: 1.0, constant: 0.0)
                
            } else {
                
                let nextButton = buttons[index+1]
                rightConstraint = NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .Equal, toItem: nextButton, attribute: .Left, multiplier: 1.0, constant: -1.0)
            }
            
            
            var leftConstraint : NSLayoutConstraint!
            
            if index == 0 {
                
                leftConstraint = NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .LessThanOrEqual, toItem: rowView, attribute: .Left, multiplier: 1.0, constant: 0.0)
                
            } else {
                
                let prevtButton = buttons[index-1]
                leftConstraint = NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .Equal, toItem: prevtButton, attribute: .Right, multiplier: 1.0, constant: 1.0)
                
                let firstButton = buttons[0]
                var widthConstraint = NSLayoutConstraint(item: firstButton, attribute: .Width, relatedBy: .Equal, toItem: button, attribute: .Width, multiplier: 1.0, constant: 0.0)
                
                widthConstraint.priority = 800.0
                rowView.addConstraint(widthConstraint)
            }
            
            rowView.addConstraints([topConstraint, bottomConstraint, rightConstraint, leftConstraint])
        }
    }

func addIndividualButtonConstraints(buttons: [UIButton], rowView: UIView){

for (index, button) in enumerate(buttons) {

var topConstraint = NSLayoutConstraint(item: button, attribute: .Top, relatedBy: .LessThanOrEqual, toItem: rowView, attribute: .Top, multiplier: 1.0, constant: 1.0)

var bottomConstraint = NSLayoutConstraint(item: button, attribute: .Bottom, relatedBy: .GreaterThanOrEqual, toItem: rowView, attribute: .Bottom, multiplier: 1.0, constant: -1.0)

var rightConstraint : NSLayoutConstraint!

if index == buttons.count - 1 {

rightConstraint = NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .GreaterThanOrEqual, toItem: rowView, attribute: .Right, multiplier: 1.0, constant: 0.0)

} else {

let nextButton = buttons[index+1]

rightConstraint = NSLayoutConstraint(item: button, attribute: .Right, relatedBy: .Equal, toItem: nextButton, attribute: .Left, multiplier: 1.0, constant: -1.0)

}

var leftConstraint : NSLayoutConstraint!

if index == 0 {

leftConstraint = NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .LessThanOrEqual, toItem: rowView, attribute: .Left, multiplier: 1.0, constant: 0.0)

} else {

let prevtButton = buttons[index-1]

leftConstraint = NSLayoutConstraint(item: button, attribute: .Left, relatedBy: .Equal, toItem: prevtButton, attribute: .Right, multiplier: 1.0, constant: 1.0)

let firstButton = buttons[0]

var widthConstraint = NSLayoutConstraint(item: firstButton, attribute: .Width, relatedBy: .Equal, toItem: button, attribute: .Width, multiplier: 1.0, constant: 0.0)

widthConstraint.priority = 800.0

rowView.addConstraint(widthConstraint)

}

rowView.addConstraints([topConstraint, bottomConstraint, rightConstraint, leftConstraint])

}

8、再讓我們修改一下 viewDidLoad 的代碼以加入上述 Function ：

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let buttonTitles = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]
        var buttons = [UIButton]()
        var keyboardRowView = UIView(frame: CGRectMake(0, 0, 320, 50))
        
        for buttonTitle in buttonTitles{
            
            let button = createButtonWithTitle(buttonTitle)
            buttons.append(button)
            keyboardRowView.addSubview(button)
        }
        
        self.view.addSubview(keyboardRowView)
        
        addIndividualButtonConstraints(buttons, rowView: keyboardRowView)
    }

override func viewDidLoad() {

super.viewDidLoad()

let buttonTitles = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"]

var buttons = [UIButton]()

var keyboardRowView = UIView(frame: CGRectMake(0, 0, 320, 50))

for buttonTitle in buttonTitles{

let button = createButtonWithTitle(buttonTitle)

buttons.append(button)

keyboardRowView.addSubview(button)

}

self.view.addSubview(keyboardRowView)

addIndividualButtonConstraints(buttons, rowView: keyboardRowView)

}

9、現在我們再來試試這個第三方鍵盤，怎樣，看起來是不是像樣多了？繼續查看下頁的內容完成我們的鍵盤設計吧！

注意：於本步驟時鍵盤仍有一些小的排版問題，不過在之後的步驟中我們便會對其進行修復，所以無需緊張～

頁： 1 2 3 4

覺得這篇文章有用嗎？分享一下讓更多人受益吧！

本文固定鏈接：https://www.arefly.com/zh-hant/ios-8-swift-custom-keyboard-extension/

二、實現基礎鍵盤功能

覺得這篇文章有用嗎？分享一下讓更多人受益吧！

您可能還會對這些文章感興趣！