maskView详解及基本使用

UIView有个maskView属性(与layer.mask 使用一样)，最近研究了一下，在此分享下。

官方定义：An optional view whose alpha channel is used to mask a view’s content.(一个通过alpha通道来掩盖一个view的内容的可选view。)

阿尔法通道(Alpha Channel) 阿尔法通道是一个8位的灰度通道，该通道用256级灰度来记录图像中的透明度信息，定义透明、不透明和半透明区域，其中黑表示透明，白表示不透明，灰表示半透明。

Alpha通道作用

阿尔法通道(Alpha Channel)是指一张图片的透明和半透明度。

废话不多说，官方定义太抽象，书读太少，不懂，接下来我直接上代码来解释。

 self.view.backgroundColor = [UIColor blackColor]; 
    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 100, 60)];
    view.backgroundColor = [UIColor whiteColor];
    [self.view addSubview:view];
    
    UIView *maskView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 40)];
    maskView.backgroundColor = [UIColor redColor];
    view.maskView = maskView;

先用keynote制作的层次图来解释，等下再上效果图

keynote效果图

UIView 代表控制器的View

view UIView的子view

maskView view的maskView

注意：

maskView弄成红色背景只是为了更好说明，实际效果图maskView的颜色不显示，最终效果图怎么显示只跟maskView每个point的alpha相关。

1.当一个view设置了maskView后，那么它只会显示与maskView重叠部分，即在此图中只会显示maskView部分(maskView跟view没有层次，可以理解maskView嵌在View里)

2.对于maskView与View重叠部分怎么显示？*

可以这样理解，是将maskView每个point的alpha赋值给View的重叠部分相对应的point，这样view的重叠每个point都有个alpha值了，view重叠部分就可能显示多种透明色。

就如图上图而言，由于maskView颜色的alpha为1.0，那么与view重叠部分的alpha也应该为1.0(即重叠部分没变化)。

效果图：

运行效果图

1.只显示重叠部分
2.maskView每个point的alpha为1.0，所以与view重叠部分颜色不变，即白色

如果上一个例子还没明白，再上一个Demo来说明

两个切图：

图一 图二

图1是一半纯灰色，一半 0.5 的绿， 图2背景是白色.

配合上一个例子的理论知识，再看代码，然后看效果图

 self.view.backgroundColor = [UIColor blackColor];
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"head"]];
    imageView.origin = CGPointMake(10, 40);
    [self.view addSubview:imageView];
    
    UIImageView *imageView1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"head"]];
    imageView1.origin = CGPointMake(10, CGRectGetMaxY(imageView.frame) + 20);
    
    UIImageView *maskImage = [[UIImageView alloc] initWithFrame:imageView1.bounds];
    maskImage.image = [UIImage imageNamed:@"gray_green"];
    imageView1.maskView = maskImage;
    [self.view addSubview:imageView1];
    
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"head"]];
    imageView2.alpha = 0.5;
    imageView2.origin = CGPointMake(10, CGRectGetMaxY(imageView1.frame) + 20);
    [self.view addSubview:imageView2];

效果图