如何在Swift 3中使用动画制作自定义AlertView / DialogBox

尽管我们有UIAlertViewController来显示警报，但是我们没有足够的灵活性来进行自定义。 因此，在这里，我正在编写另一个教程，介绍如何根据需要使自己拥有AlertView / DialogBox。

在本教程中，我们将制作一个简单的AlertView，其中将包含标题和图像，但是您可以使用此方法实现任何复杂的设计。 如果可以想象，就可以做到。 👍

让我们开始吧…

我创建了一个名为Modal的简单协议，该协议可帮助您显示/关闭自定义AlertView / DialogBox。 您可以使用动画值来满足您的要求。 首先将该文件添加到您的项目中。

在将Modal Protocol添加到项目中之后，创建一个新的Swift文件，并为其指定任何名称。 我将其命名为CustomAlertView 。 现在，创建一个名为CustomAlertView的类，并将其作为UIView的子类。

 导入UIKit 

 类CustomAlertView：UIView { 

  } 

现在，确认Modal协议并实施所需的变量。

 类CustomAlertView：UIView，模态{ 

  var backgroundView = UIView（） 

  var dialogView = UIView（） 

  } 

我们将需要创建自己的初始化程序，以使用标题和图像初始化CustomAlertView ，因此，让我们创建一个将使用Title和Image的初始化程序。 如果要创建自己的初始化程序，则还需要实现所需的 init？（编码器aDecoder：NSCoder）并覆盖 init（frame：CGRect） 。 您还需要从初始值设定项中调用其指定的初始值设定项。 因此，我们通过提供主屏幕边界来调用init（frame：CGRect） ，这将使我们的CustomAlertView覆盖整个屏幕。

如果您想了解有关初始化器的更多信息，请转到此链接 。

 便利init（title：String，image：UIImage）{ 

  self.init（框架：UIScreen.main.bounds） 

  } 

 覆盖init（frame：CGRect）{ 

  super.init（frame：框架） 

  } 

 需要初始化吗？（编码器aDecoder：NSCoder）{ 

  fatalError（“ init（coder :)尚未实现”） 

  } 

现在，让我们设计我们的AlertView

如果您还记得的话，我们在顶部定义了两个变量，即backgroundView和dialogView 。 dialogView是将包含实际Alert内容的视图， backgroundView是dialogView后面的视图 。

在本教程中，我以编程方式设计了CustomAlertView，但是如果您不喜欢以编程方式创建视图，则可以始终使用xib设计视图并将其添加到各自的dialogView和backgroundView中 。

您可以使用backgroundView进行很多操作，例如可以将背景设置为“模糊”或“透明”或“半透明”或显示一些图像。 现在，让我们的backgroundView为Dark Semi Transparent。

  backgroundView.frame =框架 

  backgroundView.backgroundColor = UIColor.black 

  backgroundView.alpha = 0.6 

  addSubview（backgroundView） 

同样，我希望AlertView的宽度比屏幕宽度小64点，从而留下16个前导空格和16个尾随空格。 现在，让我们在dialogView的顶部添加UILabel，在Label下方的分隔线下方添加一个薄UIView，并在其后添加一个UIImageView。 我们将设置从我们先前创建的初始化程序获得的标题和图像到各自的UILabel和UIImageView。 最后，计算dialogView的总高度并进行设置。 如您所见， dialogView的y位置设置为框架的高度。 这样， dialogView将放置在屏幕外部，因此当您显示AlertView时，它将从屏幕的底部到中心进行动画处理。

 让dialogViewWidth = frame.width-64 

 让titleLabel = UILabel（框架：CGRect（x：8，y：8，宽度：dialogViewWidth-16，高度：30）） 

  titleLabel.text =标题 

  titleLabel.textAlignment = .center 

  dialogView.addSubview（titleLabel） 

 让分隔线= UIView（） 

  spacerLineView.frame.origin = CGPoint（x：0，y：titleLabel.frame.height + 8） 

  spacerLineView.frame.size = CGSize（宽度：dialogViewWidth，高度：1） 

  spacerLineView.backgroundColor = UIColor.groupTableViewBackground 

  dialogView.addSubview（separatorLineView） 

 让imageView = UIImageView（） 

  imageView.frame.origin = CGPoint（x：8，y：spacerLineView.frame.height + spacerLineView.frame.origin.y + 8） 

  imageView.frame.size = CGSize（width：dialogViewWidth-16，height：dialogViewWidth-16） 

  imageView.image =图片 

  imageView.layer.cornerRadius = 4 

  imageView.clipsToBounds = true 

  dialogView.addSubview（imageView） 

 让dialogViewHeight = titleLabel.frame.height + 8 + spacerLineView.frame.height + 8 + imageView.frame.height + 8 

  dialogView.frame.origin = CGPoint（x：32，y：frame.height） 

  dialogView.frame.size = CGSize（width：frame.width-64，height：dialogViewHeight） 

  dialogView.backgroundColor = UIColor.white 

  dialogView.layer.cornerRadius = 6 

  dialogView.clipsToBounds = true 

  addSubview（dialogView） 

最后，当用户点击警报外的任何地方时，我想关闭AlertView。 因此，让我们将UITapGestureRecognizer添加到backgroundView中。

  backgroundView.addGestureRecognizer（UITapGestureRecognizer（target：self，action：#selector（didTappedOnBackgroundView））） 

然后在“轻按”操作中关闭警报。

  func didTappedOnBackgroundView（）{ 

 解雇（动画：true） 

  } 

恭喜!! 🎉，您已经可以使用CustomAlertView 。

现在，您只需创建CustomAlertView的新实例并调用show（animated：Bool）函数，即可从任何位置弹出CustomAlertView。

  let alert = CustomAlert（标题：“你好！!!”，图片：UIImage（名称：“ img”）！） 

  alert.show（动画：true） 

示例项目：https://github.com/aatish-rajkarnikar/ModalView

感谢您的阅读，希望您喜欢它。 如果您对此教程有任何疑问，请随时提出，我将不胜感激任何反馈或建议。