三十而立，從零開始學ios開發（四）：IOS控制項（1），Image View、Text Field、Keyboard

長話短說，謝謝大家的關注，這篇寫了好長時間，下面繼續學習ios。我將用2到3篇的篇幅來學習iphone上的一些常用控制項，包括Image View、Text Field、Keyboard、Slider等等，這篇的內容包括ImageView和Keyboard的使用。完成後的如下：

1）建立一個新的project，選擇“Single View Application”，命名為“Control Fun”，然後儲存。
一些和前幾章相似的步驟在從這篇起就開始一筆待過了，也不再做了，例如這裡的建立一個新的project。

2）添加ImageView
選中project navigator中的BIDViewController.xib，在object library中找到Image View並拖入iphone視圖中。
當把Image View拖入iphone視圖後，Image View會展開充滿整個iphone的介面（除了最上面的狀態列）。

（據我猜測，很多app在啟動時都會有一張圖片展示，停個幾秒鐘，就應該是上面的這種效果，當然，那時的狀態列也是被遮住的。）
在ImageView的四條邊上總共有8個點可以調整ImageView的大小，滑鼠放在某一個點上去調整ImageView的大小，調整後的ImageView如下

至於具體的長寬是多少這個無所謂，因為最終的大小會以上傳圖片的實際大小為準。

3）上傳圖片到project中，整個過程很簡單，選中某一張圖片，拖到project navigator中的Supporting Files檔案夾中

放開滑鼠後，一個對話方塊會彈出，問你如何處理這張圖片，我們選中Destination的checkbox，把圖片複製到項目中，其他保留預設值即可。

4）為ImageView添加圖片
選中剛才添加的ImageView，在Attributes inspector中找到“Image View”中的Image

單擊下拉按鈕，剛才上傳的圖片已經顯示在下拉式清單中，選中即可，這樣，圖片就顯示在ImageView裡面了。

5）調整圖片大小
預設情況下，圖片會被展開到和ImageView一致的大小，圖片的顯示方式是由ImageView的Model屬性來控制的，Model屬性位於Attributes inspector中的View欄

中，Model的值為“Scale To Fill”，就是充滿整個ImageView。

對於圖片大小和顯示方式的處理，iphone建議的是提供適當大小的圖片（即圖片的大小和最終要顯示在iphone上的大小是一致的，不需要iphone的cpu進行更多的處理，這樣有助於程式的快速運行和節約cpu的消耗），如果同一張圖片有2種大小需要顯示，那麼你就傳2張圖片到程式了就可以了。

6）調整ImageView到圖片的原始大小
首先選中圖片，第一次選中圖片的狀態和4）裡面的一致，然後我們再次單擊圖片，這時圖片周圍會有一圈灰色的邊框

然後選中功能表列中的Editor>Size to Fit Content，這樣ImageView會自動調整到和圖片原始大小一致

最後在調整一下ImageView的顯示位置即可。

7）添加2個Label和2個textfield
Label在上一篇中已經提到過，textfield在object library中的樣子：

添加過程比較簡單，具體操作可以參考前2篇的，下面是添加完Label和textfield後的效果，Label和testfield的排列主要還是依靠藍色的輔助線

8）重新命名Label，調整textfield大小

中，2個Label的文字分別換成了Name和Number，並向右對其（同時選中2個Label，選擇功能表列Editor>Align>Right Edges），2個textfield拉長到了合適的寬度。

9）為textfield添加Placeholder文字
Placeholder text是一種提示性的文字，預設顯示在空的textfield中，當textfield獲得焦點並輸入內容後，Placeholder text會自動消失，當刪除所有的內容，Placeholder text會再次出現。
選中第一個textfield，在Attribute inspector中找到Placeholder，並輸入“Type a Name”

同樣為第二個textfield的Placeholder輸入“Type a Number”，完成後的效果

可以運行一下程式（command + R），看看實際的Placeholder text的效果是怎麼樣的。

至此，所有的介面布局都已經完成，下面進入code階段，將學習如何調用iphone的虛擬鍵盤。

10）虛擬數字鍵台
如果在第9步運行了程式，會發現當textfield獲得焦點後，會有一個虛擬鍵盤彈出

但是第二個textfield期望的是只能夠輸入數字，不能夠輸入其他字元，因此需要改變虛擬鍵盤的類型，選中第二個textfield，在Attribute inspector中找到Keyboard，將其類型改成“Number Pad”

再次運行程式，讓第二個text field擷取焦點，一個虛擬數字鍵台就出現了。

此時，一個新的問題又出現了，當我們輸入結束後，如何隱藏鍵盤？當點擊虛擬鍵盤的“return”按鍵時，它會調用一個Event，叫“Did End On Exit event”，我們可以關聯一個Action到這個event，當觸發這個event時，調用Action使鍵盤隱藏，下面說說具體的隱藏鍵盤的方法。

