相信大家平時(shí)在工作中大多數(shù)都遇到過添加引導(dǎo)頁的需求,除了在首次使用app的情況下外,更多的的比如在謀期中添加了新的頁面功能,給大家提示指導(dǎo)實(shí)現(xiàn)方式:UI做一張圖片,在特定的時(shí)候展示然后隱藏或移除,這樣的優(yōu)點(diǎn):頁面生動(dòng)形象,缺點(diǎn):需要根據(jù)屏幕尺寸做多張圖片;另一種方式就是完全有咱們自己來創(chuàng)建此頁面,把需要著重提示的地方鏤空,并在特定的情況下展示和隱藏,下面就來介紹一下這種方法.
1.首先模擬一個(gè)頁面創(chuàng)建一個(gè)tableview,并設(shè)置相關(guān)的數(shù)據(jù)和代理:
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.然后創(chuàng)建一個(gè)蒙層view:
self.backgroundView = [[UIView alloc] init];
_backgroundView.frame = self.view.bounds;
_backgroundView.backgroundColor = [UIColor colorWithWhite:0 alpha:0.7];
[self.view addSubview:_backgroundView];
3.使用貝塞爾曲線設(shè)置一個(gè)鏤空的效果:
//使用貝塞爾曲線先繪制一個(gè)和屏幕大小相同的區(qū)域
UIBezierPath *path = [UIBezierPath bezierPathWithRect:self.view.bounds];
//再繪制一個(gè)圓形
UIBezierPath *circlePath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(60, self.view.center.y-25) radius:50 startAngle:0 endAngle:2*M_PI clockwise:NO];
//把這兩個(gè)曲線進(jìn)行拼接,公共的部分將會(huì)被鏤空
[path appendPath:circlePath];
//創(chuàng)建一個(gè)layer層
CAShapeLayer *shapLayer = [CAShapeLayer layer];
//設(shè)置layer的填充色
shapLayer.fillColor = [UIColor lightGrayColor].CGColor;
//把貝塞爾曲線的路徑和layer進(jìn)行連接
shapLayer.path = path.CGPath;
//把layer設(shè)置成view的mask層(就是相當(dāng)于給view添加了一個(gè)遮罩layer)
_backgroundView.layer.mask = shapLayer;
_backgroundView.hidden = YES;
4.給蒙層view添加一個(gè)手勢(shì),方便顯現(xiàn)出來后的隱藏操作
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(know:)];
_backgroundView.userInteractionEnabled = YES;
[_backgroundView addGestureRecognizer:tap];
5.接下來就是什么時(shí)機(jī)下讓引導(dǎo)頁顯現(xiàn)出來,現(xiàn)在設(shè)置成當(dāng)tableview停止?jié)L動(dòng)時(shí)顯現(xiàn)出來,在代理方法中實(shí)現(xiàn)(當(dāng)然也可以設(shè)置成滾動(dòng)到某個(gè)指定cell時(shí)顯現(xiàn),根據(jù)需求決定顯現(xiàn)時(shí)機(jī))
-(void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
_backgroundView.hidden = NO;
}
6.實(shí)現(xiàn)tap手勢(shì)的隱藏操作
-(void)know:(UITapGestureRecognizer *)tap{
if (_backgroundView.hidden == NO) {
_backgroundView.hidden = YES;
}
}
7.實(shí)現(xiàn)效果如下:
IMG_0125.PNG
