iOS點選輸入框時自動移動到鍵盤之上
1. 概述
本文要實現的是在iOS上點選輸入框後,如果輸入框在鍵盤之下,那麼將自動移動介面使得輸入框在鍵盤之上!就像Android的效果那樣。效果圖如下:
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
相關文章
- 短視訊平臺開發,點選輸入框時自動彈出軟鍵盤
- iOS 文字輸入框隨鍵盤上移iOS
- 完美主義:實現iOS輸入框自動移動iOS
- Android點選列表後彈出輸入框,所點選項自動滾動到輸入框上方Android
- iOS 防止輸入時鍵盤覆蓋掉輸入框iOS
- 利用 Angular Directive 和 @HostBinding 實現輸入文字框隨著鍵盤輸入自動變色效果Angular
- React Native踩坑指南:ios鍵盤遮擋輸入框React NativeiOS
- iOS -UITextField/UITextView之鍵盤遮擋輸入框解決方法iOSUITextView
- iOS解決鍵盤彈出遮擋輸入框問題iOS
- h5 ios輸入框與鍵盤 相容性優化H5iOS優化
- 隱藏的輸入框調起軟鍵盤問題--ios/安卓iOS安卓
- 解決ios環境下點選輸入框頁面被頂起不能自動回彈到底部問題iOS
- iOS App從點選到啟動iOSAPP
- 一個數字鍵盤引發的血案——移動端H5輸入框、游標、數字鍵盤全假套件實現H5套件
- java鍵盤輸入和延時Java
- iOS textField鍵盤彈出/收起 自動上下移iOS
- vue:移動端判斷鍵盤事件,相容安卓iosVue事件安卓iOS
- 利用flex佈局解決ios輸入框被鍵盤遮擋問題FlexiOS
- 點選底部input輸入框,彈出的軟鍵盤擋住input(蘋果手機使用第三蘋果
- input輸入框加入限制只能輸入正整數,輸入其他字元會自動清除字元
- 騰訊 AlloyTeam:移動端輸入框填坑系列(一)
- Mac監控鍵盤輸入並執行動作Mac
- 關閉iOS鍵盤首字母自動大寫iOS
- 按enter時,控制元件焦點自動移動控制元件
- windows使用git bash 無法互動鍵盤上下鍵移動選擇選項的解決方法WindowsGit
- EditText輸入框自動頂上去2種解決方案
- Vue中實現輸入框的自動補全功能Vue
- 修復安卓鍵盤彈起擋住輸入框bug安卓
- 輸入框軟鍵盤遮擋問題解決方案
- Android 軟鍵盤蓋住輸入框的問題Android
- 自定義支付密碼輸入view、密碼鍵盤並自動檢測6位密碼輸入完全密碼View
- 讓輸入的連結字串自動可以點選跳轉程式碼字串
- 安卓和ios鍵盤擋住輸入內容安卓iOS
- 移動端踩坑之旅-ios下fixed失效,軟鍵盤等iOS
- 直播網站原始碼,安卓防止輸入框自動彈出網站原始碼安卓
- 直播app系統原始碼,輸入完內容後自動隱藏軟鍵盤APP原始碼
- 直播app原始碼,登入時自動輸入密碼/自動記住密碼APP原始碼密碼
- 筆記本鍵盤失靈自動不停輸入如何修復 筆記本不受控制的輸入字元筆記字元