iOS控件绑定事件

最新推荐文章于 2022-08-02 13:41:56 发布

魔地主

最新推荐文章于 2022-08-02 13:41:56 发布

阅读量1.3k

点赞数 1

分类专栏： iOS 文章标签： iOS

iOS 专栏收录该内容

16 篇文章

订阅专栏

使用环境

XCode 7.1 beta

Paste_Image.png

XCode界面

Paste_Image.png

在Xcode中很多地方只要用鼠标单击就可以了

XCode的各个模块功能说明，可以参照这里的一个文章。
http://blog.youkuaiyun.com/shulianghan/article/details/38424965

学习目标

学会添加控件
学会设置控件的基本属性
学会绑定控件和事件
学会控件和属性绑定

创建项目

新建项目，进行设置项目名称等，保存目录。

Paste_Image.png

左上角设置设备类型，然后点击【运行】按钮

Paste_Image.png

效果，是一个空白的界面，那就对了，因为我们没有放置任何的控件。

增加控件

点击【Main.storyboard】文件，这里就可以放置控件了。

StoryBoard 的本质是一个 XML 文件，描述了若干窗体、组件、Auto Layout 约束等关键信息。你可以用文本工具打开来看看。

Paste_Image.png

我们可以从右下角的【库面板】上，把控件拖到View界面上

Paste_Image.png

左下角按钮可以切换视图显示效果。

拖动一个Label到View上

Paste_Image.png
设置Label属性
点击右侧的【属性检测器】，可以设置名称，字体颜色，字体大小，等。

Paste_Image.png

登录界面
在往View上面拖Label,Button,Text,调整布局，最后效果如下：

Paste_Image.png

【Cammand + R 】运行效果：

Paste_Image.png

此时，基础界面已经搭建完成了。接下来，我们会把控件和ViewController进行一些关联，实现登录按钮的事件。

控件和事件绑定

在ViewController.h里面，定义userLogin方法：

@interface ViewController : UIViewController
- (IBAction) userLogin:(id)obj;
@end

在ViewController.m里面，实现userLogin方法：

@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.
}
- (IBAction)userLogin:(id)obj {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Information" message:@"Hellworld" delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
}
@end

接下来，我们把登录按钮和这个事件进行绑定。
回到【Main.storyboard】上，点击登录按钮，
按住【Control】键，这时候会出现带箭头的线，把箭头指向【View Controller】，然后放开。

Paste_Image.png

选择我们刚才写好的userLogin事件。
我们会在登录按钮的【连接检测器】上看到关联：

Paste_Image.png

如果想去掉关联，点击那个小小的关闭按钮即可。

我们，再来【Command+R】运行下看看，点击登录按钮：

Paste_Image.png

出现了，一个Hello world弹窗了。
这还不够，我们想把文本框里面的用户名和密码显示出来。

控件和字段绑定

我们再ViewController.h里面，添加字段，并相应设置字段的属性。

#import <UIKit/UIKit.h>

@interface ViewController : UIViewController{
    UITextField *tfUserName;
    UITextField *tfPWD;
}
@property (nonatomic, retain) IBOutlet UITextField *tfUserName;
@property (nonatomic, retain) IBOutlet UITextField *tfPWD;
- (IBAction) userLogin:(id)obj;

@end

再回到【Main.storyboard】,选择用户名的文本框，点击【右键】

Paste_Image.png

鼠标移到【New Referencing Outlet】后面的小圆圈上，此时会出现一个加号，然后点击加号，拖动到【View Controller】然后放开鼠标，就会看到我们刚才定义的两个属性了。

Paste_Image.png

选择tfUserName。
同样我们可以在文本框的【连接检测器】上看到关联。

Paste_Image.png

同样我们关联密码的文本框和tfPWD.

关联好后，我们就可以在【ViewController】里面，通过tfUserName和tfPWD来获取文本框的内容了。

实现显示文本框内容

在ViewController.m上，增加获取文本框内容和显示的代码如下：

@implementation ViewController

@synthesize tfUserName;
@synthesize tfPWD;

- (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.
}

- (IBAction)userLogin:(id)obj {
    NSString *username = [tfUserName text];
    NSString *pwd = [tfPWD text];
    NSString *message = [NSString stringWithFormat:@"用户名：%@ 密码：%@", username, pwd ];
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Information" message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
}
@end