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;

(0)

相关推荐

  • iOS如何去掉导航栏(UINavigationBar)下方的横线

    网上有很多关于隐藏的方法,设置后能够成功,但是跳转到其他界面的时候发现,其他界面横线也被隐藏了. 目前主流的方法是将shadowImage用一张空的图片图片替换掉 可是这种方法不能解决navigationController里面的某个界面隐藏,其他不变的问题. [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];

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

    一.导航栏UINavigationBar 1.导航栏的使用 在iOS开发中,我们通常会使用导航控制器,导航控制器中封装了一个UINavigationBar,实际上,我们也可以在不使用导航控制器的前提下,单独使用导航栏,在UINavigationBar中,也有许多我们可以定制的属性,用起来十分方便. 2.UINavigationBar的创建和风格类型 导航栏继承于UIView,所以我们可以像创建普通视图那样创建导航栏,比如我们创建一个高度为80的导航栏,将其放在ViewController的头部,

  • 微信小程序中顶部导航栏的实现代码

    微信小程序中顶部导航栏的实现 实例代码: <view class="swiper-tab"> <view class="swiper-tab-list {{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">11</view> <view class="swiper-tab-list {{curre

  • vue 中固定导航栏的实例代码

    点击按钮回顶 <template lang="html"> <div class="gotop-box"> <i @click="gotop"class="icon topIcon"></i> </div> </template> <script> export default { methods: { gotop: function () {

  • iOS状态栏、导航栏的一些笔记分享

    前言 IOS的界面分为状态栏和导航栏,如下图所示: 状态栏与导航栏的位置如上图,我们可以通过[UIApplication sharedApplication].statusBarFrame.size获取状态栏的size(一般没有刘海时的高度为20,有刘海时的高度为44). 通过self.navigationController.navigationBar.frame.size获取导航栏的size(一般高度为44,大标题时高度为xyz,当然也可以通过自定义来改变导航栏样式). ***ps:***在

  • iOS定制UISearchBar导航栏同步iOS11的方法

    系统原生的UISearchBar在iOS 11经历了一次变革,高度由原来的44变成了56 (使用默认高度的估计都被坑了),样式也发生了些微的变化,比如在未输入状态下圆角变化,放大镜图标和文本的文字不再居中而是靠左了.具体看图 一些主流App也常见在导航栏嵌入searchBar,以网易云音乐和知乎为例,左边是主页,右边是搜索页面 (注意光标). 实现思路与案例 核心思想是设置导航栏的titleView和左右的barButtonItem.主要有3种方式 首页导航栏的titleView使用button

  • iOS如何为导航栏添加播放动画

    本文实例为大家分享了iOS为导航栏添加播放动画的具体代码,供大家参考,具体内容如下 FLAudioVisualizerView.h #import <UIKit/UIKit.h> @interface FLAudioVisualizerView : UIView #pragma mark - // 默认UIEdgeInsetsZero @property (nonatomic, assign) UIEdgeInsets contentInsets; // 默认为4 @property (non

  • iOS轻松实现导航栏透明渐变

    首先我们来看下效果 一开始当我们什么只设置了一张图片作为它的头部视图的时候,它是这样的 1.首当其冲的,我们先得把导航栏弄透明 那么我们首先得知道,设置navigationBar的BackgroundColor为Clear是没用的,你可以试着设置它的clear,但是没用,原因一会儿我们就知道了. 而对于把导航栏设置为透明,网上大多数的方法是: [self.navigationController.navigationBar setBackgroundImage:[UIImage new] for

  • iOS App中UIPickerView选择栏控件的使用实例解析

    UIPickerView控件是比UIDatePicker控件更普通的Picker控件,UIDatePicker控件可以理解成是从UIPickerView控件加工出来的专门进行日期选择的控件. UIPickerView控件的用法比UIDatePicker复杂一点.本文中的小例子将用UIPickerView控件做出两种效果,第一个只有一个转盘,第二个有两个转盘,但这两个转盘之间没有依赖关系,也就是说改变其中一个转盘中的选择,不会对第二个转盘产生影响.在下一篇文章会做一个转盘之间有依赖关系的例子. 下

  • iOS仿微博导航栏动画(CoreGraphics)的实现方法

    前言 昨天刚做完项目的新版本.除了尝试一些新的架构之外.功能方面并没什么特别的地方. 但是顺手搞了一些还算好玩的东西.其一就是这个导航栏的动画. 感觉还算简单易懂.分享一下(其实更多是最近攒了好多封面.不贴出来憋得人难受). 导航栏动画.gif 思路 先介绍CA的两个方法: 基于原始状态的位移 CG_EXTERN CGAffineTransform CGAffineTransformMakeTranslation(CGFloat tx, CGFloat ty) CG_AVAILABLE_STAR

随机推荐