twitterprofilepage, 尝试模拟 Twitter 配置文件页 UI

分享于 

9分钟阅读

GitHub

  繁體 雙語
Attempt to mimic the twitter profile page UI
  • 源代码名称:twitterprofilepage
  • 源代码网址:http://www.github.com/BillCarsonFr/twitterprofilepage
  • twitterprofilepage源代码文档
  • twitterprofilepage源代码下载
  • Git URL:
    git://www.github.com/BillCarsonFr/twitterprofilepage.git
    Git Clone代码到本地:
    git clone http://www.github.com/BillCarsonFr/twitterprofilepage
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/BillCarsonFr/twitterprofilepage
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    模拟 Twitter 配置文件 UI

    这个项目是试图模仿 Twitter 概要页面 UI ( 版本 6. x )。

    final

    目标不是完全像在 Twitter 应用程序中完成的那样,实际上我不知道它们是如何完成的。 这只是试图达到类似效果的尝试。

    让我来解释一些关键点。

    效果概述

    标题动画中有 3个关键步骤。

    • ExpandedState

    最初,表视图顶部有一个顶部的图片( 横幅)。 这里图片正在导航到视图顶部的导航栏下。 如果你向上滚动,图像将拉伸( 缩放以填充)。

    • 缩小状态

    如果向下滚动,所有的标头都向上移动,左边的人物会缩小到最小的尺寸。 直到配置文件标题的底部到达导航栏的底部。

    • 模糊和标题到达动画

    然后从这一点开始,横幅图片将开始模糊,并变成了导航栏背景。 导航标题会慢慢出现,现在头像将会在 move move under under banner banner banner banner banner

    drawing

    在这个快速的效果之后,我决定实现标题。信息和虚拟视图作为一个标题。 作为简单节标题的分段控件。

    实现说明

    横幅图片动画

    我首先创建了表视图并将它的设置为全屏幕。 我只是把图像放在表头视图( 没有头像,显示姓名,把手。) 中。 这里的关键点是使用自动版本约束来实现缩放效果,并强制横幅保持在导航栏下。

    我对该( 将图像顶部粘贴到顶部,并设置最小高度) 使用了以下约束:

    
    //===== Header image view should not be smaller than nav bar and stay below navbar ========
    
    
    
    format = @"V:[headerImageView(>=minHeaderHeight)]-(subHeaderHeight@750)-|";
    
    
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:metrics views:views];
    
    
    [self.view addConstraints:constraints];
    
    
    
    format = @"V:|-(headerHeight)-[subHeaderPart(subHeaderHeight)]";
    
    
    constraints = [NSLayoutConstraint constraintsWithVisualFormat:format options:0 metrics:metrics views:views];
    
    
    [self.view addConstraints:constraints];
    
    
    
    //===== Header image view should stick to top of the 'screen' ========
    
    
    
    NSLayoutConstraint* magicConstraint = [NSLayoutConstraint constraintWithItem:headerImageView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0f constant:0.0];
    
    
    [self.view addConstraint: magicConstraint];
    
    
    
    

    导航栏设置为完全透明,我使用滚动事件检测标题到达步骤 2的时间:

    
    - (void) scrollViewDidScroll:(UIScrollView *)scrollView
    
    
    {
    
    
     CGFloat yPos = scrollView.contentOffset.y;
    
    
     if (yPos> _headerSwitchOffset &&!_barIsCollapsed) {
    
    
     [self switchToMinifiedHeader];
    
    
     _barIsCollapsed = true;
    
    
     } else if (yPos <_headerSwitchOffset && _barIsCollapsed) {
    
    
     [self switchToExpandedHeader];
    
    
     _barIsCollapsed = false;
    
    
     }
    
    
    . . .
    
    
    }
    
    
    
    

    对于第一步,标题标题幻影还没有被动画化。 当标题为'最小化'时,将应用简单模糊效果:

    
    - (void)switchToMinifiedHeader
    
    
    {
    
    
     UIBlurEffect *blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleLight];
    
    
     UIVisualEffectView *visualEffectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
    
    
     visualEffectView.frame = self.imageHeaderView.bounds;
    
    
     self.visualEffectView = visualEffectView;
    
    
     [self.imageHeaderView addSubview:visualEffectView];
    
    
    . . .
    
    
    }
    
    
    
    

    step1

    头像动画

    然后我开始使用化身形象的动画。 这里图像必须缩小到最小大小,然后继续向上移动。 通过添加几个约束并使用它们的优先级来实现这个效果。

    前两个约束是直接向前的:

    
    //===== avatar should stick to left with default margin spacing ========
    
    
    format = @"|-[avatarImageView]";
    
    
    ...
    
    
    
    //=== avatar is square
    
    
    ...
    
    
    
    

    现在,头像图像的底部首先附加到表头视图的底部,优先级为 801. 上面有一个相反的约束,表示图像顶部必须低于导航栏的底部,优先级为 790.

    在navbar中,当你向下滚动时,你会发现第二个约束会到达导航栏的底部,而化身图像会到达导航栏底部,然后化身会继续向上。

    然后我给图像添加了两个大小约束。

    第一个设置图像最大( 和默认值) 大小,优先级为 760 ( 要大于优先级 750的默认内部大小),它的他的大小将是图像大小( 我的情况太大了)。

    另一个设置最小大小为 800的最小大小。 你可以看到,这个约束优先于图像顶部的约束,这意味着图像的底部将会断开。

    
    //===== avatar size can be between avatarSize and avatarCompressedSize
    
    
    format = @"V:[avatarImageView(<=avatarSize@760,>=avatarCompressedSize@800)]";
    
    
    
    

    step2

    这里有一个问题,当头像开始向上滚动,它是在导航栏而不是下面,这是swtiching的视图顺序:

    
    - (void)switchToMinifiedHeader
    
    
    {
    
    
    . . ..
    
    
    //Inverse Z-Order of avatar Image view
    
    
     [self.tableView.tableHeaderView exchangeSubviewAtIndex:1 withSubviewAtIndex:2];
    
    
    }
    
    
    
    

    step3

    标题视图动画

    我通过将自定义标题视图设置为现有导航栏来实现。 我不确定是不是该这样。 为了使视图位置动画,必须使用 setTitleVerticalPositionAdjustment,它不能通过转换或者移动框架原点来完成。 我还必须配置导航栏来剪辑内容。 所有这些都可能会有一些副作用,如果你在当前导航控制器上推一些控制器。 这里代码位于视图didScroll方法( 请原谅我神奇的数字。)。

    
    - (void) scrollViewDidScroll:(UIScrollView *)scrollView
    
    
    {
    
    
     CGFloat yPos = scrollView.contentOffset.y;
    
    
    
     if(yPos> _headerSwitchOffset +20 && yPos <= _headerSwitchOffset +20 +40){
    
    
     CGFloat delta = (40 +20 - (yPos-_headerSwitchOffset));
    
    
     [self.navigationController.navigationBar setTitleVerticalPositionAdjustment:delta forBarMetrics:UIBarMetricsDefault]; 
    
    
     }
    
    
    ...
    
    
    }
    
    
    
    

    模糊效果动画

    我不清楚什么是最好的选择。 经过快速研究,我决定使用我在这里找到的ImageEffects类别:

    https://github.com/iGriever/TWSReleaseNotesView

    我在本文中了解到:

    http://code.tutsplus.com/tutorials/adding-blur-effects-on-ios--cms-21488

    由于这个新类别,我有以下方法:

    
     - (UIImage *)applyBlurWithRadius:(CGFloat)blurRadius tintColor:(UIColor *)tintColor saturationDeltaFactor:(CGFloat)saturationDeltaFactor maskImage:(UIImage *)maskImage
    
    
    
    

    我首先尝试在 scrollViewDidScroll 方法中直接调用这个方法,但当然它冻结了 UI。 所以我决定使用计算模糊图像的缓存,然后在缓存中使用一个缓存。 我对模糊动画使用 10'离散'步骤:

    blur animation

    Credits

    头像图片:http://cheesyniblets.deviantart.com/art/ryu-and-sagat-15663243

    模糊效果:

    http://code.tutsplus.com/tutorials/adding-blur-effects-on-ios--cms-21488

    https://github.com/iGriever/TWSReleaseNotesView


    Twitter  ATT  Profile  
    相关文章