02-第一個iOS程式-開發步驟

標籤：

開啟Xcode

 

 

選擇項目模板

• Single View Application是最適合初學者的模板

設定項目屬性

運行程式

• 不管怎樣，先運行第一個iOS程式看看效果先（用快速鍵Command + R 也行）

運行結果

• Xcode會啟動一個iOS模擬器來運行程式
• 程式的運行結果如右圖所示，白白一片
• 後面我們得往這空白介面上增添各種各樣的控制項元素

窺探項目環境

• 項目建立完畢後，自動幫我們做了很多配置，也自動產生了很多檔案
• 還自動添加了開發所依賴的架構：

如何搭建UI介面

• 項目中這麼多檔案，哪些是影響著UI介面的呢？
• 在iOS5之前，蘋果使用xib檔案來描述UI介面
• 在iOS5之後，蘋果採取了更加強大和先進的storyboard檔案來描述介面（Xcode5是基於iOS7的）
• 因此，可以得出結論：
• 修改項目中的Main.storyboard檔案就可以修改UI介面

窺探Main.storyboard

• 開啟Main.storyboard檔案一看，裡面有一個全白的介面
• 其實這個介面就是模擬器上顯示的介面
• 左邊的箭頭表明：程式一啟動就會顯示箭頭所指的介面

顯示工具列

• 要想往storyboard的介面中添加其他控制項，得顯示工具列

顯示控制項陳列庫

• 以九宮格形式展示控制項陳列庫，能同時看到更多的控制項
• 從右圖中可以看到各種各樣的控制項，比如按鈕、標籤、文本輸入框等等

添加控制項

• 滑鼠左鍵，長按右邊的某個控制項，即可將它拖拽到左邊的白色介面上

修改控制項屬性

 

• 單擊選中某個控制項後，可以在右邊的菜單工具列中更改控制項的屬性

運行效果

• 運行程式可以發現，軟體介面基本搭建完畢，也能通過鍵盤輸入數字了

增加監聽按鈕的方法

• 開啟MJViewController.m，在類擴充中增加方法聲明

        @interface MJViewController ()

         // 這裡先把IBAction看做是

        void - (IBAction)compute;

       @end

• 在.m中聲明的方法是私人方法，外界無法直接存取，保證了封裝性
• 增加方法實現：

     @implementation MJViewController

    - (void)compute

    {

           NSLog(@"點擊了計算按鈕");

   }

   @end

建立 按鈕 與 方法 的聯絡

• 接下來，就是建立按鈕和compute方法之間的關係
• 先點擊storyboard，然後點擊“中分”按鈕

• 現在已經能同時看到storyboard上的按鈕 和 compute方法了，接下來建立它們之間的聯絡

 

• 按住Control鍵，用滑鼠左鍵將按鈕拖線到compute方法上，然後鬆開

 

• 方法左邊的圈圈由空心變為實心，說明已經跟某個按鈕進行了連線

• 就這樣，點擊“計算”按鈕，就會自動調用compute方法了

運行程式

• 重新運行程式後，點擊“計算”按鈕，會發現控制台已經有輸出資訊

增加控制項屬性

• 現在已經能夠監聽按鈕的點擊事件了，接下來應該在MJViewController的compute方法拿到兩個文字框值，然後把計算結果顯示到最右邊的文字標籤

• 在類擴充中，聲明3個屬性，用來訪問storyboard中的3個控制項

1. @property (nonatomic, weak) IBOutlet UITextField *number1;
2. @property (nonatomic, weak) IBOutlet UITextField *number2;
3. @property (nonatomic, weak) IBOutlet UILabel *result;

• 提醒

1. IBOutlet和weak的作用會在後面解釋

2. 初學者最容易犯、最不應該犯的一個錯誤：鑽牛角尖

建立 控制項 和 屬性 的聯絡

• 按住Control鍵，用滑鼠左鍵將控制項拖到對應屬性上，然後鬆開

• 利用MJViewController的number1屬性就能訪問第1個文字框；

• 利用MJViewController的number2屬性就能訪問第2個文字框；

• 利用MJViewController的result屬性就能訪問右邊的文字標籤。

計算和

• 在compute方法中計算兩個文字框的和，將結果顯示到右邊的標籤中

1. - (void)compute

2. {

3. // 擷取第一個數值

4. int num1 = [self.number1.text intValue];

5. // 擷取第二個數值

6. int num2 = [self.number2.text intValue];

7. // 設定文字標籤的值

8. self.result.text = [NSString stringWithFormat:@"%d", num1 + num2];

9. }

UI控制項 和 控制器的關係

02-第一個iOS程式-開發步驟