UIToolbar Align items Programmatically

이런 왼쪽, 가운데 오른쪽에 배치된 툴바는 여러 앱에서 흔히 볼 수 있습니다. stroryboard를 사용하면 간단하지만, 오늘은 코드로 짜는 방법을 알아볼까해요!

navigationBar는 왼쪽, 오른쪽에 우리가 직관적으로 생각할 수 있는 방법으로 추가할 수가 있지만, 툴바는 조금 다른 방법을 사용해야 합니다.

UIToolbar, UIBarButtonItem

우선 툴바와 그 안의 아이템부터 알아봅시다.

기본 구조는 우선 UIToolBar를 만들고, 그 안에 [UIBarButtonItem]을 추가하는 방식이에요.

let toolbar = UIToolbar()
view.addSubview(toolbar)

toolbar.translatesAutoresizingMaskIntoConstraints = false
toolbar.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 0).isActive = true
toolbar.bottomAnchor.constraint(equalToSystemSpacingBelow: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 0).isActive = true
toolbar.trailingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.trailingAnchor, multiplier: 0).isActive = true

let toolbarItem1 = UIBarButtonItem(barButtonSystemItem: .search, target: self, action: nil)
let toolbarItem2 = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: nil)

// set UIBarButtonItems
toolbar.setItems([toolbarItem1, toolbarItem2], animated: true)

다음과 같이 하면 이렇게 왼쪽에 아이템 두 개가 나란히 정렬된 것을 확인할 수 있어요!

leading, bottom, trailing에 constraint를 걸어 바닥에 붙였고 색은 tintColor를 바꿔서 제가 좋아하는 색감으로 바꿔줬어요.

 

Align left, center, right

하지만 저희는 왼쪽, 가운데, 오른쪽에 알맞게 배치가 되었으면 좋겠는데 말이죠!

align center 같은 방법으로 설정을 해줄 수 있을 것 같지만.. 아무리 찾아봐도 그런 아이는 찾아볼 수가 없어요.. 처음에 말씀드렸다시피 다른 방법을 사용해야 하는데요!

공백을 가진 barButtonItem을 추가해서 그 공간을 맞춰줘야 한답니다!

UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil) 바로 이녀석이에요! 이녀석을 toolbar의 [UIBarButtonItem]에 추가해주면 된답니다.

저 녀석을 flexibleSpace 이라고 했을 때, ****

왼쪽 정렬: [toolbarItem1]

오른쪽 정렬: [ flexibleSpace, toolbarItem1]

가운데 정렬: [ flexibleSpace, toolbarItem1, flexibleSpace]

이런 방식으로 사용해야 한답니다.

다소 아름다운 방법은 아닌거 같은데.. 왜 이런식으로 지원하는진 모르겠지만 더 좋은 방법을 알게되면 포스팅 해야겠어요! 혹시 다른 방법을 아시면 댓글로 남겨주세요 :D

그래서 저런 방식으로 우리가 처음에 원했던 모양으로 하려면 어떻게 해야할까요??

[ toolbarItem1, flexibleSpace, toolbarItem2, flexibleSpace, toolbarItem3] 이런식으로 해주면 되겠죠!!

// warning을 막기 위해 임의로 위치와 크기를 잡아준다.
let toolbar = UIToolbar(frame: .init(x: 0, y: 0, width: 100, height: 100))
view.addSubview(toolbar)
toolbar.barTintColor = .black

toolbar.translatesAutoresizingMaskIntoConstraints = false
toolbar.leadingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.leadingAnchor, multiplier: 0).isActive = true
toolbar.bottomAnchor.constraint(equalToSystemSpacingBelow: view.safeAreaLayoutGuide.bottomAnchor, multiplier: 0).isActive = true
toolbar.trailingAnchor.constraint(equalToSystemSpacingAfter: view.safeAreaLayoutGuide.trailingAnchor, multiplier: 0).isActive = true

var items: [UIBarButtonItem] = []

let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: self, action: nil)

let toolbarItem1 = UIBarButtonItem(barButtonSystemItem: .search, target: self, action: nil)
let toolbarItem2 = UIBarButtonItem(barButtonSystemItem: .add, target: self, action: nil)
let toolbarItem3 = UIBarButtonItem(barButtonSystemItem: .refresh, target: self, action: nil)

items.append(toolbarItem1)
items.append(flexibleSpace)
items.append(toolbarItem2)
items.append(flexibleSpace)
items.append(toolbarItem3)

items.forEach { (item) in
    item.tintColor = .orange
}


toolbar.setItems(items, animated: true)

다음과 같이 하면 처음 이미지 모습의 툴바를 만나보실 수 있습니다!

오늘도 감사합니다.