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

实现方式:

在当前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
两个指引

原文地址:https://www.cnblogs.com/sunfuyou/p/7563122.html