UI第一话 -- UILabel,UITextField,UIButton

通过对基础部分的初步认识,今天我们将开始对UI进行初学者之旅啦!
废话不多说,看重点:

UILabel(标签)

UILabel:是iOS中提供的用来显示文字的控件,继承自UIView.
核心功能:显示文字.
既然是继承自UIView的类,那么就表明UILabel可以使用UIView中的方法,但是UIView虽然是iOS中提供的视图的基类,提供了视图的公共的属性以及公共的方法,并没有具体的功能(显示文字,输入文字等).

一般来说大致分为4个步骤:
创建视图对象 -> 配置相关属性 -> 添加到父视图 -> 释放所有权
那么执行如下代码:

//1.创建视图对象
UILabel *aLabel = [[UILabel alloc]initWithFrame:CGRectMake(30, 100, 300, 200)];
//2.配置相关属性
aLabel.backgroundColor = [UIColor blackColor];
//2.1显示文字
aLabel.text = @"Microsoft is the biggest company Application windows are expected to have a root view controller at the end of application launch";  
//2.2文字颜色
aLabel.textColor = [UIColor whiteColor];
//2.3文字的对齐方式
aLabel.textAlignment = NSTextAlignmentCenter;
//2.4设置标签多行显示
aLabel.numberOfLines = 0;
//2.5设置行的截取方式
aLabel.lineBreakMode = NSLineBreakByWordWrapping;
//2.6阴影颜色(文字阴影)
aLabel.shadowColor = [UIColor redColor];
//2.7阴影偏移量(改变阴影和实体字的距离)
aLabel.shadowOffset = CGSizeMake(5, 5);
//2.8文字字体(字体样式和大小)
//2.8.1使用系统样式改变字体大小
//aLabel.font = [UIFont systemFontOfSize:22];
//2.8.2使用加粗样式改变字体大小
//aLabel.font = [UIFont boldSystemFontOfSize:17];
//2.8.3修改字体样式和字体大小
aLabel.font = [UIFont fontWithName:@"Zapfino" size:14];
//3.添加到父视图上
[self.window addSubview:aLabel];
//4.释放所有权
[aLabel release];

会产生一个如图所示的效果图:

代码效果图.png

下面我会对一些代码进行解释,这里主要解释步骤"配置相关信息"的代码块"
(注:在学习OC的时候我们都应具备查阅API的能力了,在此不过多的阐述UILabel的方法)

//2.1显示文字
//UILabel的最终要的作用就是"显示文字",既然是显示文字那么text毫无疑问是UILabel最核心的方法.
aLabel.text = @"Microsoft is the biggest company Application windows are expected to have a root view controller at the end of application launch";

到这里其实UILabel算是已经结束了,因为他的任务显示文字已经完成.
那么为何还有那么多代码呢?
那是因为虽然你的作用已经发挥,但是没有其他相应的辅助给你助攻,你怎么完成更加酷炫的击杀?

//2.3文字的对齐方式
aLabel.textAlignment = NSTextAlignmentCenter;

通过查阅API了解到方法textAlignment该如何的使用

textAlignment的API.png

然后进入到代码内部可以看到枚举的各种属性,根据自己的需求选择属性:

    typedef NS_ENUM(NSInteger, NSTextAlignment) {
    NSTextAlignmentLeft      = 0,    // Visually left aligned
#if TARGET_OS_IPHONE
    NSTextAlignmentCenter    = 1,    // Visually centered
    NSTextAlignmentRight     = 2,    // Visually right aligned
#else /* !TARGET_OS_IPHONE */
    NSTextAlignmentRight     = 1,    // Visually right aligned
    NSTextAlignmentCenter    = 2,    // Visually centered
#endif
    NSTextAlignmentJustified = 3,    // Fully-justified. The last line in a paragraph is natural-aligned.
    NSTextAlignmentNatural   = 4,    // Indicates the default alignment for script
} NS_ENUM_AVAILABLE_IOS(6_0);

设置行的截取方式和文字的对齐方法类似,不过这次是进入到lineBreakMode枚举法中找到自己需要的方式

//2.5设置行的截取方式
aLabel.lineBreakMode = NSLineBreakByWordWrapping;

字体的设置就是将该字体的名字赋值即可:

