这个 Pop-Up 是如何调用的,我该如何实现它?
How is this Pop-Up called and how do I implement it?
我注意到 Apple Inc. 的一些应用程序实现了这种类型的弹出窗口(参见链接图片)。我试图在互联网上找到它,但没有成功。
可能它的名称足以让我将它实现到我的 Storyboard-App 中,除非我没有在网上找到文档。因此,稍微解释一下会有所帮助。
您自己以编程方式创建它,在您的控制器下声明您的 containerView class、您的 descriptionLabel、您的 ImageView(在我的例子中也是按钮):
let myButton: UIButton = {
let b = UIButton()
b.backgroundColor = .white
b.setTitle("Tap Me!", for: .normal)
b.setTitleColor(.black, for: .normal)
b.titleLabel?.font = .systemFont(ofSize: 17, weight: .semibold)
b.layer.cornerRadius = 20
b.clipsToBounds = true
b.translatesAutoresizingMaskIntoConstraints = false
return b
}()
let containerView: UIView = {
let v = UIView()
v.backgroundColor = .ultraDark // set your pop up backround color
v.layer.cornerRadius = 18
v.clipsToBounds = true
v.alpha = 0
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
let myImageView: UIImageView = {
let iv = UIImageView()
iv.image = UIImage(systemName: "person.2.fill")?.withRenderingMode(.alwaysTemplate)
iv.tintColor = .gray
iv.contentMode = .scaleAspectFit
iv.translatesAutoresizingMaskIntoConstraints = false
return iv
}()
let descriptionLabel: UILabel = {
let l = UILabel()
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
现在在 viewDidLoad 中设置目标和约束:
view.backgroundColor = .black
myButton.addTarget(self, action: #selector(controlTextInTextfields), for: .touchUpInside)
view.addSubview(myButton)
myButton.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30).isActive = true
myButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
myButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 30).isActive = true
myButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20).isActive = true
view.addSubview(containerView)
containerView.heightAnchor.constraint(equalToConstant: 230).isActive = true
containerView.widthAnchor.constraint(equalToConstant: 220).isActive = true
containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
containerView.addSubview(myImageView)
myImageView.heightAnchor.constraint(equalTo: containerView.heightAnchor, multiplier: 0.8).isActive = true
myImageView.widthAnchor.constraint(equalTo: myImageView.heightAnchor, constant: -20).isActive = true
myImageView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
myImageView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor, constant: -20).isActive = true
containerView.addSubview(descriptionLabel)
descriptionLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
descriptionLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
descriptionLabel.topAnchor.constraint(equalTo: myImageView.bottomAnchor, constant: -20).isActive = true
descriptionLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
现在编写函数来显示弹出窗口并为其设置动画(我添加动画是因为它更酷):
func savedPopUpView(myView: UIView, label: UILabel, labelText: String) {
let savedLabel = label
savedLabel.text = labelText
savedLabel.font = UIFont.boldSystemFont(ofSize: 18)
savedLabel.textColor = .gray
savedLabel.numberOfLines = 0
savedLabel.textAlignment = .center
myAnimation(myV: myView)
}
fileprivate func myAnimation(myV: UIView) {
myV.alpha = 1
DispatchQueue.main.async {
myV.layer.transform = CATransform3DMakeScale(0, 0, 0)
UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
myV.layer.transform = CATransform3DMakeScale(1, 1, 1)
}, completion: { (completed) in
//completed
UIView.animate(withDuration: 0.2, delay: 2, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
myV.layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1)
myV.alpha = 0
})
})
}
}
如何使用,像这样调用目标按钮函数:
@objc func controlTextInTextfields() {
savedPopUpView(myView: containerView, label: descriptionLabel, labelText: "Tester: in entfernt")
}
在这种情况下,弹出窗口会在 2 秒后消失,您可以根据自己的喜好更改此参数...
结果:
我注意到 Apple Inc. 的一些应用程序实现了这种类型的弹出窗口(参见链接图片)。我试图在互联网上找到它,但没有成功。
可能它的名称足以让我将它实现到我的 Storyboard-App 中,除非我没有在网上找到文档。因此,稍微解释一下会有所帮助。
您自己以编程方式创建它,在您的控制器下声明您的 containerView class、您的 descriptionLabel、您的 ImageView(在我的例子中也是按钮):
let myButton: UIButton = {
let b = UIButton()
b.backgroundColor = .white
b.setTitle("Tap Me!", for: .normal)
b.setTitleColor(.black, for: .normal)
b.titleLabel?.font = .systemFont(ofSize: 17, weight: .semibold)
b.layer.cornerRadius = 20
b.clipsToBounds = true
b.translatesAutoresizingMaskIntoConstraints = false
return b
}()
let containerView: UIView = {
let v = UIView()
v.backgroundColor = .ultraDark // set your pop up backround color
v.layer.cornerRadius = 18
v.clipsToBounds = true
v.alpha = 0
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
let myImageView: UIImageView = {
let iv = UIImageView()
iv.image = UIImage(systemName: "person.2.fill")?.withRenderingMode(.alwaysTemplate)
iv.tintColor = .gray
iv.contentMode = .scaleAspectFit
iv.translatesAutoresizingMaskIntoConstraints = false
return iv
}()
let descriptionLabel: UILabel = {
let l = UILabel()
l.translatesAutoresizingMaskIntoConstraints = false
return l
}()
现在在 viewDidLoad 中设置目标和约束:
view.backgroundColor = .black
myButton.addTarget(self, action: #selector(controlTextInTextfields), for: .touchUpInside)
view.addSubview(myButton)
myButton.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: -30).isActive = true
myButton.heightAnchor.constraint(equalToConstant: 50).isActive = true
myButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 30).isActive = true
myButton.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -20).isActive = true
view.addSubview(containerView)
containerView.heightAnchor.constraint(equalToConstant: 230).isActive = true
containerView.widthAnchor.constraint(equalToConstant: 220).isActive = true
containerView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
containerView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
containerView.addSubview(myImageView)
myImageView.heightAnchor.constraint(equalTo: containerView.heightAnchor, multiplier: 0.8).isActive = true
myImageView.widthAnchor.constraint(equalTo: myImageView.heightAnchor, constant: -20).isActive = true
myImageView.centerXAnchor.constraint(equalTo: containerView.centerXAnchor).isActive = true
myImageView.centerYAnchor.constraint(equalTo: containerView.centerYAnchor, constant: -20).isActive = true
containerView.addSubview(descriptionLabel)
descriptionLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
descriptionLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
descriptionLabel.topAnchor.constraint(equalTo: myImageView.bottomAnchor, constant: -20).isActive = true
descriptionLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
现在编写函数来显示弹出窗口并为其设置动画(我添加动画是因为它更酷):
func savedPopUpView(myView: UIView, label: UILabel, labelText: String) {
let savedLabel = label
savedLabel.text = labelText
savedLabel.font = UIFont.boldSystemFont(ofSize: 18)
savedLabel.textColor = .gray
savedLabel.numberOfLines = 0
savedLabel.textAlignment = .center
myAnimation(myV: myView)
}
fileprivate func myAnimation(myV: UIView) {
myV.alpha = 1
DispatchQueue.main.async {
myV.layer.transform = CATransform3DMakeScale(0, 0, 0)
UIView.animate(withDuration: 0.2, delay: 0, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
myV.layer.transform = CATransform3DMakeScale(1, 1, 1)
}, completion: { (completed) in
//completed
UIView.animate(withDuration: 0.2, delay: 2, usingSpringWithDamping: 1, initialSpringVelocity: 1, options: .curveEaseOut, animations: {
myV.layer.transform = CATransform3DMakeScale(0.1, 0.1, 0.1)
myV.alpha = 0
})
})
}
}
如何使用,像这样调用目标按钮函数:
@objc func controlTextInTextfields() {
savedPopUpView(myView: containerView, label: descriptionLabel, labelText: "Tester: in entfernt")
}
在这种情况下,弹出窗口会在 2 秒后消失,您可以根据自己的喜好更改此参数...
结果: