「SwiftUI」底部弹窗弹出和收起

前言:通常在一些页面会用到底部弹窗,进行一些数据展示或二次确认。
页面编写思路:
  1. 编写弹窗View
  2. 在VC控制器中对于弹窗进行弹起和收起操作

弹窗弹起和收起代码

swift 复制代码
// MARK: - 平移动画
/// 向上平移
func toUpTranslation(targetView: UIView, y: CGFloat) {
    let animation = CABasicAnimation(keyPath: "position")
    /// 开始的位置
    animation.fromValue = CGPoint(x: targetView.layer.position.x, y: targetView.layer.position.y)
    /// 移动到的位置
    animation.toValue = CGPoint(x: targetView.layer.position.x, y: y)
    
    /// 动画持续时间
    animation.duration = 0.3
    /// 动画填充模式
    animation.fillMode = .forwards
    /// 动画完成不删除
    animation.isRemovedOnCompletion = false
    
    /// 添加动画
    targetView.layer.add(animation, forKey: "animation")
    
    /// 重新设置坐标
    targetView.center = CGPoint(x: targetView.layer.position.x, y: y)
}

/// 向下平移
func toDownTranslation(targetView: UIView, y: CGFloat) {
    let animation = CABasicAnimation(keyPath: "position")
    /// 开始的位置
    animation.fromValue = CGPoint(x: targetView.layer.position.x, y: targetView.layer.position.y)
    /// 移动到的位置
    animation.toValue = CGPoint(x: targetView.layer.position.x, y: y)
    
    /// 动画持续时间
    animation.duration = 0.3
    /// 动画填充模式
    animation.fillMode = .forwards
    /// 动画完成不删除
    animation.isRemovedOnCompletion = false
    
    /// 添加动画
    targetView.layer.add(animation, forKey: "animation")
    
    /// 重新设置坐标
    targetView.center = CGPoint(x: targetView.layer.position.x, y: y)
}

注意:该方法中的y点是指弹窗中心点移动到的y轴位置

代码使用方法:

swift 复制代码
private var alertView: AlertView!

private func initView() {
	alertView = AlertView(frame: CGRect(x: 0, y: Common.screenHeight, width: Common.screenWidth, height: 432.fit()))
	alertView.sureButtonAction = {
	self.toDownTranslation(targetView: self.alertView, y: Common.screenHeight + self.alertView.height/2)
	}

	self.view.addSubview(alertView)
}

private func clickToUpAlert() {
	self.toUpTranslation(targetView: self.alertView, y: Common.screenHeight - self.alertView.height/2)
}

该方法使用过程中需注意:弹窗初设frame时的y是指弹窗的左上点,弹窗上下移动方法中的y是指弹窗中心点移动到的位置

效果图


整理不易,望大家多多点赞,谢谢大家!

相关推荐
懋学的前端攻城狮1 天前
数据持久化与缓存策略:在离线与在线间架起桥梁
ios·swift
2501_915918411 天前
使用快蝎IDE进行iOS开发:从项目创建到真机调试全流程
ide·vscode·ios·objective-c·个人开发·swift·敏捷流程
大熊猫侯佩3 天前
别被系统绑架:SwiftUI List 替换背后的底层逻辑
swiftui·swift·apple
花间相见3 天前
【MS-Swift实战】:LoRA原理+核心参数(r/alpha)调参指南(适配Qwen-1.8B医疗场景)
开发语言·r语言·swift
2501_915918413 天前
快蝎iOS开发IDE:免Xcode开发,支持Swift/Flutter项目
ide·vscode·ios·个人开发·xcode·swift·敏捷流程
我现在不喜欢coding4 天前
Swift 核心协议揭秘:从 Sequence 到 Collection,你离标准库设计者只差这一步
ios·swift
2501_915909064 天前
Xcode从入门到精通:全面解析iOS开发IDE的核心功能与实际应用指南
ide·vscode·ios·个人开发·xcode·swift·敏捷流程
东坡肘子4 天前
从 OpenSwiftUI 到 DanceUI:换个方式 Dive SwiftUI -- 肘子的 Swift 周报 #132
人工智能·swiftui·swift
visual_zhang5 天前
Swift 方法派发机制深度解析 —— 兼与 Objective-C `objc_msgSend` 对比
objective-c·swift
用户79457223954135 天前
【SwiftyJSON】拯救你的 as? [String: Any]——链式 JSON 访问的正确姿势
swiftui·objective-c·swift