//2.8.3修改字体样式和字体大小
aLabel.font = [UIFont fontWithName:@"Zapfino" size:14];

UITextField(输入框)

UITextField(文本输入框):是iOS中提供的用来显示文字和编辑文字的控件
核心功能:文字编辑
首先先创建一个文本框:

//1.创建输入框对象
UITextField *textField = [[UITextField alloc]initWithFrame:CGRectMake(30, 100, 300, 40)];
//2.配置相关属性
textField.backgroundColor = [UIColor yellowColor];
//3.添加到父视图
[self.window addSubview:textField];
//4.释放所有权
[textField release];

效果图:


新建文本框

这样就创建了一个简单的文本输入框,那么只有这么单调(蛋疼)的效果你会满意么??所以呢,我们需要对他进行一些相关配置:
功能1(vip):设置提示文字;

textField.placeholder = @"请输入...";

看图:


添加提示文字.png

这个由苹果公司给出的API作用是,如果当前的文本框没有输入内容的时候会显示一个由开发者设定的的文字或字符.

功能2(vip):设置框内的内容;

textField.text = @"我爱你们哟";
设置内容

很明显,当你设置有内容的时候,提示的内容会"消失",当你将内容删掉的时候,他会自动的"出现".这个功能相信大家都是不陌生的.比如QQ的登录界面,如果你登录之后,会自动保存账号信息,当你下次登录的时候会保留你上次登录的账号.相当多的登录界面都会采用这种方式来方便用户使用.

关于一些其他的比较常用的方法:

//2.3设置文字颜色
textField.textColor = [UIColor blueColor];
//2.4设置文字对齐方式
textField.textAlignment = NSTextAlignmentCenter;
//2.5设置字体大小
textField.font = [UIFont boldSystemFontOfSize:19];
//2.6当第一次选中输入框时,是否清除输入框的内容
textField.clearsOnBeginEditing = YES;
//2.7设置清除按钮模式
textField.clearButtonMode = UITextFieldViewModeWhileEditing;
//2.8设置输入框样式
textField.borderStyle = UITextBorderStyleRoundedRect;
//2.9设置输入框能否编辑 -- 关闭用户交换
textField.userInteractionEnabled = YES;
//2.10设置键盘类型
//textField.keyboardType = UIKeyboardTypeNumberPad;
//2.11设置键盘外观样式
textField.keyboardAppearance = UIKeyboardAppearanceDark;
//2.12设置输入框内容以安全模式显示
textField.secureTextEntry = YES;
textField.clearsOnBeginEditing的API
textField.userInteractionEnable的API

通过查阅API,我们可以了解到这两个API的返回值都是BOOL类型,那么我们可以将它理解为开关的意思.

功能3(vip):代理(检测输入框的各种行为)

textField.delegate = self;//代理制定为AppDelegate对象

在设置代理前我们要先接受代理协议

接受协议

那么既然接受了协议我们就要完成协议的内容

协议内容

注意标记,协议默认的关键字是@required表示必须完成的"条件",而@optional表示可以完成,也可不完成.

我们既然是学习那么我们最好都实现一下,以便更加了解协议内容和代理的实现

