本篇在上一篇的基礎上完成如上(圖2)所示的使用者登入等待功能,首先說說這個頁面功能的由來,這個就是當檢查sqlite庫中已經存在使用者帳號的時候從表中把使用者記錄查詢出來,然後從NSUserDefaults中擷取上一次登入的帳號,如果查詢出來的使用者記錄中包含上一次登入的帳號,那麼就把這個帳號作為預設顯示帳號,如果沒有就取使用者記錄中的第一個帳號作為預設顯示帳號,上一篇中當使用者完成OAuth認證把帳號資訊儲存到sqlite庫後也是顯示這個頁面功能。
先來看看UI是怎麼實現了,看這個介面包含帳戶圖片小表徵圖、使用者名稱稱、3個功能按鈕(添加、切換、刪除)這三部分元素,我的做法是把這三部分元素添加到一個單獨的UIView上,並且把這個UIView背景設定成透明,然後把這個UIView顯示在上一篇的LoginViewController的View之上,這樣UIView就有了背景圖了,背景圖由底下的LoginViewController的View提供。同時上一篇中在做LoginViewController有個遺漏忘記講給LoginViewController的View添加背景圖了,這裡補上,做法是如下:
補上一篇:雙擊LoginViewController.xib檔案,開啟IB後雙擊LoginViewController.xib的View開啟,然後從Library面板中拖一個Image View組件到這個View上並且把這個Image View尺寸設定跟View一樣大,然後為這個Image View設定一張背景圖,如:
補上上面的內容後,現在回到正題繼續講本篇的功能。
一、上面講到了建立一個單獨的UIView作為本功能的介面,這裡先建立名為SelectViewController的UIViewController subclass類型的類檔案,建立的時候記得勾上With XIB user interface選項。
二、開啟上步建立的SelectViewController.h檔案,聲明一個UIButton作為帳戶圖片小表徵圖,一個UILabel作為使用者名稱稱,還有delegate和onClick用來調用LoginViewController中的方法用,還有這還import了一個名為UICustomSegmentedControl.h的檔案,這個是一個自訂的組件,用來實現上面提到的3個按鈕的功能,該組件和系統內建的UISegmentedControl組件類似,至於為什麼非要自己做一個而不用系統內建理由和前面的UIDialogWindow一樣,文章最後我會把這個組件的代碼貼出來這裡就不解釋了直接使用這個組件,具體代碼如下:
#import <UIKit/UIKit.h>
#import "Global.h"
#import "UICustomSegmentedControl.h"
@interface SelectViewController : UIViewController<UICustomSegmentedControlDelegate> {
IBOutlet UIButton *iconBtn;
IBOutlet UILabel *nameLabel;
id delegate;
SEL onClick;
}
@property(nonatomic,retain)IBOutlet UIButton *iconBtn;
@property(nonatomic,retain)IBOutlet UILabel *nameLabel;
@property(nonatomic,retain)id delegate;
-(id)initWithDelegate:(id)aDelegate onClick:(SEL)aOnClick;@end
三、雙擊SelectViewController.xib用IB開啟,Library面板中拖一個UIButton和UILabel到View中間合適的位置同時做好串連操作,分別串連到SelectViewController.h中的iconBtn和nameLabel,並且把View的background設定成clear color然後儲存,如:
四、開啟SelectViewController.m檔案,首先是initWithDelegate方法,這個方法主要是設定SelectViewController的delegate和delegate,代碼如下:
-(id)initWithDelegate:(id)aDelegate onClick:(SEL)aOnClick;{ if (self=[super init]) { self.delegate=aDelegate; onClick=aOnClick; } return self;} 五、接下來我們要設定一下帳戶圖片小表徵圖(iconBtn)白色方框背景和預設使用者小表徵圖,實現代碼非常簡單了,在viewDidLoad方法裡添加如下代碼:
[iconBtn setBackgroundImage:[[Global pngWithPath:@"icon_bg"]stretchableImageWithLeftCapWidth:8.0 topCapHeight:7.0] forState:UIControlStateNormal]; [iconBtn setBackgroundImage:[[Global pngWithPath:@"icon_h_bg"] stretchableImageWithLeftCapWidth:8.0 topCapHeight:7.0] forState:UIControlStateHighlighted]; [iconBtn setImage:[Global pngWithPath:@"user_icon"] forState:UIControlStateNormal]; [iconBtn setImage:[Global pngWithPath:@"user_icon"] forState:UIControlStateHighlighted]; 六、接下來我們要實現3個功能按鈕(添加、切換、刪除),前面提到了這功能是由自訂群組件UICustomSegmentedControl實現的,在viewDidLoad方法裡執行個體化一個UICustomSegmentedControl並且添加到SelectViewController的View中間適當位置,UICustomSegmentedControl執行個體化的時候需要5個參數,分別子按鈕個數、子按鈕尺寸、子按鈕之間分隔圖片、tag屬性、delegate屬性,代碼如下:
UICustomSegmentedControl *segmented=[[UICustomSegmentedControl alloc] initWithSegmentCount:3 segmentsize:CGSizeMake(85.0f, 46.0f) dividerImage:[Global pngWithPath:@"line"] tag:99909 delegate:self]; segmented.center=CGPointMake(self.view.bounds.size.width/2,self.view.bounds.size.height-64); [self.view addSubview:segmented]; [segmented release]; 七、UICustomSegmentedControl組件使用還沒有完,還需要實現幾個方法,代碼如下:
//構造子按鈕-(UIButton*)buttonFor:(UICustomSegmentedControl*)segmentedControl atIndex:(NSUInteger)segmentIndex;{ UIButton* button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0.0f, 0.0f, segmentedControl.segmentSize.width, segmentedControl.segmentSize.height); button.adjustsImageWhenHighlighted = NO; button.titleLabel.font=[UIFont systemFontOfSize:15.0f]; [button setTitleColor:[UIColor colorWithRed:50.0f/255.0f green:79.0f/255.0f blue:133.0f/255.0f alpha:1.0f] forState:UIControlStateNormal]; if (segmentIndex==0) { [button setBackgroundImage:[[Global pngWithPath:@"left_btn"]stretchableImageWithLeftCapWidth:10.0 topCapHeight:23.0] forState:UIControlStateNormal]; [button setBackgroundImage:[[Global pngWithPath:@"left_h_btn"] stretchableImageWithLeftCapWidth:10.0 topCapHeight:23.0] forState:UIControlStateHighlighted]; [button setImage:[Global pngWithPath:@"add"] forState:UIControlStateNormal]; //[button setImage:[Global pngWithPath:@"add"] forState:UIControlStateHighlighted]; [button setTitle:@"添加" forState:UIControlStateNormal]; }else if (segmentIndex==1) { [button setBackgroundImage:[[Global pngWithPath:@"center_btn"]stretchableImageWithLeftCapWidth:1.0 topCapHeight:23.0] forState:UIControlStateNormal]; [button setBackgroundImage:[[Global pngWithPath:@"center_h_btn"] stretchableImageWithLeftCapWidth:1.0 topCapHeight:23.0] forState:UIControlStateHighlighted]; [button setImage:[Global pngWithPath:@"change"] forState:UIControlStateNormal]; //[button setImage:[Global pngWithPath:@"change"] forState:UIControlStateHighlighted]; [button setTitle:@"切換" forState:UIControlStateNormal]; } else { [button setBackgroundImage:[[Global pngWithPath:@"right_btn"]stretchableImageWithLeftCapWidth:1.0 topCapHeight:23.0] forState:UIControlStateNormal]; [button setBackgroundIma