IOS 開發筆記-基礎 UI（1）-簡單的計算機，iosui

IOS 開發筆記-基礎 UI（1）-簡單的計算機，iosui
(1)UI是App的根基：一個App應該是先有UI介面，然後在UI的基礎上增加實用功能(2)UI相對簡單易學：UI普遍是學習過程中最簡單的一塊，能快速擁有成就感和學習興趣(3)UI至關重要：開發中的絕大部分時間都在處理UI

謹記一條IOS軟體開發定律：萬物皆對象，UI介面上的每一個元素都是一個對象

IOS，android 軟體開發過程

UIKit架構是跟UI有關係的，標籤，文本，按鈕，進度條，開關等控制項，都是封裝在UIKit架構內部的，UIKit架構中提供了豐富多彩的可視化組件元素，利用UIKit架構提供的類來建立各種可視化組件對象，最後組成複雜而美觀的UI介面。 為了方便開發人員開發出強大的功能，蘋果提供了各種各樣的架構(1)UIKit：建立和管理應用程式的使用者介面(2)QuartzCore：提供動畫特效以及通過硬體進行渲染的能力(3)CoreGraphics：提供2D繪製的基於C的API(4)CoreLocation：使用GPS和WIFI擷取位置資訊(5)MapKit：為應用程式提供內嵌地圖的介面(6)AVFoundation：音頻、視頻處理(7)……

在開發過程中需要用到一些特殊功能時，可以先嘗試使用系統內建的架構。

通過一個簡單的計算機的開發，來學習和認識IOS 開發的基礎控制項

分析：(1)添加需要的控制項，搭建UI介面：1個按鈕、3個文字標籤（+，=，還有30的位置處）、2個文本輸入框(2)監聽按鈕的點擊事件(3)取得2個文字框值，將計算好的最終結果顯示到右邊的文字標籤上 什麼是控制項？能在介面上看得到的，可以進行互動的，就是控制項 常用的控制項介紹：UILabel—文字標籤：顯示一串固定的文字UIButton – 按鈕：監聽使用者的點擊事件，在使用者點擊後做出響應 UITextField – 文本輸入框，文本輸入框可以彈出鍵盤，讓使用者輸入常值內容 UIView:螢幕上能看得見摸得著的東西就是UIView，比如螢幕上的按鈕、文字、圖片，一般翻譯叫做：視圖\控制項\組件。UIButton、UILabel、UITextField都繼承自UIView，每一個UIView都是一個容器，能容納其他UIView（比如整個鍵盤是一個UIView，裡面容納很多小格子的數字UIView） 在“加法計算機”中，最後面那塊白色的全屏的東西也是一個UIView，白色的大UIView中容納了很多小的UIView，視圖階層如所示 在白色的大UIView中，容納了6個小UIView（1個UIButton、2個UITextField、3個UILabel），白色的大UIView為6個小UIView的父控制項（父視圖），6個小UIView都是白色大UIView的子控制項（子視圖）。 每一個新的介面都是一個新的UIView，在切換過程中，涉及到了：1、UIView的建立和銷毀2、UIView跟使用者的互動（處理UIView內部每一行的點擊）這是視圖控制器 viewController 的工作，UIView 負責顯示，控制器來控制視圖。每當顯示一個新介面時，首先會建立一個新的UIViewController對象，然後建立一個對應的全屏UIView，UIViewController負責管理這個UIView。UIViewController就是UIView的大管家，負責建立、顯示、銷毀UIView，負責監聽UIView內部的事件，負責處理UIView與使用者的互動。大部分代碼都是寫在控制器。 UIViewController內部有個UIView屬性，就是它負責管理UIView對象 代碼如下：

@property(nonatomic,retain) UIView *view;

 

先進行 UI 設計，使用單視圖頁面進行開發（常用），Single View Application是最適合初學者的模板
項目建立完畢後，Xcode自動幫我們做了很多配置，也自動產生了很多檔案，還能自動添加開發所依賴的架構。   認識故事板  箭頭表明：程式一啟動就會顯示箭頭所指的介面 在iOS5之前，蘋果使用xib檔案來描述UI介面，在iOS5之後，蘋果採取了更加強大和先進的storyboard檔案來描述介面（Xcode5是基於iOS7），因此，可以得出結論：修改項目中的Main.storyboard檔案就可以修改UI介面。 開啟Main.storyboard檔案一看，裡面有一個全白的介面，這個介面就是模擬器上顯示的介面。 往storyboard的介面中添加其他控制項，得顯示工具列 建議使用九宮格排列控制項表徵圖，這樣一次性看到的控制項多，視野大。 把需要的控制項，拖拽到故事板上，進行 UI 設計。單擊選中某個控制項後，可以在右邊的菜單工具列中更改控制項的屬性   注意：在屬性查看器裡，更改控制項顯示的內容，控制項不會自動調節自己的寬度，而雙擊控制項填寫內容，控制項會自動調整寬度來適應填寫的內容。  各個控制項，不僅可以用滑鼠控制間距和位置，也能選中之後，使用方向鍵微調。 使用 command+r 運行程式，查看效果 注意，蘋果 APP 審核規定，在應該使用數位地方，必須只能輸入數字，否則無法通過。也就是說，本來應該輸入數字，最起碼彈出的鍵盤應該是數字鍵台，而不是。改進方法：在屬性查看器裡，找到 keyboard 屬性，修改為 number。  兩個文本輸入框都設定好即可。 下面實現，點擊按鈕『計算』，進行加法的計算：使用一個如下的編輯模式，點擊助理編輯器 進行關聯操作，方法左邊的圈圈由空心變為實心，說明已經跟某個按鈕進行了連線 OC 中，和介面關聯的方法，通常用 IB 開頭（Interface builder），下面是 點m 檔案：

