iOS新浪微博个人页面(个人)实现思路

最近项目中碰到的问题,个人界面布局优化,需求是类似新浪微博个人主页那种样子,在网上找了好久也没找到特别合适的demo,所以就结合各种demo自己写了一个效果github链接

iOS新浪微博个人页面(个人)实现思路_第1张图片
demo

简单说下我的思路,我发现新浪微博的“主页微博相册”那一栏并不是在tableView的tableHeaderView中,而是独立于控制器的view上,详情可见图中的ScrollIndicator,是从其下穿过的


iOS新浪微博个人页面(个人)实现思路_第2张图片
1.pic.jpg

我将头像的View和segmentView添加到控制器的View上,将三个子控制器添加到控制器的childViewControllers,设置每个tableview的contentInset

- (void)creatHeaderBgView
{
    UIView *headImageView = [UIView new];
    self.bgHeadView = headImageView;
    [self.view addSubview:headImageView];
    [headImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.left.right.mas_equalTo(0);
        make.height.mas_equalTo(XFHeadViewH + 20);
    }];
    
    UIImageView *headBgImageView = [UIImageView new];
    headBgImageView.image = [UIImage imageNamed:@"headView_bg"];
    headBgImageView.contentMode = UIViewContentModeScaleAspectFill;
    headBgImageView.layer.masksToBounds = YES;
    [headImageView addSubview:headBgImageView];
    [headBgImageView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.bottom.left.right.mas_equalTo(0);
    }];
    
    UIView *segmentView = [UIView new];
    segmentView.backgroundColor = [UIColor lightGrayColor];
    [self.view addSubview:segmentView];
    [segmentView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.top.mas_equalTo(headImageView.mas_bottom).mas_equalTo(0);
        make.right.left.mas_equalTo(0);
        make.height.mas_equalTo(XFTabBarH);
    }];
    self.segmentView = segmentView;
    
    UIImageView *iconView = [UIImageView new];
    iconView.layer.cornerRadius = 50;
    iconView.layer.masksToBounds = YES;
    iconView.backgroundColor = [UIColor blueColor];
    [headImageView addSubview:iconView];
    [iconView mas_makeConstraints:^(MASConstraintMaker *make) {
        make.centerX.mas_equalTo(0);
        make.size.mas_equalTo(CGSizeMake(100, 100));
        make.bottom.mas_equalTo(-64);
    }];
}
self.tableView.contentInset=UIEdgeInsetsMake(XFHeadViewH+XFTabBarH,0,0,0);

当拖动tableView的时候计算tableView的偏移量,通过代理传给容器控制器,改变头视图的高度约束,至于导航栏透明度变化的效果这里就不多说了,网上有很多。

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    // 获取当前偏移量
    CGFloat offsetY = scrollView.contentOffset.y;
    
    // 获取偏移量差值
    CGFloat delta = offsetY - _lastOffsetY;
    
    CGFloat headH = XFHeadViewH - delta + 20;
    
    if (headH < XFHeadViewMinH) {
        headH = XFHeadViewMinH;
    }
    
    CGFloat alpha = delta / (XFHeadViewH - XFHeadViewMinH);
    
    
    [[[self.navigationController.navigationBar subviews] objectAtIndex:0] setAlpha:alpha];
    
    _currtentOffSet = scrollView.contentOffset.y;

    if ([self.delegate respondsToSelector:@selector(newPersonInfoTableViewControllerOffsetChange:)]) {
        [self.delegate newPersonInfoTableViewControllerOffsetChange:headH];
    }
}

参考
http://www.jianshu.com/p/03e458705afe
http://tech.glowing.com/cn/change-uinavigationbar-backgroundcolor-dynamically/

你可能感兴趣的:(iOS新浪微博个人页面(个人)实现思路)