iOS Kingdom — 页面引导

很多 App 在第一次打开使用时，都会有一个提示的页面来教导用户怎么使用你所编写的 App。这个页面我把它叫做“引导页面”，引导页面是为了让用户在第一次使用你的设计的软件时更容易上手，下面让我来教大家怎么编写一个简单而又实用的引导页面。

效果图

实现教程

1．建立一个 UIView 的子类 WQGuideView

在这个子类中定义两个公有方法

@interface WQGuideView : UIView
/*!
 *  初始化引导页面
 *
 *  @param frame  引导页面的 frame
 *  @param guides <@"引导描述" : 点击范围>
 *
 *  @return 引导页面
 */
- (WQGuideView *)initWithFrame:(CGRect)frame
                        guides:(NSArray<NSDictionary<NSString *,NSValue *> *> *)guides;

/*!
 *  开始引导
 */
- (void)showGuide;
@end

2．在 .m 文件中实现这两个方法就可以实现一个简单的引导页面了

#param mark 公有方法
- (WQGuideView *)initWithFrame:(CGRect)frame
                       guides:(NSArray<NSDictionary<NSString *,NSValue *> *> *)guides {
    self = [super initWithFrame:frame];
    if (self) {
        self.guides = [guides copy];
        self.backgroundColor = [UIColor blackColor];
        self.alpha = 0.8;
        
        // 点击动作
        self.btnGuide = [UIButton buttonWithType:UIButtonTypeRoundedRect];
        self.btnGuide.backgroundColor = [UIColor clearColor];
        [self.btnGuide addTarget:self
                          action:@selector(nextGuide:)
                forControlEvents:UIControlEventTouchUpInside];
        [self addSubview:self.btnGuide];
        
        // 引导描述
        self.labMessage = [[UILabel alloc] init];
        self.labMessage.textColor = [UIColor whiteColor];
        self.labMessage.numberOfLines = 0;
        self.messageFont = [UIFont fontWithName:@"Zapfino"
                                           size:8];
        [self addSubview:self.labMessage];
    }
    return self;
}

- (void)showGuide {
    self.currentIndex = 0;
    [self guideWithIndex:self.currentIndex];
}

#param mark 私有方法
- (void)guideWithIndex:(NSInteger)index {
    if (self.guides.count == 0) {
        [self nextGuide:nil];
        return;
    }
    NSDictionary *dic = self.guides[index];
    CGRect rect = [dic[[[dic allKeys] firstObject]] CGRectValue];
    self.btnGuide.frame = rect;
    
    // 添加描述
    [self addMessage1:[[dic allKeys] firstObject]
             nearRect:rect];
    
    UIBezierPath *shapePath;
    CGFloat lineWidth = 5.0;
    shapePath = [UIBezierPath bezierPathWithOvalInRect:rect];
    
    // 添加圆形空白处
    CAShapeLayer *layer = [CAShapeLayer layer];
    UIBezierPath *bezier = [UIBezierPath bezierPathWithRect:self.bounds];
    [bezier appendPath:[shapePath bezierPathByReversingPath]];
    layer.path = bezier.CGPath;
    layer.lineWidth = lineWidth;
    layer.lineDashPattern = @[@5,@5];
    layer.strokeColor = [UIColor redColor].CGColor;
    layer.fillColor = [UIColor redColor].CGColor;
    self.layer.mask = layer;
}

/**
*  为引导添加描述文字
*/
- (void)addMessage1:(NSString *)message
           nearRect:(CGRect)rect {
    CGPoint center = CGPointMake(CGRectGetMidX(rect),
                                 CGRectGetMidY(rect));
    self.location = (sHeigth - center.y) > sHeigth/2 ? Down : Upper;
    
    // 文字最大显示区域
    CGSize size = CGSizeMake(sWidth - Margin*2,
                             self.location & Upper ? CGRectGetMinY(rect) - self.space : sHeigth - (self.space + CGRectGetMaxY(rect)));
    // 文字长宽
    CGRect msgRect = [message boundingRectWithSize:size
                                           options:NSStringDrawingUsesLineFragmentOrigin
                                        attributes:@{NSFontAttributeName : self.labMessage.font}
                                           context:nil];
    CGFloat labY = self.location & Upper ? CGRectGetMinY(rect) - self.space - CGRectGetHeight(msgRect) : CGRectGetMaxY(rect) + self.space;
    CGFloat labX = 0.0;
    if (center.x + msgRect.size.width/2 >= sWidth) {
        labX = sWidth - msgRect.size.width - Margin ;
    }else if (center.x - msgRect.size.width/2 <= 0){
        labX = Margin;
    }else {
        labX = CGRectGetMidX(rect) - msgRect.size.width/2;
    }
    CGRect labRect = CGRectMake(labX,
                                labY,
                                msgRect.size.width,
                                msgRect.size.height);
    self.labMessage.frame = labRect;
    self.labMessage.text = message;
}

/**
*  下一个引导
*/
- (void)nextGuide:(UIButton *)sender {
    self.currentIndex ++;
    if (self.currentIndex < self.guides.count) {
        [self guideWithIndex:self.currentIndex];
        return;
    }
    
    [self removeFromSuperview];
    if ([self.delegate respondsToSelector:@selector(hideGuide)]) {
        [self.delegate hideGuide];
    }
}

GitHub 下载地址: https://github.com/AppleDP/WQGuideView
CocoaChina 下载地址: http://code.cocoachina.com/view/133173