仿微信朋友圈导航栏

突然发现微信朋友圈和微信新闻页面中的导航栏处理非常漂亮,这种处理有点像iPhone或iPad中Safari中的导航栏处理。本着学习的目的自己也做了一个类似的demo分享给大家,希望能帮到大家,代码见github,欢迎大家吐槽,如果喜欢的话不要忘了star。

最终效果

需要处理的问题

  1. 状态栏颜色切换。
  2. tableView的头部处理。
  3. 导航栏背景处理。
  4. 导航栏高度、导航栏透明度和标题透明度处理。
  5. 导航栏返回按钮icon,返回按钮标题,UIBarButtonItem按钮的上下偏移处理。

状态栏颜色切换

状态栏颜色切换有两种方式

  1. 使用statusBarStyle直接设置。
  2. 使用preferredStatusBarStyle方法设置。

方式一

  1. Info.plist中把UIViewControllerBasedStatusBarAppearance设置为NO,如图所示:
  2. 然后再用如下代码设置状态栏颜色。
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;
复制代码

官方文档已经说明这种方式已经废弃了。

方式二

  1. Info.plist中把UIViewControllerBasedStatusBarAppearance设置为YES,如图所示:
  2. 添加UINavigationController+StatusBarStyle类目,重写childViewControllerForStatusBarStylechildViewControllerForStatusBarHidden两个方法。
- (UIViewController *)childViewControllerForStatusBarStyle {
    return self.topViewController;
}
- (UIViewController *)childViewControllerForStatusBarHidden {
    return self.topViewController;
}
复制代码

如果没有重写这两个方法,第三步的设置就不会起作用。这两个方法默认返回nil,在调用setNeedsStatusBarAppearanceUpdate方法的时候并不会调用第三步中的preferredStatusBarStyle方法。

  1. 在需要改变状态栏的文件里引入UINavigationController+StatusBarStyle.h头文件,并重写preferredStatusBarStyle方法。
- (UIStatusBarStyle)preferredStatusBarStyle {
    return _barStyle;
}
复制代码

tableView的头部处理

- (void)setupHeaderUI {
    UIView *header = [[UIView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, header_h)];
    UIView *shadowView = [[UIView alloc] initWithFrame:CGRectMake(-20, -shadow_h, SCREEN_WIDTH + 40, shadow_h)];
    shadowView.backgroundColor = RGBA(20, 98, 104, 1);
    shadowView.layer.shadowColor = RGBA(20, 98, 104, 1).CGColor;
    shadowView.layer.shadowOffset = CGSizeMake(0, 70);
    shadowView.layer.shadowOpacity = 0.7;
    shadowView.layer.shadowRadius = 15;

    UIImage *image = [UIImage imageNamed:@"cover.png"];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
    imageView.frame = (CGRect) {{0, 0}, {SCREEN_WIDTH, header_h}};
    [header addSubview:imageView];
    [imageView addSubview:shadowView];
    self.tableView.tableHeaderView = header;
}
复制代码

导航栏背景处理

 [self.navigationController.navigationBar setBackgroundImage:[UIImage imageNamed:@"pixel"] forBarMetrics:UIBarMetricsDefault]; // 导航栏背景设置为透明
 [self.navigationController.navigationBar setShadowImage:[UIImage imageNamed:@"pixel"]]; //导航栏底部线条设为透明
复制代码

导航栏高度、导航栏透明度和标题透明度处理

详细请看代码

导航栏返回按钮icon,返回按钮标题,UIBarButtonItem按钮的上下偏移处理

详细请看代码

还存在的问题

  1. 代码有点乱需要重构
  2. 魔鬼数字?
  3. tableView在滑动的时候,返回按钮icon,返回按钮标题,UIBarButtonItem按钮的上下偏移一直处理不好。例如:代码中的indicatorView的frame在一开始滑动的时候并不会改变,滑动一段距离后才开始改变,这样就会出现上面gif中出现的问题。frame的y值变化打印情况如下: 这个问题,如果哪位大神知道原因,请不吝赐教

你可能感兴趣的:(仿微信朋友圈导航栏)