iOS学习之基础控件添加和事件绑定

这里记录iOS开发学习过程

使用环境

XCode 7.1 beta

Paste_Image.png

XCode界面


Paste_Image.png

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

XCode的各个模块功能说明,可以参照这里的一个文章。
http://blog.csdn.net/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

为什么要增加两个@synthesize,因为@synthesize和@property是配对的。
让编译好器自动编写一个与数据成员同名的方法声明来省去读写方法的声明。

运行效果:

Paste_Image.png

写在最后

通过本文,对iOS界面开发有了一些的认识,当然这仅仅是第一步,还需要在深入学习。这里只是做一个学习的记录。

根据代码写完后,需要提出一些思考才会提升。
比如:

  • IBOutlet和IBAction,只有定义这两个才可以关联,原理是什么。
  • @property和@synthesize的用法,@property还有那些用法。
  • 需要进一步学习OC的类的概念。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,504评论 4 365
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,898评论 1 300
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,218评论 0 248
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,322评论 0 214
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,693评论 3 290
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,812评论 1 223
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,010评论 2 315
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,747评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,476评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,700评论 2 251
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,190评论 1 262
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,541评论 3 258
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,206评论 3 240
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,129评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,903评论 0 199
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,894评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,748评论 2 274

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 11,631评论 4 59
  • 课程归来,好像还是很多疑惑,很多问题。晚上的航班回深圳,飞机上看了一部电影,万物生长,感觉乱七八糟,我可不会像他们...
    鲍洁阅读 209评论 0 0
  • 通过几年的学习和对自己及培训与理疗客户们拖拉问题的考查,我找到了五种导致拖拉的消极态度的自我陈述,它们让拖拉者区别...
    昭的私房家伙阅读 644评论 1 1
  • 当你笑笑的说,我要删了你。 当你笑笑着说,你要换掉所有联系方式。 我也只能笑笑。 不再去寻找。 在记忆里活着就好。...
    ee53c9ef7843阅读 127评论 0 0
  • 关注我的粉丝中有中学生家长,要求我写一写关于作文方面的文章。现在就冒昧地简单写一写,不当之处,还请高手指正。 前言...
    一凡李子阅读 576评论 1 2