模仿QQ聯(lián)系人界面的折疊tableView

效果圖

screenshot.gif

原理

每個(gè)分組是一個(gè)UITableViewHeaderFooterView

@class FoldedTableViewHeaderFooterViewModel;

typedef void(^DidSelectBlock)(BOOL isExpanded);

@interface FoldedTableViewHeaderFooterView : UITableViewHeaderFooterView

@property (nonatomic, strong) UIImageView *arrowImageView;
@property (nonatomic, strong) UILabel *titleLabel;
@property (nonatomic, strong) UILabel *numberLabel;
@property (nonatomic, strong) UIView *topLineView;
@property (nonatomic, strong) UIView *bottomLineView;

- (void)setupWithModel:(FoldedTableViewHeaderFooterViewModel *)model
               section:(NSInteger)section
        didSelectBlock:(DidSelectBlock)block;

@end

每個(gè)分組有一個(gè)數(shù)據(jù)層viewModel

@class FoldedTableViewCellModel;

@interface FoldedTableViewHeaderFooterViewModel : NSObject

@property (nonatomic, assign, getter=isExpanded) BOOL expanded;///< 是否展開
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *number;
@property (nonatomic, strong) NSArray<FoldedTableViewCellModel *> *cellModelArray;

@end

expanded判斷分組是否展開拍顷,cellModelArray存儲(chǔ)當(dāng)前分組的聯(lián)系人數(shù)據(jù)

每個(gè)聯(lián)系人是一個(gè)UITableViewCell

@class FoldedTableViewCellModel;

@interface FoldedTableViewCell : UITableViewCell

@property (weak, nonatomic) IBOutlet UIImageView *leftImageView;
@property (weak, nonatomic) IBOutlet UILabel *titleLabel;
@property (weak, nonatomic) IBOutlet UILabel *contentLabel;
@property (weak, nonatomic) IBOutlet UIView *bottomLineView;
@property (nonatomic, strong) CALayer *imageViewMaskLayer;///< 離線頭像蒙版

- (void)setupWithModel:(FoldedTableViewCellModel *)model;

@end

每個(gè)聯(lián)系人有一個(gè)數(shù)據(jù)層cellModel

@interface FoldedTableViewCellModel : NSObject

@property (nonatomic, copy) NSString *imageName;
@property (nonatomic, copy) NSString *title;
@property (nonatomic, copy) NSString *content;
@property (nonatomic, assign, getter=isOnline) BOOL online;///< 是否在線

@end

然后在tableView的方法里面簡(jiǎn)單的設(shè)置

- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView {
    return self.sectionData.count;
}

- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    FoldedTableViewHeaderFooterViewModel *model = self.sectionData[section];
    return model.isExpanded ? model.cellModelArray.count : 0;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    FoldedTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"FoldedTableViewCell" forIndexPath:indexPath];
    FoldedTableViewHeaderFooterViewModel *viewModel = self.sectionData[indexPath.section];
    FoldedTableViewCellModel *cellModel = viewModel.cellModelArray[indexPath.row];
    [cell setupWithModel:cellModel];
    if (indexPath.row == viewModel.cellModelArray.count - 1) {
        cell.bottomLineView.hidden = YES;
    }else {
        cell.bottomLineView.hidden = NO;
    }
    return cell;
}

Demo

https://github.com/guanzhendong/FoldedTableView

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市旋膳,隨后出現(xiàn)的幾起案子赔蒲,更是在濱河造成了極大的恐慌矮燎,老刑警劉巖毡证,帶你破解...
    沈念sama閱讀 217,657評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件琼牧,死亡現(xiàn)場(chǎng)離奇詭異恢筝,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)巨坊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,889評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門撬槽,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人抱究,你說我怎么就攤上這事恢氯〈撸” “怎么了鼓寺?”我有些...
    開封第一講書人閱讀 164,057評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)勋磕。 經(jīng)常有香客問我妈候,道長(zhǎng),這世上最難降的妖魔是什么挂滓? 我笑而不...
    開封第一講書人閱讀 58,509評(píng)論 1 293
  • 正文 為了忘掉前任苦银,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘幔虏。我一直安慰自己纺念,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,562評(píng)論 6 392
  • 文/花漫 我一把揭開白布想括。 她就那樣靜靜地躺著陷谱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪瑟蜈。 梳的紋絲不亂的頭發(fā)上烟逊,一...
    開封第一講書人閱讀 51,443評(píng)論 1 302
  • 那天,我揣著相機(jī)與錄音铺根,去河邊找鬼宪躯。 笑死,一個(gè)胖子當(dāng)著我的面吹牛位迂,可吹牛的內(nèi)容都是我干的访雪。 我是一名探鬼主播,決...
    沈念sama閱讀 40,251評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼囤官,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼冬阳!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起党饮,我...
    開封第一講書人閱讀 39,129評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤肝陪,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后刑顺,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體氯窍,經(jīng)...
    沈念sama閱讀 45,561評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,779評(píng)論 3 335
  • 正文 我和宋清朗相戀三年蹲堂,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了狼讨。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,902評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡柒竞,死狀恐怖政供,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情朽基,我是刑警寧澤布隔,帶...
    沈念sama閱讀 35,621評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站稼虎,受9級(jí)特大地震影響衅檀,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜霎俩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,220評(píng)論 3 328
  • 文/蒙蒙 一哀军、第九天 我趴在偏房一處隱蔽的房頂上張望沉眶。 院中可真熱鬧,春花似錦杉适、人聲如沸谎倔。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,838評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽传藏。三九已至,卻和暖如春彤守,著一層夾襖步出監(jiān)牢的瞬間毯侦,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,971評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工具垫, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留侈离,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,025評(píng)論 2 370
  • 正文 我出身青樓筝蚕,卻偏偏與公主長(zhǎng)得像卦碾,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子起宽,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,843評(píng)論 2 354

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

  • 前言 由于最近兩個(gè)多月洲胖,筆者正和小伙伴們忙于對(duì)公司新項(xiàng)目的開發(fā),筆者主要負(fù)責(zé)項(xiàng)目整體架構(gòu)的搭建以及功能模塊的分工坯沪。...
    CoderMikeHe閱讀 27,030評(píng)論 74 271
  • 概述在iOS開發(fā)中UITableView可以說是使用最廣泛的控件绿映,我們平時(shí)使用的軟件中到處都可以看到它的影子,類似...
    liudhkk閱讀 9,043評(píng)論 3 38
  • 一 講一個(gè)不熟的朋友腐晾,92年的叉弦,在十八線的老家做著一份沒有社保,工資撐死2K5的工作藻糖。愛吹牛皮淹冰,我們當(dāng)?shù)卦挵汛蹬7Q...
    王啊白閱讀 303評(píng)論 0 0
  • 品牌:愛馬仕香調(diào):花香果香調(diào)前調(diào):橙子 茶葉中調(diào):桂花 小蒼蘭后調(diào):皮革 杏屬性:中性香調(diào)香師:Jean-Clau...
    削削削削小蘿卜閱讀 4,786評(píng)論 4 1
  • 周末一回婆家,笑笑就興奮地跑來跑去巨柒,一會(huì)兒抓著奶奶說樱拴,麻麻回來了,你看洋满。一會(huì)兒又拉著爺爺說晶乔,麻麻回來了噢。進(jìn)入臘月...
    啾啾fing閱讀 221評(píng)論 0 0