11）建立Outlet
在這個例子中，ImageView和Label在程式運行時都不會改變，因此不必為他們建立Outlet，我們只需為2個textfield建立Outlet即可。
在這裡就不詳細的重複建立Outlet的步驟了，有需要的朋友可以看我上一篇的文章，裡面有描述如何建立Outlet。
Outlet建立完畢後的BIDViewController.h如下

#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController@property (weak, nonatomic) IBOutlet UITextField *nameField;@property (weak, nonatomic) IBOutlet UITextField *numberField;@end

BIDViewController.m

#import "BIDViewController.h"@implementation BIDViewController@synthesize nameField;@synthesize numberField;......

我們添加了2個指向textfield的Outlet，分別命名為nameField和numberField。

12）手動添加一個Action
在上一章裡，我們是通過和添加Outlet同樣的方式在添加Action，在這章裡，手動的添加Action。
a）在BIDViewController.h中聲明一個Action：textFieldDoneEditing

#import <UIKit/UIKit.h>@interface BIDViewController : UIViewController@property (weak, nonatomic) IBOutlet UITextField *nameField;@property (weak, nonatomic) IBOutlet UITextField *numberField;- (IBAction)textFieldDoneEditing:(id)sender;@end

b）在BIDViewController.m的最後實現textFieldDoneEditing方法

- (IBAction)textFieldDoneEditing:(id)sender{    [sender resignFirstResponder];}

（下面是我個人對resignFirstResponder的理解，如果有錯，希望大家能夠指正，謝謝！）
這裡注意“resignFirstResponder”，FirstResponder的意思是正在和使用者互動的那個控制項，textfield正在和使用者互動，這時的它就是FirstResponder。 resignFirstResponder的意思是放棄第一響應者，即textfield不再和使用者進行互動，那麼此時的textfield也不會獲得焦點，這樣鍵盤就自然而然的消失了。

13）關聯Action
選中第一個text field，開啟connections inspector，中的第6個表徵圖（最右邊的一個表徵圖）

找到connections inspector中的“Did End On Exit”方法，滑鼠移到它右邊的小圓圈，此時小圓圈中出現一個加號

按住滑鼠左鍵不放，拖動到File's Owner上放開滑鼠，此時一個小視窗會彈出，會顯示File's Owner所擁有的Action

選中textFieldDoneEditing，這樣“Did End On Exit”就和textFieldDoneEditing方法關聯起來了

在此運行程式看看效果，當在第一個text field中輸入完文字後，點虛擬鍵盤上的“return”按鈕，鍵盤消失了。

但是第二個textfield調用的是數字鍵台，沒有“return”鍵，那要如何隱藏鍵盤呢？一種方式是再次使第一個textfield獲得焦點，然後調出一般的虛擬鍵盤，點擊“return”，隱藏鍵盤，但是這種方法過於繁瑣且不切實際，如果我們沒有第一個textfield呢？那豈不是很悲催了？好在事情沒有那麼糟糕，我們使用另一種方法使鍵盤消失，當我們點擊螢幕上任何空白的地方時（包括ImageView和Label這些非作用中的控制項，即靜態控制項），使鍵盤消失，這個操作相對簡單，且可行性較高。

14）實現原理
先看Objects

這是一個控制項布局的樹形圖，我們添加的所有控制項都是放在一個根View上面的，這個View是不可見的，但是它充滿了整個iphone螢幕，我們要做的就是寫一個Action，希望能夠使這個View所攜帶的一個event調用這個Action從而達到隱藏鍵盤的目的。但是這個根View的類型是UIView
（identity inspector）
UIView是沒有event的，這樣就更無法和Action關聯，因此我們需要把根View的類型UIView改成UIControl，UIControl是UIView的子類，它包含所有UIView的特性，且裡面有我們所需要的event，所以這樣的改變是非常合理且可行的。

選中Objects中的根View，在identity inspector中，將UIView改成UIControl。

Objects中的類型也隨之改變

15）建立另一個Action：backgroundTap
BIDViewController.h

- (IBAction)backgroundTap:(id)sender;

BIDViewController.m

- (IBAction)backgroundTap:(id)sender{    [nameField resignFirstResponder];    [numberField resignFirstResponder];}

16）關聯Action
選中根Control，切換到connections inspector，因為我們希望的是點擊任何地方，鍵盤都會隱藏，所以我們選中Touch Down event

按住滑鼠左鍵拖到File's Owner，選擇backgroundTap action，關聯完畢。

再次編譯運行程式，在第二個textfield中輸入數字，點擊螢幕上的任何地方，虛擬數字鍵台消失

至此，所有的功能開發完畢。

Control Fun