swift-导航栏使用

1. 页面关系

(1)有层级关系(页面需添加导航):push/pop(有导航能返回)

  • push(进栈):从右向左切换到子页面
  • pop(出栈):从左向右返回到父页面
 self.navigationController?.popViewController(animated: true)//返回父级

(2)无层级关系(页面不用加导航):present/dismiss(无导航不能直接返回)

  • present(模态弹出):从下向上弹出新页面
  • dismiss(退场):从上向下消失

2. 为当前页面添加导航

在xcode中选中当前页面控制器后点击菜单栏:Editor->Embed ->Navigation Controller。

嵌入导航.png

备注:在场景结构栏中可看到新增的导航场景,导航场景中包含了默认的导航控制器和导航条,即导航的MVC都有了。我们需要设置的是M,即给用户看到的导航条的样式,其它的导航会自动帮我们做好。

3. 设置导航条标题和样式

3.1 为导航栏添加左右2个按钮

(1)在导航栏添加左右2个item(图片类型)

在导航栏添加左右2个item.png

(2)为左右2个item分别添加资源图片
为item添加资源图片.png

现象:为item添加资源图片后,显示的图片色调和原始图片的色调不一样。
资源图片原始样式.png

分析:导航条的主题色tint默认是和系统一样(蓝色)。导航条的主题色默认会把放置在它上面的图片背景颜色同化。
导航条的主题色tint默认是和系统一样.png

需要:根据需求,可能我们需要item的色调和导航保持一致,也可能我们需要保持原始图片的色调。
保持原图色调

// MARK: - 界面加载
    override func viewDidLoad() {
        super.viewDidLoad()

        //设置导航左右图像的渲染模式采用原来的颜色
        //self.navigationItem.leftBarButtonItem?.image?.withRenderingMode(.alwaysOriginal)/对storyboard上的的设置没起作用
        //self.navigationItem.rightBarButtonItem?.image?.withRenderingMode(.alwaysOriginal)
        self.navigationItem.leftBarButtonItem?.image = UIImage(named: "leftTopImage")?.withRenderingMode(.alwaysOriginal)
        self.navigationItem.rightBarButtonItem?.image = UIImage(named: "rightTopImage")?.withRenderingMode(.alwaysOriginal)
        
    }
    

注意:使用代码实现保持原图色调时,storyboard只保留2个空白item,title和image都要置空才起作用。

storyboard只保留2个空白item.png

3.2 设置导航默认的返回文字改为箭头图标

  //导航默认的返回文字改为箭头图标
self.navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: nil, action: nil)

3.3 设置导航条标题(图片版)

备注:默认中间位置是文字

默认导航标题是文字.png

 //为导航标题设置一个单独的视图,默认标题(只能是文字)就会不起作用
        self.navigationItem.titleView = UIImageView(image: UIImage(named: "ofoLogo"))
self.navigationItem.titleView = UIImageView(image: UIImage(named: "ofoLogo")) //设置导航标题为图片
    

3.4 设置导航条标题(文字版)

设置导航条标题.png

说明:默认导航是小标题,IOS11后推荐使用大标题。
使用大标题.png

备注:使用大标题时,页面向下滑动默认大标题会切换为小标题,上滑至顶部时恢复大标题。

4. 导航栏定制

4.1. 自定义主题色theme

IOS-自定义颜色

4.2. 导航栏标题字体颜色使用主题色

(1)通过导航属性栏直接设置标题字体颜色

导航栏标题字体颜色设置.png

备注:运行时报错,属于xcode的bug。可采用代码设置的方式来解决。
(2)通过代码来设置导航标题字体颜色

override func viewDidLoad() {
        super.viewDidLoad()

        //设置大标题字体颜色
        navigationController?.navigationBar.largeTitleTextAttributes = [
            NSAttributedString.Key.foregroundColor : UIColor(named: "theme")!
        
        ]
        
        //设置小标题(默认标题)字体颜色
        navigationController?.navigationBar.titleTextAttributes = [
            NSAttributedString.Key.foregroundColor : UIColor(named: "theme")!
            
        ]
        
        
    }

4.3. 子页面导航栏透明

//导航栏定制-透明效果(背景图片和阴影图片设为空)
navigationController?.navigationBar.setBackgroundImage(UIImage(), for: .default)
navigationController?.navigationBar.shadowImage = UIImage()

备注:tablebiew默认会在导航下面,当设置导航栏透明时,进入子页面时顶部会留白边。

页面的空白解决.png

4.4. 返回按钮标题留空

返回按钮标题留空.png

4.5. 自定义返回按钮图片

自定义返回按钮图片.png

4.6. 设置自定义的返回按钮颜色和主题色相匹配

//导航栏定制-返回按钮颜色和主题色相匹配(导航条的主题色改为app自定义的主题色,而导航条的主题色默认会把返回按钮的颜色同化)
navigationController?.navigationBar.tintColor = UIColor(named: "theme")

4.7. 滑动时隐藏导航

隐藏导航.png

4.8 其它设置

override func viewDidLoad() {
        super.viewDidLoad()

        //导航栏
        self.title = "二维码/条码"
        navigationController?.navigationBar.barStyle = .blackTranslucent
        navigationController?.navigationBar.tintColor = UIColor.white
        //navigationController?.navigationBar.tintColor = UIColor(named: "theme")

    }

5. 导航引用(编码给控制器添加导航栏)

参考PageMenu分页控制器(基础篇)-相同分页页面的实现中的问题及解决

6. 拓展

(1)页面标题设置

self.title = "页面标题"
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,686评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,668评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,160评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,736评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,847评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,043评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,129评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,872评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,318评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,645评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,777评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,470评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,126评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,861评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,589评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,687评论 2 351

推荐阅读更多精彩内容