IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 移动开发 -> OC 基础 导航栏UINavigation的使用(源码) -> 正文阅读

[移动开发]OC 基础 导航栏UINavigation的使用(源码)

一直觉得自己写的不是技术,而是情怀,一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的,希望我的这条路能让你们少走弯路,希望我能帮你们抹去知识的蒙尘,希望我能帮你们理清知识的脉络,希望未来技术之巅上有你们也有我。

OC 基础 导航栏UINavigation的使用(源码)

系统默认的返回按键就像下面的图片一样
在这里插入图片描述

全局:backBarButtonItem(返回按键)

在这里插入图片描述

在这里插入图片描述

// 去掉系统默认自带的文字(上一个控制器的title),修改系统默认的样式(一个蓝色的左箭头)为自己的图片
-(void)customBarButtonItem {
    // 去掉文字
    // 自定义全局的barButtonItem外观
    UIBarButtonItem *barButtonItemAppearance = [UIBarButtonItem appearance];
    // 将文字减小并设其颜色为透明以隐藏
    [barButtonItemAppearance setTitleTextAttributes:@{NSFontAttributeName: [UIFont systemFontOfSize:0.1], NSForegroundColorAttributeName: [UIColor blackColor]} forState:UIControlStateNormal];
    
    // 设置图片
    // 获取全局的navigationBar外观
    UINavigationBar *navigationBarAppearance = [UINavigationBar appearance];
    // 获取原图
    UIImage *image = [[UIImage imageNamed:@"nav_back"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    // 修改navigationBar上的返回按钮的图片,注意:这两个属性要同时设置
    navigationBarAppearance.backIndicatorImage = image;
    navigationBarAppearance.backIndicatorTransitionMaskImage = image;
}

我尝试过把上面的代码写在viewController不生效,不过写在AppDelegate比较合适。

局部: backBarButtonItem(返回按键)

下面设置返回按键的效果返回箭头是固定的,添加的文字,图片之类的是另外加上去的,这种效果设置出来在项目里很少用到。

返回按键的设置效果需要注意的是,如果在A页面写设置返回按键的,要跳去B页面才能看的到的。
在这里插入图片描述

系统风格

在这里插入图片描述

    UIBarButtonItem *leftItemBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:nil action:nil];
    self.navigationItem.backBarButtonItem = leftItemBtn;

图片

在这里插入图片描述

//设置导航栏的图片按键
UIImage *image = [UIImage imageNamed:@"home_search_normal"];
//取消渲染
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//创建按键
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:nil action:nil];    
self.navigationItem.backBarButtonItem = rightItem;

文字

在这里插入图片描述

//设置导航栏的文字按键
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithTitle:@"search" style:UIBarButtonItemStylePlain target:self action:@selector(rightItemBtnClick:)];
//设置文字颜色
[rightItem setTintColor:[UIColor redColor]];
self.navigationItem.backBarButtonItem = rightItem;

局部:rightBarButtonItem(添加导航栏右边的按键)

系统风格:

在这里插入图片描述

UIBarButtonItem *leftItemBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(selectLeftAction:)];
self.navigationItem.rightBarButtonItem = leftItemBtn;

UIBarButtonSystemItem:系统自带的按键风格
在这里插入图片描述

系自定义文字内容:

在这里插入图片描述

//设置导航栏的文字按键
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithTitle:@"search" style:UIBarButtonItemStylePlain target:self action:@selector(rightItemBtnClick:)];
//设置文字颜色
[rightItem setTintColor:[UIColor redColor]];
self.navigationItem.rightBarButtonItem = rightItem;

系自定义图片:

在这里插入图片描述

//设置导航栏的图片按键
UIImage *image = [UIImage imageNamed:@"home_search_normal"];
//取消渲染
image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
//创建按键
UIBarButtonItem *rightItem = [[UIBarButtonItem alloc] initWithImage:image style:UIBarButtonItemStylePlain target:self action:@selector(rightItemBtnClick:)];
self.navigationItem.rightBarButtonItem = rightItem;

图片显示出来的大小是有图片本身的size决定的,如果太大需要把图片切少一点
在这里插入图片描述

Tip

添加右边按键的时候还有一个属性是带s,rightBarButtonItems可以接受一个按键数组,添加多个进去。

