#1.はじめに
アプリ作成のために、UIToolbarが必要になったのですが、ストーリーボードを使わない方法で作成した場合、
昔の記事はSafeAreaという概念が無かったiPhoneX以前のものが多く、実装に苦労したので備忘録として掲載します。
(もし間違いがございましたら、遠慮なく指摘していただくと幸いです)
#2.環境
Xcode Version 11.3.1
参考記事
Custom UIToolbar too close to the home indicator on iPhone X
#3. タブバーの高さを直打ちで入力した場合の問題
私が検索した限り、タブバーの高さは直打ちで決めていることが多かったように感じます。
例えば、こんな感じです。
コードを直打ちした場合、
import UIKit
class testVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBlue
configureToolBar()
}
func configureToolBar() {
// ツールバーの高さを直打ち
let footerBarHeight: CGFloat = 100
// ツールバーのインスタンス化
let toolbar = UIToolbar(frame: CGRect(
x: 0,
y: self.view.bounds.size.height - footerBarHeight,
width: self.view.bounds.size.width,
height: footerBarHeight)
)
toolbar.barStyle = .black
//戻るボタンの実装
let backButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 40))
backButton.setTitle("Back", for: .normal)
backButton.addTarget(self, action: #selector(back), for: .touchUpInside)
let backButtonItem = UIBarButtonItem(customView: backButton)
//ボタンを左右に分けるためのスペースの実装
let flexibleItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace,
target: nil, action: nil)
//進むボタンの実装
let nextButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 100))
nextButton.setTitle("Next", for: .normal)
nextButton.addTarget(self, action: #selector(goToNext), for: .touchUpInside)
let nextButtonItem = UIBarButtonItem(customView: nextButton)
// ツールバーにアイテムを追加する.
toolbar.items = [backButtonItem,flexibleItem,nextButtonItem]
self.view.addSubview(toolbar)
}
// 戻るボタンをクリックした時の処理
@objc func back() {
print("戻るボタンがクリックされた")
}
// 進むボタンをクリックした時の処理
@objc func goToNext() {
print("進むボタンがクリックされた")
}
}
ここでの
let footerBarHeight: CGFloat = 100
のように直打ちしてしまうと、下記の画像のように、
Appleのガイドラインには準拠していませんし、見た目もイマイチです。
#4. SafeAreaLayoutGuideを使用した場合
この問題を解消するにあたり、SafeAreaLayoutGuideを使ったところ、下記の画像のようになりました。
NSLayoutConstraint.activate([
toolbar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
toolbar.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
toolbar.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
toolbar.heightAnchor.constraint(equalToConstant: 50)
])
なお、コードはこのようになります。
SafeAreaLayoutGuideを使用した場合
import UIKit
class SelectPostImageVC: UIViewController {
let toolbar = UIToolbar ()
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBlue
configureToolbar()
}
func configureToolbar() {
self.view.addSubview(toolbar)
toolbar.barStyle = .black
toolbar.translatesAutoresizingMaskIntoConstraints = false
//戻るボタンの実装
let backButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 100))
backButton.setTitle("Back", for: .normal)
backButton.addTarget(self, action: #selector(back), for: .touchUpInside)
let backButtonItem = UIBarButtonItem(customView: backButton)
//ボタンを左右に分けるためのスペースの実装
let flexibleItem = UIBarButtonItem(barButtonSystemItem: .flexibleSpace,
target: nil, action: nil)
//進むボタンの実装
let nextButton = UIButton(frame: CGRect(x: 0, y:0, width: 100, height: 100))
nextButton.setTitle("Next", for: .normal)
nextButton.addTarget(self, action: #selector(goToNext), for: .touchUpInside)
let nextButtonItem = UIBarButtonItem(customView: nextButton)
// ツールバーにアイテムを追加する.
toolbar.items = [backButtonItem,flexibleItem,nextButtonItem]
self.view.addSubview(toolbar)
//ここでSafeAreaLayoutGuideを使用
NSLayoutConstraint.activate([
toolbar.bottomAnchor.constraint(equalTo:view.safeAreaLayoutGuide.bottomAnchor),
toolbar.leadingAnchor.constraint(equalTo:view.safeAreaLayoutGuide.leadingAnchor),
toolbar.trailingAnchor.constraint(equalTo:view.safeAreaLayoutGuide.trailingAnchor),
toolbar.heightAnchor.constraint(equalToConstant: 50)
])
}
// 戻るボタンをクリックした時の処理
@objc func back() {
print("戻るボタンがクリックされた")
}
// 進むボタンをクリックした時の処理
@objc func goToNext() {
print("進むボタンがクリックされた")
}
}