iOS 新手引導頁面,透明遮罩指引頁(鏤空處理)

效果圖

這種遮罩一般做爲新手引導頁面。一般有鏤空的一部分,附有描述,指引用戶第一次進入界面該如何操做,只顯示一次app

下面給出兩種實現思路

1.UI切好整張圖片,直接顯示到UIWindow上,不推薦使用該方法。
優勢:程序實現簡單,便捷。

缺點:適配不一樣機型須要多套圖片(Android心裏是崩潰的),後期迭代界面改動則要更新圖片,UI工做量龐大。
2.本身實現一個UIView,經過設置其layer的mask屬性來實現鏤空區域
優勢:UI只提供描述的圖片便可,減小應用大小,靈活適配不一樣機型。

缺點:代碼較第一種略多,後期迭代界面改動要更新控件frame。

核心代碼:iview

- (void)creatControlWithType:(HKGuidePageType)type completion:(FinishBlock)completion
{
    _finish = completion;
    
    // 遮蓋視圖
    CGRect frame = [UIScreen mainScreen].bounds;
    UIView *bgView = [[UIView alloc] initWithFrame:frame];
    bgView.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.7f];
    [bgView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(tap:)]];
    [[UIApplication sharedApplication].keyWindow addSubview:bgView];
    
    // 信息提示視圖
    UIImageView *imgView = [[UIImageView alloc] init];
    [bgView addSubview:imgView];
    
    // 第一個路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    switch (type) {
        case HKGuidePageTypeHome:
            // 下一個路徑,圓形
            [path appendPath:[UIBezierPath bezierPathWithArcCenter:KSuitPoint(227, 188) radius:KSuitFloat(46) startAngle:0 endAngle:2 * M_PI clockwise:NO]];
            imgView.frame = KSuitRect(220, 40, 100, 100);
            imgView.image = [UIImage imageNamed:@"hi"];
            _guidePageKey = HKGuidePageHomeKey;
            break;
            
        case HKGuidePageTypeMajor:
            // 下一個路徑,矩形
            [path appendPath:[[UIBezierPath bezierPathWithRoundedRect:KSuitRect(5, 436, 90, 40) cornerRadius:5] bezierPathByReversingPath]];
            imgView.frame = KSuitRect(100, 320, 120, 120);
            imgView.image = [UIImage imageNamed:@"ly"];
            _guidePageKey = HKGuidePageMajorKey;
            break;
            
        default:
            break;
    }
    
    // 繪製透明區域
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    [bgView.layer setMask:shapeLayer];
}
相關文章
相關標籤/搜索