สร้างปุ่มลูกศรย้อนกลับบน Toolbar ใช้ UIBarButtonItem และรูปภาพลูกศร
ขั้นตอนใน Storyboard
- ลาก Toolbar จาก Object Library วางด้านล่าง View Controller
- Toolbar จะมี Bar Button Item มาให้ 1 ตัว
- ตั้ง Constraint: Bottom, Leading, Trailing = 0, Height = 44
- เลือก Bar Button Item → Attributes Inspector
- ใน Image เลือกรูปลูกศร (System: "chevron.backward" หรือ Custom Image)
- ตั้ง Style = Plain, Tint = สีที่ต้องการ
โค้ดตัวอย่าง
class ViewController: UIViewController {
@IBOutlet weak var toolbar: UIToolbar!
@IBOutlet weak var backButton: UIBarButtonItem!
override func viewDidLoad() {
super.viewDidLoad()
// ตั้งรูปลูกศรแบบ System (iOS 13+)
backButton.image = UIImage(systemName: "chevron.backward")
// หรือ Custom Image
// backButton.image = UIImage(named: "back_arrow")
backButton.target = self
backButton.action = #selector(backTapped)
}
@objc func backTapped() {
navigationController?.popViewController(animated: true)
// หรือ dismiss(animated: true) ถ้าเป็น Modal
}
}
เพิ่มปุ่มหลายตัวและ Flexible Space
override func viewDidLoad() {
super.viewDidLoad()
let backButton = UIBarButtonItem(image: UIImage(systemName: "chevron.left"),
style: .plain,
target: self,
action: #selector(backTapped))
let flexibleSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace,
target: nil,
action: nil)
let doneButton = UIBarButtonItem(barButtonSystemItem: .done,
target: self,
action: #selector(doneTapped))
toolbar.setItems([backButton, flexibleSpace, doneButton], animated: false)
}
Toolbar vs Navigation Bar
| คุณสมบัติ | Toolbar | Navigation Bar |
|---|---|---|
| ตำแหน่ง | ด้านล่าง (Bottom) | ด้านบน (Top) |
| Back Button | Manual | Auto (Push) |
| Title | ไม่มี Built-in | มี Title View |
| เหมาะสำหรับ | Action Bar, Tool Palette | Navigation Hierarchy |