欢迎光临
我们一直在努力

灵活轻量的自定义导航栏,轻松实现【导航栏渐变、折叠…

建站超值云服务器,限时71元/月

灵活轻量的自定义导航栏,轻松实现【导航栏渐变、折叠...

项目介绍:

ZXNavigationBar

github:https://github.com/SmileZXLee/ZXNavigationBar

安装

通过CocoaPods安装

pod 'ZXNavigationBar'

或手动导入

  • 将ZXNavigationBar拖入项目中。

导入头文件

#import "ZXNavigationBarController.h"

功能&特点

  • [x] 每个控制器单独管理自己的导航栏,导航栏属于各个子控制器,不再属于统一的导航控制器

  • [x] 兼容iOS8-iOS13,兼容各种设备,且无需担心系统更新需要重新适配导航栏

  • [x] 仅需一行代码即可轻松控制各种效果

  • [x] 支持随时切换为系统导航栏,且与系统导航栏之间无缝衔接

  • [x] 支持在ZXNavigationBar上自定义titleView

  • [x] 若ZXNavigationBar自带效果都无法满足,支持自定义导航栏

  • [x] 若从Xib中加载控制器,添加子View无需手动设置距离导航栏顶部约束,ZXNavigationBar会自动处理

效果预览

导航栏设置 仿微博热搜效果 自定义导航栏
自定义titleView 切换系统导航栏 可伸缩式导航栏

开始使用

将控制器继承于ZXNavigationBarController,建议将Base控制器继承于ZXNavigationBarController

@interface DemoBaseViewController : ZXNavigationBarController

@end

注意:ZXNavigationBar会自动显示返回按钮,且实现点击pop功能,您无需设置,若需要自定义返回按钮,直接覆盖self.zx_navLeftBtn的图片和点击回调即可

关于自定义导航栏view内容无法自动下移的处理方式

  • 如果是系统的导航栏,view的内容会自动下移,如64像素

  • 设置了自定义的导航栏,它实际上就是普通的View,则view中的内容不会自动下移以避免挡住导航栏

  • ZXNavigationBar的处理方法是:

  • 如果您是通过frame或者Masonry设置控件布局,请设置y距离顶部高度为导航栏高度,可直接使用ZXNavBarHeight这个宏

  • 如果您是通过Xib加载控制器,则ZXNavigationBar会自动将内部约束设置为距离顶部为导航栏高度+原始高度,您无需作任何处理

  • 若您是通过Xib加载控制器,且禁用了SafeArea,请设置:

//若大多数控制器都从Xib加载并禁用了SafeArea,可以直接在Base控制器中设置
self.zx_isEnableSafeArea = NO;

导航栏设置

设置导航栏标题

self.title = @"ZXNavigationBar";

self.zx_navTitle = @"ZXNavigationBar";

设置导航栏标题颜色

self.zx_navTitleLabel.textColor = @"ZXNavigationBar";

设置导航栏标题字体大小

self.zx_navTitleLabel.fontSize = [UIFont systemFontOfSize:20];
  • 设置导航栏标题其他属性,通过控制self.zx_navTitleLabel即可

快速设置左侧/右侧的按钮(以右侧按钮为例)

  • 设置最右侧按钮的图片和点击回调

[self zx_setRightBtnWithImgName:@"set_icon" clickedBlock:^(UIButton * _Nonnull btn) {
    NSLog(@"点击了最右侧的Button");
}];
  • 设置最右侧按钮的文字和点击回调

[self zx_setRightBtnWithText:@"右侧按钮" clickedBlock:^(UIButton * _Nonnull btn) {
    NSLog(@"点击了最右侧的Button");
}];

根据左侧/右侧的按钮对象进行具体设置(以左侧按钮为例)

  • 如果需要导航栏显示返回图标和返回文字

//由于ZXNavigationBar会自动在左侧添加返回图片和点击返回事件,因此只需要设置返回的文字即可
[self.zx_navLeftBtn setTitle:@"返回" forState:UIControlStateNormal];
  • 设置导航栏左侧/右侧的按钮的其他非frame相关属性,通过控制self.zx_navLeftBtn/zx_navRightBtn即可

