iOS: 首次使用App時,顯示半透明新手指引

在很多的app，我們都會發現這樣一個功能：就是app啟動后進入主界面時，會有一個半透明的指引圖，它會提示用戶如何一步步進行操作，快速的熟悉app的使用規則，極大地方便了用戶的使用，也加快了app的推廣，優點不言而喻。

我主要介紹一下思路：

　　首先創建一個半透明的蒙版覆蓋在當前整個屏幕上，然后用貝塞爾曲線繪制白色的提示框(矩形或者圓形)，接着給出帶箭頭圖標的文字提示,也即在蒙版上添加自定義的子視圖控件。當然，最后給整個蒙版添加一個觸摸手勢，只要輕輕點擊就移除蒙版、子視圖、手勢，恢復正常界面。

注意：新手引導只需要出現一次就夠了，可以通過偏好設置來控制器只出現一次。

演示截圖如下：

出現指引　　　　　　　　　　　　　　　　　　　　點擊指引消失，按照提示操作

   

代碼如下：

顏色宏定義

// 顏色RGB
#define XYQColorRGB(r, g, b)　　 [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:1.0]
#define XYQColorRGBA(r, g, b, a) [UIColor colorWithRed:(r)/255.0 green:(g)/255.0 blue:(b)/255.0 alpha:a]

新手指引

#pragma mark - 新手引導
- (void)newUserGuide
{
    // 這里創建指引在這個視圖在window上(蒙版、手勢)
    CGRect frame = [UIScreen mainScreen].bounds;
    UIView * bgView = [[UIView alloc]initWithFrame:frame];
    bgView.backgroundColor = XYQColorRGBA(50, 50, 50, 0.8);
    UITapGestureRecognizer * tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)];
    [bgView addGestureRecognizer:tap];
    
    //添加子視圖控件
    UILabel *textLabel = [[UILabel alloc]initWithFrame:CGRectMake(5, 320, frame.size.width-10, 50)];
    textLabel.backgroundColor = [UIColor clearColor];
    textLabel.text = @"“點擊直接聊天，向左側滑看報告、刪除”";
    textLabel.textColor = [UIColor whiteColor];
    textLabel.textAlignment = NSTextAlignmentCenter;
    textLabel.font = fontSize_16;
    [bgView addSubview:textLabel];
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(frame.size.width/2-30,115,100, 200)];;
    imageView.image = [UIImage imageNamed:@"CouponBoard_guid"];
    [bgView addSubview:imageView];
    [[UIApplication sharedApplication].keyWindow addSubview:bgView];
    
    //create path 重點來了（這里需要添加第一個路徑）
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    // 這里添加第二個路徑  （這個是矩形）
    [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:CGRectMake(5, 64, frame.size.width-10, 50) cornerRadius:8] bezierPathByReversingPath]];
    
    //渲染
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    [bgView.layer setMask:shapeLayer];
    
}
/**
 *   新手指引確定
 */
- (void)sureTapClick:(UITapGestureRecognizer *)tap
{
    UIView *guidevView = tap.view;
    [guidevView removeFromSuperview]; //移除蒙版
    [guidevView.subviews makeObjectsPerformSelector:@selector(removeFromSuperview)];//移除所有子視圖
    [guidevView removeGestureRecognizer:tap]; //移除手勢
}

 

參考資料：

http://www.jianshu.com/p/00d4fe5a3c1a

http://www.jianshu.com/p/b83aefdc9519

 

歡迎關注我的github：https://github.com/xiayuanquan