view的mask使用

相信大家平时在工作中大多数都遇到过添加引导页的需求,除了在首次使用app的情况下外,更多的的比如在谋期中添加了新的页面功能,给大家提示指导实现方式:UI做一张图片,在特定的时候展示然后隐藏或移除,这样的优点:页面生动形象,缺点:需要根据屏幕尺寸做多张图片;另一种方式就是完全有咱们自己来创建此页面,把需要着重提示的地方镂空,并在特定的情况下展示和隐藏,下面就来介绍一下这种方法.
1.首先模拟一个页面创建一个tableview,并设置相关的数据和代理:

self.tableview = [[UITableView alloc]initWithFrame:self.view.frame style:UITableViewStylePlain];

_tableview.delegate = self;

_tableview.dataSource = self;

_tableview.backgroundColor = [UIColor whiteColor];

[self.view addSubview:_tableview];

2.然后创建一个蒙层view:

self.backgroundView = [[UIView alloc] init];

_backgroundView.frame = self.view.bounds;

_backgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.7];

[self.view addSubview:_backgroundView];

3.使用贝塞尔曲线设置一个镂空的效果:

//使用贝塞尔曲线先绘制一个和屏幕大小相同的区域

UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.view.bounds];

//再绘制一个圆形

UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, self.view.center.y-25) radius:50 startAngle:0 endAngle:2*M_PI clockwise:NO];

//把这两个曲线进行拼接,公共的部分将会被镂空

[path appendPath:circlePath];

//创建一个layer层

CAShapeLayer *shapLayer = [CAShapeLayer layer];

//设置layer的填充色

shapLayer.fillColor = [UIColor lightGrayColor].CGColor;

//把贝塞尔曲线的路径和layer进行连接

shapLayer.path = path.CGPath;

//把layer设置成view的mask层(就是相当于给view添加了一个遮罩layer)

_backgroundView.layer.mask = shapLayer;

_backgroundView.hidden = YES;

4.给蒙层view添加一个手势,方便显现出来后的隐藏操作

UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(know:)];

_backgroundView.userInteractionEnabled = YES;

[_backgroundView addGestureRecognizer:tap];

5.接下来就是什么时机下让引导页显现出来,现在设置成当tableview停止滚动时显现出来,在代理方法中实现(当然也可以设置成滚动到某个指定cell时显现,根据需求决定显现时机)

-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

_backgroundView.hidden = NO;

}

6.实现tap手势的隐藏操作

-(void)know:(UITapGestureRecognizer *)tap{

if (_backgroundView.hidden == NO) {

_backgroundView.hidden = YES;

}

}

7.实现效果如下:

IMG_0125.PNG