【Swift4】ToDoリストアプリを作る（２）

タスクの新規追加をするためにどのようなUIにするか、ToDoリストアプリにおいて悩みどころです。
今回は、Androidのフローティングアクションボタン風のボタンを右下に配置することにしました。
スマホの操作をしていると、「指を上の方に持っていくのは少々ストレスがかかる」と思い、指の移動を抑えた操作にします。
そう考えるとAndroidのUIは理にかなっていると、今更ながら思いました。

ボタンの配置

ViewControllerの右下にViewを配置し、その中にUIButtonを配置します。
ボタンがContainerViewの下に隠れないようにします。
UIデザインは自由にしましょう。

TableViewのスクロールイベントを拾う

タスクがボタンに隠れないよう、TableViewをスクロールしているときはボタンを隠すようにします。
メルカリの「出品」ボタンの動きを参考にしました。
TableViewControllerに以下を追加するだけで、スクロールイベントを拾うことができます。

   override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        print("スクロール開始")
    }
  
    
    override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView){
        print("スクロール終了")
    }

ボタンを下方向の画面外に隠す・表示するアニメーション

ViewControllerにボタンをアウトレット接続します。
変数名はfloatingActionButtonにしてしまいました。笑

@IBOutlet weak var floatingActionButton: UIButton!

// アニメーションのコード

func showActionButton(){
        floatingActionButton.isHidden = false
        floatingActionButton.center.y += 100
        UIView.animate(withDuration: 0.2, delay: 0.2, options: [.curveEaseOut], animations: {
            self.floatingActionButton.center.y -= 100
        },completion: nil)
    }
    
    func hideActionButton(){
        UIView.animate(withDuration: 0.2, delay: 0.0, options: [.curveEaseIn], animations: {
            self.floatingActionButton.center.y += 100.0
        }) { _ in
            self.floatingActionButton.center.y -= 100.0
            self.floatingActionButton.isHidden = true
        }
    }

スクロール開始でボタンを隠す、終了時に表示

TableViewControllerのスクロールイベントに以下を追加します。

override func scrollViewWillBeginDragging(_ scrollView: UIScrollView) {
        print("スクロール開始")
        (parent as! ViewController).hideActionButton()
    }
  
    
    override func scrollViewDidEndDecelerating(_ scrollView: UIScrollView){
        print("スクロール終了")
        (parent as! ViewController).showActionButton()
    }

ボタンを表示する際に、わずかにディレイをかけています。
念のために、ボタンが隠れるまでにかかる時間と同じだけの時間を空けて、意図しない動作を防ぐためと、アニメーションのタイミング的に心地良いと、個人的に感じたからです。

問題なく動作しましたか？

せっかくなのでFABっぽく影とかをつけてみる

extension UIView {
    func makeUp(){
        self.layer.cornerRadius = 15
        self.layer.shadowColor = UIColor.black.cgColor
        self.layer.shadowOffset = CGSize(width: 4, height: 4)
        self.layer.shadowOpacity = 0.4
        self.layer.shadowRadius = 4
    }
}