使用 Animation 解決小鍵盤擋住 UITextField 的問題

 

有的時候因為使用上的需求，在設計介面時不得不把像是 UITextField 這類會觸發螢幕小鍵盤的物件放在畫面底端，這時候就會產生一個問題，當點選 UITextField 輸入時，小鍵盤自動由下彈出擋住原先的 UITextField，因此在輸入當下反而看不到實際上到底輸了些什麼。（View-Based Template）

為解決此問題我們可以使用 Core Graphic 的 Animation 功能，在先前的 Core Graphic 的圖片淡入與放大文章中，已經介紹過一些關於 Animation 的概念，當然它能應用的範為不僅僅限於 UIImageView，凡是畫面上的物件都可以使用 Animation 來製作移動或是改變顏色等等的動畫效果，下面就來看看如何使用 Animation 來解決小鍵盤遮蔽的問題。

首先，先來看一下問題的需求，我們希望當 UITextField 被點擊開始輸入文字出現小鍵盤時，原先的 UITextField 不應該被擋住，反而要跟著小鍵盤一起往上移動，在輸入結束時也必須要移回原位，所以我們會觸發兩個 SDK 內建的 UITextField 函式。

- (void)textFieldDidBeginEditing:(UITextField *)textField {
}

- (void)textFieldDidEndEditing:(UITextField *)textField {
}

從函式的名稱可以看出，這兩個函式是當 UITextField 要開始編輯與編輯結束時才會觸發，接著我們對這兩個函式加入 Animation 進行修改以符合我們的需要。

- (void)textFieldDidBeginEditing:(UITextField *)textField {

    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];
    [UIView setAnimationDelegate:self];

    //設定動畫開始時的狀態為目前畫面上的樣子
    [UIView setAnimationBeginsFromCurrentState:YES];

    textField.frame = CGRectMake(textField.frame.origin.x,
    textField.frame.origin.y - 210,
    textField.frame.size.width,
    textField.frame.size.height);

    [UIView commitAnimations];
}
- (void)textFieldDidEndEditing:(UITextField *)textField {
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:0.3];
    [UIView setAnimationDelegate:self];

    //設定動畫開始時的狀態為目前畫面上的樣子
    [UIView setAnimationBeginsFromCurrentState:YES];

    textField.frame = CGRectMake(textField.frame.origin.x,
    textField.frame.origin.y + 210,
    textField.frame.size.width,
    textField.frame.size.height);

    [UIView commitAnimations];
}

在完成程式碼的部份之後，接下來就是設定 UITextField 的代理，可以在 Interface Builder 中把 UITextField 的 delegate 指向 File's Owner。

這是比較簡單的方式，可是當如果畫面上有很多個 UITextField，或是畫面上根本就沒有而是從程式產生的時候，代理的方式也可以使用程式碼來設定，由於任何 UITextField 都會觸發上面兩個函式，所以我們也不需屬名是哪一個 UITextField 所觸發的，只要通通將代理設定成它們自己就可以了，設定的方式就是在上述的兩個函式中加入以下程式碼，並在對應的標頭檔中加入代理的協定。

textField.delegate = self;
@interface AnimationViewController : UIViewController <UITextFieldDelegate> {
}

最後，上述程式碼中 Y 軸的方向的移動量和動畫的時間間隔設定並不是絕對的，讀者可以依據自己的需要來改變這些參數，甚至是移動整個 View 而不是單一的 UITextField。