当前位置: 首页 > 编程笔记 >

iOS中的导航栏UINavigationBar与工具栏UIToolBar要点解析

怀刚毅
2023-03-14
本文向大家介绍iOS中的导航栏UINavigationBar与工具栏UIToolBar要点解析,包括了iOS中的导航栏UINavigationBar与工具栏UIToolBar要点解析的使用技巧和注意事项,需要的朋友参考一下

一、导航栏UINavigationBar
1、导航栏的使用

在iOS开发中,我们通常会使用导航控制器,导航控制器中封装了一个UINavigationBar,实际上,我们也可以在不使用导航控制器的前提下,单独使用导航栏,在UINavigationBar中,也有许多我们可以定制的属性,用起来十分方便。

2、UINavigationBar的创建和风格类型

导航栏继承于UIView,所以我们可以像创建普通视图那样创建导航栏,比如我们创建一个高度为80的导航栏,将其放在ViewController的头部,代码如下:

UINavigationBar *bar = [[UINavigationBar alloc]initWithFrame:CGRectMake(0, 0, 320, 80)];
[self.view addSubview:bar];
效果如下:

我们也可以设置导航栏的风格属性,从iOS6之后,UINavigationBar默认为半透明的样式,从上面也可以看出,白色的导航栏下面透出些许背景的红色。导航栏的风格属性可以通过下面的属性来设置:

@property(nonatomic,assign) UIBarStyle barStyle;
UIBarStyle是一个枚举,其中大部分的样式都已弃用,有效果的只有如下两个:

typedef NS_ENUM(NSInteger, UIBarStyle) {
    UIBarStyleDefault          = 0,//默认
    UIBarStyleBlack            = 1,//黑色
}
默认的风格就是我们上面看到的白色的风格,黑色的风格效果瑞如下:

3、导航栏常用属性和方法

从上面我们可以看到,iOS6后导航栏默认都是半透明的,我们可以通过下面的bool值来设置这个属性,设置为NO,则导航栏不透明,默认为YES:

@property(nonatomic,assign,getter=isTranslucent) BOOL translucent;
下面一些方法用于设置NavigationBar及上面item的颜色相关属性:

@property(null_resettable, nonatomic,strong) UIColor *tintColor;
tintColor这个属性会影响到导航栏上左侧pop按钮的图案颜色和字体颜色,系统默认是如下颜色:

@property(nullable, nonatomic,strong) UIColor *barTintColor;
BarTintColor用于设置导航栏的背景色,这个属性被设置后,半透明的效果将失效:

- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forBarMetrics:(UIBarMetrics)barMetrics NS_AVAILABLE_IOS(5_0) UI_APPEARANCE_SELECTOR;
- (nullable UIImage *)backgroundImageForBarMetrics:(UIBarMetrics)barMetrics;
上面两个方法用于设置和获取导航栏的背景图案,这里需要注意,默认背景图案是不做缩放处理的,所以我们使用的图片尺寸要和导航栏尺寸匹配,这里面还有一个UIBarMetrics参数,这个参数设置设备的状态,如下:

typedef NS_ENUM(NSInteger, UIBarMetrics) {
    UIBarMetricsDefault,//正常竖屏状态
    UIBarMetricsCompact,//横屏状态
};
//设置导航栏的阴影图片
@property(nullable, nonatomic,strong) UIImage *shadowImage;
//设置导航栏的标题字体属性
@property(nullable,nonatomic,copy) NSDictionary<NSString *,id> *titleTextAttributes;
标题字体属性会影响到导航栏的中间标题,如下:

bar.titleTextAttributes = @{NSForegroundColorAttributeName:[UIColor redColor]};

我们也可以通过下面的属性设置导航栏标题的竖直位置偏移:

- (void)setTitleVerticalPositionAdjustment:(CGFloat)adjustment forBarMetrics:(UIBarMetrics)barMetrics;
- (CGFloat)titleVerticalPositionAdjustmentForBarMetrics:(UIBarMetrics)barMetrics;
还有一个细节,导航栏左侧pop按钮的图案默认是一个箭头,我们可以使用下面的方法修改:

@property(nullable,nonatomic,strong) UIImage *backIndicatorImage;
@property(nullable,nonatomic,strong) UIImage *backIndicatorTransitionMaskImage;
4、导航栏中item的push与pop操作

UINavigationBar上面不只是简单的显示标题,它也将标题进行了堆栈的管理,每一个标题抽象为的对象在iOS系统中是UINavigationItem对象,我们可以通过push与pop操作管理item组。

//向栈中添加一个item,上一个item会被推向导航栏的左侧,变为pop按钮,会有一个动画效果
- (void)pushNavigationItem:(UINavigationItem *)item animated:(BOOL)animated;
//pop一个item
- (nullable UINavigationItem *)popNavigationItemAnimated:(BOOL)animated;
//当前push到最上层的item
@property(nullable, nonatomic,readonly,strong) UINavigationItem *topItem;
//仅次于最上层的item,一般式被推向导航栏左侧的item
@property(nullable, nonatomic,readonly,strong) UINavigationItem *backItem;
//获取堆栈中所有item的数组
@property(nullable,nonatomic,copy) NSArray<UINavigationItem *> *items;
//设置一组item
- (void)setItems:(nullable NSArray<UINavigationItem *> *)items animated:(BOOL)animated;
5、UINavigationBarDelegate

