TableViewをスクロールすると消える影を実装(止めると再表示)


TableViewに影をつける

  • tableViewをスクロールすると影が非表示になり、スクロールを止めると影が表示されます
  • tableViewを押してる様な動きになります

コード

  • tableView.layer.masksToBoundsfalseで設定しましょう。
  • 影関係の設定はご自由に
ViewController
        self.tableView.layer.cornerRadius = 20.0
        self.tableView.layer.shadowOffset = CGSize(width: 10, height: 10) //widthは右側に、heightは下側に影が表示される範囲
        self.tableView.layer.shadowOpacity = 0.5 //影の透明度を設定
        self.tableView.layer.shadowRadius = 7  //影のぼかし具合を設定->設定値が大きい程ぼかしも強くなります
        self.tableView.layer.masksToBounds = false //trueだと影が表示されない
  • 影はこれで表示されるのですが、tableViewをスクロールすると、上のカレンダーにcellが被っています。

  • なので、tableViewのスクロールを検知させます。
  • tableViewをスクロールする時はtableView.layer.masksToBoundstrueにする。
  • tableViewのスクロールが終わった時に、tableView.layer.masksToBoundsfalseにする。
ViewController
extension ViewController:UITableViewDelegate,UITableViewDataSource{

    func scrollViewWillBeginDragging(_ scrollView: UIScrollView) { //スクロールが始まった時に呼ばれます

        self.tableView.layer.masksToBounds = true

    }

    func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) { //スクロールが終わった時に呼ばれます

        self.tableView.layer.masksToBounds = false

    }
}

  • これでcellがカレンダーに被ることも無くなり、tableView.layer.masksToBounds = trueが呼ばれて影も消えるので、tableViewが押されている様に見えます。
  • ところで、tableView.layer.masksToBoundsとは何かと言いますと、CALayerクラスが持っているプロパティです。
  • tableViewはtableView.layer.masksToBoundsの初期値がtrueになっています。なので普段tableViewを使っていてもcellがtableViewからはみ出る様な表示がされないです。なので、初期値のままだと影も表示されないみたいです。

終わり

今日は、食品や医薬品などの期限をチェックをやってくれるアプリを作っているときに起きた事を書きました
ご指摘などがありましたらコメントまで、頂けると嬉しいです
今日も充実してたなぁ