iOS 簡單引導界面

代碼地址如下：
http://www.demodashi.com/demo/11607.html

前言
現在很多APP在用戶第一次用的時候，由於用戶可能並不知道其中一些功能點的時候，這個時候就需要我們來對用戶做一些引導工作。於是這個功能引導界面就應運而生了，先來看看大概效果吧，我這只是很簡單的做了一個demo

走，上圖

分析

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

解決辦法

• 1 可以讓UI做幾套圖，直接加載上面，但是這樣要加許多圖片，而且要是以后有新需求的話，又要去換，比較麻煩，故不考慮。
• 2 我們把我們需要高亮的部分通過坐標轉換，轉換到暗色背景上面，然后通過UIBezierPath畫一個圓圈，最后通過CAShapeLayer的path屬性將圓圈展示出來，由於這個是在最上層，而且下面部分不能點擊，所以我將其加載了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];
    
    //通過 UIBezierPath 創建路徑
    UIBezierPath *path = [UIBezierPath bezierPathWithRect:frame];
    //畫圓圈
    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];
    //使用代碼布局 需要將這個屬性設置為NO
    lable.translatesAutoresizingMaskIntoConstraints = NO;
    [self.bgView addSubview:lable];
    
    NSLayoutConstraint * constraintx = nil;
    //將屏幕分成三等分 來確定文字是靠左還是居中 還是靠右 (大概 可以自己調整)
    if (x <= frame.size.width / 3.0) {
        //創建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))
    {
        //創建x居中的約束
        constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeCenterX relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeCenterX multiplier:1 constant:0];
    }
    else
    {
        //創建x居右的約束
        constraintx = [NSLayoutConstraint constraintWithItem:lable attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:imageView attribute:NSLayoutAttributeRight multiplier:1 constant:0];
    }

    //創建y坐標的約束
    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裝在了數組里面，並且把提示文字也加入到數組中，然后傳入，這樣如果是在一個界面有幾個地方需要進行展示，就不用重復調用，只需要傳入對應的參數就可以。

注意：在使用的時候，如果程序打開的第一個界面就是引導界面 建議在 viewDidAppear 中調用，因為此時 [UIApplication sharedApplication].keyWindow 為nil，keywindow實際上沒有初始化完成

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

第三方字體導入

首先在plist文件中

然后在TARGETS->Build Phases-> Copy Bundle Resources中導入字體

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

• 1 用代碼去遍歷字體庫，打印字體名字

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

• 2 雙擊字體，然后會安裝到字體庫中，在字體庫的詳細信息中，我們可以得到

兩種方式在名字上有點不同，但是效果是同的，我估計是因為在mac上，名字有些不一樣.

項目文件截圖：

iOS 簡單引導界面

代碼地址如下：
http://www.demodashi.com/demo/11607.html

注：本文著作權歸作者，由demo大師代發，拒絕轉載，轉載需要作者授權