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制作的层次图来解释,等下再上效果图
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];