使用懸浮按鈕將我們的畫面拉回頂端吧！

來製作一個懸浮按鈕吧！

＃前言

前一篇教大家如何在 iOS 實現下拉式更新的文章我們有提到，我們前面所做的 UISearchController 搜尋關鍵字以及 UIRefreshControl 重整資料的操作大部分都必須在畫面最上方才能夠實現，因此我們這次教學會用一種 「 回到頂端 」的方式來解決這些問題。

＃ 懸浮按鈕

這邊我們會製作一個簡單的懸浮按鈕，我們想要當使用者滾動一定的距離時候，會跳出一個懸浮按鈕，而點下該按鈕我們能夠回到我們表單的最頂端，如此一來就能解決我們上述兩個問題。

首先先在我們的 StoryBoard 加上我們的懸浮按鈕。

新增一個懸浮按鈕這邊為了讓它更像個懸浮按鈕，我們幫它加上個陰影，我們編寫一個 floatingButtonShadow 讓我們的懸浮按鈕套用：

func floatingButtonShadow(_ button: UIButton) {
    // 陰影偏移量
    button.layer.shadowOffset = CGSize(width: button.bounds.width / 10, height: button.bounds.width / 10)
    // 陰影透明度
    button.layer.shadowOpacity = 0.75
    // 陰影模糊度
    button.layer.shadowRadius = 5
    // 陰影顏色
    button.layer.shadowColor = UIColor.black.cgColor
}

如此一來我們的按鈕應該就有懸浮在畫面上的感覺了～

好像真的浮在畫面上了XD

這時我們需要讓我們的按鈕有一個使 UICollectionView 滾到頂端的方法，這邊我們可以透過 ScrollView 的 setContentOffset 或是 CollectionView 的 scrollToItem 方式來讓我們的畫面回到最頂端。
這邊我們選擇使用 setContentOffset 來讓畫面回到最頂端，因為在我們畫面沒有資料的時候如果使用 scrollToItem 的時候的 IndexPath 不存在，就會導致程式崩潰。（ 雖然這個問題在後面實現一個方法後就會不存在了 ）

@IBAction func scrollToTop(_ sender: UIButton) {
  bookshelfCollectionView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
}

讓我們來測試一下這個置頂的功能吧！

按鈕置頂功能

＃優化懸浮按鈕效果

這邊我們想要優化我們懸浮按鈕的出現時機，我們想要等使用者滾動超過一個畫面時，我們的懸浮按鈕才出現，而平常的時候是看不見的。而這邊我們也希望他出現跟消失的時候也能帶有一些簡單的小動畫。

//  顯示按鈕
func showFloatingButton() {
    UIView.animate(withDuration: 0.4) {
        self.scrollToTopButton.transform = .identity
        self.scrollToTopButton.alpha = 1
    }
}

// 隱藏按鈕
func hideFloatingButton() {
    UIView.animate(withDuration: 0.4) {
        self.scrollToTopButton.transform = CGAffineTransform(translationX: 0 , y: 50)
        self.scrollToTopButton.alpha = 0
    }
}

接下來因為我們希望我們在使用者滾動畫面的時候就開始判斷是否需要顯示懸浮按鈕，因此我們會需要使用 UIScrollViewDelegate 的 DidScroll 方法，並且依照我們的 CollectionView 的 contentOffset.y 位移程度決定要不要顯示我們的懸浮按鈕：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    // 當我們的 contentOffset.y 超過我們一個 collectionView 的高度就顯示懸浮按鈕，反之則隱藏。
    if scrollView.contentOffset.y >= scrollView.bounds.height {
        showFloatingButton()
    } else {
        hideFloatingButton()
    }
}

別忘了在 viewDidLoad 先執行一次 hideFloatingButton 先將按鈕給隱藏。

讓我們來測試一下是否能在正確的時間點顯示：
鏘鏘鏘鏘～ 如此一來懸浮按鈕就大功告成啦

後記：

這次的設置懸浮按鈕效果就到這邊結束了，有興趣的讀者也可以試著做出功能更強大的，像是可以做出能夠拖動的懸浮按鈕，像是 iPhone 中的輔助控制 AssistiveTouch 一樣，如此一來就能開發更多的功能了，我們下篇文章見。