iOS开发3——多个UI界面、UINavigationBar的使用
本文最后更新于 438 天前,其中的信息可能已经有所发展或是发生改变。

本文全部原创,转载请务必注明出处。

在上一篇教程里,我们开发出了一个简单的应用程序——但是,这个App只有一个视图。如果我们要在这个App里添加更多的功能,我们必须要使用多个ViewController来完成。今天,我们就来使用UINavigaitonBar(UI导航栏)来完成多个UI界面的功能。

什么是UINavigationBar?

就拿我们最常用的App——微信来说,聊天的界面上面那一条类似工具栏的,就叫UINavigationBar。

如何在Storyboard中使用一个UINavigationBar?

那就要用到UINavigationController这个视图控制器了。

点击工具栏上的“+”按钮,找到“Navigation Controller”,拖进Storyboard的空白处。

Storyboard中新出现了2个手机界面。只有其中最左边的那个是UINavigationController,右边的那个是Xcode自动创建的。所以我们把右边的那个删掉(也就是删掉图片中3个手机中的中间的那一个。)

  • 点击连接着左边的手机和中间的手机的那个箭头。
  • 按下Delete键。

  • 接着点击绿色框圈起来的按钮,出现视图管理器。
  • 找到“Root View Controller Scene”(红框的部分)
  • 点击删除。
  • 好了,界面上只有2个手机视图了。

接下来…

  • 点击“+”按钮,找到View Controller,拖进Storyboard中间的位置。
  • 点击左边的Navigation Controller视图。
  • 按下Control键。
  • 将鼠标指针拖动到新的View Controller视图上面,松开。
  • 弹出弹窗,选择Root View Controller。
  • 看看新的UIViewController上面是不是多了一个导航栏呢?
  • 点击导航栏,在右边的属性查看器中输入“主页”。
  • 在这个主页视图中拖入一个按钮。
  • 按钮的标题改成“分解质因数”。

  • 点击新的按钮,按住Control键,拖动到昨天的ViewController的空白处,选择“show”。
  • 昨天的ViewController上多出来了一个导航栏,而且还有返回按钮。在这个导航栏的标题上填入“分解质因数”。
  • 这样,点击主页视图上的按钮,就可以进入“分解质因数”界面了。

但是,你会发现昨天做的View Controller上有个短箭头,指的是应用启动的时候会先加载这个View Controller。这可不是我们想要的。我们的得把这个箭头拖动到最左边的Navigation Controller身上。这样,App启动的时候,就会先加载这个Navigation Controller。

点击运行。是不是就是我们想要的效果?

时间有限,今天就介绍到这里了。?️。一行代码都没敲。在下一篇博客里,在“主页”,我们会添加更多的按钮连接到其他View Controller,完成其他功能。

由于时间有限,不可能每天都更新,并且讲的很透彻,所以关于iOS应用开发,大家可以看看苹果官方的教程(这个教程是16年的,里面有些代码过时了,但是还是可以学习的。)

https://developer.apple.com/library/archive/referencelibrary/GettingStarted/DevelopiOSAppsSwift/

版权声明:本文为博主NSObject 23786原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://nth.ink/ios-macos-development/P375.html

(广告由我们的赞助商提供,内容与本站无关)
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