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

วิธีสร้าง Custom Dialog Box ใน iOS App ด้วย Swift

ใช้ UIAlertController สร้าง Dialog/Alert แบบ Native (iOS 8+)

Basic Alert


func showAlert(title: String, message: String) {
    let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "OK", style: .default))
    present(alert, animated: true)
}

Alert พร้อม Action Handler


func showConfirmDialog(title: String, message: String, confirmTitle: String = "Confirm", 
                       onConfirm: @escaping () -> Void) {
    let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
    
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    
    alert.addAction(UIAlertAction(title: confirmTitle, style: .destructive) { _ in
        onConfirm()
    })
    
    present(alert, animated: true)
}

// ใช้งาน
showConfirmDialog(title: "Delete?", message: "Are you sure?", confirmTitle: "Delete") {
    self.deleteItem()
}

Action Sheet (Bottom Sheet) - iPad ต้องระบุ Source


func showActionSheet() {
    let alert = UIAlertController(title: "Choose Option", message: nil, preferredStyle: .actionSheet)
    
    alert.addAction(UIAlertAction(title: "Camera", style: .default) { _ in self.openCamera() })
    alert.addAction(UIAlertAction(title: "Photo Library", style: .default) { _ in self.openLibrary() })
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    
    // iPad: ต้องระบุ Popover Source
    if let popover = alert.popoverPresentationController {
        popover.sourceView = self.view
        popover.sourceRect = CGRect(x: view.bounds.midX, y: view.bounds.midY, width: 0, height: 0)
        popover.permittedArrowDirections = []
    }
    
    present(alert, animated: true)
}

Text Field ใน Alert


func showTextInputAlert() {
    let alert = UIAlertController(title: "Enter Name", message: nil, preferredStyle: .alert)
    
    alert.addTextField { textField in
        textField.placeholder = "Your name"
        textField.keyboardType = .default
    }
    
    alert.addAction(UIAlertAction(title: "OK", style: .default) { _ in
        let name = alert.textFields?.first?.text ?? ""
        print("Name: \(name)")
    })
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel))
    
    present(alert, animated: true)
}

Custom Dialog (Full Customization)

UIAlertController ไม่สามารถ Customize Layout ได้เต็มที่ สร้าง Custom UIViewController แทน:


class CustomDialogViewController: UIViewController {
    // Custom Layout ใน Storyboard/XIB
    // ใช้ Presentation Style: .overCurrentContext, .overFullScreen
    // Transitioning Delegate สำหรับ Custom Animation
}

// ใช้งาน
let dialog = CustomDialogViewController()
dialog.modalPresentationStyle = .overCurrentContext
dialog.modalTransitionStyle = .crossDissolve
present(dialog, animated: true)

Library แนะนำ

  • SwiftEntryKit - Popups, Toasts, Banners ที่สวยงาม
  • Alertift - Modern Swift API สำหรับ UIAlertController
  • SPAlert - Apple Music Style Alert