UIBarButtonItem の width とX座標が欲しくて、色々試行錯誤していたのですが、結局取れないことがわかりました。
なぜ、UIBarButtonItem の横幅と位置が欲しかったかということ、こういうことがしたかったから。
左のホームアイコンの下にあるラインのように、UIBarButtonItem と同じ幅のラインを引きたかったのです。
もくじ
結論
UIBarButtonItem の横幅は取れない、というよりも、明示的に指定しない限り、0
になってしまいます。
0
でも問題ないのは、タイトルでも画像でも、上手いことサイズを自動的に設定してくれるからです。
(0だと自動調整のようです)
仮に値を指定すると、値は設定できます。
しかし、X座標は取得できません。
では、どうするかというと、自分で UIButton
を作り、サイズを決め、UIBarButtonItem.customView
に渡してやります。
私は StoryBoard を使う派なので、Navigation Bar
に Bar Button Item
を設置して、それをカスタムしていきます。
import UIKit class viewController: UIViewController { @IBOutlet weak var leftItem: UIBarButtonItem! @IBOutlet weak var rightItem: UIBarButtonItem! override func viewDidLoad() { super.viewDidLoad() print(self.leftItem.width) // 0 print(self.rightItem.width) // 0 let leftButton: UIButton = UIButton() leftButton.frame = CGRect(x: 0, y: 0, width: 30, height: 30) leftButton.setImage(UIImage(named: "home"), for: .normal) self.leftItem.customView = leftButton let rightButton: UIButton = UIButton() rightButton.frame = CGRect(x: 0, y: 0, width: 30, height: 30) rightButton.setImage(UIImage(named: "picture"), for: .normal) self.rightItem.customView = rightButton if let a: UIButton = self.leftItem.customView as? UIButton { print(a.frame) // (20.0, 7.0, 30.0, 30.0) } if let a: UIButton = self.rightItem.customView as? UIButton { print(a.frame) // (364.0, 7.0, 30.0, 30.0) } } }
CGRect(x: 0, y: 0, width: 30, height: 30)
で作っていますが、customView に渡すとX座標、Y座標は自動的に算出されます。
これで、UIBarButtonItem でも横幅、X座標を取得することができました!
ついでに、高さとY座標も。
Y座標の値が 7
なのは、UINavigationBarの高さ44 の中で、高さ30のUIButton が垂直方向に中央になるように調整されているようです。
初期のサイズはどうするのか
ここで気になるのが customView に渡す UIButton のサイズです。
UIBarButtonItem が自動的に調整されるのであれば、UIButton もなるべく自動的に調整された時のサイズに合わせて作りたくなります。
そうしないと、ページによってサイズが変わってしまい、見た目的にあまりよくありません。
(30だと、通常のUIBarButtonItemよりも小さくなってしまいました)
かといって、すべての UIBarButtonItem の customView を、同じように設定してサイズを固定するのは正直面倒。
なので、UIBarButtonItem のサイズに合うように、各所注意して調整して見ました。
アイコン自体のサイズを揃える
当たり前ですが、アイコンのサイズを揃えます。
Human Interface Guideline に合わせておくと、UIButton のサイズを間違えなければ自ずと画像サイズは揃うはずです。
Navigation bar and toolbar icon size | |
---|---|
Recommended | 75px × 75px (25pt × 25pt @3x) |
50px × 50px (25pt × 25pt @2x) | |
Maximum | 83px × 83px (27.67pt × 27.67pt @3x) |
56px × 56px (28pt × 28pt @2x) |
高さは44固定
上記コードでは、30を設定していましたが、UINavigationBar が 44
なので、高さ目一杯のを44の固定にします。
また、デフォルトの UIBarButtonItem のタップ反応の領域が、UINavigationBar 分あるのでそれも理由です。
UIBarButtonItem.width があって、UIBarButtonItem.height がないのは、恐らくそういうことだと思います。
(実際にはUIBarButtonItemの上にあるステータスバー部分を触れても反応していますが…)
完成
比較するとこんな感じです。
青い方がデフォルトの UIBarButtonItem で、右の黒い方が customView を使ったものです。
ほんの少しずれていますが、気にならないレベルです。
サイズ、座標がとれ、UIBarButtonItem と同じように表現することができました。