IOS暑假小学期实训第2天 “UI基础控件”

2016/07/10

// ViewController.m

// UI基础控件

// Created by lanou on 16/7/10.

#import "ViewController.h"

@interface ViewController ()

//标题标签

@property(nonatomic,strong)UILabel *titleLable;

//左边按钮

@property(nonatomic,strong)UIButton *leftBtn;

//右边按钮

@property(nonatomic,strong)UIButton *rightBtn;

//显示图片

@property(nonatomic,strong)UIImageView *myImageView;

//给存入的四张图片定义一个数组

@property(nonatomic,strong)NSArray *imageNames;

@end

@implementation ViewController

//视图加载好时会自动调用

- (void)viewDidLoad {

[super viewDidLoad];

// 创建并初始化标签

self.titleLable = [[UILabel alloc]initWithFrame:CGRectMake(100, 50, 150, 30)];

// 写入标签文本

　　self.titleLable.text = @"biaoqingdi";

// 设置标签文本的背景颜色为红色

　　self.titleLable.backgroundColor = [UIColor greenColor];

// 设置标签文本在框中居中对齐

self.titleLable.textAlignment = NSTextAlignmentCenter;

// 添加标签到视图上

[self.view addSubview:self.titleLable];

// 创建并初始化定义（坐标、宽高）相框

self.myImageView = [[UIImageView alloc]initWithFrame:CGRectMake(85, 100, 200, 200)];

// 将图片保存在名为image中（根据图片地址名加载图片）

UIImage *image = [UIImage imageNamed:@"biaoqingdi"];

// 显示图片

self.myImageView.image = image;

// 添加相框到视图中

[self.view addSubview:_myImageView];

// 创建并初始化定义（坐标、宽高）左按钮

self.leftBtn = [[UIButton alloc]initWithFrame:CGRectMake(20, 150, 45, 45)];

// 关闭左按钮的交互

self.leftBtn.userInteractionEnabled = NO;

// 将左按钮的图片保存在名为leftImage中（根据图片地址名加载图片）

　　UIImage *leftImage = [UIImage imageNamed: @"left_disable"];

// 设置左按钮的背景图片（在正常状态下）

　　[self.leftBtn setBackgroundImage:leftImage forState:(UIControlStateNormal)];

// 添加左按钮到视图上

[self.view addSubview: _leftBtn];

// 创建并初始化定义（坐标、宽高）右按钮

　　self.rightBtn = [[UIButton alloc]initWithFrame:CGRectMake(305, 150, 45, 45)];

// 将右按钮的图片保存在名为 rightImage中（根据图片地址名加载图片）

　　UIImage *rightImage = [UIImage imageNamed: @"right_normal"];

// 设置右按钮的背景图片（在正常状态下）

　　[self.rightBtn setBackgroundImage:rightImage forState:(UIControlStateNormal)];

// 添加右按钮在视图上

　　[self.view addSubview:_rightBtn];

// 右按钮监听

　　[self.rightBtn addTarget:self action:@selector(rightBtnAction) forControlEvents:(UIControlEventTouchUpInside)];

// 左按钮监听

[self.leftBtn addTarget:self action:@selector(leftBtnAction) forControlEvents:(UIControlEventTouchUpInside)];

}

// 右按钮

