iOS 功能提示

Direction.gif

由于项目需要新手指引功能，所以就尝试着去做了一下。

正文

需要做提示的View单独显示出来，镂空效果可以通过mask属性来做。

//初始化MaskLayer
CAShapeLayer* maskLayer = [CAShapeLayer layer];
    
[maskLayer setFrame:layer.bounds];
    
//设置MaskLayer的路径
UIBezierPath* maskLayerPath = [UIBezierPath bezierPathWithRect:maskLayer.bounds];
    
layer.directionActions = actions;
    
layer.currentUrl = 0;
    
//保存mask矩形路径
layer.maskRectPath = [maskLayerPath copy];
    
//创建mask以及镂空效果的路径
UIBezierPath* path = [layer settingMaskAttributes];
    
[maskLayerPath appendPath:[path bezierPathByReversingPath]];
    
maskLayer.path = maskLayerPath.CGPath;
    
//设置Mask
layer.mask = maskLayer;

实现路径原理.png

信息框的描绘，在需要提示的View的方向上(这个View可以有三种效果，Rect,RoundRect,Circle)，添加两个radius递增的圆(椭圆)，最后一个内部则添加了CATextLayer用于显示提示信息。

几个圆处于同一条直线上，所以很好就能计算出对应的位置,但是还要区分当前View的位置，如果位于下方，那么如果信息框则需要往上拓展。

    //起始坐标
    int infoLayerOriginX,infoLayerOriginY;
   
    //求水平方向的坐标
    switch (horizontal) {
        case 0:
            //左边
            //最右边的位置
            infoLayerOriginX = action.frame.origin.x + action.frame.size.width / 2.0;
            
            hintInfoFirstLayerOriginX = 5;
            
            break;
        case 1:
            //右边
            //保存靠近左边的位置
            infoLayerOriginX = action.frame.origin.x + action.frame.size.width / 2.0 - infoRectOfWidthAndHeight;
            
            hintInfoFirstLayerOriginX = infoRectOfWidthAndHeight - 5;
            
            break;
        default:
            //中间
            infoLayerOriginX = action.frame.origin.x + action.frame.size.width / 2.0;
            
            hintInfoFirstLayerOriginX = 5;
            
            break;
    }
    
    //垂直方向的坐标
    
    switch (vertical) {
        case 0:
            //上
            infoLayerOriginY = action.frame.origin.y + action.frame.size.height;
            
            hintInfoFirstLayerOriginY = 10;
            break;
        case 1:
            //下
            infoLayerOriginY = action.frame.origin.y - infoRectOfWidthAndHeight;
            
            hintInfoFirstLayerOriginY = infoRectOfWidthAndHeight - 10;
            break;
            
        default:
            //中
            infoLayerOriginY = action.frame.origin.y + action.frame.size.height;
            
            hintInfoFirstLayerOriginY = 10;
            break;
    }

判断了几个不同方位的View就能算出对应的信息应该显示在哪里了。

//路径创建分为朝上还是朝下
    if(vertical == 1){
        //朝上
        //还需要分为朝左还是朝右
        if(horizontal == 1){
            //朝左
            //创建第一个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX, hintInfoFirstLayerOriginY, 6, 4)]];
            
            //创建第二个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX - 19, hintInfoFirstLayerOriginY - 15, 11, 8)]];
            
            //创建第三个椭圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX - 136.5 , hintInfoFirstLayerOriginY - 106, 118, 90)]];
            
            
            textLayer.frame = CGRectMake(hintInfoFirstLayerOriginX - 136.5 + 114 / 4, hintInfoFirstLayerOriginY - 106 + 90 / 4, 114 / 2, 90 / 2);
        }else{
            //朝右
            //创建第一个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX, hintInfoFirstLayerOriginY, 6, 4)]];
            
            //创建第二个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX + 8, hintInfoFirstLayerOriginY - 15, 11, 8)]];
            
            //创建第三个椭圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX + 18.5 , hintInfoFirstLayerOriginY - 106, 118, 90)]];
            
            textLayer.frame = CGRectMake(hintInfoFirstLayerOriginX + 23.5 + 114 / 4, hintInfoFirstLayerOriginY - 106 + 90 / 4, 114 / 2, 90 / 2);
        }

    }else{
        //朝下
        //判断左右
        if(horizontal == 1){
            //朝左
            //创建第一个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX, hintInfoFirstLayerOriginY, 6, 4)]];
            
            //创建第二个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX - 19, hintInfoFirstLayerOriginY + 7, 11, 8)]];
            
            //创建第三个椭圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX - 136.5 , hintInfoFirstLayerOriginY + 16, 118, 90)]];
            
            
            textLayer.frame = CGRectMake(hintInfoFirstLayerOriginX - 136.5 + 114 / 4, hintInfoFirstLayerOriginY + 20 + 90 / 4, 114 / 2, 90 / 2);
        }else{
            //朝右
            //创建第一个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX, hintInfoFirstLayerOriginY, 6, 4)]];
            
            //创建第二个圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX + 8, hintInfoFirstLayerOriginY + 7, 11, 8)]];
            
            //创建第三个椭圆
            [finallyPath appendPath:[UIBezierPath bezierPathWithOvalInRect:CGRectMake(hintInfoFirstLayerOriginX + 18.5 , hintInfoFirstLayerOriginY + 16, 118, 90)]];
            
            
            textLayer.frame = CGRectMake(hintInfoFirstLayerOriginX + 22 + 114 / 4, hintInfoFirstLayerOriginY + 20 + 90 / 4, 114 / 2, 90 / 2);
        }
    }

然后就是监听屏幕点击的时候，应该展示下一个View，当时最后一个的时候就导引结束了。

- (void)nextAction{
    //判断下标是否为最后一个
    if(self.currentUrl == self.directionActions.count - 1){
        //最后一个，直接结束，通知
        [NSNotificationCenter.defaultCenter postNotificationName:MXDirectionEndNotification object:nil];
        
    }
    //删除当前信息框
    if(self.infoLayer){
        [self.infoLayer removeFromSuperlayer];
    }
    //设置Mask
    UIBezierPath* maskPath = [self.maskRectPath copy];
    
    [maskPath appendPath:[[self settingMaskAttributes] bezierPathByReversingPath]];
    
    //下标+
    self.currentUrl++;
    //显示
    [self showAction];
}

showAction方法是信息View的绘制过程。

核心代码就差不多上面部分了。

使用

[MXDirectionView showDirectionWithActions:array BackGroundColor:[UIColor blackColor]  TextColor:[UIColor whiteColor]];

MXDirectionAction的结构

typedef enum : NSUInteger {
    MXDirectionActionRect,
    MXDirectionActionRoundRect,
    MXDirectionActionCircle
} MXDirectionActionType;

@interface MXDirectionAction : NSObject

@property (nonatomic,assign) MXDirectionActionType type;

@property (nonatomic,assign)CGRect frame;

@property (nonatomic,copy)NSString* hintInfo;

+ (nonnull instancetype)actionWithType:(MXDirectionActionType)type Frame:(CGRect)frame HintInfo:(nonnull NSString*)hintInfo;
@end

详细代码在GitHub。