iOS自定义导航栏

iOS自定义导航栏,第1张

几乎在开发每个app中都会使用到 UINavigationController ,然而几乎没人喜欢系统自带的样式,自定义一些 navigation bar 的样式,也变得重要了。本文会从以下几个方面来说明如和自定义 navigation bar 的样式。

系统的 navigation bar 长这样:

我们来看一下 navigation bar 的几个重要模块。

改变 navigation bar 的颜色很容易

translucent 半透明的,看着会有一层毛玻璃效果。

barTintColor 背景色,不是什么 backgroundColor 也不是 tintColor 。

也可以设置一张图当作背景

titleTextAttributes 你可以设置字体颜色等属性

这里是文档

我们甚至可以自己设置 navigationItem.titleView 来改变标题的样式

UIBarButtonItem 可以创建多种类型的按钮,文字、图片、自定义视图,还可以设置它的字体属性。

tintColor 设置后会影响文字或者图片颜色

默认的返回按钮包含一个返回的图片和文字,文字是控制器的标题,没有默认是Back。

给 backBarButtonItem 复值文字类型的 UIBarButtonItem 可以改变返回的文字,复值图片类型的但是不会返回的箭头,然后你的返回按钮就有两个图标。怎么办呢,我们设置一个 navigationItem.leftBarButtonItem 来当作返回按钮,还需要注意的是这时候侧滑返回会失效,需要设置交互手势代理。

自定义样式

隐藏横线

翻译自 https://dmtopolog.com/navigation-bar-customization/

//中间

//self.navigationItem.title = @"标题"

UIView*redView = [[UIViewalloc]initWithFrame:CGRectMake(0,0,140,40)]

redView.backgroundColor= [UIColorredColor]

UIView*greenView = [[UIViewalloc]initWithFrame:CGRectMake(20,5,100,30)]

greenView.backgroundColor= [UIColorgreenColor]

[redViewaddSubview:greenView]

self.navigationItem.titleView= redView

//右边

UIBarButtonItem*rightItem = [[UIBarButtonItemalloc]initWithTitle:@"个人信息"style:UIBarButtonItemStylePlaintarget:selfaction:@selector(goUserInfoVc:)]

UIBarButtonItem*rightItem2 = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemCameratarget:nilaction:nil]

self.navigationItem.rightBarButtonItems=@[rightItem,rightItem2]

//左边

UIBarButtonItem*leftItem = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAddtarget:nilaction:nil]

//通过图片创建barButtonItem

//生成一张不受父视图tintColor影响的图片

UIImage*image = [[UIImageimageNamed:@"github_grayscale"]imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]

UIBarButtonItem*leftItem2 = [[UIBarButtonItemalloc]initWithImage:imagestyle:UIBarButtonItemStylePlaintarget:nilaction:nil]

self.navigationItem.leftBarButtonItems=@[leftItem,leftItem2]

//设置导航栏

//self.navigationController.navigationBar.backgroundColor = [UIColor greenColor]

//设置导航栏的背景色

//self.navigationController.navigationBar.barTintColor = [UIColor greenColor]

//设置导航栏的样式

/*

UIBarStyleDefault浅

UIBarStyleBlack深

UIBarStyleBlackTranslucent

*/

self.navigationController.navigationBar.barStyle=UIBarStyleDefault

//设置背景图片不透明

//self.navigationController.navigationBar.translucent = NO

//修改导航左右内容的颜色

self.navigationController.navigationBar.tintColor= [UIColorgrayColor]

//隐藏自带的背景图片

[self.navigationController.navigationBarsetBackgroundImage:[[UIImagealloc]init]forBarMetrics:UIBarMetricsDefault]

//隐藏阴影图片

[self.navigationController.navigationBarsetShadowImage:[[UIImagealloc]init]]

//设置导航的toolBar

//把toolBar显示出来

self.navigationController.toolbarHidden=NO

UIBarButtonItem*toolBarItem = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemPlaytarget:nilaction:nil]

UIBarButtonItem*toolBarItem2 = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemStoptarget:nilaction:nil]

UIBarButtonItem*toolBarItem3 = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemEdittarget:nilaction:nil]

//创建木棍特效UIBarButtonItem样式Fixed

UIBarButtonItem*toolBarItem4 = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpacetarget:nilaction:nil]

toolBarItem4.width=50

UIBarButtonItem*toolBarItem5 = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFixedSpacetarget:nilaction:nil]

toolBarItem5.width=100

//创建d簧特效UIBarButtonItem样式Flexible

UIBarButtonItem*toolBarItem6 = [[UIBarButtonItemalloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpacetarget:nilaction:nil]

//50棍- Play - 100棍- Stop -d簧- Edit - 50棍

self.toolbarItems=@[toolBarItem4,toolBarItem, toolBarItem5,toolBarItem2, toolBarItem6,toolBarItem3,toolBarItem4]

附加: 

[self.navigationControllersetNavigationBarHidden:!self.navigationController.navigationBarHiddenanimated:YES]

[self.navigationControllersetToolbarHidden:!self.navigationController.toolbarHiddenanimated:YES]


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11757982.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-18
下一篇 2023-05-18

发表评论

登录后才能评论

评论列表(0条)

保存