一、效果展示

[[142842]]

這種類型的新手引導比較常見，用于告訴用戶某個按鈕的作用，或者提醒用戶可以進行某種交互操作。引導樣式是在界面上加了一個半透明的引導圖，高亮部分就是要突出的區域

二、怎么做？

方案有很多種，不同的方案有不同的優缺點，這里列舉兩種常見的方案

1. 方案一：生成整張引導圖

(1). 導出引導圖

讓設計師導出各個尺寸的引導圖，引導圖只包含指引部分，不包括背景，導出的引導圖樣式如下：

[[142843]]

需要導出iPhone4，iPhone5，iPhone6，iPhone6 plus 共4個尺寸，如果適配iPad，還需要導出iPad的

(2). 編碼

因為整張圖導出了，所以代碼部分就簡單了，不需要考慮布局問題，直接生成一個imageView放上去，然后給它添加個點擊事件即可

代碼如下：

- (void)addGuideView { 
    NSString *imageName = nil; 
    if (DEVICE_IS_IPHONE5) { 
        imageName = @"guide-568h"; 
    } else { 
        imageName = @"guide"; 
    } 
 
    UIImage *image = [UIImage imageNamed:imageName]; 
    UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; 
    imageView.frame = self.view.bounds; 
    imageView.userInteractionEnabled = YES; 
 
    UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(dismissGuideView)]; 
    [imageView addGestureRecognizer:tap]; 
 
    [self.view addSubview:imageView]; 
} 

這里需要特別注意：
@3x 的圖片需要iOS8以上的系統才能夠自動識別出來，如果要向前兼容，則圖片名那里需要自行判斷設備類型，然后指定對應的圖片名稱

(3). 優缺點

這種方案的優點是
a. 快速
只要設計師做好效果圖以后，把蒙層導出成各種規格即可，90%的工作量都在設計師身上，程序員只需要簡單地添加視圖和事件即可

b. 維護成本低
當界面發生變化，或者引導圖需要調整時，只需要設計師重新生成圖片，然后替換就可以了

但這種方案的缺點也很多：
a. 圖片占據空間大
每種設備一張圖片，圖片還是全屏規格的，可能還要適配橫屏，明顯會增加app安裝包的大小

b. 圖片無法復用
一張引導圖只能用于一個地方，其他地方不可能會用得上

2. 方案二：圖片拼接

圖片拼接的思路是這樣的，通過若干張圖片拼成一個遮罩層，然后再在上面放其他元素，如下圖所示

[[142844]]

(1). 準備圖片

這里需要準備3張圖片
a. 空心的橢圓遮罩層

[[142845]]

中間是透明，周圍是白色的，白色部分可以在遮罩過程中修改成任意的顏色

b. 小箭頭

[[142846]]

c. 確定按鈕

[[142847]]

#p#

(2). 編碼

這里只介紹部分代碼的編寫過程

a. 接口
接口的定義：

• (void)showInView:(UIView )view maskBtn:(UIButton )btn;
  view：引導圖的父視圖
  btn：被遮罩的按鈕

接口的實現：

(void)showInView:(UIView )view maskBtn:(UIButton )btn { 
self.parentView = view; 
self.maskBtn = btn; 
 
self.alpha = 0; 
[view addSubview:self]; 
[UIView animateWithDuration:0.2 animations:^{ 
 
  self.alpha = 1; 
} completion:nil]; 
} 

b. 修改遮罩層
加載空心的橢圓圖片后，先對白色區域進行處理，把它改成黑色半透明
UIImage image = [UIImage imageNamed:@"whiteMask"];
image = [image maskImage:[[UIColor blackColor] colorWithAlphaComponent:0.71]];
UIImageView imageView = [[UIImageView alloc] initWithImage:image];

(UIImage )maskImage:(UIColor )maskColor 
{ 
CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height); 
 
UIGraphicsBeginImageContext(rect.size); 
 
CGContextRef context = UIGraphicsGetCurrentContext(); 
CGContextTranslateCTM(context, 0, rect.size.height); 
CGContextScaleCTM(context, 1.0, -1.0); 
CGContextClipToMask(context, rect, self.CGImage); 
CGContextSetFillColorWithColor(context, maskColor.CGColor); 
CGContextFillRect(context, rect); 
 
UIImage *smallImage = UIGraphicsGetImageFromCurrentImageContext(); 
 
UIGraphicsEndImageContext(); 
 
return smallImage; 
} 

