iOS 9應用開發教程之編輯界面與編寫代碼

時間 2019-11-06

標籤 ios 應用開發教程編輯界面編寫代碼欄目 iOS 简体版

原文原文鏈接

iOS 9應用開發教程之編輯界面與編寫代碼

編輯界面

在1.2.2小節中提到過編輯界面（Interface builder），編輯界面是用來設計用戶界面的，單擊打開Main.storyboard文件就打開了編輯界面。在Xcode 5.0之後中，編輯界面直接使用的是故事板。本小節將對編輯界面進行介紹ios

1.界面的構成swift

單擊Main.storyboard打開編輯界面後，能夠看到編輯界面會有4部分組成，如圖1.23所示。編輯器

編號爲1的部分爲dock。ide
編號爲2的部分爲畫布：用於設計用戶界面的地方，在畫布中用箭頭指向的區域就是設計界面，在畫布中能夠有多個設計界面，通常將設計界面稱爲場景或者說是主視圖。工具
編號爲3的部分爲工具窗格的檢查器：用於編輯當前選擇的對象的屬性。ui
編號爲4的部分爲工具窗格的庫：若是選擇的是Objects，裏邊存放了不少的視圖。spa

圖1.23 編輯界面構成設計

在畫布的的設計界面下方有一個小的dock，它是一個文件管理器的縮減版。dock展現場景中第一級的控件，每一個場景至少有一個ViewController、一個FirstReponder和一個Exit。可是也能夠有其餘的控件，dock還用來簡單的鏈接控件，如圖1.24所示。code

圖1.24 dockorm

2.設置主視圖尺寸

在圖1.23中看到主視圖的尺寸並不是是手機的尺寸，其實這個主視圖是能夠進行調節的。爲了讓開發者在設計手機界面時能夠更加的方便準確，咱們能夠將其視圖尺寸調節成合適的大小。如下是將主視圖的尺寸調整爲iPhone 6手機的尺寸，具體的操做步驟以下：

（1）選擇主視圖上方dock中的View Controller。

（2）在右邊的工具窗格的檢查器中，選擇Show the Attributes inspector即屬性檢查器，在出現的屬性檢查器面板中將Size設置爲iPhone 4.7-inch，如圖1.25所示。

圖1.25 設置設計界面的尺寸

注意：在屬性檢查器面板中除了能夠設置主視圖的尺寸外，能夠設置方向、狀態欄等。

對Size進行設置後，畫布的效果如圖1.26所示。

圖1.26 畫布的效果

3.添加視圖對象

若是想要在iOS模擬器上顯示一個文本框，就要爲主視圖添加對象。單擊工具窗格庫中的Show the Object Library即視圖庫窗口，在裏面找到Text Field文本框對象將其拖動到畫布的主視圖中，如圖1.27所示

圖1.27 添加視圖對象

此時運行程序，會看到如圖1.28所示的效果。輕拍模擬器中的文本框就會出現鍵盤，能夠經過鍵盤來實現字符串的輸入，如圖1.29所示。

圖1.28 運行效果圖1.29 運行效果

編寫ios9代碼

代碼就是用來實現某一特定的功能，而用計算機語言編寫的命令序列的集合。如今就來經過代碼在文本框中實現顯示「Hello,World」字符串的功能，具體的操做步驟以下：

（1）使用設置編輯器的三個視圖方式的圖標，如圖1.30所示，將Xcode的界面調整爲如圖1.31所示的效果。

圖1.30 編輯器的三個視圖方式的圖標

圖1.31 調整界面

（2）按住Ctrl鍵拖動主視圖中的文本框對象，這時會出現一個藍色的線條，將這個藍色的線條拖動到ViewController.swift文件中，如圖1.32所示。

圖1.32 出現藍色的線條

（3）鬆開鼠標後，會彈出一個對話框，如圖1.33所示。

圖1.33 彈出對話框

（4）彈出的對話框中，找到Name這一項，在其中輸入名稱tf，如圖1.34所示。

圖1.34 輸入名稱

注意：Name這一項輸入的名稱是任意的。

（5）選擇Connect按鈕，關閉對話框，這時在ViewController.swift文件中自動生成一行代碼，如圖1.35所示。

圖1.35 操做變量

注意：生成的代碼叫作插座變量，插座變量其實就是爲關聯的對象起了一個別名。開發者就能夠對此插座變量進行操做，從而對關聯的對象進行操做。以上這一種方式是插座變量聲明和關聯一塊兒進行的，還有一種先聲明動做後關聯的方式。具體操做步驟以下：

首先，打開ViewController.swift文件，使用IBOutlet關鍵字對文本框的插座變量進行聲明，其代碼如圖1.36所示。

圖1.36 聲明插座變量

注意：聲明好的插座變量會在代碼的前面出現一個空心的小圓圈。此小圓圈表示該插座變量還未進行關聯。

其次，使用設置編輯器的三個視圖方式的圖標，將Xcode的界面進行調整，將其調整爲和圖1.31同樣的效果。

而後，按住Ctrl鍵拖動主視圖中的文本框對象，這時會出現一個藍色的線條，將這個藍色的線條和文件ViewController.swift文件中的插座變量進行關聯，如圖1.37所示。

圖1.37 關聯插座變量

最後鬆開鼠標後，文本框對象就與插座變量成功的關聯在一塊兒了，此時插座變量前面的空心小圓圈就變爲了實心的小圓圈，它表示此插座變量已被關聯。

（6）打開ViewController.swift文件，編寫代碼，此代碼實現的功能是在文本框中顯示字符串Hello，World。代碼以下：

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tf: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
tf.text="Hello,World" //設置文本內容
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
}

注意：爲了方便開發者更好的理解代碼，本書會將多餘的代碼省去，使用「……」省略號表示，以上的代碼就會變爲以下的代碼：

import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tf: UITextField!
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
tf.text="Hello,World" //設置文本內容
}
……
}

此時運行程序，會看到如圖1.38所示的效果。

圖1.38 運行效果

本文選自：iOS 9應用開發基礎教程大學霸內部資料，轉載請註明出處，尊重技術尊重IT人！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。