iOS學(xué)習(xí)筆記——iOS高級控件

2019-11-14 19:31:11

字體：大中小

供稿：網(wǎng)友

UITableView

　　UITableView的樣式有兩種，一種是Grouped（左圖），另一種是Plain（右圖），如下圖，它的屬性是style，類型為UITableViewStyle，枚舉值分別是UITableViewStyleGrouped和UITableViewStylePlain；

用這個(gè)控件的ViewController可以使用UITableViewController，使用了這個(gè)ViewController可以不需要另外創(chuàng)建UITableView，里面也包含了UITableViewDataSource和UITableViewDelegate這兩個(gè)實(shí)現(xiàn)，這兩個(gè)類稍后討論，但是也有不方便的地方，默認(rèn)情況下使用UITableViewController創(chuàng)建的tableView是充滿全屏的，如果需要用到tableView是不充滿全屏的話，我們應(yīng)該使用UIViewController。

　　UITableView的數(shù)據(jù)可以通過靜態(tài)綁定和動(dòng)態(tài)綁定，控件默認(rèn)是動(dòng)態(tài)綁定的，在StoryBoard里面設(shè)置Content屬性，它有兩個(gè)值Static Cell和Dynamic，顧名思義了。如果設(shè)置了Static Cell，點(diǎn)擊Section的標(biāo)題則可以控制UITableView的行數(shù)，添加了行數(shù)則可以。若要往行里添加內(nèi)容可以直接把控件拖入單元格里面。

　　如果要?jiǎng)討B(tài)的往UITableView添加內(nèi)容，則需要實(shí)現(xiàn)UITableViewDataSource和UITableViewDelegate的幾個(gè)方法。其實(shí)這兩個(gè)方法的共同作用有點(diǎn)類似于Andriod中的各種Adapter，Android中的Adapter是指定了列表中各個(gè)元素的布局，列表的數(shù)據(jù)源，而這兩個(gè)協(xié)議要實(shí)現(xiàn)的方法是傳遞數(shù)據(jù)源的情況還有各個(gè)數(shù)據(jù)單元格的定義情況。

//返回分組的數(shù)量-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{}//每個(gè)分組里面行數(shù)-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{}//定義單元格的內(nèi)容，并返回。-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{}

　　如果使用了UITableViewController，則可以直接去實(shí)現(xiàn)這幾個(gè)方法，假如用的是UIViewController，則在類聲明的地方顯式實(shí)現(xiàn)UITableViewDataSource和UITableViewDelegate。

　　UITableView的每個(gè)單元格對象都是UITableViewCell類型的。在上面最后的一個(gè)方法里面構(gòu)造并返回，單元格的布局類型有幾種，它是UITableViewCellStyle類型的枚舉，一般在初始化函數(shù)中設(shè)置它的類型。

UITableViewCellStyleDefault：只有一個(gè)靠左對齊的Label，它的值通過cell的textLabel設(shè)置

UITableViewCellStyleValue1：一個(gè)左對齊的Label和一個(gè)右對齊藍(lán)色字體的Label，左邊的Label是通過cell的textLabel設(shè)置，右邊的Label是通過cell的detailTextLabel設(shè)置

UITableViewCellStyleValue2：同樣有兩個(gè)Lebel，但左邊的Lable是右對齊的，Label的屬性如上一個(gè)一樣，效果如下圖

UITableViewCellStyleSubtitle：同樣有兩個(gè)Lable，這種樣式的第二個(gè)Lable充當(dāng)了副標(biāo)題

每個(gè)單元格的布局都是分左中右三塊，最左邊是圖標(biāo)，最右邊是附件視圖，附件一般是箭頭，它通過UITableViewCell accessoryType類型的屬性accessoryType，它的值有以下幾個(gè)

UITableViewCellAccessoryNone,
UITableViewCellAccessoryDisclosureIndicator,
UITableViewCellAccessoryDetailDisclosureButton,
UITableViewCellAccessoryCheckmark,
UITableViewCellAccessoryDetailButton

官方文檔上是上面五個(gè)值，但是我的環(huán)境是iOS6的，只有截圖的那幾個(gè)值（None除外）。附件區(qū)域也可以自己添加控件，如下面這樣的形式可以在每一行中添加了一個(gè)開關(guān)控件

cell.accessoryView= [[UISwitch alloc]init];

UITableViewCell提供了imageView來設(shè)置每一個(gè)單元格的圖標(biāo)它是一個(gè)UIImageView類型的屬性，可以直接通過設(shè)置它的image屬性來給每一行添加一個(gè)圖標(biāo)如

cell.imageView.image=[UIImage imageNamed:@"African Daisy.gif"];

假如這些控件還是太少的話，還可以通過Cell的contentCell的addSubview方法來添加控件到單元格里面，如下所示。

[cell.contentView addSubview:label];

但是要控制好添加到Cell里面控件的數(shù)量，因?yàn)槿绻丶?shù)量多于3、4個(gè)的話，會(huì)比較影響效率，在列表滾動(dòng)的時(shí)候會(huì)出現(xiàn)卡頓了。

在UITableView的表頭表尾，分組頭分組尾都可以添加視圖，如果添加表頭表尾的視圖的話可以通過設(shè)置UITableVIew的tableHeaderView和tableFoorterView兩個(gè)屬性，如下所示

self.tableView.tableHeaderView=[[UIImageView alloc]initWithImage:[UIImage imageNamed:@"bd_logo1.png"] highlightedImage:nil];self.tableView.tableFooterView=[[UISwitch alloc]init];

那添加分組頭和分組尾時(shí)就可以通過實(shí)現(xiàn)下面兩個(gè)方法

-(NSString *) tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{}-(NSString *) tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{}

之前說了那么多，現(xiàn)在給個(gè)簡單的例子來說明動(dòng)態(tài)綁定的步驟

這里用到的數(shù)據(jù)源是自己填充上去的，

