实现导航

在本章中,我们将使用导航控制器并继续创建FoodTracker app的导航流程。在课程结束后,你将有一个导航策略和交互流程。当你完成时,你的app看起来如下所示:

学习目标
在课程结束时,你将学会:
1.在storyboard中的导航控制器内嵌入一个已经存在的视图控制器

2.在两个视图控制器之间创建桥梁

3.在storyboard的Attributes inspector内编辑一个segue的属性

4.通过使用prepareForSegue(_:sender:)来在视图控制器之间传递数据

5.执行一个放松的segue

6.使用stack view来创建健壮,灵活的布局(Xcode 7.0)

添加一个segue到向前导航

数据显示如预期一样,是时候提供一个方法来从meal list场景到meal场景的导航了。场景之间的转换通过调用segues(类似android的intent)

在创建一个segue之间,你需要配置你的场景。首先你把table view controller放入一个导航控制器的内部。导航控制器通过向前和向后来管理一系列view controller的转换。通过一个特定的导航控制器来管理一个view controllers集,这被称为导航堆栈,第一个添加到栈中的会成为root view controller,它永远不会从导航堆栈弹出。

添加导航控制器到你的meal list场景

1.打开你的storyboard,Main.storyboard

2.选择table view controller(你也可以通过 scene dock来选择)

3.在table view controller被选中的情况下,选择Editor > Embed In > Navigation Controller

Xcode会添加一个新的导航控制器到你的storyboard中,设置storyboard的入口点,并在新的导航控制器和已存在的table view控制器之间创建一个关系

在画布中,会有一个连接到控制器icon,它是root view controller的关系。table view controller是导航控制器的root view controller。storyboard的入口点设置为导航控制器,是因为导航控制器是一个现有的table view controller的容器。你可能注意到table view顶部有一个栏了。这就是导航栏。每一个在导航栈中获得一个导航栏的控制器,能包含向前,向后导航。接下来,你需要添加一个按钮到这个导航栏来过渡到meal场景。

检查站:运行你的app。在你table view的上方,应该可以看到额外的空间。这是导航控制器提供的导航栏。导航栏会扩展它的背景到状态栏的顶部,所以状态栏不会和你的内容重叠了

为场景配置导航栏

现在,你将添加一个标题和一个按钮到导航栏。导航栏从当前显示的导航controller中,获得他们的标题。导航控制器本身没有标题,它包裹的内容才有标题。你使用meal list的导航item设置标题,而不是在导航栏直接设置它。

在meal list配置导航栏

1.双击meal list场景中的导航栏

会出现一个光标,让你输入文本

2.输入Your Meals然后按下Return来保存

3.打开Object library

4.找到 Bar Button Item对象

5.拖动Bar Button Item对象到导航栏的最右边

一个Item的按钮会出现在,你松开的地方

6.选择 bar button item,打开 Attributes inspector

7.在 Attributes inspector,

  1. Double-click the navigation bar in the meal list scene.
  2. Type Your Meals and press Return to save.
  3. Open the Object library. (Choose View > Utilities > Show Object Library.)
  4. In the Object library, find a Bar Button Item object.
  5. Drag a Bar Button Item object from the list to the far right of the navigation bar in the meal list scene.

    A button called Item appears where you dragged the bar button item.

  6. Select the bar button item and open the Attributes inspector.
  7. In the Attributes inspector, choose Add from the pop-up menu next to the System Item option.

    The button changes to an Add button (+).

Checkpoint: Run your app. The navigation bar should now have a title and display an Add button (+). The button doesn’t do anything yet. You’ll fix that next.

You want the Add button (+) to bring up the meal scene, so you’ll do this by having the button trigger a segue (or transition) to that scene.

时间: 2024-08-02 11:59:32

实现导航的相关文章

Android 导航条效果实现(六) TabLayout+ViewPager+Fragment

