相信大家平时在工作中大多数都遇到过添加引导页的需求,除了在首次使用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