局部:leftBarButtonItem(添加导航栏左边的按键)

设置的方法跟上面的添加导航栏左边的按键是一模一样的,只是换了一个属性而已。

局部:title(设置导航栏标题)

在这里插入图片描述

self.title = @"标题";
[self.navigationController.navigationBar setTitleTextAttributes:@{
NSFontAttributeName:[UIFont boldSystemFontOfSize:18],
NSForegroundColorAttributeName:[UIColor redColor]}];

局部:prompt(副标题)

在这里插入图片描述

self.navigationItem.prompt = @"好牛";

局部:titleView

UIView *currentView = [CurrentView new];
currentView.frame = CGRectMake(0, 0, 100, 50);    
self.navigationItem.titleView = currentView;

自定义view

#import "CurrentView.h"

@interface CurrentView()
@property (nonatomic,strong) UILabel *label;
@end

@implementation CurrentView

- (instancetype)initWithFrame:(CGRect)frame{
    self = [super initWithFrame:frame];
    [self buildUI];
    return self;
}

-(void) buildUI{
    self.backgroundColor = [UIColor whiteColor];
    
    self.label = [UILabel new];
    self.label.textColor = [UIColor blueColor];
    self.label.addTo(self).str(@"titleView").fnt(16).makeCons(^{
        make.center.equal.view(self);
    });

}

@end

全局:隐藏导航栏

如果想在某一个控制器里面隐藏导航栏的话可以想下面的设置,不过要注意:退出控制器的时候需要显示回来,不然去到别的页面会看不到的。

- (void)viewWillAppear:(BOOL)animated{
    [super viewWillAppear:animated];
    
    self.navigationController.navigationBar.hidden = YES;
}

- (void)viewDidDisappear:(BOOL)animated{
    [super viewDidDisappear:animated];
    
    self.navigationController.navigationBar.hidden = NO;
}

我一般会使用第三方,他是局部设置,只对当前控制器有效,下面的这句话给自己看的

self.sp_prefersNavigationBarHidden = YES;

重点:自定义导航栏1

在开发过程中,app一般都会有自己的主题,项目里面的导航栏基本都是固定的样式,例如:返回按键的图片,导航栏的背景颜色,标题的文字大小,我们可以自定义导航栏,那么整个项目的样式默认跳进来控制器都是显示这种样式的。

下面是我平时用开的自定义导航栏的封装,里面就做了几样东西:
1.设置屏幕竖屏
2.设置导航栏返回按键的图片,不带有文字
3.导航栏的背景颜色
4.标题栏的文字大小和样式
5.栈中不止一个控制器就把底部的tabbar隐藏
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
使用的时候很简单的。在tabbar的自定义封装里面添加控制器到ChildViewController时把导航栏一起创建
在这里插入图片描述
在这里插入图片描述
自定义tabbar我有一篇文章讲过的。

重点:自定义导航栏2

开发项目的时候,也会有一些页面的导航栏的很特殊的,例如:搜索页面。我们自己把上面重点1的导航栏样式进入搜索控制器的时候把它隐藏起来,然后自定义view就可以,在搜索控制器的顶部,把自定义view作为导航栏就可以了

注意

导航烂我设置了黄色,运行的时候,发现导航栏上面刘海部分的部分是黑色,说名黑色部分不属于导航哪里的。一般来说,导航栏是黄色,我们期盼上面部分也要跟这黄色才行的。看下面图片效果
在这里插入图片描述

在这里插入图片描述

那么如何修改呢?这个需要设置tabbar的背景颜色也要黄色就可以解决问题了,看下面的代码。我自己封装了一个tabbar。

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

使用继承scrollerView继承的控件,tableview,collectionview,拖动的时候出现下面图片的效果,修改办法也是跟上面一样的。
请添加图片描述

  移动开发 最新文章
Vue3装载axios和element-ui
android adb cmd
【xcode】Xcode常用快捷键与技巧
Android开发中的线程池使用
Java 和 Android 的 Base64
Android 测试文字编码格式
微信小程序支付
安卓权限记录
知乎之自动养号
【Android Jetpack】DataStore
上一篇文章      下一篇文章      查看所有文章
加:2022-10-17 12:46:08  更:2022-10-17 12:50:27 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年5日历 -2024/5/20 3:25:48-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码