StoryBoard初探(一):实现简单的页面跳转与返回

前言

苹果推出故事版很久了,一直没有深入学习过。最近打算尝试用StoryBoard做高保真交互App原型,决定学习下。相对于IB来讲,StoryBoard几乎不用手写代码,便能实现页面交互,这一点很适合会Xcode的同学用来做快速原型开发。

实现简单的页面跳转

新建工程,选择Single View Application,Xcode生成的工程模板中会自动使用StoryBoard.打开Main.storyboard文件,可以像IB一样,拖拽视图对象到ViewController的View上。如图,简单的加一个页面标示UILabel标签和一个UIButton按钮:

向主窗口中拖拽一个UIViewController对象,作为第二个页面,按住Ctrl键,拖拽按钮连线新添加的页面

松开鼠标在弹出的黑色悬浮框列表中选择Action Segue的类型为:Modal,这样在点击橙色按钮之后,页面2将从页面1底部弹出

页面2返回页面1,在页面2上添加一个按钮,在ViewController.m文件中实现一个带UIStoryBoardSegue类型参数的IBAction方法

- (IBAction)unwindSegue:(UIStoryboardSegue *)sender{
    NSLog(@"unwindSegue %@", sender);
}

Ctrl连线页面2上的按钮到ViewController的Exit,并关联unwindSegue:方法

模拟器中的运行效果:

代码实现

页面1跳转页面2:先清除按钮连线,然后Ctrl连线ViewController到ViewController2,选择Modal类型

选中ViewController与ViewController2之间的连接,并设置连接的Identifier为:2vc2

在ViewController.m中添加代码,并关联按钮

- (IBAction)presentVC2:(id)sender {
    NSLog(@"代码实现页面跳转");
    [self performSegueWithIdentifier:@"2vc2" sender:sender];
}

页面2返回页面1,先清除按钮连线,然后在ViewController2.m中添加IBAction方法并关联返回按钮:

- (IBAction)backAction:(id)sender {
    [self dismissViewControllerAnimated:YES completion:nil];
}

时间: 2024-12-14 18:42:43

StoryBoard初探(一):实现简单的页面跳转与返回的相关文章

Vue简单项目(页面跳转,参数传递)

1.和上篇文章一样的建文件的步骤 2.建立成功之后,在src文件夹下面添加新的文件夹pages 3.在pages里面添加新的文件Home.Vue和Detail.Vue 4.设Home.Vue为项目启动的初始页,在routes下的index.js里面添加以下代码,这时即可设为Home为初始页(App.Vue不可删除) 5.在Home.Vue中实现跳转的代码 <router-link to="/Detail">跳转到详情页</router-link> 6.启动项目,

.NET 页面跳转、返回与刷新

页面刷新 window.location.reload(); 跳转指定页面  Response.Redirect(Url); 返回上一页 window.history.back(); 返回下一页 window.history.forward(); 返回到指定页面 window.history.go(index);  //index代表返回的页面序号,-1为上一页 返回页面时刷新 由于缓存的问题,直接使用js代码返回页面会加载过期的页面内容,这是需要关闭页面缓存,这样返回时就会重新加载新的页面内容

Vue -- element-ui el-table 点击tr项页面跳转,返回后缓存回显点击项

页面跳转反显 点击table tr项后,页面跳转到下级页面,返回回显搜索条件.当前页码.并将点击项select选中.滚动条也被记录回显跳转时滚动的位置 思路: 页面临时缓存我选择使用sessionStorage,点击tr行将搜索条件和页码,点击行的id进行存储 data(){ return { } } setSessionStore (name, content) { if (!name) return if (typeof content !== 'string') { content = J

单页面跳转添加返回和跳转动画(仿app) 只对单页面和跳转有用,我用的是angualr,有不会的可以私信问我。

p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #596972 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #2eafa9 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 15.0px Consolas; color: #97a700 } span.s1 {

通过sessionStorage会话存储实现页面跳转之后返回到当前位置 (刷新跳回顶部)【2】

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible"

使用storyboard实现页面跳转,简单的数据传递

在storyboard中,界面的跳转是通过segue来实现的,利用它,省去了方法内写入跳转的代码. 一 视图跳转 <StoryBoard下的视图跳转> 我们知道:segue共有三种类型:push,modal,和custom.如下图://01 简单说下这三个的作用:使用导航栏压进新的控制器(push),模态的加载视图控制器(modal),自定义(custom). 好了,废话少说,现在开始我们的旅行. 1,首先建立一个Single View 模板的项目,记得勾选上storyboard.然后打开它,

【转】使用storyboard实现页面跳转,简单的数据传递

由于最近才接触到IOS,苹果已经建议storyboard来搭建所有界面了,于是我也追随时尚,直接开始使用storyboard.(不料在涉及到页面跳转的时候,遇到的问题是:点击后没有任何反应)众所周知,在storyboard中,界面的跳转是通过segue来实现的,利用它,省去了方法内写入跳转的代码. 一 视图跳转 <StoryBoard下的视图跳转> 我们知道:segue共有三种类型:push,modal,和custom.如下图://01 简单说下这三个的作用:使用导航栏压进新的控制器(push

JavaScript学习笔记-简单的倒计时跳转页面

<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title>简单的倒计时跳转页面</title> </head> <body> <p><span id="time&qu

swift 下storyboard的页面跳转和传值

------------------1. 最简单的方法 拖拽, 这个就不用多解释了吧. 直接拖拽到另一个视图控制器, 选择 show, 就行了. 2. 利用 Segue 方法 (这里主要是 方法1 的传值) 连好线, 点击 连线中间部分, 设置 Identifier. 然后 调用 performSegueWithIdentifier 方法. (注: Demo 里面, 是直接将 TableViewController 和 SecondViewController 进行连线, 而不是 点击 Cell