TabLayout 一.继承结构 public class TabLayout extends HorizontalScrollView java.lang.Object ? android.view.View ? android.view.ViewGroup ? android.widget.FrameLayout ? android.widget.HorizontalScrollView ? android.support.design.widget.TabLayout 二.TabLayou

<iOS 导航栏>第一节:导航栏透明方法实现代码

说下导航栏的透明方法: 很多应用需要导航栏随着向上滑动,逐渐从透明变成不透明,很炫酷,大部分应用都在使用导航栏渐变效果,现附上代码然后直接将实现,一会讲下如何来实现,这一部分直接上代码. 先附上代码: 方法声明: #import <UIKit/UIKit.h> @interface IDSNavBarView : UIView - (instancetype)initWithFrame:(CGRect)frame titleImg:(UIImage *)aTitleImg; - (UILabe

第二百三十八节,Bootstrap输入框和导航组件

Bootstrap输入框和导航组件 学习要点: 1.输入框组件 2.导航组件 3.导航条组件 本节课我们主要学习一下Bootstrap的两个个组件功能:输入框组件和导航导航条组件. 一.输入框组件 文本输入框就是可以在<input>元素前后加上文字或按钮,可以实现对表单控件的扩展. 在左侧添加文字 input-group-addon样式class类,写在input同级的span里,给输入框添加一个左片段(Bootstrap)input-group样式class类,写在input外层div里,将

JS学习笔记(一): 使用原生JS 实现导航栏下多级分类弹出效果

在给静态页面静添加交互效果时遇到的问题 : 鼠标划入二级菜单时 一级菜单样 ":hover" 式无法保持 情景如下: 解决思路: 利用二级菜单的onmouseover/out事件 重新构建一级菜单 ".hover" 样式类 代码如下: CSS部分: 在原来的目标:hover样式中 增加 .hover状态 li.app_jd a:hover,li.app_jd a.hover{ background-position: -126px -397px; } li.serv

实现底部导航栏

许多的App都使用底部导航栏来实现导航功能,我们可以使用RadioGroup+RadioButton的形式或者直接Button数组的方式实现,而谷歌官方提供了FragmentTabHost来方便快捷实现底部导航栏. android.support.v4.app.FragmentTabHost 主要代码: fragmentTabHost.setup(this, getSupportFragmentManager(), R.id.layout_content); for (int i = 0; i 

音乐导航

<!doctype html> <html> <head> <title>音乐导航</title> <script> *{margin:0;padding:0;} #nav{ width:100%; height:56px; margin-top:50px; background:#1f0a31 url(images/topbg1.jpg) no-repeat; background-size:100%;/*背景的大小*/ backg

css -- 导航条

1.垂直导航条 HTML: <ul class="nav"> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a href="">Home</a></li> <li><a hre

【REACT NATIVE 系列教程之五】NAVIGATOR(页面导航)的基本使用与传参

本站文章均为 李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2248.html 今天介绍一种应用开发中常用的负责页面切换及导航功能的组件:Navigator 一:Navigator 对于页面导航其实主要功能就是:每个页面都知道本身应该切换到哪个页面,并且切到的页面会记录从哪里来,如果要返回的话,知道返回到哪个页面.这一切都不需要再用逻辑管理!而且每个页面之间也可以进行参数传递,

网易首页模仿心得---导航栏CSS篇

不仅是CSS方面学习到很多技法,而且由于自己也懂一些SEO,对网易的一些CSS+SEO优化方法,也收获颇多!(本人也是平面设计师,很喜欢网易这类简约型的网页) 好了,在此之前强烈推荐大家可以尝试一下sublime text3 这款编辑器,之前用的editplus,感觉前者真的非常强大,很多插件会让网页开发的速度快很多,很多!! 我首先看了网易的重置CSS样式表和mata标签,其中mata标签中有一行 <meta name="robots" content="index,

HTML练习_三级导航

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <style type="text/