在UINavigationBar中,还有如下一个属性:

@property(nullable,nonatomic,weak) id<UINavigationBarDelegate> delegate;
通过代理,我们可以监控导航栏的一些push与pop操作:

//item将要push的时候调用,返回NO,则不能push
- (BOOL)navigationBar:(UINavigationBar *)navigationBar shouldPushItem:(UINavigationItem *)item;
//item已经push后调用
- (void)navigationBar:(UINavigationBar *)navigationBar didPushItem:(UINavigationItem *)item;
//item将要pop时调用,返回NO,不能pop 
- (BOOL)navigationBar:(UINavigationBar *)navigationBar shouldPopItem:(UINavigationItem *)item;
//item已经pop后调用
- (void)navigationBar:(UINavigationBar *)navigationBar didPopItem:(UINavigationItem *)item;

二、工具栏UIToolBar
导航栏一般会出现在视图的头部,与之相对,工具栏一般会出现在视图的的底部,上面可以填充一些按钮,提供给用户一些操作。创建一个工具栏如下:
self.view.backgroundColor = [UIColor grayColor];
UIToolbar * tool = [[UIToolbar alloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-40, 320, 40)];
[self.view addSubview:tool];

下面是UIToolBar中的一些方法,其中大部分在UINavigationBar中都有涉及,这里只做简单的介绍:

//工具栏的风格,和导航栏类似,有黑白两种
@property(nonatomic) UIBarStyle barStyle;
//设置工具栏上按钮数组
@property(nullable,nonatomic,copy) NSArray<UIBarButtonItem *> *items;
//设置工具栏是否透明
@property(nonatomic,assign,getter=isTranslucent) BOOL translucent;
//设置工具栏按钮
- (void)setItems:(nullable NSArray<UIBarButtonItem *> *)items animated:(BOOL)animated;
//设置item风格颜色
@property(null_resettable, nonatomic,strong) UIColor *tintColor;
//设置工具栏背景色
@property(nullable, nonatomic,strong) UIColor *barTintColor;
//设置工具栏背景和阴影图案
- (void)setBackgroundImage:(nullable UIImage *)backgroundImage forToolbarPosition:(UIBarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics;
- (nullable UIImage *)backgroundImageForToolbarPosition:(UIBarPosition)topOrBottom barMetrics:(UIBarMetrics)barMetrics;
- (void)setShadowImage:(nullable UIImage *)shadowImage forToolbarPosition:(UIBarPosition)topOrBottom;
- (nullable UIImage *)shadowImageForToolbarPosition:(UIBarPosition)topOrBottom;

 类似资料:
  • 在向应用添加导航栏和工具栏之前,我们需要决定使用哪种布局。 Framework7在这方面很自由,有3种不同类型的导航栏/工具栏布局,它们对应着在页面/视图中的不同位置。 静态布局 静态布局可能是最少使用的布局。在这种情况下,导航栏和工具栏只是可以滚动的页面内容的一部分,每个页面都有它自己的导航栏和工具栏: <body> ... <div class="views"> <div cl

  • 将导航栏或工具栏(情节提要)拖动到视图控制器时出现问题。 UINavigationBar: 如上图所示,右键几乎与状态栏重叠。 与UIToolbar发生相同的情况: 此视图控制器旨在用作模式,这就是我不使用UINavigationController的原因。 在另一节中,我使用了一个UINavigationController,它的外观与我预期的一样: 如何将UINavigationBar/UIT

  • 本文向大家介绍iOS如何去掉导航栏(UINavigationBar)下方的横线,包括了iOS如何去掉导航栏(UINavigationBar)下方的横线的使用技巧和注意事项,需要的朋友参考一下 网上有很多关于隐藏的方法,设置后能够成功,但是跳转到其他界面的时候发现,其他界面横线也被隐藏了。 目前主流的方法是将shadowImage用一张空的图片图片替换掉 可是这种方法不能解决navigationCo

  • 我的应用程序中有一个视图控制器,它在情节提要中拖动了一个导航栏。它在iOS 6中运行良好,但在iOS 7中看起来是这样的: 状态栏和导航栏不应相互碰撞。我在堆栈溢出上看到了很多这样的问题,但它们对我没有多大帮助。 有些问题说我应该使用这个“self.edgesForExtendedLayout=UIRectEdgeNone”;但它不起作用。有人说,我应该删除导航栏并将其嵌入导航控制器中,但由于我的

  • 我正在创建一个应用程序,我在互联网上浏览,我想知道他们是如何使这个透明的UINavigationBar像这样: 我在appdelegate中添加了以下内容: 但这只会让它看起来像: 如何使导航栏像第一个图像一样透明?

  • 导航栏是一个将商标、导航以及别的元素简单放置到一个简洁导航页头的的包裹。它很容易扩展,而且,在折叠板插件的帮助下,它可以轻松与幕后内容整合。 基础 这些是你开始使用导航条之前需要知道的东西: 导航条要求一个包裹的.navbar以及一个配色方案类(可以是.navbar-default或者.navbar-inverse)。 当在一个导航条中使用多个组件时,必须用一些 对齐类 。 导航条以及它们的内容默