前言

App開發，為了給使用者更好的體驗，我們都會在首次安裝的時候，增加引導圖。引導圖的設計有很多方式，本文接下來就介紹一種快速整合引導圖的方式。先看看效果：

目標：

• 學習如何做一個屬於自己的公共控制元件
• 學習如何在檢視類中建立代理以及呼叫使用代理

核心方法

1、提供圖片陣列、兩個點選按鈕名稱、背景顏色的定製

   self.guideViewController = AppGuideViewController(images: coverImageNames,
                                                  firsBtnName: "立即體驗", secondBtnName: nil,
                                                  firstBtnBg: UIColor(hex: 0x43678d), secondBtnBg: nil)

2、兩個回撥方法.點選按鈕後回撥，滑動到最後一張圖片的時候回撥

  self.guideViewController?.firstBtnPress = {
        () -> Void in
        self.window!.rootViewController = vc;
    }
    self.guideViewController?.scrollRightEdge = {
        () -> Void in
        self.guideViewController?.isLoading = false
    }

3、設計用typealias來定義閉包

typealias ButtonPress = () -> Void      //按鈕點選事件回撥
typealias ScrollRightEdge = () -> Void      //滑動事件回撥，主要為了滑動到最後一頁彈出按鈕

4、設計一個標誌，作為是否彈出按鈕的標誌

var isLoading: Bool = false {
    didSet {
        
        if self.viewContainer.isHidden {
            //彈出按鈕
            self.viewContainer.isHidden = false
            self.viewContainer.alpha = 0
            UIView.animate(withDuration: 0.3, animations: {
                self.viewContainer.alpha = 1
            })
        }
   
    }
}

5、建立一個容器來放按鈕，用來實現彈出按鈕效果

    let viewWidth = self.view.bounds.width
    self.viewContainer = UIView()
    self.viewContainer.frame =  CGRect(x: self.buttonMargin, y: self.pageControl.frame.origin.y + 40, width:  viewWidth - self.buttonMargin * 2, height: 40)
    self.viewContainer.backgroundColor = UIColor.clear
    self.view.addSubview(self.viewContainer)

6、實現滾動代理

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    
    let index: Int = Int(scrollView.contentOffset.x / self.view.frame.size.width)
    let alpha: CGFloat = 1 - ((scrollView.contentOffset.x - CGFloat(index) * self.view.frame.size.width) / self.view.frame.size.width)
    
    if self.backgroundViews.count > index {
        let v = self.backgroundViews[index]
        v.alpha = alpha
    }
    
    self.pageControl.currentPage = 0
    
    self.pageControl.currentPage = Int(scrollView.contentOffset.x / (scrollView.contentSize.width / CGFloat(self.numberOfPagesInScrollViewPaging())))
    
}

func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
    if self.pageControl.currentPage == self.numberOfPagesInScrollViewPaging() - 1 {
        self.scrollRightEdge?()
    }
}

最後

以上就是我關於快速構建引導圖的一次實踐。分享給大家，如果裡面有什麼錯誤，歡迎大家多多指教。
完整的程式碼請檢視:我的github