Как да направите персонализиран AlertView / DialogBox с анимация в Swift 3

Въпреки че имаме UIAlertViewController за показване на сигнали, не разполагаме с достатъчно гъвкавост, за да извършим персонализиране. така че, тук пиша друг урок за това как можете да накарате да притежавате AlertView / DialogBox както искате.

За този урок ще направим прост AlertView, който ще има заглавие и изображение, но можете да постигнете всеки сложен дизайн с този метод. ако можете да си представите, можете да го направите.

Да започваме…

Създадох прост протокол с име Modal, който ви помага да покажете / отхвърлите персонализирания си AlertView / DialogBox. Можете да си поиграете със стойности на анимация, за да задоволите вашите изисквания. нека започнем, като добавите този файл към вашия проект.

След като добавите Modal Protocol към проекта си, създайте нов файл Swift и му дайте името, което харесвате. ще го нарека CustomAlertView. сега създайте клас с име CustomAlertView и го направете подклас на UIView.

внос UIKit
клас CustomAlertView: UIView {
}

сега, потвърдете в протокола Modal и внедрете необходимите променливи.

клас CustomAlertView: UIView, Modal {
     var backgroundView = UIView ()
     var dialogView = UIView ()
}

Ще трябва да направим собствен инициализатор, за да инициализираме нашия CustomAlertView със заглавие и изображение, така че да създадем инициализатор, който ще вземе заглавие и изображение. Ако ще направите свой собствен инициализатор, вие също трябва да внедрите задължителен init? (Coder aDecoder: NSCoder) и да отмените init (frame: CGRect). вие също трябва да се обадите на определения му инициатор от вашия инициализатор. така че, ние наричаме init (frame: CGRect), като предоставяме основните граници на екрана, което ще направи нашия CustomAlertView да покрие целия екран.

ако искате да научите повече за инициаторите, отидете на тази връзка.

удобство init (заглавие: String, изображение: UIImage) {
     self.init (рамка: UIScreen.main.bounds)
}
заменя init (кадър: CGRect) {
     super.init (кадър: рамка)
}
необходими init? (coder aDecoder: NSCoder) {
     fatalError ("init (coder :) не е приложен")
}

сега, нека да проектираме нашия AlertView

ако си спомняте, имаме две променливи, дефинирани в горната част, т.е. backgroundView и dialogView. dialogView е изгледът, който ще съдържа действителното съдържание на предупреждение, а backgroundView е изгледът зад dialogView.

За този урок имам програмно проектиран CustomAlertView, но ако не искате да създавате изгледите си програмно, винаги можете да използвате xib, за да проектирате изгледа си и да го добавите към съответния dialogView и backgroundView.

можете да направите много с backgroundView, като можете да направите фонът да бъде Blur или Transparent или Semi Transparent или да покажете някакво изображение. за сега нека да направим нашия backgroundView да бъде тъмен полупрозрачен.

backgroundView.frame = рамка
backgroundView.backgroundColor = UIColor.black
backgroundView.alpha = 0.6
addSubview (backgroundView)

По същия начин бих искал ширината на AlertView да бъде с 64 точки по-малка от ширината на екрана, оставяйки 16 точки на водещото пространство и 16 точки на задното пространство. сега, нека добавим UILabel в горната част на dialogView, тънък UIView под етикета за разделителна линия и UIImageView след него. ние задаваме заглавие и изображение, които получаваме от нашия инициализатор, който сме създали по-рано, на съответните UILabel и UIImageView. накрая, изчислете общата височина за dialogView и я задайте. както можете да видите y-позицията на dialogView е зададена на височината на рамката. като направите това, dialogView ще бъде поставен извън екрана, така че когато покажете AlertView, той ще оживява отдолу до центъра на екрана.

нека dialogViewWidth = frame.width-64
нека titleLabel = UILabel (кадър: CGRect (x: 8, y: 8, ширина: dialogViewWidth-16, височина: 30))
titleLabel.text = заглавие
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 = true
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 = true
addSubview (dialogView)

накрая, бих искал да отхвърля AlertView, когато потребителят докосне навсякъде откъм Alert. така, нека добавим UITapGestureRecognizer към backgroundView.

backgroundView.addGestureRecognizer (UITapGestureRecognizer (цел: самостоятелно, действие: #selector (didTappedOnBackgroundView)))

и по действието Tap отхвърлете предупреждението.

func didTappedOnBackgroundView () {
     отхвърлям (анимирани: вярно)
}

Честито!! , имате готовност за употреба от вашия CustomAlertView.

сега можете да изскачате своя CustomAlertView отвсякъде, като просто създадете нов екземпляр от вашата CustomAlertView и извикващо шоу (анимирано: Bool).

нека сигнал = CustomAlert (заглавие: "Здравейте там !! ", изображение: UIImage (с име: "img")!)
alar.show (анимирано: вярно)

Примерен проект: https://github.com/aatish-rajkarnikar/ModalView

Благодаря за четенето, Надявам се да ви хареса. ако имате въпроси относно този урок, не се колебайте да попитате и ще оценя всички отзиви или предложения.