@PRoperty(nonatomic,strong) NSArray *carGroups;-(NSArray*)carGroups{if(_carGroups==nil){// 1.創(chuàng)建模型HGTableviewModel *cg1 =[[HGTableviewModel alloc]init];cg1.group=@"日本仔車";cg1.desc=@"日系車";cg1.cars=@[@"本田",@"豐田",@"日產(chǎn)"]; HGTableviewModel *cg2 = [[HGTableviewModel alloc] init];cg2.group=@"鬼佬車";cg2.desc=@"德國車";cg2.cars=@[@"大眾",@"別克",]; // 2.將模型添加到數(shù)組中_carGroups = @[cg1, cg2];}return _carGroups;}

在viewDidLoad方法中給tableView指定數(shù)據(jù)源

self.tableView.dataSource=self;

在這個(gè)方法里面可以對tableView做其他設(shè)置，這里不一一例舉了，最后就實(shí)現(xiàn)之前獲取分組數(shù)量，每個(gè)分組的列數(shù)，構(gòu)造單元格的三個(gè)方法

-(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{return self.carGroups.count;}-(NSInteger) tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{HGTableviewModel *item= self.carGroups[section];return item.cars.count;}-(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{UITableViewCell *cell=nil;if(indexPath.section==0)cell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleSubtitle reuseIdentifier:nil];elsecell=[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue1 reuseIdentifier:nil];HGTableviewModel *item=self.carGroups[indexPath.section];cell.textLabel.text= item.cars[indexPath.row];cell.accessoryType= UITableViewCellAccessoryDetailDisclosureButton;cell.detailTextLabel.text=item.desc;if(indexPath.section==0)cell.imageView.image=[UIImage imageNamed:@"African Daisy.gif"];elsecell.accessoryView= [[UISwitch alloc]init];//[UIButton buttonWithType:UIButtonTypeContactAdd];return cell;}

如果要給選中單元格這個(gè)事件綁定方法，只需要實(shí)現(xiàn)下面這個(gè)方法則可，如下面代碼所示，選中了某行后彈出一個(gè)框說明當(dāng)前選中了是哪個(gè)品牌

-(void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath{NSString *msg=[[NSString alloc]initWithFormat:@"你選中了 %@", ((HGTableviewModel*)self.carGroups[indexPath.section]).cars[indexPath.row]];UIAlertView *alert=[[UIAlertView alloc]initWithTitle:@"選中行" message:msg delegate:self cancelButtonTitle:nil otherButtonTitles:@"確定", nil]; [alert show];}

UIDatePickerView

　　UIDatePickerView是一個(gè)日期時(shí)間選取的空間，它是以一個(gè)滾輪的形式呈現(xiàn)出來，可以通過設(shè)置它的當(dāng)前顯示時(shí)間，最大最小時(shí)間范圍，這些值都是NSDate類型的，

NSDateFormatter *formatter=[[NSDateFormatter alloc]init];[formatter setDateFormat:@"yyyy-MM-dd HH:mm:ss"];self.dtpDateTime.minimumDate= [formatter dateFromString:@"2011-01-01 00:00:00"];self.dtpDateTime.maximumDate=[formatter dateFromString:@"2015-01-01 00:00:00"];self.dtpDateTime.date=[formatter dateFromString:@"2015-03-01 00:00:00"];

它有一個(gè)datePickerMode屬性來設(shè)置DatePicker的顯示類型，它是一個(gè)UIDatePickerMode類型的枚舉，分別有下面這些值

UIDatePickerModeTime：時(shí)鐘模式，只有時(shí)分，
UIDatePickerModeDate：日期模式
UIDatePickerModeDateAndTime：日期時(shí)間模式，時(shí)間只有時(shí)分，日期只有月日
UIDatePickerModeCountDownTimer：時(shí)鐘模式，只有時(shí)分，但是24小時(shí)

效果圖按順序如下圖所示

UIDatePicker有個(gè)ValueChange事件，是在控件的Value發(fā)生改變之后觸發(fā)的，需要綁定事件，通過StoryBoard或者使用addTargetWithActionForControlEvents方法，下面則是改變了值之后輸出當(dāng)前的日期

- (IBAction)dtpValueChanged:(id)sender {NSLog(@"當(dāng)前日期是 %@",self.dtpDateTime.date);}

UipickerView

　　UIPickerView是把數(shù)據(jù)列表以滾輪的形式呈現(xiàn)給用戶，與UITableVIew類似，它的數(shù)據(jù)綁定需要實(shí)現(xiàn)UIPickerViewDataSource和UIPickerViewDelegate兩個(gè)協(xié)議，但是這個(gè)UIPickerView卻不支持靜態(tài)綁定數(shù)據(jù)。綁定數(shù)據(jù)主要是實(shí)現(xiàn)兩個(gè)協(xié)議的下面這些方法

//返回顯示的列數(shù)-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{}//返回當(dāng)前列顯示的行數(shù)-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{}//下面的方法是PickerDelegate協(xié)議的方法，可以二選一，主要是返回每一項(xiàng)顯示的內(nèi)容- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{}- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{}

加入滾輪中只是一些單純的文本信息則可以使用返回String的那個(gè)方法，如果是每一項(xiàng)都是一些文本以外的內(nèi)容，則需要使用返回UIView的那個(gè)方法，既然是返回View則說明可以返回任何的控件，包括自定義的也可以。

假如要在UIPickerView被選中后觸發(fā)事件執(zhí)行方法，則實(shí)現(xiàn)下面的方法則可

-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component{NSLog([[NSString alloc]initWithFormat:@"SELECT Item %@ " ,[pickerDs objectAtIndex:row] ] );}

下面則給出一個(gè)例子完整說明給一個(gè)UIPicker綁定數(shù)據(jù)的過程，里面的數(shù)據(jù)抄襲了某位網(wǎng)友的博文，莫怪。

首先是要實(shí)現(xiàn)兩個(gè)協(xié)議

@interface HGDatePickerViewController : UIViewController<UIPickerViewDataSource,UIPickerViewDelegate >@end

通過StoryBoard建立了關(guān)聯(lián)的變量picker和定義數(shù)據(jù)源一個(gè)NSArray的變量，然后在viewDidLoad里面添加下面這些代碼，其中設(shè)置deletage的最為關(guān)鍵

pickerDs=[[NSArray alloc]initWithObjects:@"許嵩",@"周杰倫",@"梁靜茹",@"許飛",@"鳳凰傳奇",@"阿杜",@"方大同",@"林俊杰",@"胡夏",@"邱永傳", nil];self.picker.delegate=self;

然后實(shí)現(xiàn)之前提到的方法，在這里把兩個(gè)UIPickerViewDelegate的方法列舉出來了，返回View的那種是返回一個(gè)UILabel，它們的效果圖分別列舉

-(NSInteger)numberOfComponentsInPickerView:(UIPickerView *)pickerView{return 1;}-(NSInteger)pickerView:(UIPickerView *)pickerView numberOfRowsInComponent:(NSInteger)component{return [pickerDs count];}- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component{return [pickerDs objectAtIndex:row];}- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view{UILabel *myView = nil;myView = [[UILabel alloc] initWithFrame:CGRectMake(0.0, 0.0, 180, 30)];myView.text = [pickerDs objectAtIndex:row];myView.textAlignment = UITextAlignmentCenter;myView.font = [UIFont systemFontOfSize:14];myView.backgroundColor = [UIColor clearColor];return myView;}

- (NSString *)pickerView:(UIPickerView *)pickerView titleForRow:(NSInteger)row forComponent:(NSInteger)component實(shí)現(xiàn)的效果

- (UIView *)pickerView:(UIPickerView *)pickerView viewForRow:(NSInteger)row forComponent:(NSInteger)component reusingView:(UIView *)view實(shí)現(xiàn)的效果

　　其實(shí)UIPicker可以實(shí)現(xiàn)像以前在BS或CS開發(fā)中的下拉菜單多級聯(lián)動(dòng)效果的，這里都不詳細(xì)列舉了，主要是通過-(void)pickerView:(UIPickerView *)pickerView didSelectRow:(NSInteger)row inComponent:(NSInteger)component方法根據(jù)當(dāng)前級別的數(shù)據(jù)來調(diào)用[self.picker reloadComponent:xxx];方法來出發(fā)下一級別的值重新載入。

UIActionSheet

　　UIActionSheet這個(gè)控件是在之前看UIDatePicker時(shí)別人用了而發(fā)現(xiàn)的，感覺也比較有用所以也記錄下來，本人沒有iOS的設(shè)備，故有哪些控件都不太了解，之前在一個(gè)界面原型圖中見過這個(gè)控件，但不知道它是ActionSheet。這個(gè)ActionSheet個(gè)人感覺和AlertView很像。也能給界面彈出按鈕選擇框，同時(shí)具備遮罩的效果。

使用這個(gè)UIActionSheet需要實(shí)現(xiàn)UIActionSheetDelegate協(xié)議，構(gòu)造和初始化ActionSheet的代碼如下

UIActionSheet *as=[[UIActionSheet alloc]initWithTitle:@"This is my First ActionSheet" delegate:selfcancelButtonTitle:@"Cancle" destructiveButtonTitle:@"Sure" otherButtonTitles:@"First Btn",@"Second Btn", nil];

在上述參數(shù)中有兩個(gè)比較特殊的按鈕，cancelButton和destructiveButton，在ActionSheet中按鈕也是有一定序列的，如AlertView那樣，所有按鈕都是有一定順序的，按默認(rèn)的情況下，destructiveButton是排在第一，是一個(gè)紅色的按鈕，接著是到ortherButton，它們的順序由添加進(jìn)去的順序而定，最后的是cancelButton，是一個(gè)黑色的按鈕。在上面的初始化函數(shù)中如果那個(gè)按鈕不需要的話則可以傳入nil則可。上面的ActionSheet顯示的效果如下圖

添加OtherButton也可以調(diào)用下面方法來添加

[as addButtonWithTitle:@"addButton"];

destructiveButton也可以更替由其他按鈕來充當(dāng)，通過下面這個(gè)屬性的設(shè)置則可

as.destructiveButtonIndex=1;

效果如下圖

顯示ActionSheet則調(diào)用下面的方法

[as showInView:self.view];

在開發(fā)過程中，發(fā)現(xiàn)有時(shí)候UIActionSheet的最后一項(xiàng)點(diǎn)擊失效，點(diǎn)最后一項(xiàng)的上半?yún)^(qū)域時(shí)有效，這是在特定情況下才會(huì)發(fā)生，這個(gè)場景就是試用了UITabBar的時(shí)候才有。解決辦法：

在showView時(shí)這樣使用，[actionSheet showInView:[UIapplication sharedApplication].keyWindow];或者[sheet showInView:[AppDelegate sharedDelegate].tabBarController.view];這樣就不會(huì)發(fā)生遮擋現(xiàn)象了。

ActionSheet的actionSheetStyle屬性是設(shè)置ActionSheet的樣式，它是一個(gè)UIActionSheetStyle類型的枚舉，它是值有下面三種

UIActionSheetStyleDefault //默認(rèn)風(fēng)格：灰色背景上顯示白色文字
UIActionSheetStyleBlackTranslucent //透明黑色背景，白色文字
UIActionSheetStyleBlackOpaque //純黑背景，白色文字

與UIAlertView類似，UIActionSheet也是有一組方法在ActionSheet里面出現(xiàn)，點(diǎn)擊，消失各個(gè)時(shí)候觸發(fā)調(diào)用的

-(void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex{} -(void)willPresentActionSheet:(UIActionSheet *)actionSheet{}-(void)didPresentActionSheet:(UIActionSheet *)actionSheet{}-(void)actionSheetCancel:(UIActionSheet *)actionSheet{ }-(void)actionSheet:(UIActionSheet *)actionSheet didDismissWithButtonIndex:(NSInteger)buttonIndex{}-(void)actionSheet:(UIActionSheet *)actionSheet willDismissWithButtonIndex:(NSInteger)buttonIndex{}