[iOS] 仿微信悬浮窗口
最编程
2024-03-27 16:44:39
...
关键词
转场动画,手势监听,核心动画
运行效果
使用简介
// []中存放需要悬浮的类,vcname指类名
FloatViewManager.manager.addFloatVcsClass(vcs: [vcname])
主要使用类目及功能
整体涉及以下几个主要的类,并注明其功能点
-
FloatViewManager
单例,用来管理悬浮窗信息以及在window上的视图。 -
TransitionPush / TransitionPop
自定义导航转场动画 -
FloatBallView
屏幕上圆形浮标,可拖动 -
BottomFloatView
底部绘制黑色或者红色视图
思路
- 首先初始化项目时,为了监听手势移动变化
,自定义转场,手势代理
交由FloatViewManager来管理。
currentNavtigationController()?.interactivePopGestureRecognizer?.delegate = self
currentNavtigationController()?.delegate = self
- 当进入可支持悬浮的控制器时,需要根据手势的偏移来计算底部黑色半透明框的移动,这里我们使用以下来做监听,注意这里一定要进行安全判断。
func gestureRecognizerShouldBegin(_ gestureRecognizer: UIGestureRecognizer) -> Bool {
// 当前导航控制器是否存在子集合
guard let vcs = currentNavtigationController()?.viewControllers else{
return false
}
// 如果是根控制器,不做处理
guard vcs.count > 1 else {
return false
}
// 判断当前的控制器与开始数组中的支持悬浮的控制器是否一致,只有一致才执行下一步,并开启监听
if let currentVisiableVC = currentViewController() {
let currentVCClassName = "\(currentVisiableVC.self)"
if currentVCClassName.contains(floatVcClass.first!){
startDisplayLink()
edgeGesture = (gestureRecognizer as? UIScreenEdgePanGestureRecognizer) ?? nil
tempCurrentFloatVC = currentVisiableVC
}
}
return true
}
}
- 根据监听的结果更新底部的半透明视图,这里详细代码请参见源代码。
- 在手势结束完之后,判断是否悬浮,若最终结束手势在底部黑色透明内,悬浮并展示圆形浮标,反之隐藏。
@objc func displayLinkLoop() {
if edgeGesture?.state == UIGestureRecognizerState.changed{
guard let startP = edgeGesture?.location(in:kWindow) else {
return
}
let orx : CGFloat = max(screenWidth - startP.x, kBvfMinX)
let ory : CGFloat = max(screenHeight - startP.x, kBvMinY)
bFloatView.frame = CGRect(x: orx, y: ory, width: kBottomViewFloatWidth, height: kBottomViewFloatHeight)
// 将点转化到底部视图上,计算是否在黑色圆内
guard let transfomBottomP = kWindow?.convert(startP, to: bFloatView) else{
return
}
// print(transfomBottomP)
if transfomBottomP.x > 0 && transfomBottomP.y > 0{
let arcCenter = CGPoint(x: kBottomViewFloatWidth, y: kBottomViewFloatHeight)
let distance = pow((transfomBottomP.x - arcCenter.x),2) + pow((transfomBottomP.y - arcCenter.y),2)
let onArc = pow(arcCenter.x,2)
if distance <= onArc{
if(!bFloatView.insideBottomSeleted){
bFloatView.insideBottomSeleted = true
}
}else{
if(bFloatView.insideBottomSeleted){
bFloatView.insideBottomSeleted = false
}
}
}else{
if(bFloatView.insideBottomSeleted){
bFloatView.insideBottomSeleted = false
}
}
}else if(edgeGesture?.state == UIGestureRecognizerState.possible){
//结束的时候判断最终手指的位置即黑色透明视图是否是选中状态。若选中,存储当前控制器,并暂停掉定时器(这里一定要暂停,不然浪费资源)
if(bFloatView.insideBottomSeleted){
currentFloatVC = tempCurrentFloatVC
tempCurrentFloatVC = nil
ballView.show = true
if let newDetailVC = currentFloatVC as? NewDetailController{
ballView.backgroundColor = newDetailVC.themeColor
}
}
// 隐藏底部黑色透明视图
UIView.animate(withDuration: animationConst().animationDuration, animations: {
self.bFloatView.frame = CGRect(x: screenWidth, y: screenHeight, width: kBottomViewFloatWidth, height:kBottomViewFloatHeight)
}) { (_) in
}
stopDisplayLink()
}
}
- 圆形浮标支持拖动,并且提供点击,拖动手势代理方法供FloatViewManager使用更新相关视图,参见源代码
- 当用户返回到其它界面,只要保证能找到最顶部导航,就可以再次打开悬浮窗控制器。这里主要是自定义转场动画push/pop。
- 当用户手指手动悬浮窗取消悬浮时,将单例中保存所有的数据清空,保证再次可以正常使用。
缺陷
微信此功能,手指侧滑至大于0.5松开,也会执行pop的转场动画,但我一直没有找到合适的有效的解决方案,如有解决或者知晓方案的可以一起交流一下。
个人理解
看到技术论坛有人仿写,于是自己也好奇尝试着用swift做了一下,主题功能不难,只是有点繁琐。
源码
Git源码
感谢作者及其以下博客,如有问题欢迎私信批评指正
Customizing the Transition Animations
UINavigationController内的转场动画
iOS浮窗
世界杯,中国队,加油~~~~
上一篇: 微信小程序实现语音录制、上传、回放
下一篇: 如何将实时音视频通话与微信小程序整合?
推荐阅读
-
iOS 16 更新引热议,网友吐槽锁屏太花哨,更新后潘粤明一度无法登录微信
-
QuestionStar 移除微信登录弹出窗口
-
翩翩仿微信扫码(扫码、图像翻译)
-
微信 "扫一扫 "物联网,全面揭秘 "扫一扫 "背后的扫盲技术!-1.1 扫一扫感知物体是做什么的? 1.1 微信扫一扫是做什么的? 扫一扫识物是指以图片或视频(商品图片:鞋/包/美妆/服饰/家电/玩具/图书/食品/珠宝/家具/其他商品)为输入媒介,挖掘微信内容生态中的有价值信息(电商+百科+资讯,如图1所示),并展示给用户。这里的电商基本涵盖了微信小程序覆盖上亿SKU的全量优质电商,可以支持用户货比N家并直接下单购买,百科和资讯则聚合了微信内的头部自媒体如搜狗、搜搜、百度等,向用户展示和分享拍摄商品相关的内容资讯。 图 1 扫一扫识别功能示意图 欢迎大家更新iOS新版微信→扫一扫→识货,亲自体验,也欢迎大家通过识货界面的反馈按钮向我们提交反馈意见。 扫一扫识物实景图展示 1.2 扫一扫识物有哪些使用场景? 扫一扫识物的目的是为用户访问微信内部生态内容开辟一个新窗口,以用户扫图片为输入形式,为用户提供微信生态内容中的百科、资讯、电商等作为展示页面。除了用户熟悉的扫一扫操作外,我们还将进一步拓展长按操作,让用户更方便地进行扫一扫操作。"扫一扫知事 "的落地场景主要涵盖三大部分: a. 科普知识: a.科普知识。用户通过扫一扫,可以在微信生态圈中获取该对象的百科、资讯等常识或趣闻,帮助用户更好地了解该对象; b.购物场景。同样的搜索功能支持用户看到喜欢的商品立即检索到微信小程序电商中的同款商品,支持用户即扫即购; c.广告场景。扫一扫识别物体可以辅助公众号文章、视频更好地理解其中蕴含的图片信息,从而更好地投放匹配广告,提高点击率。 1.3 Sweep Sense 为 Sweep 家族带来了哪些新技术? 对于扫一扫来说,大家耳熟能详的应该就是扫一扫二维码、扫一扫小程序码、扫一扫条形码、扫一扫翻译了。无论是各种形式的编码还是文字字符,都可以看作是图片的一种特定编码形式,而物的识别则是对自然场景图片的识别,这对于扫一扫家族来说是一个质的飞跃,我们希望从物的识别入手,进一步拓展扫一扫对自然场景图片的理解能力,比如扫酒、扫车、扫植物、扫人脸等服务,如下图3所示。 图 3 Sweep 家族
-
翩翩仿微信项目实践四(聊天列表、列表弹出层)
-
微信 iOS 支付到账语音提示开发总结
-
iOS 终于可以双开微信了!原理其实是这样的...
-
最完整的 ios 系统导出微信聊天记录并生成文字云教程
-
iOS 17 重磅更新!iPhone 惊艳支持微信双开!
-
iOS 17 最新系统支持,iPhone 手机支持全系列微信拆分双开!-1.苹果手机上有一个自带浏览器,我们打开后进入苹果微信。网络进入相关分身的下载地点。