UITableView總結(jié)

大致內(nèi)容

基本介紹

UITableView有兩種風(fēng)格:UITableViewStylePlainUITableViewStyleGrouped诚纸。


  • 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é)果
}
pro.gif

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)多多指教怎炊,以上谭企。

示例代碼地址https://github.com/SPIREJ/SJTableViewDemo
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市评肆,隨后出現(xiàn)的幾起案子赞咙,更是在濱河造成了極大的恐慌,老刑警劉巖糟港,帶你破解...
    沈念sama閱讀 211,639評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件攀操,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡秸抚,警方通過查閱死者的電腦和手機(jī)速和,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,277評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來剥汤,“玉大人颠放,你說我怎么就攤上這事】愿遥” “怎么了碰凶?”我有些...
    開封第一講書人閱讀 157,221評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我欲低,道長辕宏,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,474評(píng)論 1 283
  • 正文 為了忘掉前任砾莱,我火速辦了婚禮瑞筐,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腊瑟。我一直安慰自己聚假,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,570評(píng)論 6 386
  • 文/花漫 我一把揭開白布闰非。 她就那樣靜靜地躺著膘格,像睡著了一般。 火紅的嫁衣襯著肌膚如雪财松。 梳的紋絲不亂的頭發(fā)上闯袒,一...
    開封第一講書人閱讀 49,816評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音游岳,去河邊找鬼。 笑死其徙,一個(gè)胖子當(dāng)著我的面吹牛胚迫,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播唾那,決...
    沈念sama閱讀 38,957評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼访锻,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了闹获?” 一聲冷哼從身側(cè)響起期犬,我...
    開封第一講書人閱讀 37,718評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎避诽,沒想到半個(gè)月后龟虎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,176評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡沙庐,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,511評(píng)論 2 327
  • 正文 我和宋清朗相戀三年鲤妥,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片拱雏。...
    茶點(diǎn)故事閱讀 38,646評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡棉安,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出铸抑,到底是詐尸還是另有隱情贡耽,我是刑警寧澤,帶...
    沈念sama閱讀 34,322評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站蒲赂,受9級(jí)特大地震影響阱冶,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜凳宙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,934評(píng)論 3 313
  • 文/蒙蒙 一熙揍、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧氏涩,春花似錦届囚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,755評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至饺汹,卻和暖如春蛔添,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背兜辞。 一陣腳步聲響...
    開封第一講書人閱讀 31,987評(píng)論 1 266
  • 我被黑心中介騙來泰國打工迎瞧, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人逸吵。 一個(gè)月前我還...
    沈念sama閱讀 46,358評(píng)論 2 360
  • 正文 我出身青樓凶硅,卻偏偏與公主長得像,于是被迫代替她去往敵國和親扫皱。 傳聞我的和親對(duì)象是個(gè)殘疾皇子足绅,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,514評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容