كيفية جعل مخصص AlertView / DialogBox مع الرسوم المتحركة في سويفت 3

على الرغم من أن لدينا UIAlertViewController لعرض التنبيهات ، فليس لدينا مرونة كافية لإجراء التخصيص. لذلك ، أنا هنا أكتب تعليميًا آخر حول كيفية جعلك تمتلك AlertView / DialogBox كما تريد.

في هذا البرنامج التعليمي ، سنقوم بإنشاء AlertView بسيط والذي سيكون له عنوان وصورة ولكن يمكنك تحقيق أي تصميم معقد بهذه الطريقة. إذا كنت تستطيع أن تتخيل ، يمكنك أن تفعل ذلك.

هيا بنا نبدأ…

لقد قمت بإنشاء بروتوكول بسيط يسمى Modal يساعدك على إظهار / استبعاد AlertView / DialogBox المخصص الخاص بك. يمكنك أن تلعب مع قيم الرسوم المتحركة لتلبية الاحتياجات الخاصة بك. يتيح لك البدء بإضافة هذا الملف إلى مشروعك.

بعد إضافة بروتوكول Modal Protocol إلى مشروعك ، قم بإنشاء ملف Swift جديد وقم بإعطائه أي اسم تريده. سوف تسميته CustomAlertView. الآن ، قم بإنشاء فئة باسم CustomAlertView وجعلها فئة فرعية من UIView.

استيراد UIKit
فئة CustomAlertView: UIView {
}

الآن ، قم بتأكيد بروتوكول Modal وتطبيق المتغيرات المطلوبة.

class CustomAlertView: UIView ، Modal {
     var backgroundView = UIView ()
     var dialogView = UIView ()
}

سنحتاج إلى إعداد مُهيئتنا الخاصة لتهيئة CustomAlertView الخاص بنا بعنوان وعنوان ، لذا ، سنُنشئ مُهيئًا يأخذ عنوانًا وصورةً. إذا كنت بصدد إعداد مُهيئتك الخاصة ، فستحتاج أيضًا إلى تطبيق init (برنامج الترميز aDecoder: NSCoder) وتجاوز init (frame: CGRect). تحتاج أيضًا إلى استدعاء مهيئها المعين من مُهيئتك. لذلك ، نحن نسمي الحرف الأول (frame: CGRect) من خلال توفير حدود الشاشة الرئيسية التي ستجعل CustomAlertView الخاص بنا يغطي الشاشة بأكملها.

إذا كنت ترغب في معرفة المزيد عن المُهيّئات ، فانتقل إلى هذا الرابط.

راحة الحرف الأول (العنوان: السلسلة ، الصورة: UIImage) {
     self.init (الإطار: UIScreen.main.bounds)
}
تجاوز الحرف (الإطار: CGRect) {
     super.init (الإطار: الإطار)
}
مطلوب init؟ (برنامج الترميز aDecoder: NSCoder) {
     fatalError ("لم يتم تنفيذ init (coder :)")
}

الآن ، يتيح تصميم AlertView لدينا

إذا كنت تتذكر ، لدينا اثنين من المتغيرات المحددة في الجزء العلوي مثل backgroundView و dialogView. dialogView هو العرض الذي سيحتوي على محتوى التنبيه الفعلي و backgroundView هو طريقة العرض التي تقف وراء dialogView.

بالنسبة لهذا البرنامج التعليمي ، قمت بتصميم CustomAlertView برمجيًا ولكن إذا كنت لا ترغب في إنشاء طرق العرض الخاصة بك برمجيًا ، فيمكنك دائمًا استخدام xib لتصميم طريقة العرض الخاصة بك وإضافتها إلى كل منViewViewView و backgroundView.

يمكنك القيام بالكثير مع backgroundView كما يمكنك جعل الخلفية ضبابية أو شفافة أو شبه شفافة أو إظهار بعض الصور. الآن ، يتيح جعل الخلفية لدينا أن تكون داكنة شبه شفافة.

