iOS版本迭代添加新功能提示

当App迭代版本，增长新功能时，每每会在用户点进相应界面的时候，高亮显示新功能，并配上相应的图片文字吸引用户注意。例如XX功能更新了，办理什么业务不再用排队了；经过XX新功能能够直接查询什么功能了...，如图简易提示：

NOTE: 上图提示简易，实际需求由UI设计漂亮醒目的图片文字。

方法思考

一般比较懒的作法，是由UI作出全屏的新功能提示图片，由开发人员控制进入相应界面时，全屏展现相应提示图片。

这样作的缺点主要有2个：

1. 咱们全屏添加到视图上面的图片，因为手机屏幕缩放的缘由，提早设计的固定图片，上面高亮指向→的部分，每每和咱们实际待高亮提示控件的位置不一致，图片移除时，会给人控件位置跳动一下的感受；
2. 全屏图片想要高清展现，压缩后也有上百KB，若是新功能提示较多，App安装包体积会明显增大。

经过观察发现，新功能提示大同小异，都是高亮待提示的部分，再用小的图片文字指向新功能提示用户。每一个界面除了指向新功能的小图片提示，和后面蒙版高亮控件的位置不同外，其余都同样。所以，咱们能够经过代码生成高亮控件的背景图片，再叠加指向新功能的小图片便可，这样高亮提示的位置准确，图片体积也显著减小。

代码生成高亮待提示控件位置的背景图片

#pragma mark - 背景图片
//传入待提示控件的Frame 和切圆角的半径(默认为5)
-(UIImage *)imageWithTipRect:(CGRect)tipRect tipRectRadius:(CGFloat)tipRectRadius{
    
    //开启当前的图形上下文
    UIGraphicsBeginImageContextWithOptions([UIScreen mainScreen].bounds.size, NO, 0.0);
    
    // 获取图形上下文，画板
    CGContextRef cxtRef = UIGraphicsGetCurrentContext();
    
    //将提示框增大，并与控件保持中心对齐，默认增大尺寸为切圆角的半径，须要特殊处理改下面尺寸
    CGFloat plusSize = tipRectRadius;
    CGRect tipRectPlus = CGRectMake(tipRect.origin.x - plusSize * 0.5, tipRect.origin.y - plusSize * 0.5, tipRect.size.width + plusSize, tipRect.size.height + plusSize);
    
    //绘制提示路径
    UIBezierPath *tipRectPath = [UIBezierPath bezierPathWithRoundedRect:tipRectPlus cornerRadius:tipRectRadius];
    
    //绘制蒙版
    UIBezierPath *screenPath = [UIBezierPath bezierPathWithRect:[UIScreen mainScreen].bounds];
    
    //填充色，默认为半透明，灰黑色背景；若是设置了自定义颜色，则使用自定义颜色
    if (self.bgColor) {
        CGContextSetFillColorWithColor(cxtRef, self.bgColor.CGColor);
    }else{
        CGContextSetFillColorWithColor(cxtRef, [UIColor colorWithRed:0.0/255.0 green:0.0/255.0 blue:0.0/255.0 alpha:0.2].CGColor);
    }
    
    //添加路径到图形上下文
    CGContextAddPath(cxtRef, tipRectPath.CGPath);
    CGContextAddPath(cxtRef, screenPath.CGPath);
    
    //渲染，选择奇偶模式
    CGContextDrawPath(cxtRef, kCGPathEOFill);
    
    //从画布总读取图形
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    //关闭图形上下文
    UIGraphicsEndImageContext();
    
    return image;
}

复制代码

添加指向新功能的提示图片

//背景容器
    UIView *bView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
    instance.bgView = bView;
    
    //添加展现背景图片的图层
    UIImageView *maskImageView = [[UIImageView alloc]initWithFrame:[UIScreen mainScreen].bounds];
    [bView addSubview:maskImageView];
    
    //添加指向新功能的提示图片
    UIImageView *tipImageView = [[UIImageView alloc]initWithFrame:CGRectZero];
    [bView addSubview:tipImageView];
    
    //添加至Windows，展现在最上面
    [[UIApplication sharedApplication].delegate.window addSubview: bView];
        
复制代码

NOTE: 以上代码主要提供一个思路，您可能有更好的方法，欢迎指导。

封装

程序猿都是“很懒”的，这个“懒”是指不肯意干重复的工做。咱们能够将此功能封装一下，最好下次使用时，一两行代码搞定。

封装思路分析：

1. 从外部接口考虑，咱们确定须要传入多个待高亮提示的控件位置，因为CGRect不是对象，存入取出数组都需转换，咱们直接把待提示的控件放入数组中，传入便可。
2. 每一个功能提示界面，确定有一张指向新功能的图片，咱们命名图片的时候，能够按照功能命名，例如functionImage0，functionImage1，functionImage2...；这样咱们只须要传入一个图片名称前缀便可。
3. 用户可能须要自定义背景色，需暴露一个设置颜色的属性。
4. 指向新功能的图片位置默认在下方，能够自定义位置。
5. 用户设置颜色和位置的顺序可能不固定，可能会先建立背景视图和添加功能提示图片。
6. 提示图片的位置，确定都是围绕在新功能高亮提示附近的，可用枚举列举经常使用位置。

暴露接口

//定义为单例
	+(instancetype)shareGuide;
	
	/**
	 建立遮罩提示层
	 @param beGuidedViews 数组存入须要高亮的控件
	 @param prefixName 提示图片的前缀，例如preName0前缀为preName,图片按照此格式命名
	 */
	-(void)addGuideViews:(NSArray *)beGuidedViews imagePrefixName:(NSString *)prefixName;
        
复制代码

完整代码

完整代码已经封装并上传至GitHub，下载地址GuideMaskDemo，若有错误，欢迎指正。

封装好的代码已上传至CocoaPods，名称为GuideMask，可经过编辑Podfile文件，增长行 pod 'GuideMask'，一键导入集成。

用法

GuideMask默认为单例，灰黑色半透明背景，提示图片展现在待提示功能下方。

假设提示图片依次命名为arrow0，arrow1，arrow2，arrow3...

#import "GuideMask.h"
//建立提示
GuideMask *mask = [GuideMask shareGuide];
//将待提示的View和提示小图片名称导入
[mask addGuideViews:@[self.richTextBtn,self.dateBtn,self.refreshBtn,self.fmdbBtn] imagePrefixName:@"arrow"];
复制代码

固然你能够自定义背景颜色和透明度，和每张图片的位置，位置分为上，下，左，右，左上，左下，右上，右下，中心对齐，图片全屏覆盖手机等几种，能知足大部分需求。

//-------------------------可选----------------
//指定位置，默认在正下方
mask.tipImageLocation = @[@(GuideMaskPositionUp),@(GuideMaskPositionDown),@(GuideMaskPositionLeft),@(GuideMaskPositionRight),@(GuideMaskPositionLeftUp),@(GuideMaskPositionRightUp),@(GuideMaskPositionLeftDown),@(GuideMaskPositionRightDown)];
//背景色
mask.bgColor = [UIColor colorWithRed:128.0/255.0 green:128.0/255.0 blue:128.0/255.0 alpha:0.7];
复制代码

若是您以为有所帮助，请在GitHub GuideMaskDemo上赏个Star ⭐️，您的鼓励是我前进的动力！