Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> iOS

วิธาสร้างปุ่ม Back Arrow บน Toolbar ใน iPhone/iPad

สร้างปุ่มลูกศรย้อนกลับบน Toolbar ใช้ UIBarButtonItem และรูปภาพลูกศร

ขั้นตอนใน Storyboard

  1. ลาก Toolbar จาก Object Library วางด้านล่าง View Controller
  2. Toolbar จะมี Bar Button Item มาให้ 1 ตัว
  3. ตั้ง Constraint: Bottom, Leading, Trailing = 0, Height = 44
  4. เลือก Bar Button Item → Attributes Inspector
  5. ใน Image เลือกรูปลูกศร (System: "chevron.backward" หรือ Custom Image)
  6. ตั้ง 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

คุณสมบัติToolbarNavigation Bar
ตำแหน่งด้านล่าง (Bottom)ด้านบน (Top)
Back ButtonManualAuto (Push)
Titleไม่มี Built-inมี Title View
เหมาะสำหรับAction Bar, Tool PaletteNavigation Hierarchy