backgroundView.frame = الإطار
backgroundView.backgroundColor = UIColor.black
backgroundView.alpha = 0.6
addSubview (backgroundView)

وبالمثل ، أود أن يكون عرض AlertView أصغر 64 من عرض الشاشة ، مما يترك 16 نقطة من المسافة البادئة و 16 نقطة من المساحة الزائدة. الآن ، يتيح إضافة UILabel في الجزء العلوي من مربع الحوار ، و UIView رقيقة أسفل التسمية لخط فاصل و UIImageView بعد ذلك. نحن نحدد العنوان والصورة التي نحصل عليها من مُهيئنا الذي أنشأناه مسبقًا إلى UILabel و UIImageView. أخيرًا ، قم بحساب إجمالي الارتفاع لـ dialogView وقم بتعيينه. كما ترى ، يتم ضبط موضع y في مربع الحوار على ارتفاع الإطار. من خلال القيام بذلك ، سيتم وضع dialogView خارج الشاشة ، لذلك عند عرض AlertView الخاص بك ، فإنه سيتم تنشيط من أسفل إلى وسط الشاشة.

دع dialogViewWidth = frame.width-64
دع titleLabel = UILabel (الإطار: CGRect (x: 8 ، y: 8 ، العرض: dialogViewWidth-16 ، الارتفاع: 30))
titleLabel.text = title
titleLabel.textAlignment = .center
dialogView.addSubview (titleLabel)
دع separatorLineView = UIView ()
separatorLineView.frame.origin = CGPoint (x: 0، y: titleLabel.frame.height + 8)
separatorLineView.frame.size = CGSize (العرض: dialogViewWidth ، الارتفاع: 1)
separatorLineView.backgroundColor = UIColor.groupTableViewBackground
dialogView.addSubview (separatorLineView)
واسمحوا imageView = UIImageView ()
imageView.frame.origin = CGPoint (x: 8 ، y: separatorLineView.frame.height + separatorLineView.frame.origin.y + 8)
imageView.frame.size = CGSize (العرض: dialogViewWidth - 16 ، الارتفاع: dialogViewWidth - 16)
imageView.image = الصورة
imageView.layer.cornerRadius = 4
imageView.clipsToBounds = صواب
dialogView.addSubview (imageView)
واسمحوا dialogViewHeight = titleLabel.frame.height + 8 + separatorLineView.frame.height + 8 + imageView.frame.height + 8
dialogView.frame.origin = CGPoint (x: 32 ، y: frame.height)
dialogView.frame.size = CGSize (العرض: frame.width-64 ، الارتفاع: dialogViewHeight)
dialogView.backgroundColor = UIColor.white
dialogView.layer.cornerRadius = 6
dialogView.clipsToBounds = صواب
addSubview (dialogView)

أخيرًا ، أود استبعاد AlertView عندما ينقر المستخدم على أي مكان خارج التنبيه. لذلك ، يتيح إضافة UITapGestureRecognizer إلى backgroundView.

backgroundView.addGestureRecognizer (UITapGestureRecognizer (الهدف: الذات ، العمل: #selector (didTappedOnBackgroundView)))

وعلى الإجراء الحنفية ، استبعد التنبيه.

func didTappedOnBackgroundView () {
     صرف (الرسوم المتحركة: صحيح)
}

تهانينا!! have ، لديك CustomAlertView جاهزة للاستخدام.

الآن ، يمكنك أن تنبثق CustomAlertView من أي مكان عن طريق إنشاء مثيل جديد من CustomAlertView وخاصية استدعاء (متحركة: Bool).

اسمحوا التنبيه = CustomAlert (العنوان: "مرحبا هناك! " ، الصورة: UIImage (اسمه: "img")!)
alert.show (متحركة: حقيقية)

مثال على المشروع: https://github.com/aatish-rajkarnikar/ModalView

شكرا للقراءة ، آمل أن تكونوا مثل ذلك. إذا كان لديك أي استفسارات حول هذا البرنامج التعليمي ، فلا تتردد في طرح الأسئلة وسأقدر أي ردود فعل أو اقتراحات.