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];