10、接着，我們來創建一個分別爲每行創建各種按鈕的Function createRowOfButtons ：
說明：其實本步驟基本上是將前述 viewDidLoad 中的功能修改爲單個的 Function 以方便重複創建多行的鍵盤
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
func createRowOfButtons(buttonTitles: [NSString]) -> UIView { var buttons = [UIButton]() var keyboardRowView = UIView(frame: CGRectMake(0, 0, 320, 50)) for buttonTitle in buttonTitles{ let button = createButtonWithTitle(buttonTitle as String) buttons.append(button) keyboardRowView.addSubview(button) } addIndividualButtonConstraints(buttons, rowView: keyboardRowView) return keyboardRowView } |
11、所以我們的 viewDidLoad 便會變成這個樣子：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
override func viewDidLoad() { super.viewDidLoad() let buttonTitles1 = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"] let buttonTitles2 = ["A", "S", "D", "F", "G", "H", "J", "K", "L"] let buttonTitles3 = ["CP", "Z", "X", "C", "V", "B", "N", "M", "BP"] let buttonTitles4 = ["CHG", "SPACE", "RETURN"] var row1 = createRowOfButtons(buttonTitles1) var row2 = createRowOfButtons(buttonTitles2) var row3 = createRowOfButtons(buttonTitles3) var row4 = createRowOfButtons(buttonTitles4) self.view.addSubview(row1) self.view.addSubview(row2) self.view.addSubview(row3) self.view.addSubview(row4) } |
12、如果我們現在就運行鍵盤、就可以發現我們只能看到這麼多行鍵盤中的最後一列，於是，和前面按鈕一樣，我們又會使用「Autolayout」對每行鍵盤進行排版：（同樣是在每行上下增加了 1px 的空隙）
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
func addConstraintsToInputView(inputView: UIView, rowViews: [UIView]){ for (index, rowView) in enumerate(rowViews) { var rightSideConstraint = NSLayoutConstraint(item: rowView, attribute: .Right, relatedBy: .Equal, toItem: inputView, attribute: .Right, multiplier: 1.0, constant: 0.0) var leftConstraint = NSLayoutConstraint(item: rowView, attribute: .Left, relatedBy: .Equal, toItem: inputView, attribute: .Left, multiplier: 1.0, constant: 0.0) inputView.addConstraints([leftConstraint, rightSideConstraint]) var topConstraint: NSLayoutConstraint if index == 0 { topConstraint = NSLayoutConstraint(item: rowView, attribute: .Top, relatedBy: .Equal, toItem: inputView, attribute: .Top, multiplier: 1.0, constant: 0.0) } else { let prevRow = rowViews[index-1] topConstraint = NSLayoutConstraint(item: rowView, attribute: .Top, relatedBy: .Equal, toItem: prevRow, attribute: .Bottom, multiplier: 1.0, constant: 0.0) let firstRow = rowViews[0] var heightConstraint = NSLayoutConstraint(item: firstRow, attribute: .Height, relatedBy: .Equal, toItem: rowView, attribute: .Height, multiplier: 1.0, constant: 0.0) heightConstraint.priority = 800.0 inputView.addConstraint(heightConstraint) } inputView.addConstraint(topConstraint) var bottomConstraint: NSLayoutConstraint if index == (rowViews.count - 1) { bottomConstraint = NSLayoutConstraint(item: rowView, attribute: .Bottom, relatedBy: .Equal, toItem: inputView, attribute: .Bottom, multiplier: 1.0, constant: 0.0) } else { let nextRow = rowViews[index+1] bottomConstraint = NSLayoutConstraint(item: rowView, attribute: .Bottom, relatedBy: .Equal, toItem: nextRow, attribute: .Top, multiplier: 1.0, constant: 0.0) } inputView.addConstraint(bottomConstraint) } } |
13、同樣的，我們也來更新 viewDidLoad 以加入該 Function：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
override func viewDidLoad() { super.viewDidLoad() let buttonTitles1 = ["Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P"] let buttonTitles2 = ["A", "S", "D", "F", "G", "H", "J", "K", "L"] let buttonTitles3 = ["CP", "Z", "X", "C", "V", "B", "N", "M", "BP"] let buttonTitles4 = ["CHG", "SPACE", "RETURN"] var row1 = createRowOfButtons(buttonTitles1) var row2 = createRowOfButtons(buttonTitles2) var row3 = createRowOfButtons(buttonTitles3) var row4 = createRowOfButtons(buttonTitles4) self.view.addSubview(row1) self.view.addSubview(row2) self.view.addSubview(row3) self.view.addSubview(row4) row1.setTranslatesAutoresizingMaskIntoConstraints(false) row2.setTranslatesAutoresizingMaskIntoConstraints(false) row3.setTranslatesAutoresizingMaskIntoConstraints(false) row4.setTranslatesAutoresizingMaskIntoConstraints(false) addConstraintsToInputView(self.view, rowViews: [row1, row2, row3, row4]) } |
14、現在讓我們再運行一下這個程序，哇！這次真的像是一個鍵盤了耶！前面所發現的問題也一起解決了，而且橫屏、豎屏都可以自動適配耶！
不過爲什麼當我按下 、 什麼時沒有作用呢？沒關係，下一頁我們就來把這些特殊的按鈕加入他們應有的功能！
