今回の内容
機能説明
- TableViewをスクロールすると、スクロールの状況に合わせてTabBarをアニメーションさせて場面から見えないようにします。
- スクロールが完了すると、TabBarを元の位置に戻します。
コードと簡単解説
TabBarController
-
Main.storyboardでTabBarControllerを作成します
-
tabBarの色を
barTintColorで設定します.
TabBarController
import UIKit
class TabBarController: UITabBarController {
override func viewDidLoad() {
super.viewDidLoad()
tabBar.barTintColor = .tertiarySystemGroupedBackground
tabBar.layer.cornerRadius = 45.0
tabBar.layer.masksToBounds = true
tabBar.layer.borderWidth = 3.0
tabBar.layer.borderColor = UIColor.systemIndigo.cgColor
}
}
TabBarをアニメーションさせる
-
スクロールが始まって、
.contentOffset.yが0未満ならtabBarを元に位置に戻す。.contentOffset.yが0より大きいならtabBarを画面から見えない位置まで下げます。 -
指が画面から離れた時にTableViewのスクロールが完了したなら、
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {}内でtabBarを元の位置に戻します。 -
指が画面から離れた時にTableViewがスクロールしてるなら、
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {}内でtabBarを元の位置に戻します。
UITableView
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if tableView.contentOffset.y < 0{
UITabBar.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY - (self.tabBarController?.tabBar.frame.size.height)!}, completion: nil)
}else if tableView.contentOffset.y > 0{
UITabBar.animate(withDuration: 0.4, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY}, completion: nil)
}
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if decelerate == false{
UITabBar.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY - (self.tabBarController?.tabBar.frame.size.height)!}, completion: nil)
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
UITabBar.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY - (self.tabBarController?.tabBar.frame.size.height)!}, completion: nil)
}
}
全てのコード
ViewController
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var tableView: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
tableView.delegate = self
tableView.dataSource = self
}
}
extension ViewController:UITableViewDelegate,UITableViewDataSource{
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return 41
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "Cell", for: indexPath)
cell.textLabel?.text = String(indexPath.row)
return cell
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if tableView.contentOffset.y < 0{
UITabBar.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY - (self.tabBarController?.tabBar.frame.size.height)!}, completion: nil)
}else if tableView.contentOffset.y > 0{
UITabBar.animate(withDuration: 0.4, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY}, completion: nil)
}
}
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
if decelerate == false{
UITabBar.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY - (self.tabBarController?.tabBar.frame.size.height)!}, completion: nil)
}
}
func scrollViewDidEndDecelerating(_ scrollView: UIScrollView) {
UITabBar.animate(withDuration: 0.2, delay: 0, options: .curveEaseInOut, animations: {self.tabBarController?.tabBar.frame.origin.y = self.view.frame.maxY - (self.tabBarController?.tabBar.frame.size.height)!}, completion: nil)
}
}
終わり
ご指摘、ご質問などありましたら、コメントまでお願い致します。