• 這里會將圖片中白色的部分改成任意的顏色，我們要將空心的橢圓圖片變成這樣

   

  [[142848]]

   

  c. 生成上下左右4個黑色半透明視圖

  分別放在空心橢圓圖片的上、下、左、右四個方位

   

• (UIView *)topMaskView { 
  if (!_topMaskView) { 
   
    UIView *view = [[UIView alloc] init]; 
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    _topMaskView = view; 
  } 
  return _topMaskView; 
  } 

• (UIView *)bottomMaskView { 
  if (!_bottomMaskView) { 
   
    UIView *view = [[UIView alloc] init]; 
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    _bottomMaskView = view; 
  } 
  return _bottomMaskView; 
  } 

• (UIView *)leftMaskView { 
  if (!_leftMaskView) { 
   
    UIView *view = [[UIView alloc] init]; 
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    _leftMaskView = view; 
  } 
  return _leftMaskView; 
  } 

• (UIView *)rightMaskView { 
  if (!_rightMaskView) { 
   
    UIView *view = [[UIView alloc] init]; 
    view.backgroundColor = [[UIColor blackColor] colorWithAlphaComponent:0.71]; 
    _rightMaskView = view; 
  } 
  return _rightMaskView; 
  } 

d. 視圖布局
這里有幾個需要注意的地方:
c-1. 被拼接的視圖的 x，y，width，height 的值需要取整，因為浮點數可能會導致銜接部位出現白邊，尤其是在iPhone6 plus上，原因是手機的分辨率問題，所以這里***使用整數

c-2. 在 layoutSubviews 函數中進行布局，這里布局的好處是橫豎屏適配都能夠平滑過渡，而且不需要手動更新

布局代碼如下：

(void)layoutSubviews { 
[super layoutSubviews]; 
self.frame = _parentView.bounds; 
_maskBg.frame = self.bounds; 
_btnMaskView.center = [_maskBtn.superview convertPoint:_maskBtn.center toView:_maskBtn.superview]; 
 
CGRect btnMaskRect = _btnMaskView.frame; 
btnMaskRect.size = CGSizeMake(floor(btnMaskRect.size.width), floor(btnMaskRect.size.height)); 
btnMaskRect.origin = CGPointMake(floor(btnMaskRect.origin.x), floor(btnMaskRect.origin.y)); 
_btnMaskView.frame = btnMaskRect; 
 
_topMaskView.left = 0; 
_topMaskView.top = 0; 
_topMaskView.height = _btnMaskView.top; 
_topMaskView.width = self.width; 
 
_bottomMaskView.left = 0; 
_bottomMaskView.top = _btnMaskView.bottom; 
_bottomMaskView.width = self.width; 
_bottomMaskView.height = self.height - _bottomMaskView.top; 
 
_leftMaskView.left = 0; 
_leftMaskView.top = _btnMaskView.top; 
_leftMaskView.width = _btnMaskView.left; 
_leftMaskView.height = _btnMaskView.height; 
 
_rightMaskView.left = _btnMaskView.right; 
_rightMaskView.top = _btnMaskView.top; 
_rightMaskView.width = self.width - _rightMaskView.left; 
_rightMaskView.height = _btnMaskView.height; 
 
_arrwoView.right = _btnMaskView.left + 24; 
_arrwoView.bottom = _btnMaskView.top - 8; 
_tipsLabel.right = _arrwoView.left - 6; 
_tipsLabel.bottom = _arrwoView.top + 10; 
 
_okBtn.centerX = self.width/2; 
_okBtn.bottom = _btnMaskView.top - 80; 
} 

(3). 優缺點

優點：
a. 節約空間
一般就只需要幾個小圖，然后就可以組裝成一張引導圖了

b. 圖片可重用
按鈕、橢圓圖、小箭頭這一類的圖片可能被其他引導圖繼續使用

缺點：
a. 編碼時間較長
每一個界面元素都需要通過編碼來實現，每一次改動也需要調整代碼

三、總結

***種方案比較適合小項目，主要是速度快，適合快速迭代
第二種方案適合長期更新的項目，節約app空間
Demo地址：
https://github.com/sunljz/demo/tree/master/GuideDemo

【編輯推薦】

1. iOS開發基礎知識：Core Animation(核心動畫)
2. iOS開發的一些奇巧淫技
3. iOS開發的一些奇巧淫技2
4. iOS開發知識體系
5. 關于iOS多線程，你看我就夠了

【責任編輯：倪明 TEL：（010）68476606】