iOS實(shí)現(xiàn)輸入框跟隨鍵盤(pán)自動(dòng)上移的實(shí)例代碼
場(chǎng)景還原
有些時(shí)候在包含輸入框的頁(yè)面中，點(diǎn)擊輸入框輸入會(huì)因鍵盤(pán)彈起而遮擋住一部分輸入框，影響用戶(hù)體驗(yàn)。iOS在默認(rèn)情況下并不會(huì)處理這種問(wèn)題，不過(guò)我們可以自己實(shí)現(xiàn)鍵盤(pán)彈起輸入框自動(dòng)上移的效果。
實(shí)現(xiàn)思路
觀察鍵盤(pán)的彈起與收回，當(dāng)彈起的鍵盤(pán)會(huì)遮擋住輸入框時(shí)，將輸入框跟隨鍵盤(pán)一并上移合適的距離，當(dāng)鍵盤(pán)收回時(shí)，輸入框回到原始狀態(tài)。
具體方案
1. 注冊(cè)兩個(gè)觀察者，觀察鍵盤(pán)的彈起與收回
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillShowNotification object:nil]; [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
2. 在上面的keyboardWillShow和keyboardWillHide方法中分別實(shí)現(xiàn)輸入框的上移和還原
上移
當(dāng)彈起的鍵盤(pán)遮住了頁(yè)面上的輸入框時(shí)，我們應(yīng)該將輸入框移至鍵盤(pán)之上，而鍵盤(pán)沒(méi)有遮到輸入框時(shí)，并不需要操作。因此在ios的坐標(biāo)系下，我們可以分別獲取鍵盤(pán)彈起后上端的Y坐標(biāo)和輸入框下端的Y坐標(biāo)，通過(guò)做差可以判斷出鍵盤(pán)是否遮住了輸入框。上移我們可以采用view的transform屬性進(jìn)行平移變換，而不是直接去操作view的frame，這樣做的好處是當(dāng)我們要還原view的狀態(tài)時(shí)可以直接將transform重置為0，而不需要再關(guān)心計(jì)算下移時(shí)的距離。
還原（下移至原始狀態(tài)）
根據(jù)前面所說(shuō)，我們只要在恰當(dāng)?shù)臅r(shí)機(jī)操作view的transform屬性就可以實(shí)現(xiàn)了。
- (void)keyboardWillShow:(NSNotification *)notification
{
//獲取處于焦點(diǎn)中的view
NSArray *textFields = @[phoneNemberText, verifyCodeText];
UIView *focusView = nil;
for (UITextField *view in textFields) {
if ([view isFirstResponder]) {
focusView = view;
break;
}
}
if (focusView) {
//獲取鍵盤(pán)彈出的時(shí)間
double duration = [notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
//獲取鍵盤(pán)上端Y坐標(biāo)
CGFloat keyboardY = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].origin.y;
//獲取輸入框下端相對(duì)于window的Y坐標(biāo)
CGRect rect = [focusView convertRect:focusView.bounds toView:[[[UIApplication sharedApplication] delegate] window]];
CGPoint tmp = rect.origin;
CGFloat inputBoxY = tmp.y + focusView.frame.size.height;
//計(jì)算二者差值
CGFloat ty = keyboardY - inputBoxY;
NSLog(@"position keyboard: %f, inputbox: %f, ty: %f", keyboardY, inputBoxY, ty);
//差值小于0，做平移變換
[UIView animateWithDuration:duration animations:^{
if (ty < 0) {
self.view.transform = CGAffineTransformMakeTranslation(0, ty);
}
}];
}
}
- (void)keyboardWillHide:(NSNotification *)notification
{
//獲取鍵盤(pán)彈出的時(shí)間
double duration = [notification.userInfo[UIKeyboardAnimationDurationUserInfoKey] doubleValue];
//還原
[UIView animateWithDuration:duration animations:^{
self.view.transform = CGAffineTransformMakeTranslation(0, 0);
}];
}
看上去這樣已經(jīng)完美實(shí)現(xiàn)了輸入框隨鍵盤(pán)自動(dòng)上移，我們也可以喝杯茶稍微休息一下了。沒(méi)錯(cuò)，在iOS 8及之后的系統(tǒng)中，確實(shí)可以正常的工作，然而如果你的應(yīng)用需要適配iOS 7并且要支持橫屏，那么上面的方式在iOS7上，并不能按照我們的期望正確移動(dòng)。
原因：在ios7上，鍵盤(pán)的frame，系統(tǒng)是按照豎屏狀態(tài)下window坐標(biāo)系來(lái)計(jì)算的，并不考慮旋轉(zhuǎn)的因素，因此在橫屏下得到的鍵盤(pán)frame是錯(cuò)誤的。受此影響的還有橫屏?xí)r獲取屏幕寬高[UIScreen mainScreen].bounds，也會(huì)有這樣的問(wèn)題。這種情況我們不僅無(wú)法正確得到鍵盤(pán)的frame，而且輸入框相對(duì)于window的坐標(biāo)計(jì)算結(jié)果也是錯(cuò)誤的。
因此在ios7上，鍵盤(pán)上端的Y坐標(biāo)以及輸入框下端相對(duì)于window的Y坐標(biāo)需要單獨(dú)處理。鍵盤(pán)上端的Y坐標(biāo)可以通過(guò)屏幕高度減鍵盤(pán)高度得到。我們通過(guò)下面的方法獲取鍵盤(pán)上端的Y坐標(biāo)。
- (CGFloat)getKeyboardY:(NSDictionary *)userInfo
{
CGFloat screenHeight;
CGFloat keyboardY = 0;
CGFloat keyboardHeight = 0;
UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
if (( [[[UIDevice currentDevice] systemVersion] floatValue]<8) && UIInterfaceOrientationIsLandscape(orientation))
{
screenHeight = [[UIScreen mainScreen] bounds].size.width;
keyboardHeight = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].size.width;
keyboardY = screenHeight - keyboardHeight;
}
else if (( [[[UIDevice currentDevice] systemVersion] floatValue]<8) && UIInterfaceOrientationIsPortrait(orientation)) {
screenHeight = [[UIScreen mainScreen] bounds].size.height;
keyboardHeight = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].size.height;
keyboardY = screenHeight - keyboardHeight;
}
else {
keyboardY = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].origin.y;
}
return keyboardY;
}
輸入框下端相對(duì)于window的坐標(biāo)如何計(jì)算呢？我們首先獲得的其實(shí)是基于豎屏狀態(tài)下坐標(biāo)系中的Y值，而我們期望的是橫屏下得到橫屏狀態(tài)下坐標(biāo)系中的Y值，根據(jù)兩個(gè)坐標(biāo)系的關(guān)系，可以將第一次轉(zhuǎn)換得到的坐標(biāo)再做一次轉(zhuǎn)換，計(jì)算得出橫屏坐標(biāo)系下的Y坐標(biāo)值。我們通過(guò)下面的方法獲取輸入框下端的Y坐標(biāo)。
- (CGPoint)getViewOriginPointToWindow:(UIView *)view
{
CGPoint origin;
if ([[[UIDevice currentDevice] systemVersion] floatValue] < 8) {
CGPoint focusViewPoint = [view convertPoint:CGPointZero toView:nil];
UIInterfaceOrientation orientation = [UIApplication sharedApplication].statusBarOrientation;
if (orientation == UIInterfaceOrientationLandscapeLeft) {
origin.y = focusViewPoint.x;
origin.x = [[[UIApplication sharedApplication] delegate] window].bounds.size.height - focusViewPoint.y;
}
else if (orientation == UIInterfaceOrientationLandscapeRight) {
origin.y = [[[UIApplication sharedApplication] delegate] window].bounds.size.width - focusViewPoint.x;
origin.x = focusViewPoint.y;
}
else if (orientation == UIInterfaceOrientationPortraitUpsideDown) {
origin.y = [[[UIApplication sharedApplication] delegate] window].bounds.size.height - focusViewPoint.y;
origin.x = [[[UIApplication sharedApplication] delegate] window].bounds.size.width - focusViewPoint.x;
}
else {
origin = focusViewPoint;
}
}
else {
CGRect rect = [view convertRect:view.bounds toView:[[[UIApplication sharedApplication] delegate] window]];
origin = rect.origin;
}
return origin;
}
因此我們將之前獲取兩個(gè)Y坐標(biāo)的代碼改用下面的方式：
//獲取鍵盤(pán)上端Y坐標(biāo) CGFloat keyboardY = [self getKeyboardY:notification.userInfo]; //獲取輸入框下端相對(duì)于window的Y坐標(biāo) CGPoint tmp = [self getViewOriginPointToWindow:focusView]; CGFloat inputBoxY = tmp.y + focusView.frame.size.height;
這樣就完美實(shí)現(xiàn)了輸入框隨鍵盤(pán)自動(dòng)上移的效果。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
iOS常用小功能（獲得屏幕圖像、壓縮圖片、加邊框、調(diào)整label的size）
本文主要介紹了iOS常用小功能：獲得屏幕圖像,label的動(dòng)態(tài)size,時(shí)間戳轉(zhuǎn)化為時(shí)間,RGB轉(zhuǎn)化成顏色,加邊框,壓縮圖片,textfield的placeholder,圖片做灰度處理的方法。下面跟著小編一起來(lái)看下吧2017-03-03
現(xiàn)在越來(lái)越多的iOS開(kāi)發(fā)興趣愛(ài)好者投入到了iOS培訓(xùn)中，有的是已經(jīng)在職的員工，有的是還在就讀的學(xué)生，還有一些是完全零基礎(chǔ)的同學(xué)，那么對(duì)于他們來(lái)說(shuō)就要一切從基礎(chǔ)開(kāi)始學(xué)，首先從C語(yǔ)言學(xué)起2015-11-11
這篇文章主要給大家介紹了關(guān)于iOS中最全的各種定時(shí)器的使用教程，文中通過(guò)示例代碼介紹的非常詳細(xì)，通過(guò)文中介紹的最全的定時(shí)器相信會(huì)對(duì)各位iOS開(kāi)發(fā)者們帶來(lái)一定的幫助，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要為大家詳細(xì)介紹了iOS獲取手機(jī)的Mac地址的多種方法，感興趣的小伙伴們可以參考一下2016-04-04
在iOS App中實(shí)現(xiàn)地理位置定位的基本方法解析
這篇文章主要介紹了在iOS App中實(shí)現(xiàn)地理位置定位的基本方法解析,包括獲取當(dāng)前位置和計(jì)算兩點(diǎn)間距離等基本功能的實(shí)現(xiàn),需要的朋友可以參考下2016-05-05
這篇文章主要為大家詳細(xì)介紹了iOS實(shí)現(xiàn)單元格折疊，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
從初學(xué)OC的時(shí)候就聽(tīng)人提起過(guò)OC對(duì)象中的isa指針，用來(lái)指向?qū)ο笏鶎俚念?lèi)，從而可以在調(diào)用方法時(shí)通過(guò)isa指針找到相應(yīng)的方法和屬性，下面這篇文章主要給大家介紹了關(guān)于iOS中類(lèi)、元類(lèi)以及isa的相關(guān)資料，需要的朋友可以參考借鑒，下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
NSNumberFormatter 應(yīng)該可以滿(mǎn)足你對(duì)數(shù)據(jù)形式的一般需求，值得了解一下，下面這篇文章主要給大家介紹了關(guān)于iOS中NSNumberFormatter的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
本篇文章主要介紹了iOS 裁剪圓形圖像并顯示(類(lèi)似于微信頭像)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
iOS開(kāi)發(fā)中UIImageView控件的常用操作整理
這篇文章主要介紹了iOS開(kāi)發(fā)中UIImageView控件的常用操作整理,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2016-01-01