iOS-仿微信相册: 根据显示内容显示并切换当前内容所在年份

2017-07-10 本文已影响72人 CoderCurtis

最近公司项目中有个需求: 基本就是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

Demo地址

iOS-仿微信相册: 根据显示内容显示并切换当前内容所在年份

猜你喜欢

热点阅读