読者です 読者をやめる 読者になる 読者になる

【Swift】ナビゲーションバーのボタンをカスタマイズ[UINavigationItem]

Swift Development

iOSエンジニアの仁科です。

今回はさくっとしたTipsを紹介します。

概要

左側のボタンをカスタマイズしてみます。

  1. フォント
  2. 画像
  3. 画像とテキスト間のマージン
  4. 中身左寄せ

以上を変更してみます。
いろいろボタンを変更してみます。

f:id:tech-inagora:20160512213313p:plain
f:id:tech-inagora:20160512211702p:plain

用意するもの

  • ViewController 2つ(遷移先と遷移元)
  • 戻るボタンのアイコン

以下のコードで画像の様な戻るボタンが出来ちゃいますっ
f:id:tech-inagora:20160512213313p:plain

ボタンを作る際ギリギリのView領域で作るのではなく、
余裕を持った領域を持たせることで押しやすくなります!(ユーザビリティ◎)

override func viewDidLoad() {
    super.viewDidLoad()

    let backButtonItem:UIBarButtonItem =  UIBarButtonItem(customView:self.createButton())
    navigationItem.leftBarButtonItem = backButtonItem
}


func createButton() -> UIButton {

    let button: UIButton = UIButton(type: .System)

    button.frame = CGRectMake(0, 0, 80, 40)
    button.contentHorizontalAlignment = UIControlContentHorizontalAlignment.Left;     //中身左寄せ
    button.setTitle("タイトル", forState: UIControlState.Normal)
    button.setTitleColor(UIColor.blackColor(), forState: .Normal)
    button.titleLabel?.font = UIFont(name:"HiraKakuProN-W3",size: 12)     
    button.setImage(UIImage(named: "leftArrow"), forState: .Normal)
    button.titleEdgeInsets = UIEdgeInsetsMake(0, 7, 0, 0);     //テキストにマージン。左に7px

    button.addTarget(self, action: #selector(toBack), forControlEvents: .TouchUpInside)

    return button

}

func toBack() {
    self.navigationController?.popViewControllerAnimated(true)
}