iOS UIView控件

UIView表示屏幕上的一块矩形区域，几乎所有可视化控件都是UIView的子类。负责渲染区域的内容，并且响应该区域内发生的触摸事件。

1. UIView的主要属性

// frame的origin是相对于父视图的左上角原点(0,0)的位置
@property(nonatomic) CGRect frame;
// view的相对于自身的位置
@property(nonatomic) CGRect bounds;
// 整个视图的中心点
@property(nonatomic) CGPoint center;

// 是否隐藏，默认是NO
@property(nonatomic,getter=isHidden) BOOL hidden;
// 标记，为了跟别的View区分，默认为0
@property(nonatomic) NSInteger tag;
// 是否可以和用户进行交互,默认为YES
@property(nonatomic,getter=isUserInteractionEnabled) BOOL userInteractionEnabled;
// 背景色
@property(nullable, nonatomic,copy) UIColor *backgroundColor;
// 子视图超出父视图范围是否裁剪子视图，默认是NO
@property(nonatomic) BOOL clipsToBounds;
// 当前视图的父视图
@property(nullable, nonatomic,readonly) UIView *superview;

frame和bounds的关系

// redView1的frame=(40, 100, 100, 100) bounds=(0, 0, 100, 100)
UIView *redView1 = [[UIView alloc] initWithFrame:CGRectMake(40, 100, 100, 100)];
redView1.backgroundColor = [UIColor redColor];
[self.view addSubview:redView1];

// blueView1的frame=(10, 10, 60, 60) bounds=(0, 0, 60, 60)
UIView *blueView1 = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 60, 60)];
blueView1.backgroundColor = [UIColor blueColor];
[redView1 addSubview:blueView1];

UIView *redView2 = [[UIView alloc] initWithFrame:CGRectMake(200, 100, 100, 100)];
redView2.backgroundColor = [UIColor redColor];
[self.view addSubview:redView2];

// blueView2的原点设置为(-10, -10)，可以超出父View显示    
UIView *blueView2 = [[UIView alloc] initWithFrame:CGRectMake(-10, -10, 60, 60)];
blueView2.backgroundColor = [UIColor blueColor];
[redView2 addSubview:blueView2];

// 设置父View的bounds原点，可以整体偏移子View坐标，负数向右下，正数向左上
UIView *redView3 = [[UIView alloc] initWithFrame:CGRectMake(40, 250, 100, 100)];
redView3.bounds = CGRectMake(-10, -10, 100, 100);
redView3.backgroundColor = [UIColor redColor];
[self.view addSubview:redView3];

UIView *blueView3 = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 60, 60)];
blueView3.backgroundColor = [UIColor blueColor];
[redView3 addSubview:blueView3];

UIView *redView4 = [[UIView alloc] initWithFrame:CGRectMake(200, 250, 100, 100)];
redView4.bounds = CGRectMake(10, 10, 100, 100);
redView4.backgroundColor = [UIColor redColor];
[self.view addSubview:redView4];

UIView *blueView4 = [[UIView alloc] initWithFrame: CGRectMake(10, 10, 60, 60)];
blueView4.backgroundColor = [UIColor blueColor];
[redView4 addSubview:blueView4];

显示如下

clipsToBounds设置为YES时，子视图被裁剪，显示如下

2. UIView的主要方法

子视图操作

// 添加子视图
- (void)addSubview:(UIView *)view;
// 从父视图中移除
- (void)removeFromSuperview;

// 将一个视图的层次设置成最上面
- (void)bringSubviewToFront:(UIView *)view;
// 将一个视图的层次设置成最下面
- (void)sendSubviewToBack:(UIView *)view;

// 插入指定视图的上面
- (void)insertSubview:(UIView *)view belowSubview:(UIView *)siblingSubview;
// 插入指定视图的下面
- (void)insertSubview:(UIView *)view aboveSubview:(UIView *)siblingSubview;

// 通过指定的标记值获取视图
- (nullable __kindof UIView *)viewWithTag:(NSInteger)tag;

视图绘制

// 让整个视图重绘
- (void)setNeedsDisplay;
// 让视图指定的矩形区域重绘
- (void)setNeedsDisplayInRect:(CGRect)rect;

手势识别器

// 添加手势识别器
- (void)addGestureRecognizer:(UIGestureRecognizer*)gestureRecognizer;
// 删除手势识别器
- (void)removeGestureRecognizer:(UIGestureRecognizer*)gestureRecognizer;

示例代码

- (void)viewDidLoad {
    [super viewDidLoad];

    UITapGestureRecognizer *gestureRecognizer = [[UITapGestureRecognizer alloc] init];
    [gestureRecognizer addTarget:self action:@selector(singleTap:)];
    [redView addGestureRecognizer: gestureRecognizer];
}

- (void)singleTap:(UITapGestureRecognizer *)sender {
}

3. UIView和CALayer的关系

UIView和CALayer是相互依赖的关系，UIView依赖与CALayer提供的内容，CALayer依赖UIView提供的容器来显示绘制的内容

CALayer常用属性

// 背景色
@property(nullable) CGColorRef backgroundColor;
// 边框颜色
@property(nullable) CGColorRef borderColor;
// 边框宽度
@property CGFloat borderWidth;

// 圆角
@property CGFloat cornerRadius;
// 图片背景
@property(nullable, strong) id contents;
// 超出主图层的部分把它给剪切掉
@property BOOL masksToBounds;

// 阴影颜色
@property(nullable) CGColorRef shadowColor;
// 阴影偏移度
@property CGSize shadowOffset;
// 阴影透明度
@property float shadowOpacity;

示例代码

UIView *brownView1 = [[UIView alloc] initWithFrame:CGRectMake(40, 100, 100, 100)];
// 设置背景色
brownView1.layer.backgroundColor = [UIColor brownColor].CGColor;
// 设置边框颜色
brownView1.layer.borderColor = [UIColor redColor].CGColor;
// 设置边框宽度
brownView1.layer.borderWidth = 20;
// 设置圆角
brownView1.layer.cornerRadius = 5;
[self.view addSubview:brownView1];

UIView *brownView2 = [[UIView alloc] initWithFrame:CGRectMake(200, 100, 100, 100)];
brownView2.layer.backgroundColor = [UIColor brownColor].CGColor;
// 设置图片背景
brownView2.layer.contents = (id)[UIImage imageNamed:@"icon_money"].CGImage;
[self.view addSubview:brownView2];

UIView *brownView3 = [[UIView alloc] initWithFrame:CGRectMake(40, 250, 100, 100)];
brownView3.layer.backgroundColor = [UIColor brownColor].CGColor;
brownView3.layer.contents = (id)[UIImage imageNamed:@"icon_money"].CGImage;
brownView3.layer.cornerRadius = 50;
// 设置超出主图层的部分把它给剪切掉
brownView3.layer.masksToBounds = YES;
[self.view addSubview:brownView3];

UIView *brownView4 = [[UIView alloc] initWithFrame:CGRectMake(200, 250, 100, 100)];
brownView4.layer.backgroundColor = [UIColor brownColor].CGColor;
// 设置阴影颜色
brownView4.layer.shadowColor = [UIColor blackColor].CGColor;
// 设置阴影偏移度
brownView4.layer.shadowOffset = CGSizeMake(10, 15);
// 设置阴影透明度
brownView4.layer.shadowOpacity = 0.6;

[self.view addSubview:brownView4];

显示如下