UITableView總結(jié)

大致內(nèi)容

基本介紹

UITableView有兩種風(fēng)格：UITableViewStylePlain和UITableViewStyleGrouped。


  • UITableView中只有行的概念，每一行就是一個UITableViewCell。下圖是UITableViewCell內(nèi)置好的控件，可以看見contentView控件作為其他元素的父控件、兩個UILabel控件（textLabel,detailTextLabel）,一個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;
}
//每個cell將要加載時調(diào)用
- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"willDisplayCell");
}
//加載組頭標(biāo)題時調(diào)用
- (void)tableView:(UITableView *)tableView willDisplayHeaderView:(UIView *)view forSection:(NSInteger)sectio{
    NSLog(@"willDisplayHeaderView");
}
//加載尾頭標(biāo)題時調(diào)用
- (void)tableView:(UITableView *)tableView willDisplayFooterView:(UIView *)view forSection:(NSInteger)section{
    NSLog(@"willDisplayFooterView");
}
//滑動時，cell消失時調(diào)用
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath*)indexPath{
    NSLog(@"didEndDisplayingCell");
}
//組頭標(biāo)題消失時調(diào)用
- (void)tableView:(UITableView *)tableView didEndDisplayingHeaderView:(UIView *)view forSection:(NSInteger)section{
    NSLog(@"didEndDisplayingHeaderView");
}
//組尾標(biāo)題消失時調(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];
}
  • 點擊cell時調(diào)用
 - (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath;
  • 離開點擊時調(diào)用
 - (void)deselectRowAtIndexPath:(NSIndexPath *)indexPath animated:(BOOL)animated;

一般用法是在didSelectRowAtIndexPath方法中加入
[tableView deselectRowAtIndexPath:indexPath animated:YES];
即點擊cell時cell有背景色，如過沒有選中另一個，則這個cell背景色一直在，加入這句話效果是在點擊結(jié)束后cell背景色消失。

  • 離開選中狀態(tài)時調(diào)用（即選中另一個cell時，第一個cell會調(diào)用它的這個方法）
 - (void)tableView:(UITableView *)tableView didDeselectRowAtIndexPath:(NSIndexPath *)indexPath</pre>

UITableViewCell里面的一些細(xì)節(jié)屬性

  • cell選中時的背景顏色(默認(rèn)灰色，現(xiàn)在好像只有無色和灰色兩種類型了)
    @property (nonatomic) UITableViewCellSelectionStyle selectionStyle;

UITableViewCellSelectionStyleNone,
UITableViewCellSelectionStyleBlue,
UITableViewCellSelectionStyleGray,
UITableViewCellSelectionStyleDefault

  • cell 右側(cè)圖標(biāo)類型（圖示）
    @property (nonatomic) UITableViewCellAccessoryType accessoryType;

UITableViewCellAccessoryNone 默認(rèn)無
UITableViewCellAccessoryDisclosureIndicator 有指示下級菜單圖標(biāo)
UITableViewCellAccessoryDetailDisclosureButton 有詳情按鈕和指示下級菜單圖標(biāo)
UITableViewCellAccessoryCheckmark 對號
UITableViewCellAccessoryDetailButton 詳情按鈕

  • cell的另一個屬性
    @property (nonatomic, strong, nullable) UIView *accessoryView;

如需自定義某個右側(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模式）

類似于下圖這種每個cell不太一樣。



1.建立模型，模型里面是數(shù)據(jù)類型


注意：如果.h文件中有類似于 id這種關(guān)鍵字的變量，要重新寫一個變量，在.m文件中判斷如果是這個變量，則用新寫的變量接收原來變量的值。

2.cell 文件繼承UITableViewCell（cell 可以純代碼，可以xib，一般xib比較方便點）

2.1 cell文件中聲明一個模型類的變量
@property(nonatomic,strong)GPStatus * status;
2.2 寫一個初始化的方法
+(instancetype)statusCellWithTableView:(UITableView *)tableView;

.m文件中初始化方法一般寫如下代碼

//注冊 直接使用類名作為唯一標(biāo)識
    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的模型對應(yīng)數(shù)據(jù)源的每組數(shù)據(jù)。

cell = [[GPStatusCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:ID];
cell.status = self.statuses[indexPath.row];

刪除操作

一般這種Cell如果向左滑動右側(cè)就會出現(xiàn)刪除按鈕直接刪除就可以了。其實實現(xiàn)這個功能只要實現(xiàn)代理方法,只要實現(xiàn)了此方法向左滑動就會顯示刪除按鈕。只要點擊刪除按鈕這個方法就會調(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)，實現(xiàn)下面這個方法就能排序
 - (void)btnClick{
    [_tableView setEditing:!_tableView.isEditing animated:YES];
}

 - (void)tableView:(UITableView *)tableView moveRowAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath{
    //更新數(shù)據(jù)源，保存排序后的結(jié)果
}
pro.gif

tableView下拉放大header上滑改變navigationBar顏色

大致效果如下：


簡單介紹：
  • 1.還是創(chuàng)建控制器，控制器里面創(chuàng)建tableView,初始化其必要的代理方法使能其正常顯示
  • 2.初始化tableView的時候讓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ù)滑動時的偏移量改變圖片的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;
}

如果有問題請多多指教，以上。

示例代碼地址https://github.com/SPIREJ/SJTableViewDemo
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容