-(void)rightBtnAction{

// 切换图片图片为png格式则不用加后缀名其他格式需要加后缀

　　self.imageNames = @[ @"biaoqingdi",@"bingli",@"chiniupa",@"danteng",@"wangba"];

// 获取当前是第几张图片（整型变量）

NSInteger index = [self.imageNames indexOfObject:self.titleLable.text];

// 把按钮图片加载成灰色（正常状态下状态）

// 不是为最后一张才切换到下一张

if (index < 4) {

// 如果index=3（即图片从第四张切换到，第五张时）

if (index == 3) {

// 关闭右按钮交互（右按钮图片变为灰色）

self.rightBtn.userInteractionEnabled = NO;

// 将右按钮灰色图片保存在image中（根据名字加载图片）

UIImage *image =[UIImage imageNamed:@"right_disable"];

// 将右按钮状态为一般（正常）状态下的背景图片设置成为image中图像

[self.rightBtn setBackgroundImage:image forState:(UIControlStateNormal)];

}

else{

// 否则（图片为第1,2,3张时）

// 将两个按钮正常状态下的背景图片设置为黑色图片

[self.rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:(UIControlStateNormal)];

[self.leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:(UIControlStateNormal)];

// 开启两个按钮的交互

self.rightBtn.userInteractionEnabled = YES;

self.leftBtn.userInteractionEnabled = YES;

}

// 将标签titleLable内容切换到下一张图片的标签内容

NSString *nextTitle = self.imageNames[index+1];

self.titleLable.text = nextTitle;

// 将图片切换到下一张

self.myImageView.image = [UIImage imageNamed: nextTitle];

}

//左按钮

-(void)leftBtnAction{

　　// 切换图片图片为png格式则不用加后缀名其他格式需要加后缀

　　self.imageNames = @[ @"biaoqingdi",@"bingli",@"chiniupa",@"danteng",@"wangba"];

　　// 获取当前是第几张图片（整型）

NSInteger index = [self.imageNames indexOfObject:self.titleLable.text];

　　// 不是为第一张才切换到上一张

　　if (index > 0) {

　　// 第二张切换到第一张时

if (index == 1) {

// 左边按钮交互关闭（左按钮图片变为灰色）

self.leftBtn.userInteractionEnabled = NO;

// 将左按钮灰色图片保存在image中（根据名字加载图片）

UIImage *image =[UIImage imageNamed:@"left_disable"];

// 将左按钮状态为一般（正常）状态下的背景图片设置成为image中图像

[self.leftBtn setBackgroundImage:image forState:(UIControlStateNormal)];

}

else{

// 否则（图片为第3,4,5张时）

// 将两个按钮正常状态下的背景图片设置为黑色图片

[self.rightBtn setBackgroundImage:[UIImage imageNamed:@"right_normal"] forState:(UIControlStateNormal)];

[self.leftBtn setBackgroundImage:[UIImage imageNamed:@"left_normal"] forState:(UIControlStateNormal)];

// 开启两个按钮的交互

self.rightBtn.userInteractionEnabled = YES;

self.leftBtn.userInteractionEnabled = YES;

}

// 将标签titleLable内容切换到上一张图片的标签内容

NSString *preTitle =self.imageNames[index-1];

self.titleLable.text = preTitle;

// 将图片切换到上一张

self.myImageView.image = [UIImage imageNamed: preTitle];

}

-(void)demo{

　　// 按钮UIButton

　　// UIButton *button = [UIButton buttonWithType: UIButtonTypeContactAdd];

// 创建并初始化定义（坐标、宽高）按钮

UIButton *button = [[UIButton alloc]initWithFrame:CGRectMake(50, 50, 80, 80)];

// frame 表明了空间的坐标和宽高(CGRect类型)

　　[button setTitle:@"眼镜哥" forState:UIControlEventTouchDown];

// 设置按钮背景色为红色

　　button.backgroundColor = [UIColor redColor];

　　// 根据名字加载图片

　　UIImage *image = [UIImage imageNamed:@"right_normal"];

　　// 给按钮设置背景图片

　　[button setBackgroundImage:image forState:UIControlStateNormal];

　　// 按钮的监听

[button addTarget:self action:@selector(btnClickLister) forControlEvents:UIControlEventTouchUpOutside];

　　// 添加到屏幕上面

[self.view addSubview:button];

　　// 相框UIImageView

// 创建并初始化视图相框

　　UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(150, 50, 200, 200)];

　　UIImage *image1 = [UIImage imageNamed:@"biaoqingdi"];

　　// 设置imageView显示的图片

imageView.image = image1;

　　[self.view addSubview:imageView];

　　// 标签UIlable

　　UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(150, 270, 150, 30)];

　　// 设置标签的文本

　　label.text = @"表情弟";

// 设置居中方式（注：是将文本在标签框内部居中）

label.textAlignment = NSTextAlignmentCenter;

// 设置标签的颜色为红色

label.textColor = [UIColor redColor];

// 将标签显示在视图屏幕上

[self.view addSubview:label];

}

// 方法调用

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning];

}

// 调用按钮监听的方法

-(void)btnClickLister{

// 在视图屏幕中执行按钮操作时，代码工程中将会打印“click btn”

NSLog(@"click btn");

}

@end

总结：

一些常用的UI基础控件

1.UIlabel

UILabel建立

UILabel*label=[[UILabelalloc] init];

UILabel基本设置

// 设置label背景色

label.backgroundColor=[UIColor redColor];

// 设置label位置大小

label.frame=CGRectMake(100,100,100,300);

// 设置label中显示文字

label.text=@"hello world！";

// label中显示文字居中

label.textAlignment=NSTextAlignmentCenter;

// label中文字行数随文字数量自动改变

label.numberOfLines=0;

// 将label添加到父控件中

[self.view addSubview:label];

2.UIImageView

UIImageView建立

UIImageView*imageView=[[UIImageViewalloc] init];

UIImageView基本设置

// 设置imageView的位置与大小

imageView.frame=CGRectMake(50,100,300,300);

// 设置imageView的背景颜色

imageView.backgroundColor=[UIColorredColor];

// 加载图片

imageView.image=[UIImageimageNamed:@"图片名称"];

// 将图片置于控件底部

imageView.contentMode=UIViewContentModeBottom;

// 添加到父控件中

[self.viewaddSubview:imageView];

contentMode属性