将图片渲染为指定颜色

//将oldImage渲染为红色
UIImage *resultImage = [oldImage zx_renderingColor:[UIColor redColor]];

设置左侧/右侧的按钮的大小

//将按钮宽高设置为30
self.zx_navItemSize = 30;

设置左侧/右侧的按钮的间距与边距

//将按钮边距设置为0
self.zx_navItemMargin = 0;

设置右侧第二个按钮

  • 将上诉例子中zx_navLeftBtn/zx_navRightBtn修改为zx_navSubRightBtn即可

设置导航栏背景颜色

self.zx_navBar.backgroundColor = [UIColor orangeColor];

设置导航栏背景图片

self.zx_navBar.zx_bacImage = [UIImage imageNamed:@"nav_bac"];

设置导航栏渐变背景

//从magentaColor到cyanColor渐变
[self zx_setNavGradientBacFrom:[UIColor magentaColor] to:[UIColor cyanColor]];

移除导航栏渐变背景

[self zx_removeNavGradientBac];

设置导航栏TintColor(此属性可以将导航栏的title颜色、左右Button的文字和图片颜色修改为TintColor)

self.zx_navTintColor = [UIColor yellowColor];

设置导航栏大小标题效果

[self zx_setMultiTitle:@"ZXNavigationBar" subTitle:@"subTitle"];

设置分割线背景颜色

self.zx_navLineView.backgroundColor = [UIColor blueColor];
  • 分割线其他其他非frame相关属性通过self.zx_navLineView设置即可

设置伸缩式导航栏

  • 如果设置了控制器的Xib且在Xib中设置了子视图的约束(仅需设置展开或者折叠导航栏与动画效果速度,无需手动调整控制器View子视图的frame)

//第一个参数folded:控制是展开还是折叠导航栏;第二个参数speed:控制展开或收缩导航栏的速度,0-6,建议值为3;第三个参数offsetBlock:折叠动画导航栏位移回调;第四个参数completionBlock:折叠动画结束回调
[self zx_setNavFolded:YES speed:3 foldingOffsetBlock:nil foldCompletionBlock:nil];
  • 如果是通过Frame设置控制器View的子视图(如TableView),需要在foldingOffsetBlock回调中控制导航栏下方View的frame,使其始终紧贴导航栏底部

__weak typeof(self) weakSelf = self;
[self zx_setNavFolded:shouldFold speed:3 foldingOffsetBlock:^(CGFloat offset) {
    //tableView的y值跟随这导航栏变化(导航栏高度减小,tableView的y值减小)
    weakSelf.tableView.y += offset;
    //tableView的高度值跟随这导航栏变化(导航栏高度减小,tableView高度增加)
    weakSelf.tableView.height -= offset;
} 

设置状态栏为白色

self.zx_isLightStatusBar = YES;

设置状态栏为黑色

self.zx_isLightStatusBar = NO;

显示系统导航栏(默认为否)

//显示系统导航栏将会自动隐藏ZXNavigationBar
self.zx_showSystemNavBar = YES;

隐藏ZXNavigationBar(默认为否)

//显示系统导航栏将会自动隐藏ZXNavigationBar
self.zx_hideBaseNavBar = YES;

禁止Xib加载控制器情况下自动将顶部View约束下移导航栏高度(默认为否)

self.zx_disableNavAutoSafeLayout = YES;

自定义TitleView

//创建自定义View
UIView *customTitleView = [[UIView alloc]init];
[self zx_addCustomTitleView:customTitleView];

自定义导航栏View

//创建自定义View
UIView *customNav = [[UIView alloc]init];
[self zx_addCustomNavBar:customNav];

更多示例,可下载Demo查阅,若有任何问题,可随时在issue中提出

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » 灵活轻量的自定义导航栏,轻松实现【导航栏渐变、折叠…
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址