-(IBAction)compute{    NSLog(@"點擊按鈕進行計算：");    //通過此方法，拿到兩個文字框的輸入值    NSString *str1 = self.num1.text;    NSString *str2 = self.num2.text;    //把輸入的值相加    //把文本轉換為數值使用 intValue    int result = str1.intValue + str2.intValue;    //把結果顯示到規定的標籤    //把整數轉換為字串    self.sum.text = [NSString stringWithFormat:@"%d", result];}

小結：

IOS 程式的開發步驟：

1、設計介面

2、連線關聯

3、寫代碼實現功能（最難，最複雜 ）

IBAction 和 IBOutlet1、IBAction，從傳回值角度上看，作用相當於void，只有傳回值聲明為IBAction的方法，才能跟storyboard中的控制項進行連線2、IBOutlet 用來和介面的元素建立關係，用來修改，獲得介面控制項的屬性，故對應的是@property， 而 IBAction 對應的是方法。 只有聲明為IBOutlet的屬性，才能跟storyboard中的控制項進行連線。 UIViewController是負責程式的控制，相當於管家的角色，而UIView 是負責介面的展示，聯絡 MVC 模式。嚴格來講，箭頭所指的應該是一個UIViewController對象，裡面白色的介面僅僅是UIViewController內部的UIView屬性 故事板：本質是一個 xml 檔案，可以手動的設定程式啟動時載入的storyboard是哪個這個設定表明：程式啟動時會載入Main.storyboard 瞭解消極式載入和懶載入的概念在程式需要的時候，才載入到記憶體裡，效率上變低了，但是程式的記憶體消耗小了，這就是蘋果手機的效能最佳化的好的原因之一！ 簡單加法計算機的運行過程1.讀取Main.storyboard檔案2.建立箭頭所指的ViewController對象3.根據storyboard檔案中描述建立ViewController的UIView對象4.將UIView對象顯示到使用者眼前 現在已經知道：應該由ViewController來監聽按鈕的點擊,換句話說，ViewController應該提供一個方法出來，當使用者點擊按鈕時，就調用這個方法來通知ViewController按鈕被人點了。ViewController就在這個方法中實現想做的任何事情，比如計算2個文本輸入框內值的和。 退出鍵盤的兩種方式resignFirstResponder當叫出鍵盤的那個控制項(第一響應者)調用這個方法時，就能退出鍵盤 endEditing只要調用這個方法的控制項內部存在第一響應者，就能退出鍵盤  蘋果官方建議：從 xcode5開始，把不對外開放的屬性和方法聲明，放到 .m 檔案內。 完整代碼

 1 // 2 //  ViewController.h 3 //  加法計算機 4 // 5 //  Created by 大帥 on 15-2-10. 6 //  Copyright (c) 2015年 dashuai. All rights reserved. 7 // 8  9 #import <UIKit/UIKit.h>10 11 @interface ViewController : UIViewController12 //聲明一個計算的對象方法13 -(IBAction)compute;14 //帶有 IBOutlet ，才能修改和獲得控制項的屬性15 @property (weak, nonatomic) IBOutlet UITextField *num1;16 @property (weak, nonatomic) IBOutlet UITextField *num2;17 @property (weak, nonatomic) IBOutlet UILabel *sum;18 @end

 1 // 2 //  ViewController.m 3 //  加法計算機 4 // 5 //  Created by 大帥 on 15-2-10. 6 //  Copyright (c) 2015年 dashuai. All rights reserved. 7 // 8  9 #import "ViewController.h"10 11 @interface ViewController ()12 13 @end14 15 @implementation ViewController16 17 - (void)viewDidLoad {18     [super viewDidLoad];19     // Do any additional setup after loading the view, typically from a nib.20 }21 22 - (void)didReceiveMemoryWarning {23     [super didReceiveMemoryWarning];24     // Dispose of any resources that can be recreated.25 }26 27 //帶有 IBAction 的方法，才能和控制項關聯28 -(IBAction)compute29 {30     NSLog(@"點擊按鈕進行計算：");31     //通過此方法，拿到兩個文字框的輸入值32     NSString *str1 = self.num1.text;33     NSString *str2 = self.num2.text;34     //把輸入的值相加35     //把文本轉換為數值使用 intValue方法36     int result = str1.intValue + str2.intValue;37     //把結果顯示到規定的標籤38     //把整數轉換為字串39     self.sum.text = [NSString stringWithFormat:@"%d", result];40     //記住一個 OOP 設計的習慣規則41     //關閉鍵盤42     //也就是說：誰建立對象，誰負責銷毀對象,因為手機記憶體，寸土寸金！43     //誰開啟鍵盤，誰關閉鍵盤44     45     //調用第一響應者，就是開啟鍵盤的那個控制項，關閉鍵盤46     //[self.num1 resignFirstResponder];47     //[self.num2 resignFirstResponder];48     49     //或者使用強行關閉鍵盤的方法,YES or NO50     [self.view endEditing:YES];51     //NO 也能關閉，但是和 YES 有區別，涉及到了多線程的問題！ 不糾結，就永遠寫成 YES。如果是 NO，保不齊某些情景，就不一定能關閉。52 }53 @end