带有scale单词的：图片有可能会拉伸

UIViewContentModeScaleToFill

将图片拉伸至填充整个imageView

图片显示的尺寸跟imageView的尺寸是一样的

带有aspect单词的：保持图片原来的宽高比

UIViewContentModeScaleAspectFit

：保证刚好能看到图片的全部

UIViewContentModeScaleAspectFill

：拉伸至图片的宽度或者高度跟imageView一样

没有scale单词的：图片绝对不会被拉伸，保持图片的原尺寸

UIViewContentModeCenter

UIViewContentModeTop

UIViewContentModeBottom

UIViewContentModeLeft

UIViewContentModeRight

UIViewContentModeTopLeft

UIViewContentModeTopRight

UIViewContentModeBottomLeft

UIViewContentModeBottomRight

3.UIButton

UIButton建立

UIButton*btn=[[UIButtonalloc] init];

UIButton基本设置

// 设置btn在正常状况下加载的图片

[btn setImage:[UIImageimageNamed:@"图片名称"] forState:UIControlStateNormal];

// 设置btn在高亮状态下加载的图片

[btn setImage:[UIImageimageNamed:@"图片名称"] forState:UIControlStateHighlighted];

// 设置btn在正常状态下的背景图片

[btn setBackgroundImage:[UIImageimageNamed:@"图片名称"] forState:UIControlStateNormal];

// 设置btn在高亮状态下的背景图片

[btn setBackgroundImage:[UIImageimageNamed:@"图片名称"] forState:UIControlStateHighlighted];

// 设置btn在正常状态下显示的文字

[btn setTitle:@"点我啊"forState:UIControlStateNormal];

// 设置btn在高亮状态下显示的文字

[btn setTitle:@"神经病"forState:UIControlStateHighlighted];

// 设置btn在正常状态下文字颜色

[btn setTitleColor:[UIColorredColor] forState:UIControlStateNormal];

// 设置btn位置与大小

btn.frame=CGRectMake(100,100,100,30);

// 监听事件

[btn addTarget:selfaction:@selector(buttonClick:) forControlEvents:UIControlEventTouchUpInside];

// 将btn添加到父控件中

[self.viewaddSubview:btn];

注意点

不能直接修改：OC对象的结构体属性的成员

下面的写法是错误的

imageView.frame.size= imageView.image.size;

正确写法

CGRect tempFrame = imageView.frame;

tempFrame.size= imageView.image.size;

imageView.frame = tempFrame;

initWithImage:方法

利用这个方法创建出来的imageView的尺寸和传入的图片尺寸一样

修改frame的3种方式

直接使用CGRectMake函数

imageView.frame = CGRectMake(100,100,200,200);

利用临时结构体变量

CGRect tempFrame = imageView.frame;

tempFrame.origin.x =100;

tempFrame.origin.y =100;

tempFrame.size.width =200;

tempFrame.size.height =200;

imageView.frame = tempFrame;

使用大括号{}形式

imageView.frame = (CGRect){{100,100}, {200,200}};

抽取重复代码

将相同代码放到一个新的方法中

不用的东西就变成方法的参数

图片的加载方式

有缓存

UIImage*image = [UIImageimageNamed:@"图片名"];

使用场合：图片比较小、使用频率较高

建议把需要缓存的图片直接放到Images.xcassets

无缓存

NSString*file = [[NSBundlemainBundle] pathForResource:@"图片名"ofType:@"图片的扩展名"];

UIImage*image = [UIImageimageWithContentsOfFile:@"图片文件的全路径"];

使用场合：图片比较大、使用频率较小

不需要缓存的图片不能放在Images.xcassets

放在Images.xcassets里面的图片，只能通过图片名去加载图片

延迟做一些事情

[abcperformSelector:@selector(stand:)withObject:@"123"afterDelay:10];

//10s后自动调用abc的stand:方法，并且传递@"123"参数

音频文件的简单播放

// 创建一个音频文件的URL(URL就是文件路径对象)

NSURL*url = [[NSBundlemainBundle] URLForResource:@"音频文件名"withExtension:@"音频文件的扩展名"];

// 创建播放器self.player= [AVPlayerplayerWithURL:url];

// 播放[self.playerplay];

最后编辑于：2017.12.03 08:21:08

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 203,362评论 5赞 477
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 85,330评论 2赞 381
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 150,247评论 0赞 337
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 54,560评论 1赞 273
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 63,580评论 5赞 365
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,569评论 1赞 281
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,929评论 3赞 395
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,587评论 0赞 258
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,840评论 1赞 297
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,596评论 2赞 321
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,678评论 1赞 329
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,366评论 4赞 318
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,945评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,929评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,165评论 1赞 259
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 43,271评论 2赞 349
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,403评论 2赞 342

IOS暑假小学期实训 第2天 “UI基础控件”

总结：