#pragma mark - UITextFieldDelegate
//输入框询问是否可以编辑. YES -- 可以编辑  NO -- 不能编辑
- (BOOL)textFieldShouldBeginEditing:(UITextField *)textField {
    NSLog(@"%s", __FUNCTION__);//打印当前方法名
    return YES;
}
//该方法被触发时,意味着输入框已经可以编辑,已经进入编辑状态
- (void)textFieldDidBeginEditing:(UITextField *)textField {
     NSLog(@"%s", __FUNCTION__);//打印当前方法名
}
//输入框询问是否可以取消编辑状态 -- 键盘是否可以回收
- (BOOL)textFieldShouldEndEditing:(UITextField *)textField {
     NSLog(@"%s", __FUNCTION__);//打印当前方法名
    return YES;
}
//该方法被触发时,输入框已经结束编辑状态
- (void)textFieldDidEndEditing:(UITextField *)textField {
     NSLog(@"%s", __FUNCTION__);//打印当前方法名
}
//当输入框内容发生变化时,就会触发,能够及时回去到输入框最新的内容
- (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string {
     NSLog(@"%s", __FUNCTION__);//打印当前方法名
    return YES;
}
//输入框询问是否可以清除内容
- (BOOL)textFieldShouldClear:(UITextField *)textField {
    NSLog(@"%s",__FUNCTION__);//打印当前方法名
    return YES;
}
//点击键盘右下角按钮触发,经常用来回收键盘,取消编辑状态
- (BOOL)textFieldShouldReturn:(UITextField *)textField {
    //回收键盘
    [textField resignFirstResponder];      
    NSLog(@"%s",__FUNCTION__);//打印当前方法名
    return YES;
}

到次我们已经对UITextFiled初步的认知,剩下的就是看你自己了.

UIButton(按钮)

UIButton(按钮):是iOS中提供的用来相应用户交互的控件,可以显示文字,也可以显示图片.

核心功能:响应用户点击事件
使用Button需注意两点:
1.创建对象使用便利器构造方法,无需release
2.记得要制定按钮的frame
那么我们来创建一个按钮:

//1.创建按钮对象
UIButton *aButton = [UIButton buttonWithType:UIButtonTypeSystem];
//2.配置相关属性
aButton.backgroundColor = [UIColor blackColor];
aButton.frame = CGRectMake(30, 100, 300, 40);
//3.添加到父视图
[self.window addSubview:aButton];

按钮

是不是感觉和Label一样?别急撒客官继续看

//2.1设置按钮文字 -- 正常状态显示文字
[aButton setTitle:@"登陆" forState:UIControlStateNormal];//正常状态未点击
[aButton setTitle:@"你妹" forState:UIControlStateHighlighted];//高亮状态点击之后
//2.2 设置按钮文字颜色
[aButton setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];//正常状态文字颜色
[aButton setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted];//高亮文字颜色
//2.3 给按钮添加响应事件 -- 对点击做出响应
    //addTarget参数:指定事件的响应对象 self -- 是当前Appdelegate类的对象
    //action参数:指定事件的响应方法 由target调用
    //forControlEvents参数:指定事件的响应时间
[aButton addTarget:self action:@selector(handleAction:) forControlEvents:UIControlEventTouchUpInside];

//handleAction:方法可以有参数,但是最多只能有一个参数,而参数为点击的按钮对象
//当前Appdelegate对象调用该方法,处理按钮点击事件
-(void)handleAction:(UIButton *)sender {
//需求1.更改window的颜色 -- 灰色
//self.window.backgroundColor = [UIColor grayColor];
//需求2.随机背景颜色
sender.backgroundColor = [UIColor colorWithRed:arc4random() % 256 / 255.0 green:arc4random() % 256 / 255.0 blue:arc4random() % 256 / 255.0 alpha:1.0];}

是不是感觉不一样了??好好学习吧亲~~
到这里就完了?可能不~~还没练习就像跑??

任务

看题~
完成如下效果:


任务一

任务二

任务三

是不是觉得毫无难度?
那么下面呢~~

任务一加强

是不是也不算太难??那你错了哦~~看需求:
1、用UILabel、UITextField、UIButton替换UIView.
2、点击按钮键盘能够回收(提示点击按钮的时候键盘能回收,核心代码:[输入框 resignFirstResponder];)
3、UITextField设置占位字符串.
4、输入密码的UITextField,设置密文输入
5、默认指定一个正确的用户名和密码,点击登录按钮进行登录验证,并显示验证结果.提示:使用UIAlertView.
6、点击alertView的确认或取消时,回收键盘.

任务二加强

需求:
1、用UILabel、UITextField、UIButton替换UIView。
2、点击按钮键盘能够回收(提示点击按钮的时候键盘能回收,核心代码:[输入框 resignFirstResponder];)
3、UITextField设置占位字符串。

你猜对了~哦啦啦

任务三加强版

需求:
1、用UILabel、UITextField、UIButton替换UIView。
2、键盘能够回收,提示点击按钮的时候键盘能回收,核心代码:[输入框 resignFirstResponder];
3、密码和确认密码设置密文输入
4、手机号使用数字键盘
5、点击注册按钮,判断密码和确认密码输入的内容,如果不相同使用alertView进行提示。
6、点击注册按钮,判断用户名、密码、确认密码的内容,不能为空,如果为空使用alertVIew提示。
(注:个位小伙伴答案下集公布哦努力学习哦~)

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

推荐阅读更多精彩内容