TableViewなどの上にスクロールで動かないボタンを配置する方法

## はじめに
　「NavigationBarItemなどで上に配置してもいいけど、デザイン的に何か違う...」、「機能が二つだからタブで分けるほどじゃない...」こんな時にはビュー上にスクロールで動かないボタンを配置したくなります。ここではコードベースで動かないボタンを実装していきます。なお、コードベースでレイアウトを組む時に便利なSnapKitを利用しています。(`snp`がついているところ)本来`CGRect()やCGSize()`で指定するところなので、必要に応じて読み替えて下さい。なお、storyboardを使う場合は[こちら](http://blog.all-in.xyz/2016/06/20/how-to-put-button-on-tableview-which-will-not-scroll-with-table/)が参考になると思います。
　ちなみにFlutterやAndroidでは**FloatingButton**というらしいです。Flutterで新規アプリを作成するとはじめにできてるカウントアプリでも使われてたはず...


![Simulator Screen Shot - iPhone 12 - 2021-01-11 at 14.10.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/549093/3ea5a34d-98f4-9839-6a53-8e1f8be1c4d0.png)

## Viewの準備
###クラスの作成
FloatingButtonViewというUIViewを継承したクラスを作成し、初期化の準備とUIButton, UITableViewの定義をします。

```swift
import UIKit
import SnapKit

class FloatingButtonView: UIView {
    
    let tableView =  UITableView()
    let floatingButton = UIButton()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}
```

###tableViewの準備

`setupTableView`という関数のなかで大きさや配置の定義を行います。

```swift
private func setupTableView() {
        addSubview(tableView)
        tableView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.size.equalToSuperview()
        }
    }
```
###floatingButtonの準備
`setupFloatingButton`という関数のなかで大きさや配置の定義を行います。
せっかくなので`layer.cornerRadius`を使い丸くしています。一辺の長さの半分にすることで綺麗な円になります。

```swift
private func setupFloatingButton() {
        floatingButton.backgroundColor = .blue
        addSubview(floatingButton)
        floatingButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.right.equalToSuperview().offset(-30)
            $0.bottom.equalToSuperview().offset(-30)
        }
        floatingButton.layer.cornerRadius = 25
    }
```

###全体のソースコード

```swift
import UIKit
import SnapKit

class FloatingButtonView: UIView {
    
    let tableView =  UITableView()
    let floatingButton = UIButton()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupTableView()
        setupFloatingButton()
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setupTableView() {
        addSubview(tableView)
        tableView.snp.makeConstraints {
            $0.center.equalToSuperview()
            $0.size.equalToSuperview()
        }
    }
    private func setupFloatingButton() {
        floatingButton.backgroundColor = .blue
        addSubview(floatingButton)
        floatingButton.snp.makeConstraints {
            $0.width.equalTo(50)
            $0.height.equalTo(50)
            $0.right.equalToSuperview().offset(-30)
            $0.bottom.equalToSuperview().offset(-30)
        }
        floatingButton.layer.cornerRadius = 25
    }
}
```

### ViewControllerの準備
準備といっても、Viewdで作ったものを貼り付けるだけですが。
###クラスの作成

```swift
import UIKit

class FloatingButtonViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}
```
###loadViewの準備
`loadView`のなかで自身の持つ`view`を先ほど作った`FloatingView`にします。

```Swift
override func loadView() {
        view = FloatingButtonView()
}
```

### 全体のソースコード

```swift
import UIKit

class FloatingButtonViewController: UIViewController {
    
    override func loadView() {
        view = FloatingButtonView()
    }
    override func viewDidLoad() {
        super.viewDidLoad()
    }
}

```

完成！