TableViewに影をつける
- tableViewをスクロールすると影が非表示になり、スクロールを止めると影が表示されます
- tableViewを押してる様な動きになります
コード
-
tableView.layer.masksToBoundsをfalseで設定しましょう。 - 影関係の設定はご自由に
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.masksToBoundsのtrueにする。 - tableViewのスクロールが終わった時に、
tableView.layer.masksToBoundsのfalseにする。
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からはみ出る様な表示がされないです。なので、初期値のままだと影も表示されないみたいです。
終わり
今日は、食品や医薬品などの期限をチェックをやってくれるアプリを作っているときに起きた事を書きました
ご指摘などがありましたらコメントまで、頂けると嬉しいです
今日も充実してたなぁ