8--UI 初步認識 簡易計算器

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): 須要兩個輸入框 是 text 按鈕;  + = 是lable 標籤須要兩個 還須要一個計算的 button;

(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，在切換過程當中，涉及到了：一、UIView的建立和銷燬二、UIView跟用戶的交互（處理UIView內部每一行的點擊）這 是視圖控制器 viewController 的工做，UIView 負責顯示，控制器來控制視圖。每當顯示一個新界面時，首先會建立一個新的UIViewController對象，而後建立一個對應的全屏 UIView，UIViewController負責管理這個UIView。UIViewController就是UIView的大管家，負責建立、顯 示、銷燬UIView，負責監聽UIView內部的事件，負責處理UIView與用戶的交互。大部分代碼都是寫在控制 器。 UIViewController內部有個UIView屬性，就是它負責管理UIView對象

 

先進行 UI 設計，使用單視圖頁面進行開發（經常使用），Single View Application是最適合初學者的模板.

先來看一下故事板 就是上圖中所描述的 storyboard 簡單的說就是顯示UI界面的程序

程序一啓動就會顯示箭頭所指的界面 在iOS5以前，蘋果使用xib文件來描述UI界面，在iOS5以後，蘋果採起了更增強大和先進的storyboard文件來描述界面（Xcode5是基於iOS7），所以，能夠得出結論：修改項目中的Main.storyboard文件就能夠修改UI界面。 打開Main.storyboard文件一看，裏面有一個全白的界面，這個界面就是模擬器上顯示的界面。 往storyboard的界面中添加其餘控件，得顯示工具欄

 

注意：在屬性查看器裏，更改控件顯示的內容，控件不會自動調節本身的寬度，而雙擊控件填寫內容，控件會自動調整寬度來適應填寫的內容。

所以可使用鼠標或者鍵盤的方向鍵進行調節,因爲蘋果的官方限制 在應該使用數字的地方，必須只能輸入數字，不然沒法經過。也就是說，原本應該輸入數字，最起碼彈出的鍵盤應該是數字鍵盤，而不是如圖所示。改進方法：在屬性查看器裏，找到 keyboard 屬性，修改成 number。

 

另外在新版本的 XCODE 裏面取消了鍵盤和虛擬鍵盤以前的通用,若是模擬器不彈出虛擬鍵盤,須要將模擬器裏面的鍵盤設置取消聯接物理鍵盤便可.

和界面進行關聯: 先點擊 UI 按鈕,而後按住 ctrl 鍵不放,會出現一條線將改線已到對應的方法上等待變爲圓圈便可關聯成功.

 

 

小結：

 

IOS 程序的開發步驟：

 

一、設計界面

 

二、連線關聯

 

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

故事板：本質是一個 xml 文件，能夠手動的設置程序啓動時加載的storyboard是哪一個這個設置代表：程序啓動時會加載Main.storyboard 瞭解延遲加載和懶加載的概念在程序須要的時候，才加載到內存裏，效率上變低了，可是程序的內存消耗小了，這就是蘋果手機的性能優化的好的緣由之一！

簡單加法計算器的運行過程

1. 讀取Main.storyboard文件

2.建立箭頭所指的ViewController對象

3.根據storyboard文件中描述建立 ViewController的UIView對象

4.將UIView對象顯示到用戶眼前 如今已經知道：應該由ViewController來監聽按鈕的 點擊,換句話說，ViewController應該提供一個方法出來，當用戶點擊按鈕時，就調用這個方法來通知ViewController按鈕被人點了。ViewController就在這個方法中實現想作的任何事情，好比計算2個文本輸入框內值的和。 退出鍵盤的兩種方式resignFirstResponder當叫出鍵盤的那個控件(第一響應者)調用這個方法時，就能退出鍵盤 endEditing只要調用這個方法的控件內部存在第一響應者，就能退出鍵盤 蘋果官方建議：從 xcode5開始，把不對外開放的屬性和方法聲明，放到 .m 文件內。

A: 設置Text1 Text2 和 lable3屬性:

 1 //
 2 //  ViewController.h
 3 //  01-第一個 IOS 程序
 4 //
 5 //  Created by Stephen on 16/4/2.
 6 //  Copyright © 2016年 Stephen. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 @interface ViewController : UIViewController
12 // 申明一個方法來監聽按鈕的動做
13 
14 - (IBAction)btnClick;  // IBAction 對應的是方法
15 
16 /*
17  BAction 和 IBOutlet區別
18  
19  1. IBAction，從返回值角度上看，做用至關於void，只是返回值聲明爲IBAction的方法，才能跟storyboard中的控件進行連線
20  2. IBOutlet 用來和界面的元素創建關係，用來修改，得到界面控件的屬性，故對應的是@property，而 IBAction 對應的是方法。只有聲明爲IBOutlet的屬性，才能跟storyboard中的控件進行連線。 UIViewController是負責程序的控制，至關於管家的角色，而UIView 是負責界面的展現，聯繫 MVC 模式。嚴格來說，下圖箭頭所指的應該是一個UIViewController對象，裏面白色的界面僅僅是UIViewController內部的UIView屬性
21  
22  */
23 @property (nonatomic,weak) IBOutlet UITextField *num1;  // Text 類型是UITextFiled 
24 @property (nonatomic,weak) IBOutlet UITextField *num2;
25 
26 @property (nonatomic, weak) IBOutlet UILabel *result; // UILable 是對應UI 的類型
27 
28 
29 
30 @end

B:監聽計算 button 的動做:

 1 #pragma 監聽按鈕點擊
 2 
 3 - (void)btnClick{
 4     // 1.得到文本輸入框的文字
 5     NSString *text1 = self.num1.text;  // 使用點語法調用 get 方法獲取對應的值 text
 6     NSString *text2 = self.num2.text;
 7     // 2. 將string 字符串轉換成整數
 8     int i1 = [text1 intValue];
 9     int i2 = [text2 intValue];
10     
11     self.result.text = [NSString stringWithFormat:@"%d",i1 +i2];// 把整數轉換成字符串
12     
13     }
14 
15 @end

http://www.th7.cn/Program/IOS/201502/398336.shtml