大致內(nèi)容
基本介紹
UITableView有兩種風(fēng)格:UITableViewStylePlain
和UITableViewStyleGrouped
诚纸。
-
UITableView中只有行的概念,每一行就是一個(gè)UITableViewCell。下圖是UITableViewCell內(nèi)置好的控件草讶,可以看見contentView控件作為其他元素的父控件砂客、兩個(gè)UILabel控件(textLabel,detailTextLabel),一個(gè)UIImage控件(imageView),分別用于容器、顯示內(nèi)容忽匈、詳情和圖片。
typedef NS_ENUM(NSInteger, UITableViewCellStyle) {
UITableViewCellStyleDefault,
UITableViewCellStyleValue1,
UITableViewCellStyleValue2,
UITableViewCellStyleSubtitle
};
風(fēng)格如下:
1??左側(cè)顯示textLabel,不顯示detailTextLabel,imageView可選(顯示在最左邊)
2??左側(cè)顯示textLabel,右側(cè)顯示detailTextLabel,imageView可選(顯示在最左邊)
3??左側(cè)依次顯示textLabel和detailTextLabel,不顯示imageView
4??左上方顯示textLabel,左下方顯示detailTextLabel,imageView可選(顯示在最左邊)
下面依次為四種風(fēng)格示例:
- 一般UITableViewCell的風(fēng)格各種各樣矿辽,需要自定義cell丹允,后面再說。
代理方法袋倔、數(shù)據(jù)源方法
<UITableViewDelegate,UITableViewDataSource>
//有多少組(默認(rèn)為1)
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView{
return 5;
}
//每組顯示多少行cell數(shù)據(jù)
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section{
return 5;
}
//cell內(nèi)容設(shè)置雕蔽,屬性設(shè)置
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
static NSString *identifily = @"cellIdentifily";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:identifily];
if (cell == nil) {
cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleValue2 reuseIdentifier:identifily];
}
cell.textLabel.text = [NSString stringWithFormat:@"textLabel.text %ld",indexPath.row];
cell.detailTextLabel.text = [NSString stringWithFormat:@"detailTextLabel.text %ld",indexPath.row];
cell.imageView.image = [UIImage imageNamed:@"hello.jpg"];
cell.imageView.frame = CGRectMake(10, 30, 30, 30);
NSLog(@"cellForRowAtIndexPath");
return cell;
}
//每個(gè)cell將要加載時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"willDisplayCell");
}
//加載組頭標(biāo)題時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)sectio{
NSLog(@"willDisplayHeaderView");
}
//加載尾頭標(biāo)題時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView willDisplayFooterView:(UIView *)view forSection:(NSInteger)section{
NSLog(@"willDisplayFooterView");
}
//滑動(dòng)時(shí),cell消失時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath*)indexPath{
NSLog(@"didEndDisplayingCell");
}
//組頭標(biāo)題消失時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView didEndDisplayingHeaderView:(UIView *)view forSection:(NSInteger)section{
NSLog(@"didEndDisplayingHeaderView");
}
//組尾標(biāo)題消失時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView didEndDisplayingFooterView:(UIView *)view forSection:(NSInteger)section{
NSLog(@"didEndDisplayingFooterView");
}
// Variable height support
//cell 的高度(每組可以不一樣)
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath{
return 70.f;
}
//group 風(fēng)格的cell的組頭部標(biāo)題部分高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return 15.0f;
}
//group 風(fēng)格的cell的尾部標(biāo)題部分的高度
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return 15.0f;
}
//返回組頭標(biāo)題
- (NSString *)tableView:(UITableView *)tableView titleForHeaderInSection:(NSInteger)section{
return [NSString stringWithFormat:@"headerGroup%ld",section];
}
//返回組尾標(biāo)題
- (NSString *)tableView:(UITableView *)tableView titleForFooterInSection:(NSInteger)section{
return [NSString stringWithFormat:@"footerGroup%ld",section];
}
- 點(diǎn)擊cell時(shí)調(diào)用
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
- 離開點(diǎn)擊時(shí)調(diào)用
- (void)deselectRowAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated;
一般用法是在didSelectRowAtIndexPath方法中加入
[tableView deselectRowAtIndexPath:indexPath animated:YES];
即點(diǎn)擊cell時(shí)cell有背景色奕污,如過沒有選中另一個(gè)萎羔,則這個(gè)cell背景色一直在,加入這句話效果是在點(diǎn)擊結(jié)束后cell背景色消失碳默。
- 離開選中狀態(tài)時(shí)調(diào)用(即選中另一個(gè)cell時(shí)贾陷,第一個(gè)cell會(huì)調(diào)用它的這個(gè)方法)
- (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath</pre>
UITableViewCell里面的一些細(xì)節(jié)屬性
- cell選中時(shí)的背景顏色(默認(rèn)灰色缘眶,現(xiàn)在好像只有無色和灰色兩種類型了)
@property (nonatomic) UITableViewCellSelectionStyle selectionStyle;
UITableViewCellSelectionStyleNone,
UITableViewCellSelectionStyleBlue,
UITableViewCellSelectionStyleGray,
UITableViewCellSelectionStyleDefault
- cell 右側(cè)圖標(biāo)類型(圖示)
@property (nonatomic) UITableViewCellAccessoryType accessoryType;
UITableViewCellAccessoryNone 默認(rèn)無
UITableViewCellAccessoryDisclosureIndicator 有指示下級(jí)菜單圖標(biāo)
UITableViewCellAccessoryDetailDisclosureButton 有詳情按鈕和指示下級(jí)菜單圖標(biāo)
UITableViewCellAccessoryCheckmark 對(duì)號(hào)
UITableViewCellAccessoryDetailButton 詳情按鈕
- cell的另一個(gè)屬性
@property (nonatomic, strong, nullable) UIView *accessoryView;
如需自定義某個(gè)右側(cè)控件(支持任何UIView控件)如下圖的第一組第一行的右側(cè)控件(核心代碼見下面)
UITableView的右側(cè)索引
- 核心代碼
返回每組標(biāo)題索引
<pre>- (NSArray *)sectionIndexTitlesForTableView:(UITableView *)tableView{
NSMutableArray *indexs = [[NSMutableArray alloc] init];
for (int i = 0; i < kHeaderTitle.count; i++) {
[indexs addObject:kHeaderTitle[i]];
}
return indexs;
}
</pre>
自定義cell(MVC模式)
類似于下圖這種每個(gè)cell不太一樣。
1.建立模型髓废,模型里面是數(shù)據(jù)類型
注意:如果.h文件中有類似于 id這種關(guān)鍵字的變量巷懈,要重新寫一個(gè)變量,在.m文件中判斷如果是這個(gè)變量慌洪,則用新寫的變量接收原來變量的值顶燕。
2.cell 文件繼承UITableViewCell(cell 可以純代碼,可以xib冈爹,一般xib比較方便點(diǎn))
2.1 cell文件中聲明一個(gè)模型類的變量
@property(nonatomic,strong)GPStatus * status;
2.2 寫一個(gè)初始化的方法
+(instancetype)statusCellWithTableView:(UITableView *)tableView;
.m文件中初始化方法一般寫如下代碼
//注冊(cè) 直接使用類名作為唯一標(biāo)識(shí)
NSString * Identifier = NSStringFromClass([self class]);
UINib * nib = [UINib nibWithNibName:Identifier bundle:nil];
[tableView registerNib:nib forCellReuseIdentifier:Identifier];
return [tableView dequeueReusableCellWithIdentifier:Identifier];
.m 文件中 模型類的set方法中設(shè)置數(shù)據(jù)
self.iconView.image = [UIImage imageNamed:self.status.icon];
self.pictureView.image = [UIImage imageNamed:self.status.picture];
self.textView.text = self.status.text;
self.nameView.text = self.status.name;
self.vipView.image = [UIImage imageNamed:@"vip"];
3.最后就是在控制器中使用了(給出示例核心代碼),cell的初始化用自定義的cell初始化涌攻,cell的模型對(duì)應(yīng)數(shù)據(jù)源的每組數(shù)據(jù)。
cell = [[GPStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
cell.status = self.statuses[indexPath.row];
刪除操作
一般這種Cell如果向左滑動(dòng)右側(cè)就會(huì)出現(xiàn)刪除按鈕直接刪除就可以了频伤。其實(shí)實(shí)現(xiàn)這個(gè)功能只要實(shí)現(xiàn)代理方法,只要實(shí)現(xiàn)了此方法向左滑動(dòng)就會(huì)顯示刪除按鈕恳谎。只要點(diǎn)擊刪除按鈕這個(gè)方法就會(huì)調(diào)用。
-(void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath;
- (void)tableView:(UITableView *)tableView commitEditingStyle:(UITableViewCellEditingStyle)editingStyle forRowAtIndexPath:(NSIndexPath *)indexPath{
if (editingStyle == UITableViewCellEditingStyleDelete) {
[_titleArray removeObject:_titleArray[indexPath.row]];
[tableView deleteRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationBottom];
}
}
排序
- 進(jìn)入編輯狀態(tài)憋肖,實(shí)現(xiàn)下面這個(gè)方法就能排序
- (void)btnClick{
[_tableView setEditing:!_tableView.isEditing animated:YES];
}
- (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{
//更新數(shù)據(jù)源因痛,保存排序后的結(jié)果
}
tableView下拉放大header上滑改變navigationBar顏色
大致效果如下:
簡單介紹:
- 1.還是創(chuàng)建控制器,控制器里面創(chuàng)建tableView,初始化其必要的代理方法使能其正常顯示
- 2.初始化tableView的時(shí)候讓tableView向下偏移(偏移下來的那段放圖片):
_tableView.contentInset = UIEdgeInsetsMake(backGroupHeight - 64, 0, 0, 0);
- 3.初始化圖片岸更,注意圖片的frame設(shè)置鸵膏,加載在tableView上
imageBg = [[UIImageView alloc] initWithFrame:CGRectMake(0, -backGroupHeight, kDeviceWidth, backGroupHeight)];
imageBg.image = [UIImage imageNamed:@"bg_header.png"];
[_tableView addSubview:imageBg];
- 4.根據(jù)滑動(dòng)時(shí)的偏移量改變圖片的frame,改變navigationBar的透明度
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
CGFloat yOffset = scrollView.contentOffset.y;
CGFloat xOffset = (yOffset + backGroupHeight)/2;
if (yOffset < -backGroupHeight) {
CGRect rect = imageBg.frame;
rect.origin.y = yOffset;
rect.size.height = -yOffset;
rect.origin.x = xOffset;
rect.size.width = kDeviceWidth + fabs(xOffset)*2;
imageBg.frame = rect;
}
CGFloat alpha = (yOffset + backGroupHeight)/backGroupHeight;
[self.navigationController.navigationBar setBackgroundImage:[self imageWithColor:[[UIColor orangeColor] colorWithAlphaComponent:alpha]] forBarMetrics:UIBarMetricsDefault];
titleLb.textColor = [UIColor colorWithRed:255 green:255 blue:255 alpha:alpha];
}
- 5.渲染navigationBar顏色方法
- (UIImage *)imageWithColor:(UIColor *)color{
//描述矩形
CGRect rect = CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
//開啟位圖上下文
UIGraphicsBeginImageContext(rect.size);
//獲取位圖上下文
CGContextRef content = UIGraphicsGetCurrentContext();
//使用color演示填充上下文
CGContextSetFillColorWithColor(content, [color CGColor]);
//渲染上下文
CGContextFillRect(content, rect);
//從上下文中獲取圖片
UIImage *currentImage = UIGraphicsGetImageFromCurrentImageContext();
//結(jié)束上下文
UIGraphicsEndImageContext();
return currentImage;
}
如果有問題請(qǐng)多多指教怎炊,以上谭企。