iOS开发系列——Storyboard

到目前为止我们还没有解释我们的程序是如何显示默认视图界面的。做过WinForm程序的朋友都知道每个Window窗口界面都有一个设计器(对应一个设计文件),其实在IOS中也可以通过设计工具设计界面不用编写代码,这个工具就是Interface Builder。用Interface Builder编辑的文件在iOS5之前是一个“.xib”文件,从IOS5开始进行了改进,使用“.storyboard”文件进行设计。其实在上面我们已经看到这个文件,这里重点说明一下Storyboard文件的使用。

小编有个自己学习交流群681503716(验证编号:大鲨)在iOS学习道路上的小伙伴可以加一下哦~

首先我们打开Main.storyboard,此时可以看到一个Interface Builder界面设计器出现在我们眼前:

在这个界面中整个核心就是右侧视图控制器ViewController,在ViewController中有一个视图UIView,这个视图用来放置其他用户操作控件。视图控制器左侧的箭头表示这个视图控制器是个主视图控制器,程序启动之后默认就会直接显示这个视图控制器的视图。我们可以在项目属性中通过修改“Main Interface”属性来修改主视图控制器。

这里我们不妨从Xcode右侧工具栏Object Library中拖放一些组件在上面简单完成一个登录布局。

要实现这个登录,那么接下来就是事件和属性绑定的问题,大家应该可以猜到登录的逻辑代码肯定在ViewController.m中编写,那么storyboard文件是如何关联到这个类的呢?如果我们在storyboard界面选中ViewController在Xcode右侧切换到Identity Inspector视图就会发现里面当前设置的是ViewController类,通过这个设置Main.storyboard和ViewController关联在一起。

那么如何在代码中读取两个TextField的值并通过点击按钮触发相关事件验证登录合法性呢?要想在代码中使用UITextField,并且添加按钮点击事件,则必须在ViewController.h中定义两个UITextField属性和一个登录方法。

上面代码我们需要解释一下IBOutlet、IBAction,其余代码和我们之前写的ObjC没有任何区别。

  • IBOutlet:IBOutlet没有做任何操作,它的唯一作用就是告诉Interface Builder这个属性可以被关联到其中某个控件(在代码中可以看到代码前面多了空心圆点)。
  • IBAction:其实就是void,只是当你定义为IBAction在Interface Builder中可以关联到某个控件的事件方法(后面的关联操作将会看到,而且我们在代码中也可以看到代码前面多了空心圆点);

下面看一下storyboard中的控件和代码中定义的属性和事件如何关联。Xcode为我们提供了几种方式来实现代码和storyboard控件的关联:

1.拖拽控件到代码中(首先点击Xcode右上方“Show the Assistant editor”切换对应视图,然后在代码中打开.h文件,同时打开Interface Builder,按住ctrl键拖拽控件到代码中相应的位置进行关联),关联后属性或方法前的空心圆变成实心表示已经关联到具体控件(注意:事实上,从控件拖拽到代码时如果代码中没有定义对应的属性和方法Interface Builder会自动生成代码)。

2.从控件场景中拖拽控件到代码,关联后属性或方法前的空心圆变成实心表示已经关联到具体控件。(在Interface Builder中点击左下角“Show Document outline”显示控件结构树,选中相应的控件按住Ctrl键拖拽到代码中的属性或方法上)

3. 在控件上右键找到对应的属性或方法关联到代码中对应的属性或方法即可,关联后属性或方法前的空心圆变成实心表示已经关联到具体控件。

4.与方法3类似,不再截图,只是通过View Control Scene中的控件右键来关联,关联后属性或方法前的空心圆变成实心表示已经关联到具体控件。(在Interface Builder中点击左下角Show Document outline显示控件结构树,选中相应的控件右键拖拽到代码中的属性或方法上)

5.对于前面几种方法其实我们还可以直接从代码拖拽到控件上面,这里简单演示一种,其他情况大家可以自己试验。

