iOS App中第一次运行添加半透明新手指引

墨蓝 2022-03-30 14:59 245阅读 0赞

## 实现方式： ##

在当前View上一个蒙层，然后找出需要标记的地方圈为白色，那些箭头和提示文字都是UI做出来的图上自带的。
    
    代码：

判断是第一次运行APP后进入页面调用

-(void)newGuide
    {
        // 这里创建指引在这个视图在window上
        CGRect frame = [UIScreen mainScreen].bounds;
        UIView * bgView = [[UIView alloc]initWithFrame:frame]; bgView.backgroundColor = HEX_RGBA(0x323232, 0.8); UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)]; [bgView addGestureRecognizer:tap]; [[UIApplication sharedApplication].keyWindow addSubview:bgView]; //create path 重点来了（**这里需要添加第一个路径） UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame]; // 这里添加第二个路径 （这个是圆） [path appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(frame.size.width - 30, 42) radius:30 startAngle:0 endAngle:2*M_PI clockwise:NO]]; // 这里添加第二个路径 （这个是矩形） //[path appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(frame.size.width/2.0-1, 234, frame.size.width/2.0+1, 55) cornerRadius:5] bezierPathByReversingPath]]; CAShapeLayer *shapeLayer = [CAShapeLayer layer]; shapeLayer.path = path.CGPath; //shapeLayer.strokeColor = [UIColor blueColor].CGColor; [bgView.layer setMask:shapeLayer]; UIImageView * imageView = [[[UIImageView alloc]initWithFrame:CGRectMake(frame.size.width -300,72,270, 137)]autorelease]; imageView.image = [UIImage imageNamed:@"backImage.jgp"]; [bgView addSubview:imageView]; }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26

点击页面时调用

-(void)sureTapClick:(UITapGestureRecognizer *)tap
    {
        UIView * view = tap.view;
        [view removeFromSuperview];
        [view removeAllSubviews];
        [view removeGestureRecognizer:tap]; [[NSUserDefaults standardUserDefaults] setBool:YES forKey:@"firstCouponBoard_iPhone"]; }

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8

宏定义的颜色值

#undef HEX_RGBA
    #define HEX_RGBA(V, A) [UIColor fromHexValue:V alpha:A]

*  1
 *  2

## 效果图： ##

> ![wake][]  
> 一个指引

--------------------

> ![wake][wake 1]  
> 两个指引

[wake]: /images/20220330/6706ed5754b24081b35d7a50ae848eae.png
[wake 1]: /images/20220330/6425fe71caf5487aaf059188c96c9f7f.png