最近公司項目中有個需求: 基本就是copy的微信-我-相冊。其中根據不同的內容(比如: 純文字、純圖片、文字+圖片、文字+鏈接等)有不同的顯示樣式，這里就不詳細寫代碼了，如果有類似需求的，完全可以根據自身需求自定義不同的cell來滿足。本Demo中自定義的cell是自適應高度的。
微信-我-相冊:
mine.png
year.png
感覺需要了解下滑動視圖的contentOffset屬性的含義，如果不太了解的可以看下contentSize、contentOffset和contentInset的圖解辨別;
采用懶加載方式創建控件
- 新建一個工程，創建tableView，這個基本屬于最經常使用的視圖了,這里采用Group樣式。
- (UITableView *)tableView
{
if (!_tableView) {
_tableView = [[UITableView alloc] initWithFrame:CGRectZero style:UITableViewStyleGrouped];
_tableView.backgroundColor = [UIColor whiteColor];
_tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
_tableView.delegate = self;
_tableView.dataSource = self;
_tableView.estimatedRowHeight = 100;
_tableView.rowHeight = UITableViewAutomaticDimension;
}
return _tableView;
}
cell自適應高度，需要如下代碼: 估算高度原則上大于0的數就可以；第二句可寫可不寫，只是個人習慣于加上。
_tableView.estimatedRowHeight = 100;
_tableView.rowHeight = UITableViewAutomaticDimension;
- 工程中導航欄的設置不同，則在添加滑動系列控件時方式也有所區別，可以稍微了解下這個; 默認情況下，導航欄透明，對于第一個添加到控制器視圖上的滑動系列視圖會將其顯示內容自動向下偏移64個像素，即: contentInset 為(64,0,0,0)。
一般我都在所在控制器取消自動偏移屬性: 將automaticallyAdjustsScrollViewInsets屬性設置為NO(false)。
self.automaticallyAdjustsScrollViewInsets = NO;
- 添加tableView到控制器視圖
[self.view addSubview:self.tableView];
[_tableView mas_makeConstraints:^(MASConstraintMaker *make) {
make.leading.and.trailing.equalTo(@0);
make.top.equalTo(self.mas_topLayoutGuide);
make.bottom.equalTo(self.mas_bottomLayoutGuideTop);
}];
- tableView代理方法: 注意因為采用Group樣式tableView，其section的header和footer一定要給高度且不可以為0，否則，會顯示默認高度。根據需求第一個section不應有header。
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
{
return self.dataArray.count;
}
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
{
return [[self.dataArray objectAtIndex:section] count];
}
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
static NSString *iden = @"CCPhotoListCell";
CCPhotoListCell *cell = [tableView dequeueReusableCellWithIdentifier:iden];
if (!cell) {
cell = [[CCPhotoListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:iden];
cell.selectionStyle = UITableViewCellSelectionStyleNone;
}
cell.model = self.dataArray[indexPath.section][indexPath.row];
return cell;
}
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"-click --%ld--%ld", indexPath.section, indexPath.row);
}
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
if (section == 0) {
return 0.01;
}
return 25;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
if (section == 0) {
return nil;
}
CCPhotoListModel *model = (CCPhotoListModel *)[self.dataArray[section] firstObject];
NSDate *date = [NSDate dateWithTimeIntervalSince1970:[model.time longValue]/1000];
NSDateFormatter *form = [[NSDateFormatter alloc] init];
[form setDateFormat:@"yyyy"];
NSString *dateStr = [form stringFromDate:date];
UIView *headView = [[UIView alloc] init];
headView.backgroundColor = [UIColor colorWithHex:0xf5f7fa];
UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(15, 0, 100, 25)];
label.textColor = [UIColor colorWithHex:0x434A54];
label.font = [UIFont boldSystemFontOfSize:13];
label.text = dateStr;
[headView addSubview:label];
return headView;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section
{
if (section == self.dataArray.count - 1) {
return 0.01;
}
return 10;
}
- (UIView *)tableView:(UITableView *)tableView viewForFooterInSection:(NSInteger)section
{
if (section == self.dataArray.count - 1) {
return nil;
}
UIView *footView = [[UIView alloc] init];
footView.backgroundColor = [UIColor colorWithHex:0xf5f7fa];
return footView;
}
自定義cell的代碼就不貼出來了 這個根據自身需求自定義cell就可以了。
根據顯示內容顯示并切換當前內容所在的年份: 很顯然，需要在滑動的過程中想辦法計算當前顯示內容所在年份然后更改頂部年份label的值。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
NSLog(@"contentOffset: %.2f", scrollView.contentOffset.y);
NSArray *array = [self.tableView indexPathsForVisibleRows];
NSIndexPath *indexPath = [array firstObject];
CGRect rectInTableView = [self.tableView rectForRowAtIndexPath:[NSIndexPath indexPathForRow:0 inSection:indexPath.section]];
CGRect rect = [self.tableView convertRect:rectInTableView toView:self.view];
NSLog(@"%.2f", rect.origin.y);
if (rect.origin.y <= (64 + 25)) {
CCPhotoListModel *model = (CCPhotoListModel *)[self.dataArray[indexPath.section] firstObject];
NSDate *date = [NSDate dateWithTimeIntervalSince1970:[model.time longValue]/1000];
NSDateFormatter *form = [[NSDateFormatter alloc] init];
[form setDateFormat:@"yyyy"];
NSString *dateStr = [form stringFromDate:date];
self.timeLabel.text = [NSString stringWithFormat:@"%@年", dateStr];
}
if (scrollView.contentOffset.y > 0) {
//顯示
[self.view addSubview:self.displayTimeView];
[self.displayTimeView addSubview:self.timeLabel];
self.displayTimeView.hidden = NO;
self.timeLabel.hidden = NO;
}else {
//隱藏
self.displayTimeView.hidden = YES;
self.timeLabel.hidden = YES;
}
}
判斷更改頂部顯示時間label的值時，并不一定是if (rect.origin.y <= (64 + 25)) {}，應根據自身項目來修改臨界值。比如，若你先將一個scrollView放到self.view上，設置contentSize的寬為兩倍屏幕寬度，再將兩個tableView放在scrollView上，如果想達到此效果，臨界值應該是25而不是25 + 64了。
-
需要用到兩個知識點
-
獲取顯示在手機上的tableView的第一行的數據
NSArray *array = [self.tableView visibleCells]; UITableViewCell *cell = [array firstObject]; 或者 NSArray *array = [self.tableView indexPathsForVisibleRows]; NSIndexPath *indexPath = [array firstObject];
- 獲取tableviewCell在當前屏幕中的坐標值 ``` CGRect rectInTableView = [tableView rectForRowAtIndexPath:indexPath]; CGRect rect = [tableView convertRect:rectInTableView toView:[tableView superview]]; ``` -
本Demo中[tableView superview]是控制器的視圖，即: self.view。
效果:
演示.gif
