免费开源的iOS开发学习平台

UIView详解:2-视图的外观

在手机上呈现给用户的视图,之所以其样式是多种多样的,是因为UIView类中有很多关于视图样式定制的属性,例如:大小、位置、透明度等等。修改这些属性,就可以对视图的样式进行修改,从而展现出多样的动画效果。

基本样式:背景颜色、透明度以及是否隐藏

  • 背景颜色属性BackgroundColor属性是UIView类中最常使用的属性之一,由于UIView是一个矩形区域,所以在实际的开发过程中,常常通过设置视图的背景颜色来检查视图的大小以及位置。
  • 透明度alpha属性可以修改视图的透明度,实现一些虚化的效果。在一些游戏App中,游戏的按钮经常是虚化的效果。需要注意的是对于UIView以及其子类,当alpha的值小于等于0.01时,就不能够再响应用户交互了,例如:UIButton就不能够点击了。
  • 是否隐藏hidden能够控制视图的显示与隐藏。
@property(nullable, nonatomic,copy)            UIColor          *backgroundColor;
@property(nonatomic)                 CGFloat           alpha;
@property(nonatomic,getter=isHidden) BOOL              hidden;

位置与大小:Frame/Bounds/Center

@property(nonatomic) CGRect            frame;  
@property(nonatomic) CGRect            bounds; 
@property(nonatomic) CGPoint           center; 

Frame、Bounds以及Center是用来设置视图对象位置以及大小的属性,在对任何视图类对象进行初始化之后,建议大家紧接着就要去设置视图对象的Frame属性。在学习过程中,Frame、Bounds以及Center的区别和联系是比较难以理解的,主要是需要对视图的坐标系有一定的理解,但对于初学者来说,可以记住如下要点即可:

  • 绝对坐标系:屏幕的左上角是坐标原点(0,0),横向为X轴,纵向为Y轴;向左移动X值减小,向右移动X值增加;向下移动Y值增加,向上移动Y值减小;
  • 每个视图的起始位置和大小由frame属性来确定,frame是一个CGRect类型的属性,CGRect是一个结构体,其中包含有两个变量origin和size,其中origin是一个CGPoint类型的结构体变量,指的是视图左上角的那个点的位置,决定了视图的位置;size是CGSize类型的结构体变量,定义了矩形的长度和宽度,从而决定了视图的大小;
  • Frame:视图在其父视图坐标系中的位置和大小,建议大家在控件初始化之后,紧接着就去设置Frame,设置完成后,假如涉及到修改控件的位置、大小等,就不要再去修改Frame了;
  • Bounds:视图在其自身的坐标系中的位置和大小。Bounds属性中,视图的bounds.origin始终是(0,0),因此bounds属性最核心的作用是设置视图的大小,即bounds.size,当需要去修改视图大小的时候,可以修改bounds.size;
  • Center:视图中心点在父视图坐标系中的坐标,当需要修改视图对象的位置时,可以修改Center属性。

    - (void)viewDidLoad {
    [super viewDidLoad];
    
    //添加yellowView到控制器视图self.view
    UIView *yellowView = [[UIView alloc] init];
    yellowView.frame = CGRectMake(100, 100, 200, 200);
    yellowView.backgroundColor = [UIColor yellowColor];
    [self.view addSubview:yellowView];
    NSLog(@"yellowView.frame:%@",NSStringFromCGRect(yellowView.frame));
    NSLog(@"yellowView.bounds:%@",NSStringFromCGRect(yellowView.bounds));
    NSLog(@"yellowView.center:%@",NSStringFromCGPoint(yellowView.center));
    
    //添加redView到控制器视图self.view
    UIView *redView = [[UIView alloc] init];
    redView.frame = CGRectMake(0, 0, 100, 100);
    redView.backgroundColor = [UIColor redColor];
    [self.view addSubview:redView];
    NSLog(@"redView.frame:%@",NSStringFromCGRect(redView.frame));
    NSLog(@"redView.bounds:%@",NSStringFromCGRect(redView.bounds));
    NSLog(@"redView.center:%@",NSStringFromCGPoint(redView.center));
    
    //添加blueView到yellowView
    UIView *blueView = [[UIView alloc] init];
    blueView.frame = CGRectMake(0, 0, 100, 100);
    blueView.backgroundColor = [UIColor blueColor];
    [yellowView addSubview:blueView];
    NSLog(@"blueView.frame:%@",NSStringFromCGRect(blueView.frame));
    NSLog(@"blueView.bounds:%@",NSStringFromCGRect(blueView.bounds));
    NSLog(@"blueView.center:%@",NSStringFromCGPoint(blueView.center));
    }

运行日志:

运行效果:

注意:从运行效果来看,父视图的原点在屏幕的最左上角,红色视图和手机的状态栏是有重叠的,而状态栏也是被控制器管理并可以隐藏起来的。在控制器类中,实现下方的代码,即可隐藏控制栏

-(BOOL)prefersStatusBarHidden{
    return YES;
}

运行效果:

示例代码

https://github.com/99ios/7.2.2