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 ⭐️，您的鼓勵是我前進的動力！