美文网首页
UI基础(一):从UIView这个最纯粹的容器开始

UI基础(一):从UIView这个最纯粹的容器开始

作者: 指尖书法 | 来源:发表于2017-04-29 00:28 被阅读53次

    UIKit坐标系

    • frame的坐标原点: 子控件相对于父控件的左上角为坐标原点。
    • bound的坐标原点: 以自己的左上角为坐标原点

    UIView简单介绍

    • UI界面上,我们能够看到的所有的东西,都是UIView
    1. 所有的控件,都直接,或者间接继承UIView
    2. UIView是一个容器,里面可以添加其他的控件
    3. 我们可以通过UIView来制作一些最纯粹的界面

    UIView的常见属性

    • SuperView:父控件
    • frame属性:CGRect类型:决定了控件的位置和尺寸
    • UIView的tag属性
      1.所有直接或者间接继承UIVIew的控件都有一个tag属性
      2.这个属性,只能用来保存一个数字,对控件的外观没有任何影响
      3.但是我们可以通过这个属性的值,来判断是哪个控件
      4.连线注意:不同的按钮,可以连同一个方法

    UIView的常见方法

    • removeFromSuperView:从父控件中删除
    • 在subviews中,删除了其中的一个元素(控件),后面的元素会前移,注意数组越界。
    • 如果删除了父控件,它的所有子控件也会跟着从view上移除
    • addsubView:添加子控件
    • subViews:调用addsubView 这个方法 添加的所有子控件 都在这里面
    • viewWithTag:获取子控件,如果tag跟自己一样,优先获取自己
      这个方法之前还真的没用过
    //1.获取View
        UILabel *label1 = [self.whiteView viewWithTag:1];
    
    • transform:可以改变位置,大小,旋转 需要注意的是 有两套方法,一套是直接创建固定值,一套是在某一个基础上偏移

    颜色UIColor

    • 可以直接通过类方法,获取纯色,比如 红色 绿色等等[UIColor redColor] [UIColor blackColor]

    • 可以通过[UIColor colorWithRed:randomR green:randomG blue:randomB alpha:1]; 来创建颜色 通过 红色,绿色,蓝色 三种 来组成一个新的颜色

    • 2.来一个随机的颜色
      传入的是 0-1的 浮点数(之前我一直以为是0-255。。。)
      alpha: 0看不到 1完全看到

      //能够获取到 0-254的随机数

        float randomR =arc4random_uniform(255)/255.0; //oc中随机数函数
        float randomG =arc4random_uniform(255)/255.0;
        float randomB =arc4random_uniform(255)/255.0;
        UIColor *randomColor =[UIColor colorWithRed:randomR green:randomG blue:randomB alpha:1];
    

    动画初体验

    • 第一种,头尾式
        //开始动画
        [UIView beginAnimations:nil context:nil];
        //修改动画的各种属性
        [UIView setAnimationDuration:3];
        [UIView setAnimationDelay:2];
        
        //赋值回去
        creaeView.frame=oldFrame;
        
        //提交动画
        [UIView commitAnimations];
    
    • 第二种,block式
        [UIView animateWithDuration:3 animations:^{
            creaeView.frame=oldFrame;
        }];
    

    按钮的使用

    • image属性可以设置按钮的图片 这样设置的图片跟文字平级
    1. 按钮默认的type是system 当设置了image以后就是custom 我们一般使用custom
    2. 设置background图片,是在文字的后面
    3. 按钮有很多种状态
      默认default:可以设置一套样式
      点击以后是highlighted:可以设置另外一套样式
      selected:需要使用代码设置
      disable:禁用状态
    4. 使用代码创建按钮 如果想要设置不同状态的样式,需要分别进行设置, 代码量较大
    5. 使用代码添加点击事件addTarget方法

    UIImageView

    • 如果只是想要显示图片,不需要可以点击,或者说显示文字,那么选择UIImageView
    • UIImageView可以通过它的image属性 设置显示的图片

    修改控件的位置、大小

    不能直接赋值frame.origin.x = 0;
    需要整体赋值:

    //1.获取原始Frame
        CGRect oldFrame=self.tankImageView.frame;
        
        //2.判断tag值-并且修改frame
        switch (sender.tag) {
            case 1://向上
                oldFrame.origin.y-=10;
                break;
            case 2://向下
                oldFrame.origin.y+=10;
                break;
            case 3://向右
                oldFrame.origin.x+=10;
                break;
            case 4://向左
                oldFrame.origin.x-=10;
                break;
                
            default:
                break;
        }
        
        //3.使用动画的方式设置Frame给控件
        [UIView animateWithDuration:1 animations:^{
            self.tankImageView.frame=oldFrame;
        }];
    
    

    transform属性相关

    • 下面这几个方法,都是 直接创建一个 固定值的 tranform
     CGAffineTransformMakeRotation(<#CGFloat angle#>)直接修改旋转角度
     CGAffineTransformMakeScale(<#CGFloat sx#>, <#CGFloat sy#>)直接修改缩放
     CGAffineTransformMakeTranslation(<#CGFloat tx#>, <#CGFloat ty#>)修改位
     CGAffineTransformMake(<#CGFloat a#>, <#CGFloat b#>, <#CGFloat c#>, <#CGFloat d#>, <#CGFloat tx#>, <#CGFloat ty#>)参数最多,的可定制型最强,用的不多置
    
    • 如果想要每次都累加一点,那么需要使用另外一组方法
     CGAffineTransformRotate(self.tankImageView.transform, M_PI_4);
     CGAffineTransformScale(self.tankImageView.transform, M_PI_4);
     CGAffineTransformTranslation(self.tankImageView.transform, M_PI_4);
    

    M_PI M_PI_2 M_PI_4 分别 对应 π π/2 π/4

    初次接触代码创建控件

    自定义button 和View的创建

    #warning viewDidLoad 在控制器的View 创建好加载到内存中的时候,就会执行
    //一般在这里,可以初始化数据,或者创建控件,等等
    - (void)viewDidLoad {
        [super viewDidLoad];
        
        //1.创建某一个种type的按钮
        UIButton *btn=[UIButton buttonWithType:UIButtonTypeCustom];
        
        //2.frame
        btn.frame=CGRectMake(100, 100, 100, 100);
        
        //3.设置文字
        [btn setTitle:@"WC" forState:UIControlStateNormal];
        
        //4.设置文字颜色
        [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
        
        //5.设置背景图片
        [btn setBackgroundImage:[UIImage imageNamed:@"tank"] forState:UIControlStateNormal];
        //6.设置图片
    //    [btn setImage:[UIImage imageNamed:@"joystick"] forState:UIControlStateNormal];
        
        //7.绑定方法(事件)
        [btn addTarget:self action:@selector(doSomeThing) forControlEvents:UIControlEventTouchUpInside];
        
        //8.添加到控制器的View上面
        [self.view addSubview:btn];
        
    }
    
    -(void)doSomeThing{
        NSLog(@"今天天气棒棒哒");
    }
    
    //1.代码创建控件--UIView
    - (IBAction)createUIView {
        //1.alloc init一个
        UIView *createView=[[UIView alloc]init];
        
        //2.修改frame
        createView.frame=CGRectMake(100, 100, 100, 100);
        
        //3.设置一个颜色
        createView.backgroundColor=[UIColor purpleColor];
            
        //4.添加到控制器的View上面
        [self.view addSubview:createView];
    }
    

    控件的一些注意点

    • label的设置

      lines属性设置为0可以自动换行
      高度如果不够,自动换行也是看不到的

    • 按钮的启用禁用

      按钮有个一个属性.enabled 如果是yes 就是可用 反之不可用

    第一次使用plist文件和懒加载 优化数据结构

    • 将plist文件中的属性转化为model

    model.m

     - (instancetype)initWithDic:(NSDictionary *)dic{
        if (self=[super init]) {
            self.desc=dic[@"desc"];
            self.icon=dic[@"icon"];
        }
        return self;
    }
    

    viewController.m

    self.label.text = model.desc;
    
    • 懒加载
    -(NSArray *)pictures{
        //如果为空 那么就是没有值,需要初始化
        if (_pictures==nil) {
            //0.使用plist 配合bundle 读取数据
            //0.1获取bundle
            NSBundle *mainBundle=[NSBundle mainBundle];
            //0.2获取路径
            NSString *path=[mainBundle pathForResource:@"images.plist" ofType:nil];
            //0.3初始化数组
            _pictures=[NSArray arrayWithContentsOfFile:path];
        }
        return _pictures;
    }
    

    程序启动的简单原理

    1. stroryboard 启动设置

    • main.storyboard中可以添加多个ViewController 但是,程序启动的时候,加载的是 箭头指向的那个
    1. 可以拖拉箭头,修改默认的启动的界面,也可以通过 is initial ViewController 属性来设置
    1. 在storyboard中,的控制器,如果想要跟代码建立联系,需要设置customClass
    1. 在项目的设置界面,可以指定,使用哪一个.storyboard作用默认的启动界面,当项目启动的时候,就回去这个.storyboard中找箭头指向的控制器,如果找不到,报错,黑色
    2. 如果添加了多个storyboard,默认会找到,项目设置中设置的那个storyboard
    3. 删除项目文件的时候,
      中间的选项,是删除引用,文件还在,
      第三个选项是,直接删除到回收站

    2. stroryboard 的本质

    • storyboard的本质是一个文本文件,有一定格式的文本文件
    1. 这种格式叫做 xml 使用 标签的形式标示一些信息
    2. storyboard中托拉拽的本质,其实是修改storyboard文本中的内容
      每一个使用拖拉方式添加的控件信息,全部保存在了文本中(xml)标签的形式
    3. 添加多个控件,只是增加文本的值而已

    3 .程序的启动原理_简单版本

    1.main.m中的main函数
    2.UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
    3.找到设置好的 xxx.storyboard
    4.创建箭头所指的控制器
    5.读取storyboard中的所有文本值,创建对应的控件 ,添加到 控制器的View中
    6.当storyboard读取完毕以后,调用viewDidLoad 方法
    7.呈献给用户

    Bundle

    一.什么是Bundle

    • 应用程序.app 就是bundle
    • ios程序.打包好以后.其实也是xxx.app
    • 查看方法,可以NSLog(NSHomeDirectory()); 打印的路径,往前移动两个文件夹,bundle中找到对应的.app
    • bundle中 有我们项目里面的文件

    二.图片位置的区别

    • 直接放在项目中,在bundle里面 可以看得到图片
    1. 放在images.xcassets中(xcassets.xcassets)打包以后,会到Assets.car中,无法还原出来(目前为止)更加安全

    三.NSBundle

    • 这个类,对应到了 当前项目 打包以后的xxx.app
    1. mainBundle这个类方法 可以获取当前应用程序的xx.app
    2. bundle中的所有文件的全路径,我们都可以通过pathForResource来获取
    3. 可以直接把文件的后缀,拼接到文件名的后面

    四.plist文件

    1. 可以用来保存字典
    2. 项目中的plist文件 保存的位置是 bundle中 (bundle去获取他)
    3. 在开发中,可以使用plist文件,把数组跟代码剥离开来

    使用UIImageView 来播放动画

    1. 可以用来展示单张图片
    2. 也可以用来播放动画
    3. 播放动画的方法
     - (void)startAnimating;
     - (void)stopAnimating;
     - (BOOL)isAnimating;
    
    1. 用来存放动画图片的属性
      @property(nonatomic,copy) NSArray *animationImages;
    2. 两个属性
      @property(nonatomic) NSTimeInterval animationDuration; //持续时间@property(nonatomic) NSInteger animationRepeatCount //播放次数

    IOS开发中内存的处理细节

    1. 开发IOS项目,如果APP占用内存过大,IOS系统会发送一个警告给应用程序
    2. 程序员可以在警告中,释放内存
    3. 如果发送了警告以后,APP的内存占用没有任何的改变,那么会---闪退

    UIimage加载图片的几种方式

    1. UIimage imageName:图片名 使用这种方式加载的图片 会在内存中常驻。
      一般都是按钮的背景图,小箭头 icon 等等 UI界面上的小元素 使用这种方式
      对于需要释放的图片 使用另外的方式:
    2. UIImage imageWithContentsOfFile:路径名
      使用这种方式加载的图片,只有当没有任何一个对象对他进行强引用的时候,才会释放
    3. 图片的强引用和释放
      播放第一个动画的时候,UIimageView的图片属性 对加载到内存中的图片强引用了
      播放第二个动画,第一组图片被释放了,第二组图片被强引用

    延迟调用方法

    可以延迟具体的时间调用某一个方法
    [self performSelector:@selector(cleanImage) withObject:nil afterDelay:60];

    相关文章

      网友评论

          本文标题:UI基础(一):从UIView这个最纯粹的容器开始

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