iOS个人中心透明导航栏简易实现

需求

iOS项目个人中心需要导航栏随着内容的上滑，导航栏颜色逐渐变深，到指定距离时，导航栏变为不透明，状态栏颜色变黑色，图标颜色从白色变为黑色。如图所示：

导航栏变化示意图.gif

实现方法

1 在导航栏自定义类中写一个方法

方法名为：- (void)animateByOffsetY:(CGFloat)offsety

方法功能是通过滑动的位移，使状态栏的所有View发生透明度改变，代码如下：

- (void)animateByOffsetY:(CGFloat)offsety
{
    CGFloat fitHeight = 156;
    // 导航栏上的图片或者字体，随位移变化透明度也发生变化
    self.usernameLabel.alpha = offsety/fitHeight;
    self.avatarImageView.alpha = offsety/fitHeight;
    // 个人中心导航栏背景颜色，随位移变化透明度也发生变化
    self.backgroundColor = [ColorUtil cl_colorWithHexString:@"#FFFFFF" alpha:offsety/fitHeight];
    // 当滑动到一定值之后，更改状态栏的图片，由白色变为黑色
    if (offsety < fitHeight*0.7) {
        self.rightBtnImageView.image = self.isMySelf ? IDSImageNamed(@"ic_nav_setup_w") : IDSImageNamed(@"ic_nav_report_w");
        self.gobackImageView.image = IDSImageNamed(@"ic_nav_back_w");
    }
    else {
        self.rightBtnImageView.image = self.isMySelf ? IDSImageNamed(@"ic_nav_setup_b") : IDSImageNamed(@"ic_nav_report_b");
        self.gobackImageView.image = IDSImageNamed(@"ic_nav_back_b");
    }
}

2 在UIViewController中实现如下方法

实现- (void)scrollViewDidScroll:(UIScrollView *)scrollView方法，用来控制状态栏和自定义导航栏的颜色变化，代码如下：

/**
 方法功能来控制透明导航栏随滑动进行透明度变化，状态栏也会在一定距离发生变化
 */
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    [self.navigationView animateByOffsetY:scrollView.contentOffset.y-3];
    if (scrollView.contentOffset.y <= 0) {
        [scrollView setContentOffset:CGPointMake(scrollView.contentOffset.x, 0)];
    }
    CGFloat fitHeight = 156;

    // 下面功能为状态栏色值发生改变的方法
    if (scrollView.contentOffset.y < fitHeight) {
        if (_isNavWhiteColor) {
            return;
        }
        _isNavWhiteColor = YES;
        if ([self respondsToSelector:@selector(setNeedsStatusBarAppearanceUpdate)]) {
             [self preferredStatusBarStyle];
            [self performSelector:@selector(setNeedsStatusBarAppearanceUpdate)];
        }
    }
    else {
        if (!_isNavWhiteColor) {
            return;
        }
        _isNavWhiteColor = NO;
        if ([self respondsToSelector:@selector(setNeedsStatusBarAppearanceUpdate)]) {
            [self preferredStatusBarStyle];
            [self performSelector:@selector(setNeedsStatusBarAppearanceUpdate)];
        }
    }
}

/**
 修改状态栏颜色

 @return 返回状态栏颜色变量
 */
- (UIStatusBarStyle)preferredStatusBarStyle
{
    if (_isNavWhiteColor) {
        return UIStatusBarStyleLightContent;
    }
    else {
        return UIStatusBarStyleDefault;
    }
}

思考与行动：

不自定义导航栏，直接利用系统原生的导航栏如何达到这种效果，需要注意什么？
不自定义导航栏，直接利用系统原生的导航栏，如何实现页面平滑过渡效果？如下gif图所示

1490863500577583.gif

最后编辑于：2018.06.15 00:57:35