美文网首页iOS开发实践ios 开发iOS开发记录
【微博个人页效果】 |那些人追的干货

【微博个人页效果】 |那些人追的干货

作者: 袁峥 | 来源:发表于2015-07-30 01:12 被阅读12179次

    前言

    由于最近在讲导航控制器的内容,因此更新此次文章,讲述的是个人详情页效果。效果如图:

    123.gif

    一、分析项目组成架构

    • 效果:当用户往上移动的时候,顶部渐渐出现条,很明显是个导航条。

    • 结论:因此项目应该是由导航控制器组成

    • 效果:另外导航控制器最外面显示微博个人页,怎么才能使微博界面显示到最外面。

    • 结论:遵循一个界面一个控制器的原则,只需要自定义微博个人页控制器,成为导航控制器的根控制器就可以显示在最外面了。

    • 原因:因为导航控制最外面永远显示栈顶控制器的view,一开始根控制器就是栈顶控制器。

    二、分析微博个人控制器层次结构

    1.一眼望去,首先有个tableView,tableView上边有个头部视图和选项卡视图。

    tableView效果:穿透导航条。

    • tableView尺寸:tableView占据整个控制器的view,内容才能穿透导航条。否则内容滚动不上去。

    穿透效果:

    穿透导航条.gif

    不能穿透效果:


    不能穿透演示.gif

    2.头部视图(背景图片+头像)和选项卡视图

    效果:头部视图和选项卡视图随着tableView拖动而移动,选项卡视图有悬停效果,拖到某个位置就不移动了。

    解决方案:

    方案1:头部视图和选项卡视图成为tableView的头部视图(tableHeaderView),但是往上拖动,选项卡视图会消失,因此达不到悬停效果。(pass掉这个方案)

    方案2:选项卡视图成为tableView的组头部视图,选项卡悬停了。但是,当用户往下拖动的时候,头部视图不应该往下移动,而是y值原地不动。(pass掉这个方案)

    最终方案:头部视图和选项卡视图添加到控制器的view上,并且要盖住tableView.

    问题:tableView的内容显示不完全?如何显示?
    解决:设置tableView顶部额外间距,就会把内容往下挤。
    因为内容需要显示到选项卡下面,因此设置顶部间距为头部视图+选项卡视图高度,244.

        #define headH 200
        #define headMinH 64
        #define tabBarH 44
    
        _lastOffsetY = -(headH + tabBarH);
    
        self.tableView.contentInset = UIEdgeInsetsMake(headH + tabBarH, 0, 0, 0);
    

    问题:tableView的内容多往下偏移了一点,这是因为在iOS7之后,导航控制器下的所有UIScrollView顶部都会添加额外的滚动区域64。

    Snip20150729_1.png

    解决:不需要添加额外的滚动区域,设置控制器的属性。

    self.automaticallyAdjustsScrollViewInsets = NO;
    

    三、搭建微博个人页界面

    1.最里面存放tableView,占据整个控制器的view

    2.然后添加顶部头部视图,高度200,宽度自动拉伸,上左右间距为0.

    2.1 顶部背景图片,宽高自动拉伸

    2.2 头像 水平居中,距离底部64的高度,宽高固定。

    3.选项卡在头部视图下边,高度44,宽度自动拉伸,上左右间距为0.

    3.1 选项卡参照顶部视图,利用自动布局,可以让一个控件随着参照控件的改变而改变,以后就能做到移动头部视图,选项卡跟着移动了。

    Snip20150730_3.png

    四、监听tableView的滚动

    • 用户滚动多少,头部视图和选项卡移动多少,修改头部视图,选项卡视图就会跟着移动。

    • 计算用户滚动偏移差,记录一开始的偏移差,与当前的偏移差比较。

    • 注意一开始的偏移差contentOffset,为-244,每次都跟它比较。

    • contentOffset:滚动视图可视范围顶点与内容起始点的距离,内容起始点contentOffset的y值为0.

    • 获取偏移差,修改头部视图的高度,就会有视觉差效果,感觉选项卡比头部视图移动快点。直接修改头部视图的y值,没有视觉差效果。

    • 当往上拖动的时候,delta > 0,头部视图需要减少高度,因此头部视图的高度 = 原始高度 - 偏移差

    • 为什么往上拖动,delta>0,因为往上拖动需要看下面的内容,可视范围需要往下移动,因此contentOffsetY 不断增加,比一开始都大,因此delta>0

    • 需要做判断,头部视图最小的高度为64,减到64就不在往下减了,在减选项视图就移动到导航条上,看不到了。

    • 往下拖动,delta<0,头部视图高度增加,就会拉伸图片,为了防止图片拉伸的难看,需要设置图片的内容模型为按比例拉伸填充Aspect Fill,一般开发中都是使用这个内容模式,就不会把图片拉伸很难看。

    Snip20150730_1.png
    • 注意:超出图片控件范围的图片还是会显示,需要裁减掉。勾选UIImageView一下属性。
      Snip20150730_2.png
    - (void)scrollViewDidScroll:(UIScrollView *)scrollView
    {
        CGFloat offsetY = scrollView.contentOffset.y;
    
        CGFloat delta = offsetY - _lastOffsetY;
    
        // 往上拖动,高度减少。
        CGFloat height = headH - delta;
    
        if (height < headMinH) {
            height = headMinH;
        }
    
        _headHCons.constant = height;
    
        // 设置导航条的背景图片
        CGFloat alpha = delta / (headH - headMinH);
    
        // 当alpha大于1,导航条半透明,因此做处理,大于1,就直接=0.99
        if (alpha >= 1) {
            alpha = 0.99;
        }
        _nameLabel.alpha = alpha;
        // 设置导航条的背景图片
        UIImage *image = [UIImage imageWithColor:[UIColor colorWithWhite:1 alpha:alpha]];
        [self.navigationController.navigationBar setBackgroundImage:image forBarMetrics:UIBarMetricsDefault];
    
    }
    
    

    五、导航条处理

    • 一开始隐藏导航条,和导航条标题.

    • 快速的隐藏导航条的方法:

     // 给导航条的背景图片传递一个空图片的UIImage对象
        [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
    // 隐藏底部阴影条,传递一个空图片的UIImage对象
        [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
    
    • 隐藏导航条标题,标题用UILabel,设置alpha = 0;

    • 在用户往上滚动视图的时候,导航条和标题慢慢显示,可以计算透明度。当头部视图高度减少到64,刚好全部显示,alpha为1.

    • 也就是说偏移差为136的时候,alpha 为 1,这形成一个比例。

    • alpha = delta / 136.

    • 每移动一下就设置导航条的背景图片和导航条标题的透明度。

    • 导航条背景图片怎么生成?利用颜色生成半透明图片,传递一个颜色,就生成一张图片。

    // 根据颜色生成一张尺寸为1*1的相同颜色图片
    + (UIImage *)imageWithColor:(UIColor *)color
    {
        // 描述矩形
        CGRect rect=CGRectMake(0.0f, 0.0f, 1.0f, 1.0f);
    
        // 开启位图上下文
        UIGraphicsBeginImageContext(rect.size);
        // 获取位图上下文
        CGContextRef context = UIGraphicsGetCurrentContext();
        // 使用color演示填充上下文
        CGContextSetFillColorWithColor(context, [color CGColor]);
        // 渲染上下文
        CGContextFillRect(context, rect);
        // 从上下文中获取图片
        UIImage *theImage = UIGraphicsGetImageFromCurrentImageContext();
        // 结束上下文
        UIGraphicsEndImageContext();
    
        return theImage;
    }
    
    

    联系方式

    如果你喜欢这篇文章,可以继续关注我,微博:吖了个峥,欢迎交流。
    点击这下载源代码

    相关文章

      网友评论

      • 南坞觉:不能水平滑动的吗?
      • 布袋的世界:太有用了
      • 小呆鸟:NSLayoutConstraint *headHCons这个约束用代码怎么写呢
      • 顺其自然JX:让头部视图作为表头,,,选项卡作为区头,,,,,这样不更方便吗?
      • leftwater:没看之前 先点个赞
        leftwater:@leftwater 好习惯
      • CocoaH:头部视图里面的按钮点击识别不到怎么破???
        :sob:
        CocoaH:@xiaomayi2012 hi 头部视图里按钮点击识别的仿照tabBar的点击来写,在YZTableView里面,希望能帮到你
        CocoaH:@xiaomayi2012 没有解决
        xiaomayi2012:@HK1218 请问兄台你这个问题解决了吗
      • 5e5368a515e0:两边的contentSize不一样,该怎么处理
      • 溪枫狼:我记得以前是用tableHeaderView加autolayout实现,给了一个初始高度。然后在scrollviewdidScroll或者KVO监听偏移,控制中间约束为0和导航栏的透明度,效果比较理想。不推荐前面一个朋友直接控制导航条alpha的做法,那样会把上面的按钮透明掉。
      • ff0fdf285b88:返回上个页面的,导航栏还是透明的.必须滑动到导航出现时候,再返回.导航栏才有.这个怎么回事呢?
      • f74b88693083:头部视图里面有按钮(比如添加关注)怎么办,按钮点击事件获取不到
        袁峥:@f74b88693083 模仿个人按钮写法
      • Scott_Mr:images.xcassets里面放.jpg格式图片怎么读取的呢,?
        Scott_Mr:@啊崢 我用xcode6.4读取不到呀,在storyboard里面设置背景图确实能显示,可是运行出来,模拟器上显示不了
        袁峥:@Scott_Mr Xcode6自动能读取
      • acfe1b11c6e8:点击 “主页” 和 “微博”,怎么切换下面的内容啊
        acfe1b11c6e8:@啊崢 子控制器,那就是一定要有继承喽?
        袁峥:@chelsh 不需要管 添加tableview子控制器就好
        acfe1b11c6e8:@chelsh 需要两个tableview 上下叠在一起吗 @啊崢
      • d9557f883fd8:用纯代码的话要怎么设置。。。。。。
      • 袁峥:@刺刀 代码我需要看看 咋写的
        刺刀:我微薄私信你,给你给gif的样子@啊崢
      • wuqh1993:导航栏透明度的这个地方写得麻烦了。。不需要自定义。。直接用self.navigationController.navigationBar.alpha 就可以了
        wuqh1993:@97cdca3de987 啊。。我自己专门用代码测试了。是可以的啊。。。先把导航栏设置成透明的self.navigationController.navigationBar.alpha = 0; ,然后滑动的时候再去修改alpha就行了
        袁峥:@97cdca3de987 可以尝试修改文字的颜色
        四月天__:@iOS吴启晗 朋友我使用你的方法好像改变不了导航的透明度,
      • 刺刀:啊崢,导航栏一开始是透明的,透明状态进入下级界面,再返回过程中,导航右边由于隐藏出现黑屏现象,我这边给View加了一个额外的色块,盖住黑色,你那有好的解决方法不?
      • 袁峥:@俊俊轩轩 我可以做个处理,只不过我目前带的那个阶段没学事件处理,就没加这个功能了
      • czj_warrior:为什么拖动头部不能滑动呢??
        黄花菜先生:这跟微博那个根本不一样
      • captainGao:这个和微博的还是有一点不一样 您的这个拖拽头图片或者选择卡的时候 都不可以滑动的
      • 南栀倾寒:我会Swift 可不可以去讲课 :smile:
        南栀倾寒:@xiubin 。。。。。
        wxiubin:@南栀倾寒 哎呀 群主 哪都能见到你啊

      本文标题:【微博个人页效果】 |那些人追的干货

      本文链接:https://www.haomeiwen.com/subject/ygnmqttx.html