iOS點選輸入框時自動移動到鍵盤之上
1. 概述
本文要實現的是在iOS上點選輸入框後,如果輸入框在鍵盤之下,那麼將自動移動介面使得輸入框在鍵盤之上!就像Android的效果那樣。效果圖如下:
show.gif
2. 一分鐘實現該效果:
- 點選這裡下載
WPAutoSpringTextViewController.h
,WPAutoSpringTextViewController.m
,UIResponder+FirstResponder.h
,UIResponder+FirstResponder.m
四個檔案到你的工程中 - 修改你的ViewController的父類為WPAutoSpringTextViewController
大功告成,是不是很簡單!如果想了解實現方法,請繼續閱讀。
3. 實現原理
首先,我們需要監聽鍵盤的廣播:
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(wpKeyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(wpKeyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
鍵盤彈出廣播中我們需要獲取鍵盤彈出的高度,鍵盤彈出的時間。
float duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
CGFloat keyboardHeight = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].size.height;
然後我們判斷此時view需要移動的距離,這裡首先獲取firstResponder,然後判斷其是否為UITextView或UITextField類或其子類,再根據該輸入框在螢幕上的位置計算是否需要彈起view,需要則返回需要彈起的高度,不需要則為0。
- (CGFloat)shouldScrollWithKeyboardHeight:(CGFloat)keyboardHeight{
id responder = [UIResponder currentFirstResponder];
if([responder isKindOfClass:[UITextView class]] || [responder isKindOfClass:[UITextField class]]){
UIView *view = responder;
CGFloat y = [responder convertPoint:CGPointZero toView:[UIApplication sharedApplication].keyWindow].y;
CGFloat bottom = y + view.frame.size.height;
if(bottom > SCREEN_HEIGHT - keyboardHeight){
return bottom - (SCREEN_HEIGHT - keyboardHeight);
}
}
return 0;
}
最後當我們發現需要彈起頁面時則動畫彈起頁面:
CGFloat shouldScrollHeight = [self shouldScrollWithKeyboardHeight:keyboardHeight];
if(shouldScrollHeight == 0){
return;
}
__weak WPAutoSpringTextViewController *weakSelf = self;
[UIView animateWithDuration:duration animations:^{
CGRect bounds = weakSelf.view.bounds;
weakSelf.view.bounds = CGRectMake(0, shouldScrollHeight + 10, bounds.size.width, bounds.size.height);
}];
這裡主要的邏輯都已經完成了,點選在鍵盤覆蓋範圍內的輸入框時,介面可以自動彈起。當點選空白區域時,鍵盤自動收起,這個功能程式碼如下:
self.view.userInteractionEnabled = YES;
[self.view addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewClicked)]];
- (void)viewClicked{
if(keyboardIsShowing){
id responder = [UIResponder currentFirstResponder];
if([responder isKindOfClass:[UITextView class]] || [responder isKindOfClass:[UITextField class]]){
UIView *view = responder;
[view resignFirstResponder];
}
}
}
好了大功告成! 完整的程式碼如下。Github地址
https://github.com/MRsummer/WPAutoSpringKeyboard
#import "WPAutoSpringTextViewController.h"
#import "UIResponder+FirstResponder.h"
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height
@implementation WPAutoSpringTextViewController{
BOOL keyboardIsShowing;
}
-(void)viewDidLoad{
[super viewDidLoad];
[self enableEditTextScroll];
self.view.userInteractionEnabled = YES;
[self.view addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(viewClicked)]];
}
- (void)viewClicked{
if(keyboardIsShowing){
id responder = [UIResponder currentFirstResponder];
if([responder isKindOfClass:[UITextView class]] || [responder isKindOfClass:[UITextField class]]){
UIView *view = responder;
[view resignFirstResponder];
}
}
}
- (CGFloat)shouldScrollWithKeyboardHeight:(CGFloat)keyboardHeight{
id responder = [UIResponder currentFirstResponder];
if([responder isKindOfClass:[UITextView class]] || [responder isKindOfClass:[UITextField class]]){
UIView *view = responder;
CGFloat y = [responder convertPoint:CGPointZero toView:[UIApplication sharedApplication].keyWindow].y;
CGFloat bottom = y + view.frame.size.height;
NSLog(@"shouldScrollWithKeyboardHeight -->keyboradHeight %@, keyboradBottom %@, viewY %@, bottom %@", @(keyboardHeight), @(SCREEN_HEIGHT - keyboardHeight), @(y), @(bottom));
if(bottom > SCREEN_HEIGHT - keyboardHeight){
return bottom - (SCREEN_HEIGHT - keyboardHeight);
}
}
return 0;
}
- (void)enableEditTextScroll{
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(wpKeyboardWillShow:) name:UIKeyboardWillShowNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(wpKeyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(wpKeyboardDidShow) name:UIKeyboardDidShowNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(wpKeyboardDidHide) name:UIKeyboardDidHideNotification object:nil];
}
- (void)wpKeyboardDidShow{
keyboardIsShowing = YES;
}
- (void)wpKeyboardDidHide{
keyboardIsShowing = NO;
}
- (void)wpKeyboardWillHide:(NSNotification *)note {
float duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
__weak WPAutoSpringTextViewController *weakSelf = self;
[UIView animateWithDuration:duration animations:^{
CGRect bounds = weakSelf.view.bounds;
weakSelf.view.bounds = CGRectMake(0, 0, bounds.size.width, bounds.size.height);
}];
}
- (void)wpKeyboardWillShow:(NSNotification *)note {
float duration = [note.userInfo[UIKeyboardAnimationDurationUserInfoKey] floatValue];
CGFloat keyboardHeight = [note.userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue].size.height;
CGFloat shouldScrollHeight = [self shouldScrollWithKeyboardHeight:keyboardHeight];
if(shouldScrollHeight == 0){
return;
}
__weak WPAutoSpringTextViewController *weakSelf = self;
[UIView animateWithDuration:duration animations:^{
CGRect bounds = weakSelf.view.bounds;
weakSelf.view.bounds = CGRectMake(0, shouldScrollHeight + 10, bounds.size.width, bounds.size.height);
}];
}
@end
相關文章
- 短視訊平臺開發,點選輸入框時自動彈出軟鍵盤
- 輸入框跟隨鍵盤彈出/隱藏移動
- 利用 Angular Directive 和 @HostBinding 實現輸入文字框隨著鍵盤輸入自動變色效果Angular
- React Native踩坑指南:ios鍵盤遮擋輸入框React NativeiOS
- ant-design輸入框自動獲取焦點
- 移動端:對高度自適應的輸入框說不~
- h5 ios輸入框與鍵盤 相容性優化H5iOS優化
- 解決ios環境下點選輸入框頁面被頂起不能自動回彈到底部問題iOS
- 隱藏的輸入框調起軟鍵盤問題--ios/安卓iOS安卓
- 利用flex佈局解決ios輸入框被鍵盤遮擋問題FlexiOS
- iOS textField鍵盤彈出/收起 自動上下移iOS
- input輸入框加入限制只能輸入正整數,輸入其他字元會自動清除字元
- vue:移動端判斷鍵盤事件,相容安卓iosVue事件安卓iOS
- iOS鍵盤彈出時動畫時長失效問題iOS動畫
- cad動態輸入框不見了 cad動態輸入框怎麼調出來
- Vue中實現輸入框的自動補全功能Vue
- 點選底部input輸入框,彈出的軟鍵盤擋住input(蘋果手機使用第三蘋果
- Mac監控鍵盤輸入並執行動作Mac
- windows使用git bash 無法互動鍵盤上下鍵移動選擇選項的解決方法WindowsGit
- 動手寫個數字輸入框3:痛點——輸入法是個魔鬼
- 輸入框點選按鈕清除輸入的所有字元的封裝字元封裝
- 自定義支付密碼輸入view、密碼鍵盤並自動檢測6位密碼輸入完全密碼View
- 安卓和ios鍵盤擋住輸入內容安卓iOS
- 輸入框只能輸入負數,整數,2位小數(鍵盤彈起事件)事件
- 修復安卓鍵盤彈起擋住輸入框bug安卓
- 直播app系統原始碼,輸入完內容後自動隱藏軟鍵盤APP原始碼
- 筆記本鍵盤失靈自動不停輸入如何修復 筆記本不受控制的輸入字元筆記字元
- js禁用頁面所有輸入框以及點選事件JS事件
- 那些年踩過的坑——input輸入框 ios端 readyonly 點選出現游標iOS
- 直播app原始碼,登入時自動輸入密碼/自動記住密碼APP原始碼密碼
- 輸入自動補齊
- shell自動化輸入
- 直播網站原始碼,安卓防止輸入框自動彈出網站原始碼安卓
- 受夠了移動端的數字輸入,我用vue寫了個模擬鍵盤Vue
- 鍵盤控制游標移動作業
- Flutter仿微信,支付寶密碼輸入框+自定義鍵盤Flutter密碼
- flutter - 使用 SingleChildScrollView() 解決鍵盤遮擋輸入框的問題FlutterView
- 微軟輸入法打字時不顯示選字框 win10輸入法的選字框不見了微軟Win10
- 前端動畫專題(二):輸入框特效前端動畫特效