仿微信朋友圈导航栏

最新推荐文章于 2021-11-18 18:31:09 发布

转载最新推荐文章于 2021-11-18 18:31:09 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b1ccfdff265da6e00389a14

本文分享了一种仿照微信导航栏的设计方案，包括状态栏颜色切换、tableView头部处理、导航栏背景设置等技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

最终效果

需要处理的问题

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

状态栏颜色切换

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

使用statusBarStyle直接设置。
使用preferredStatusBarStyle方法设置。

方式一

Info.plist中把UIViewControllerBasedStatusBarAppearance设置为NO,如图所示：
然后再用如下代码设置状态栏颜色。

[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleLightContent;
[UIApplication sharedApplication].statusBarStyle = UIStatusBarStyleDefault;
复制代码

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

方式二

Info.plist中把UIViewControllerBasedStatusBarAppearance设置为YES,如图所示：
添加UINavigationController+StatusBarStyle类目，重写childViewControllerForStatusBarStyle和childViewControllerForStatusBarHidden两个方法。

- (UIViewController *)childViewControllerForStatusBarStyle {
    return self.topViewController;
}
- (UIViewController *)childViewControllerForStatusBarHidden {
    return self.topViewController;
}
复制代码

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

在需要改变状态栏的文件里引入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按钮的上下偏移处理

详细请看代码

还存在的问题

代码有点乱需要重构
魔鬼数字?
tableView在滑动的时候，返回按钮icon，返回按钮标题，UIBarButtonItem按钮的上下偏移一直处理不好。例如：代码中的indicatorView的frame在一开始滑动的时候并不会改变，滑动一段距离后才开始改变，这样就会出现上面gif中出现的问题。frame的y值变化打印情况如下：

这个问题，如果哪位大神知道原因，请不吝赐教