如果要删除关联,可以采用第三、第四种方式在控件上右键,在关联菜单中找到对应的关联删除即可。此外需要注意对于一个控件而言可能有多个事件,当我们使用第三种或第四种方式直接选择具体某个事件关联到login:方法自然没有问题,但是第一、第二、第五种方式没有提示我们关联到哪个事件而是使用一个控件的默认事件(对于UIButton就是Touch Up Inside事件)。

既然控件和代码属性或方法已经做了关联,这里我们看一下具体效果,这里简单修改一下ViewController.m

//
//  ViewController.m
//  FirstIOS
//
//  Created by Kenshin Cui on 14-2-23.
//  Copyright (c) 2014年 Kenshin Cui. All rights reserved.
//

#import "ViewController.h"

@interface ViewController ()

@end

@implementation ViewController
            
- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

-(void)login:(UIButton *)btn{
    if ([_phoneNumber.text isEqual:@"123"]&&[_password.text isEqual:@"456"]) {
        NSLog(@"登录成功!");
    }
}

@end

这里实现了login:方法模拟登录的过程,可以发现当在手机号码中输入“123”,在密码中输入“456”点击登录会输出”登录成功!“。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Android小菜鸡

解决H5在IOS的WebView下上拉下拉会带动整个WebView出现空白

做Web应用,碰到问题,当拖动页面的时候,IOS的整个WebView会被拖动,导致上下方有灰色空白出现,并且影响内部滑动的体验。 在网上找了个神秘代码,大概意...

6124
来自专栏小俊博客

Windows10中的键盘快捷方式

Windows 徽标键 + Shift + C打开超级按钮菜单Windows 徽标键 + D显示和隐藏桌面Windows 徽标键 + Alt + D显示和隐藏桌...

1322
来自专栏mathor

matlab—图形界面(GUI)程序设计

matlab也能做应用程序,类似于c++的mfc,这点我也是才知道,大吃一惊,原来现在可视化编程应用如此广泛,连matlab都可以,接下来我就会讲解如何通过ma...

2682
来自专栏前端布道

前端开发必备之Chrome开发者工具(上篇)

本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介...

37011
来自专栏张戈的专栏

一行代码彻底禁用WordPress缩略图自动裁剪功能

记得在博客分享七牛缩略图教程的时候,提到过 WordPress 默认会将上传的图片裁剪成多个,不但占用磁盘空间,也会拖慢网站性能,相当闹心! 当时也提到了解决办...

3776
来自专栏青玉伏案

IOS开发之自动布局显示网络请求内容

  在上一篇博客中详细的介绍了IOS开发中的相对布局和绝对布局,随着手机屏幕尺寸的改变,在App开发中为了适应不同尺寸的手机屏幕,用自动布局来完成我们想要实现的...

1916
来自专栏Java帮帮-微信公众号-技术文章全总结

Java开发必会框架Struts2第四天

一、OGNL配合通用标签的其他使用 1、iterator标签(很重要) ? ? ? 2、OGNL投影(了解) 2.1、使用过滤条件投影 ? 2.2、投影指定属性...

35412
来自专栏向治洪

react native实现上拉加载下拉刷新

前言 我们在做原生app开发的时候,很多场景都会用到下拉刷新、上拉加载的操作,Android中如PullToRefreshListView,ios中如MJRef...

2778
来自专栏小狼的世界

Vimperator的有用操作

可以有一个变通的办法复制,先按下"Ctrl+V",然后再用快捷键复制,接下来Vim的快捷键又起作用了。现在还有一个困惑的地方是不用鼠标,如何选中网页中自己希望的...

883
来自专栏从零开始学自动化测试

Selenium+python自动化83-chrome手机wap模式

一、前言 这里是群里(QQ群:226296743)风神出60大洋悬赏的问题,学会这篇就是赚了60大洋了! 我的环境: - chrome 62 - chrome...

4354

扫码关注云+社区

领取腾讯云代金券