IOS暑假小学期实训 第2天 “UI基础控件”
2016/07/10
// ViewController.m
// UI基础控件
//
// Created by lanou on 16/7/10.
// Copyright [表情] 2016年 yhy. All rights reserved.
//
#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];
