前言
現(xiàn)在很多APP在用戶第一次用的時(shí)候，由于用戶可能并不知道其中一些功能點(diǎn)的時(shí)候，這個(gè)時(shí)候就需要我們來(lái)對(duì)用戶做一些引導(dǎo)工作。于是這個(gè)功能引導(dǎo)界面就應(yīng)運(yùn)而生了，先來(lái)看看大概效果吧，我這只是很簡(jiǎn)單的做了一個(gè)demo

走，上圖

guide.jpg

guide.gif

分析

• 1 圖中高亮的圓圈部分怎么做呢？
• 2 怎么讓我們能很輕易的把圓圈加到我們想要的地方上去呢？

解決辦法

• 1 可以讓UI做幾套圖，直接加載上面，但是這樣要加許多圖片，而且要是以后有新需求的話，又要去換，比較麻煩，故不考慮。
• 2 我們把我們需要高亮的部分通過(guò)坐標(biāo)轉(zhuǎn)換，轉(zhuǎn)換到暗色背景上面，然后通過(guò)UIBezierPath畫(huà)一個(gè)圓圈，最后通過(guò)CAShapeLayer的path屬性將圓圈展示出來(lái)，由于這個(gè)是在最上層，而且下面部分不能點(diǎn)擊，所以我將其加載了keyWindow上面

部分代碼

- (void)showGuideViewWithTapView:(NSArray<UIView *> *)tapview tips:(NSArray<NSString *> *)tips
{
    self.tapNumber  = 0;
    self.tapViews = tapview;
    self.tips = tips;
    
    CGRect frame = [UIScreen mainScreen].bounds;
    UIView * bgView = [[UIView alloc] initWithFrame:frame];
    bgView.backgroundColor = UICOLOR_FROM_RGB_OxFF_ALPHA(0x323232, 0.8);

    self.bgView = bgView;

    self.tapGesture = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(sureTapClick:)];
    [self.bgView addGestureRecognizer:self.tapGesture];
    
    [[UIApplication sharedApplication].keyWindow addSubview:self.bgView];
    
    [self addBezierPathWithFrame:frame tapView:tapview[self.tapNumber] tip:tips[self.tapNumber]];
    
}

- (void)addBezierPathWithFrame:(CGRect)frame tapView:(UIView *)view tip:(NSString *)tip
{
    UIImage *guideImage = [UIImage imageNamed:@"guide3"];
    
    CGRect tap_frame = [[view superview] convertRect:view.frame toView:self.bgView];
    
    //通過(guò) UIBezierPath 創(chuàng)建路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    //畫(huà)圓圈
    CGFloat radius = 42.5;
    
    [path appendPath:[UIBezierPath bezierPathWithArcCenter:CGPointMake(tap_frame.origin.x + tap_frame.size.width/2.0, tap_frame.origin.y + tap_frame.size.height/2.0) radius:radius startAngle:0 endAngle:2*M_PI clockwise:NO]];
    
    //利用CAShapeLayer 的 path 屬性
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.path = path.CGPath;
    [self.bgView.layer setMask:shapeLayer];
    
    CGFloat x = CGRectGetMidX(tap_frame);
    CGFloat y = CGRectGetMaxY(tap_frame) + radius;

    for (UIView *view in self.bgView.subviews)
    {
        if ([view isKindOfClass:[UIImageView class]] || [view isKindOfClass:[UILabel class]])
        {
            [view removeFromSuperview];
        }
    }
    
    UIImageView * imageView = [[UIImageView alloc]initWithFrame:CGRectMake(x,y,guideImage.size.width,guideImage.size.height)];
    imageView.image = guideImage;
    [self.bgView addSubview:imageView];
    
    
    UILabel *lable = [[UILabel alloc] init];
    lable.text = tip;
    lable.font = [UIFont fontWithName:@"Wawati SC" size:20];
    lable.textColor = [UIColor whiteColor];
    //使用代碼布局 需要將這個(gè)屬性設(shè)置為NO
    lable.translatesAutoresizingMaskIntoConstraints = NO;
    [self.bgView addSubview:lable];
    
    NSLayoutConstraint * constraintx = nil;
    //將屏幕分成三等分 來(lái)確定文字是靠左還是居中 還是靠右 (大概 可以自己調(diào)整)
    if (x <= frame.size.width / 3.0) {
        //創(chuàng)建x居左的約束
        constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeLeft multiplier:1 constant:0];
    }
    else if ((x > frame.size.width / 3.0) &&(x <= frame.size.width * 2 / 3.0))
    {
        //創(chuàng)建x居中的約束
        constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    }
    else
    {
        //創(chuàng)建x居右的約束
        constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeRight multiplier:1 constant:0];
    }

    //創(chuàng)建y坐標(biāo)的約束
    NSLayoutConstraint * constrainty = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeBottom multiplier:1 constant:10];
    
    [self.bgView addConstraints:@[constraintx,constrainty]];
    
    self.tapNumber ++;
}

在上面代碼中，我把需要高亮的部分的view裝在了數(shù)組里面，并且把提示文字也加入到數(shù)組中，然后傳入，這樣如果是在一個(gè)界面有幾個(gè)地方需要進(jìn)行展示，就不用重復(fù)調(diào)用，只需要傳入對(duì)應(yīng)的參數(shù)就可以。

注意：在使用的時(shí)候，如果程序打開(kāi)的第一個(gè)界面就是引導(dǎo)界面 建議在 viewDidAppear 中調(diào)用，因?yàn)榇藭r(shí)[UIApplication sharedApplication].keyWindow 為nil，keywindow實(shí)際上沒(méi)有初始化完成

在代碼中，由于用到了第三方字體，這里也簡(jiǎn)答注釋下怎么加入第三方字體，大神勿噴哈，我只是記錄一下，簡(jiǎn)單的記錄一下

第三方字體導(dǎo)入

首先在plist文件中

1.jpeg

然后在TARGETS->Build Phases-> Copy Bundle Resources中導(dǎo)入字體

2.jpeg

到此字體就可以使用了，但是還有個(gè)問(wèn)題，就是[UIFont fontWithName:@"Wawati SC" size:20];中的字體名字我們需要去獲取，有下面兩個(gè)方法

• 1 用代碼去遍歷字體庫(kù)，打印字體名字

    //打印字體 
    NSArray * fontArrays = [[NSArray alloc] initWithArray:[UIFont familyNames]];
    for (NSString * font in fontArrays) {
        NSLog(@"Font name  = %@", font);
    }

Paste_Image.png

• 2 雙擊字體，然后會(huì)安裝到字體庫(kù)中，在字體庫(kù)的詳細(xì)信息中，我們可以得到

Paste_Image.png

兩種方式在名字上有點(diǎn)不同，但是效果是同的，我估計(jì)是因?yàn)樵?code>mac上，名字有些不一樣.

最后
附上簡(jiǎn)單demo一份，希望能幫到大家。