看板 Knuckles_note
作者 標題 [Xcode] 新增輸入資料的表單頁
時間 2015-04-20 Mon. 19:46:36
記錄一下新增一個讓使用者輸入資料的表單頁時要注意的事
加一個新的 NavigationController
在 storyboard 拉一個 NavigationController
將附帶的 TableViewController 刪掉，改拉一個 ViewController 進來
按著 ctrl 從 NavigationController 拉一個 Segue 到 ViewController
類型選 root view controller
將要進入填寫表單的按鈕，按著ctrl拉到 NavigationController，Segue 類型選 model
新增 ScrollView
表單內容要用 ScrollView 來放不然超出螢幕範圍的就看不到了
先在 ViewController 的 View 裡拉一個 ScrollView
然後在 ScrollView 裡再拉一個 View
ViewController / View / ScrollView / View / 表單內容
ScrollView 設成與第一層的 View 相同大小，在 Constraints 設定上下左右的間距為0
ScrollView 裡的 View 除了要設定上下左右間距為0外，還要設固定的寬高才行
調整虛擬鍵盤出現時的版位
要設定虛擬鍵盤出現時，將 ScrollView 的下間距改為虛擬鍵盤的高度
不然虛擬鍵盤會蓋住 ScrollerView 的下半部
在 @interface 下方加上
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *keyboardHeight;
在 storyboard 將 keyboardHeight 連結 ScrollView 下方間距的 Constraint
在 -viewDidLoad 裡加上
[self observeKeyboard];
加上偵測虛擬鍵盤顯示時要執行的成員函數
#pragma mark manage keyboard
- (void)observeKeyboard {
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillChangeFrameNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}
// The callback for frame-changing of keyboard
- (void)keyboardWillShow:(NSNotification *)notification {
NSDictionary *info = [notification userInfo];
NSValue *kbFrame = [info objectForKey:UIKeyboardFrameEndUserInfoKey];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardFrame = [kbFrame CGRectValue];
BOOL isPortrait = UIDeviceOrientationIsPortrait([UIApplication sharedApplication].statusBarOrientation);
float iOSversion = [[[ UIDevice currentDevice ] systemVersion ] floatValue ];
//手機橫置時，在iOS7以下要取虛擬鍵盤的寬
CGFloat height = (isPortrait || iOSversion>=8) ? keyboardFrame.size.height : keyboardFrame.size.width;
self.keyboardHeight.constant = height;
[UIView animateWithDuration:animationDuration animations:^{
[self.view layoutIfNeeded];
}];
[self.view layoutIfNeeded];
}
- (void)keyboardWillHide:(NSNotification *)notification {
NSDictionary *info = [notification userInfo];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
self.keyboardHeight.constant = 0;
[UIView animateWithDuration:animationDuration animations:^{
[self.view layoutIfNeeded];
}];
[self.view layoutIfNeeded];
}
- (void)observeKeyboard {
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillShow:) name:UIKeyboardWillChangeFrameNotification object:nil];
[[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(keyboardWillHide:) name:UIKeyboardWillHideNotification object:nil];
}
// The callback for frame-changing of keyboard
- (void)keyboardWillShow:(NSNotification *)notification {
NSDictionary *info = [notification userInfo];
NSValue *kbFrame = [info objectForKey:UIKeyboardFrameEndUserInfoKey];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
CGRect keyboardFrame = [kbFrame CGRectValue];
BOOL isPortrait = UIDeviceOrientationIsPortrait([UIApplication sharedApplication].statusBarOrientation);
float iOSversion = [[[ UIDevice currentDevice ] systemVersion ] floatValue ];
//手機橫置時，在iOS7以下要取虛擬鍵盤的寬
CGFloat height = (isPortrait || iOSversion>=8) ? keyboardFrame.size.height : keyboardFrame.size.width;
self.keyboardHeight.constant = height;
[UIView animateWithDuration:animationDuration animations:^{
[self.view layoutIfNeeded];
}];
[self.view layoutIfNeeded];
}
- (void)keyboardWillHide:(NSNotification *)notification {
NSDictionary *info = [notification userInfo];
NSTimeInterval animationDuration = [[info objectForKey:UIKeyboardAnimationDurationUserInfoKey] doubleValue];
self.keyboardHeight.constant = 0;
[UIView animateWithDuration:animationDuration animations:^{
[self.view layoutIfNeeded];
}];
[self.view layoutIfNeeded];
}
加上離開頁面的按鈕
在左上角加上取消鈕，點了會出現是否離開的確認視窗
在 storyboard 拉一個 Bar Button Item 到上方 Navigation Bar 的左邊
在 @interface 加上 <UIAlertViewDelegate>
在 @interface 下加上
- (IBAction)cancel:(id)sender;
在 @implementation 下加上- (void)cancel:(id)sender{
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"確認視窗" message:@"確定要離開嗎？" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"確定", nil];
alertView.tag = 1;
[alertView show];
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
if(alertView.tag==1){
if(buttonIndex==1){
[self dismissViewControllerAnimated:YES completion:nil];
}
}
}
UIAlertView *alertView = [[UIAlertView alloc] initWithTitle:@"確認視窗" message:@"確定要離開嗎？" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"確定", nil];
alertView.tag = 1;
[alertView show];
}
- (void)alertView:(UIAlertView *)alertView clickedButtonAtIndex:(NSInteger)buttonIndex{
if(alertView.tag==1){
if(buttonIndex==1){
[self dismissViewControllerAnimated:YES completion:nil];
}
}
}
表單增加 Button 按鈕
在頁面增加 UIButton 時
要將 type 改為 custom ，再修改顏色設定，不然在 iOS6 的顏色會是預設值
加上可以勾選的 checkbox ☑
iOS 沒有像網頁的 checkbox 能用，要用 UIButton 來模擬
先做好未勾選和已勾選的圖示，加進專案裡
拉一個 UIButton 在 State Config 為 Default 時，將 Image 改為未勾選的圖示
在 State Config 為 Selectd 時，將 Image 改為已勾選的圖示
在 @interface 下加上
@property (weak, nonatomic) IBOutlet UIButton *checkbox;
- (IBAction)checkboxToggle:(id)sender;
- (IBAction)checkboxToggle:(id)sender;
在 storyboard 連結拉好的 UIButton 到 checkbox
在 @implementation 加上用來記錄是否為選取狀態的成員變數
BOOL checkboxSelected;
在 @implementation 下加上切換 checkbox 選取狀態的成員函數
- (void)checkboxToggle:(id)sender{
if (checkboxSelected == 0){
[self.checkbox setSelected:YES];
checkboxSelected = 1;
} else {
[self.checkbox setSelected:NO];
checkboxSelected = 0;
}
}
if (checkboxSelected == 0){
[self.checkbox setSelected:YES];
checkboxSelected = 1;
} else {
[self.checkbox setSelected:NO];
checkboxSelected = 0;
}
}
新增輸入資料的 textfield
要設定輸入資料後會執行檢查程式的話
新增一個 - (IBAction)textCheck:(id)sender;
在 storyboard 上連結至 UITextField，觸發事件選 Editing Did End
如果要每輸入一個字元就執行一次的話選 Editing Changed
要設定輸入內容的字元上限的話
要使用 textfield 的 delegate 函數
參考 http://stackoverflow.com/questions/433337/set-the-maximum-character-length-of-a-uitextfield
例如有一個 @property (weak, nonatomic) IBOutlet UITextField *textUsername;
要設定字元上限為 8
在 @interface 後加上 <UITextFieldDelegate>
在 -viewDidLoad 裡加上
self.textUsername.delegate = self;加上 delegate 函數
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
NSUInteger maxLength = 0;
if(textField==self.textUsername){
maxLength = 8;
}
if(maxLength!=0){
// Prevent crashing undo bug
if(range.length + range.location > textField.text.length){
return NO;
}
NSUInteger newLength = [textField.text length] + [string length] - range.length;
return (newLength > maxLength) ? NO : YES;
}
return YES;
}
NSUInteger maxLength = 0;
if(textField==self.textUsername){
maxLength = 8;
}
if(maxLength!=0){
// Prevent crashing undo bug
if(range.length + range.location > textField.text.length){
return NO;
}
NSUInteger newLength = [textField.text length] + [string length] - range.length;
return (newLength > maxLength) ? NO : YES;
}
return YES;
}
--
※ 作者: Knuckles 時間: 2015-04-20 19:46:36
※ 編輯: Knuckles 時間: 2015-10-19 12:00:40
※ 看板: KnucklesNote 文章推薦值: 0 目前人氣: 0 累積人氣: 509
回列表(←)
分享