카메라 앱을 만들 때 SNOW 보고 싶은 NavigationBar의 중간에 버튼을 배치하고 싶어졌지만 NavigationBar에는 "Fixed/Flexible Space Bar button item"을 사용할 수 없고 LeftBarButtonItems와 RightBarButtonItems로 나뉘어 있어 어떻게 구현 고민한 이야기.

고민한 결과 "NavigationItem의 titleView에 추가하고 싶은 버튼을 UIButton으로 만들어 넣는다"라는 방법으로 해결할 수 있었습니다.

검색해도 스트라이크한 기사가 나오지 않았으므로, 이번 정리해 둡니다.
(첫 포스트이므로 손 부드럽게)

개발 환경

Swift4.2

Xcode10.1

목적

이상은 이런 느낌의 화면을 만들고 싶다. (예: 카메라 앱 'SNOW')



그래서 이번 해설하는 방법으로 만든 것이 이런 느낌입니다.



라는 이유로 만드는 방법 해설합니다.
마지막으로 전체 샘플 코드를 두고 있으므로, 샘플 앱을 만들 때는 꼭.

NavigationBar의 중간에 버튼을 배치하는 방법

1. 중간에 배치하고 싶은 버튼을 코드로 만든다

중간에 배치하고 싶은 버튼을 적당히 코드로 만드세요.

NabivationBar에 두는 버튼은 보통은 BarButtonItem입니다만, NavigatonBar의 특성상, 「왼쪽 맞춤의 LeftButtonItems」와 「오른쪽 맞춤의 RightButtonItems」로 나누어져 있어, 홀수개의 BarButtonItem을 균등하게 배치할 수 없습니다. (잘못되면 코멘트 해주세요 (땀))

그래서 NavigationBar의 중간에 있는 titleView에 UIButton을 대입하는 것으로, 중앙 배치의 UIButton을 추가하고 있습니다.

샘플 코드는 이쪽.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 1.真ん中に配置したいボタンをコードで作る ---------

        let sampleButton = UIButton(type: .system)

        sampleButton.frame = CGRect(x: 0, y: 0, width: 60, height: 30)
        sampleButton.backgroundColor = UIColor.blue
        sampleButton.setTitle("ボタン", for: .normal)
        sampleButton.setTitleColor(UIColor.white, for: .normal)
        sampleButton.layer.cornerRadius = 10
        sampleButton.addTarget(self, action: #selector(ViewController.tappedButton), for: .touchUpInside)

        // ----------------------------------------

    }

}

여기서 주의인 것이 UIButton의 Size.
NavigationBar는 Height(높이)가 44의 고정이므로, UIButton은 44 이하의 Height로 할 필요가 있습니다.

2. 만든 버튼을 navigationItem.titleView에 넣습니다.

navigationItem.titleView에 중앙에 배치하려는 UIButton을 넣으십시오.

덧붙여서, 아래의 화상과 같이 「2개 이상을 중앙 맞추기 기분에 배치하고 싶다」라고 때는,
적당히 전용의 UIView를 생성해, 그 안에 만든 버튼을 addSubView한 것을 titleView에 대입하면 갈 수 있습니다. (FlexibleSpace에서 갈 것 같은 생각도 들지만)


ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()


        /* 1.真ん中に配置したいボタンをコードで作る
        let sampleButton = UIButton(type: .system)

        sampleButton.frame = CGRect(x: 0, y: 0, width: 60, height: 30)
        sampleButton.backgroundColor = UIColor.blue
        sampleButton.setTitle("ボタン", for: .normal)
        sampleButton.setTitleColor(UIColor.white, for: .normal)
        sampleButton.layer.cornerRadius = 10
        sampleButton.addTarget(self, action: #selector(ViewController.tappedButton), for: .touchUpInside)
        */

        //2.titleViewに追加する
        navigationItem.titleView = sampleButton

    }

    @objc func tappedButton() {
        print("Button tapped.")
    }

}

여기의 NavigationItem.titleView는, 화면에서 말하면 타이틀의 문자가 표시되는 장소군요.

이 녀석이 UIView를 상속하고 있기 때문에, 중앙 배치하고 싶은 UIButton을 그대로 대입해 주면 중앙 배치를 할 수 있다는 치수입니다.

3.완성

라는 이유로 완성 코드가 이쪽. 고민 한 것보다 꽤 간단한 코드입니다.
그대로 복사하면 움직인다고 생각합니다.

ViewController.swift

import UIKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let sampleButton = UIButton(type: .system)

        sampleButton.frame = CGRect(x: 0, y: 0, width: 60, height: 30)
        sampleButton.backgroundColor = UIColor.blue
        sampleButton.setTitle("ボタン", for: .normal)
        sampleButton.setTitleColor(UIColor.white, for: .normal)
        sampleButton.layer.cornerRadius = 10
        sampleButton.addTarget(self, action: #selector(ViewController.tappedButton), for: .touchUpInside)

        navigationItem.titleView = sampleButton

    }

    @objc func tappedButton() {
        print("Button tapped.")
    }

}

완성 이미지는 이런 느낌입니다.
SNOW가 어떻게 중앙 배치시키고 있는지 궁금합니다만, 일단 같은 것은 만들 수 있었네요!



「그 밖에 더 좋은 방법 있어!」라고 하는 분은 꼭 코멘트로 가르쳐 주시면 기쁩니다!