طريقة انشاء نافذة UIAlertController وتخصيصها والتعامل معها

بسم الله الرحمن الرحيم

 

مقدمة

عادة يتم استخدام الUIAlertController لعرض نافذة تحذيرية للمستخدم، تحتوي على رسالة وازرار لاتخاذ اجراءات بناء عليها.

يمكن استخدامها أيضا لتمكين المستخدم من ادخال بيانات تسجيل دخول او حساب جديد، عرض بيانات للمستخدم، أو عرض المزيد من الاعدادات في نافذة خارجية.

منذ قدوم iOS9، أبل قامت بالغاء الكلاس القديم UIAlertView واستبدلته بUIAlertController، حيث لم تعد تحتاج لضبط الdelegatesـ وتستطيع الآن تخصيص النافذة كما تشاء.

هناك نوعين من الUIAlertController:

1- Alert UIAlertController

2- ActionSheet UIAlertController

 

والآن سنرى كيفية انشائها وتخصيصها

(لانشاء النوافذ المطلوبة، يمكنك تضمين جميع الأكواد القادمة في داخل IBAction او TableViewCell أو حتى في viewDidLoad لتقوم بتنفيذ الكود مباشرة) 

 

- نافذة Alert تحتوي على TextField:

أول نافذة تحذيرية سنقوم بانشائها، تحتوي على textfield واحد، بالاضافة الى زرين submit و cancel

سنبدأ أولا باضافة الأسطر التالية:

let alert = UIAlertController(title: "AlertController Tutorial",
    message: "Submit some text",
    preferredStyle: .alert)

// Submit button
 let submitAction = UIAlertAction(title: "Submit", style: .default, handler: { (action) -> Void in
     // Get 1st TextField's text
     let textField = alert.textFields![0]
     print(textField.text!)
 })

// Cancel button
  let cancel = UIAlertAction(title: "Cancel", style: .destructive, handler: { (action) -> Void in })

في الثلاث أسطر الأولى، قمنا بانشاء UIAlertController، وحددنا عنوانه والرسالة المضمنة فيه، وحددنا نوعه ليكون alert.

تاليا قمنا بانشاء أول زر submitAction، وخصصنا عنوانه وستايله، وفي بلوك الhandler الأخير أضفنا الأوامر التي نرغب بتنفيذها عند الضغط على هذا الزر

أخيرا قمنا بانشاء زر cancel بستايل destructive. ليكون أحمر اللون

 

الآن بقي لنا أن نضيف هذين الزرين الى النافذة التي أنشأناها أولا، ومن ثم نعرض النافذة للمستخدم.

ولكن قبل هذا، لا ننسى أن ننشئ و نضيف الTextField الى النافذة، فنكمل باضافة الكود التالي:

// Add 1 textField and customize it
alert.addTextField { (textField: UITextField) in
    textField.keyboardAppearance = .dark
    textField.keyboardType = .default
    textField.autocorrectionType = .default
    textField.placeholder = "Type something here"
    textField.clearButtonMode = .whileEditing
}


// Add action buttons and present the Alert
alert.addAction(submitAction)
alert.addAction(cancel)
present(alert, animated: true, completion: nil)

في الأسطر الأولى قمنا بانشاء وتخصيص واضافة الTextField في خطوة واحدة.

ثم أخيرا قمنا باضافة الزرين السابق انشاؤهما وقمنا بعرض الUIAlertController عن طريق استدعاء الميثود present

 

النتيجة:

 

 

- نافذة ActionSheet تحتوي على عدة خيارات:

بطريقة مشابهة جدا لنوافذ الAlert، سنقوم بانشاء نافذة ActionSheet. أولا سنقوم باضافة الكود التالي:

let alertController = UIAlertController(title: "Action Sheet", message: "What would you like to do?", preferredStyle: .actionSheet)
    
let sendButton = UIAlertAction(title: "Send", style: .default, handler: { (action) -> Void in
    print("Send button tapped")
})
    
let deleteButton = UIAlertAction(title: "Delete", style: .destructive, handler: { (action) -> Void in
    print("Delete button tapped")
})
    
let cancelButton = UIAlertAction(title: "Cancel", style: .cancel, handler: { (action) -> Void in
    print("Cancel button tapped")
})

قمنا أولا بانشاء UIAlertController من نوع ActionSheet، ثم أنشأنا عدة أزرار بستايلات مختلفة وكل زر يحتوي على بلوك الactions الخاص به.

الآن سنضيف الأزرار الى الUIAlertController ومن ثم سنعرضها:

alertController.addAction(sendButton)
alertController.addAction(deleteButton)
alertController.addAction(cancelButton)
    
present(alertController, animated: true, completion: nil)

 

النتيجة:

 

لاحظ أن ستايلات الأزرار تختلف بالشكل: 

defaults. يعطيك شكل زر Send now الطبيعي

destructive. يضيف اللون الأحمر ويستعمل عادة لأوامر الحذف لتنبيه المستخدم

cancel. يعزل الزر عن باقي الأزرار ويستعمل عادة لزر الالغاء

 

 

وهنا نصل الى ختام موضوعنا، نلقاكم على خير باذن الله

سبحانك اللهم وبحمدك أشهد أن لا اله إلا أنت، استغفرك وأتوب اليك

كلمات دليلية: