美文网首页iOS暑假小学期实训
IOS暑假小学期实训 第2天 “UI基础控件”

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

作者: Just_smile | 来源:发表于2016-07-12 13:30 被阅读0次

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

    相关文章

      网友评论

        本文标题:IOS暑假小学期实训 第2天 “UI基础控件”

        本文链接:https://www.haomeiwen.com/subject/xxtsjttx.html