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。
