TableViewをスクロールすると消える影を実装(止めると再表示)
5281 ワード
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.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のスクロールを検知させます。
- 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からはみ出る様な表示がされないです。なので、初期値のままだと影も表示されないみたいです。
終わり
今日は、食品や医薬品などの期限をチェックをやってくれるアプリを作っているときに起きた事を書きました
ご指摘などがありましたらコメントまで、頂けると嬉しいです
今日も充実してたなぁ
Author And Source
この問題について(TableViewをスクロールすると消える影を実装(止めると再表示)), 我々は、より多くの情報をここで見つけました https://qiita.com/HiroUrata/items/44df6eac96496654b7d1著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .