[iOS] 設計登入登出畫面

使用元件:UILabel、UITextField

使用畫面:Utility Application,這個會產生兩個畫面,一個是主畫面,右下方會有一個info按鈕,會切換到另一個子畫面。

在這邊我們不需要這個info按鈕,把它給消掉,也消除掉這兩個畫面之間的seque,之後會再重建。

首先建立兩個輸入帳號和密碼的UITextField,以及標示他們的UILabel,再加上一個登入按鈕UIButton。

在MainViewController.h裡面建立這兩個UITextField對應的IBOutlet,名稱為name和password。以及按鈕的IBAction,名稱為LoginSeque。最後是這兩個畫面之間的seque,請選取第一個畫面後按control拉到第二個畫面,在Identifier處輸入LoginSeque,Style設定成Modal。

note:在這邊你可以設定這兩個UITextField的功能,比方說你可以在Placeholder裡面輸入一些提示,像是『輸入帳號』,你也可以更改呼叫該Text field時會跳出的鍵盤,在keyboard處可以更改。

再來輸入以下的code:


- (IBAction)login:(id)sender {
    if ([name.text compare:@"aaa@aaa.com"] == NSOrderedSame &&
        [password.text compare:@"aaa"] == NSOrderedSame) {
        NSNotification *notification = [NSNotification notificationWithName:@"LoginNotify"
                                                                     object:nil
                                                                   userInfo:
                                        [NSDictionary dictionaryWithObject:name.text forKey:@"name"]];
        [[NSNotificationQueue defaultQueue] enqueueNotification:notification
                                                   postingStyle:NSPostWhenIdle
                                                   coalesceMask:NSNotificationCoalescingOnName
                                                       forModes:nil];
       
        [self performSegueWithIdentifier:@"LoginSeque" sender:nil];
    }
}


這是為了傳送資料到下一個畫面去。使用了訊息中心,首先建立訊息,然後將訊息加到queue裡面,最後傳送。

再來增加以下code,為了讓你輸入完帳號後按return會直接跳到密碼的欄位:

-(BOOL) textFieldShouldReturn:(UITextField *) textField {
    [textField resignFirstResponder];  
    //將送入的textField取消他的first responder
    if (textField == name) {  
    //若取消掉的text field是name
        [password becomeFirstResponder];  
    //將password給設定成first responder
    }else if (textField == password){
        [password resignFirstResponder];
    }
    return YES;
}

然後我們希望可以在子畫面中真的看到使用訊息中心傳送成功的證明:

首先在子畫面中加入一個UILabel,然後在FlipsideViewController.h裡面建立這個label的IBOutlet,命名為userInfo。

然後在子畫面的實作FlipsideViewController.m中加入以下code以接受訊息和將自己從觀測者中移除:

-(void) viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    [[NSNotificationCenter defaultCenter]
     addObserverForName:@"LoginNotify"
     object:nil
     queue:[NSOperationQueue mainQueue]
     usingBlock:^(NSNotification *notification){
         NSDictionary *dict = notification.userInfo;
         NSString *info = [NSString stringWithString:[dict objectForKey:@"name"]];
         userInfo.text = info;
     }];
}

-(void) viewWillDisappear:(BOOL)animated {
    [super viewWillDisappear:animated];
    [[NSNotificationCenter defaultCenter] removeObserver:self];
}


完成後跑跑看吧。

最後,如果你希望能切回主畫面,就把子畫面左上方的Done按鈕拉回到母畫面,然後設定Identifier為LogOut,style為Modal。再跑跑看,你應該可以透過這個按鈕回到母畫面了吧!


留言