iOS 实用实用轮子iOS小功能点

headerView+NavigationBar移动、渐变

2016-11-22  本文已影响531人  不会飞的小白

headerView+NavigationBar渐变

很多大神都已经写了很多关于这方面的东西,在这儿自己整理了一份。先上图看效果

  1. 类似QQ空间
效果图1.gif
  1. 类似简书客户端
效果图2.gif

headerView变化

两行代码搞定,真的很简单

// 由于自己做了封装、所以在这里只需要调用这两个方法解可以实现headerView下拉变大的效果,如图1
[self configHeaderView:self.contentView];
[self configHeaderImage:[UIImage imageNamed:@"bridge"]];

其原理很简单,滑动tableView时contentOffset发生变化从而改变imageView的frame。当contentOffset发生变化时,赋值给headerView的属性,使用KVO来改变frame

- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSKeyValueChangeKey,id> *)change context:(void *)context
{
    if (context == observerKey)
    {
        if ([keyPath isEqualToString:@"contentOffset"])
        {
            CGPoint contentOffset = [[change objectForKey:NSKeyValueChangeNewKey] CGPointValue];
            if (contentOffset.y <= 0) {
                self.imageView.frame = CGRectMake(0, 
                                                  0 + contentOffset.y, 
                                                  SCREEN_WIDTH,
                                                  ALPullHeaderViewHeight + fabs(contentOffset.y));
            }
        }
    }
}

navigationBar的渐变

这一块的解释满大街都是,不想过多说明。

  1. 可以配置整体navigationBar的颜色,通常是在AppDelegate中或者根类的NavigationBarController中,所以在此改变透明度显然不合适
[[UINavigationBar appearance] setTintColor:[UIColor whiteColor]];
[[UINavigationBar appearance] setBarTintColor:[UIColor colorWithRed:0/255.0 green:175/255.0 blue:240/255.0 alpha:1]];
[[UINavigationBar appearance] setTitleTextAttributes: @{NSForegroundColorAttributeName : [UIColor whiteColor],
                                                            NSFontAttributeName : [UIFont systemFontOfSize:21]                                             }];
  1. 直接修改backgroundColor,你会发现不是那个样子,可以自己动手看看navigationBar的层级视图。

  2. 有一个最简单的方式,看层级视图

[[[self.navigationController.navigationBar subviews] objectAtIndex:0] setAlpha:0];
  1. 我觉得比较好用的一种方式,使用category的方法,运用runtime的机制创建新的视图添加在navigationBar上
// 将背景置空
[self setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
// 去掉navigationBar的阴影细线
[self setShadowImage:[UIImage new]];

然后在创建一个视图barView添加到navigationBar上,改变barView的颜色,透明度

navigationBar的移动

通过- (void)scrollViewDidScroll:(UIScrollView *)scrollView,改变contentOffset来改变navigationBar的位置

- (void)al_setBarTranslationY:(CGFloat)translationY
{
    self.transform = CGAffineTransformMakeTranslation(0, translationY);
}

提醒

因为这些改变改动的都是navigationBar,需要退出界面之后重置

附加

之前整理的时候,也把navigationBar相关的东西也顺带着弄了出来,包括自定义UIBarButtonItem,UIBarButtonItem上添加badge。

本文上的demo已经上传git传送门

navigationBar的渐变参考自这篇文章、写的还是很赞的

动态修改UINavigationBar的背景色传送门

写在最后

做了这么些时间的开发,整理了一些东西,还没有发出来,以后慢慢来吧,写的不好,大家见谅,如有不足,欢迎指正,谢谢!!!

上一篇下一篇

猜你喜欢

热点阅读