国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

首頁 > 系統 > iOS > 正文

iOS高仿微信文章懸浮球功能

2019-10-21 18:39:58
字體:
來源:轉載
供稿:網友

iOS,微信,懸浮球

前言

微信在最新版本6.6.7,新加了一個文章懸浮球功能。當你正在閱讀文章的時候,突然有好友發來了緊急消息,你需要立即回復。又或者你剛好路過小吃店,需要臨時打開微信支付,等等臨時中斷閱讀的情況。以前只有退出文章詳情頁面,處理完事情之后,再挨著挨著找到原來的文章。對于我們這種重度微信使用者來說,每次遭遇這種情況,真的很蛋疼。所以,當這個功能推出的事情,立馬更新了最新版本,這個功能感覺就像遇到了知心人一樣,用起來十分順手。可以通過下面的動圖感受一下

iOS,微信,懸浮球

其實懸浮球的概念早就有了。比如360助手的流量監控球,iPhone自帶的AssitiveTouch(就是那個可愛的小白球)等等。

倉庫地址

Github地址 喜歡就點顆:heart:

核心技術點

體驗過后,讓人手癢癢,情不自禁得想要模仿一把。如果你的APP可以集成該功能,我覺得可以讓你的APP逼格瞬間提升一個level。好了,下面讓我們來一一解剖,微信文章懸浮球的核心技術點:

1.懸浮球的出現

當我們通過屏幕邊緣手勢pop視圖的時候,右下角會有一個圓角提示圖,跟著手勢進度移動。

如何獲取到UIScreenEdgePanGestureRecognizer的進度呢?

因為系統自帶的interactivePopGestureRecognizer是被封裝起來的,它的action我們無法掛鉤拿到里面的手勢進度。所以,需要另辟蹊徑了。

首先,讓UINavigationController的delegate等于自己,然后讓多個手勢可以同時響應。

self.interactivePopGestureRecognizer?.delegate = selffunc gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {  return true }

然后自己添加一個UIScreenEdgePanGestureRecognizer到UINavigationController上面,用于獲取pop手勢的進度。

let gesture = UIScreenEdgePanGestureRecognizer(target: self, action: #selector(handleNavigationTransition(gesture:)))gesture.edges = .leftself.view.addGestureRecognizer(gesture)

這樣子,有兩個UIScreenEdgePanGestureRecognizer可以同時響應,系統自帶的依然保持原有邏輯不動,我們新增的用于獲取pop手勢進度,兩者井水不犯河水,其樂融融。

2.懸浮球全局置頂

既然懸浮球可以在懸浮在任何一個頁面,必然是放在一個新的UIWindow上面。比如系統的鍵盤彈出的時候,就是一個UIRemoteKeyboardWindow在承載。

然后這個window的生命周期不依賴某一個頁面,所以用單例實現比較好。這塊代碼比較分散,直接看源碼就可以了解

3.事件響應

懸浮UIWindow的事件傳遞

只要事件位置沒有在圓球和右下角上,就不響應

override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {  let roundEntryViewPoint = self.convert(point, to: roundEntryView)  if roundEntryView.point(inside: roundEntryViewPoint, with: event) == true {   return true  }  let collectViewPoint = self.convert(point, to: collectView)  if collectView.point(inside: collectViewPoint, with: event) == true {   return true  }  return false }

右下角四分之一圓,事件響應

可以看到微信,只有當手指移動進右下角圓內,才能進行懸浮。而不是按著視圖的frame來響應。

首先,通過UIBezierPath畫一個四分之一圓,然后用CGPath的contains(point)方法判斷。

func updateBGLayerPath(isSmall: Bool) {  var ratio:CGFloat = 1  if !isSmall {   ratio = 1.3  }  let path = UIBezierPath()  path.move(to: CGPoint(x: viewSize.width, y: (1 - ratio)*viewSize.height))  path.addLine(to: CGPoint(x: viewSize.width, y: viewSize.height))  path.addLine(to: CGPoint(x: (1 - ratio)*viewSize.width, y: viewSize.height))  path.addArc(withCenter: CGPoint(x: viewSize.width, y: viewSize.height), radius: viewSize.width*ratio, startAngle: CGFloat(Double.pi), endAngle: CGFloat(Double.pi*3/2), clockwise: true)  path.close()  bgLayer.path = path.cgPath } override func point(inside point: CGPoint, with event: UIEvent?) -> Bool {  return bgLayer.path!.contains(point) }

4.自定義轉場動畫

可以看到點擊懸浮球打開的文章,是通過一個自定義轉場動畫實現的,從懸浮球的位置開始展開。

有許多文章都有講解如何自定義轉場動畫,但是我推薦你看這篇文章 幾句代碼快速集成自定義轉場效果+ 全手勢驅動

實現效果

iOS,微信,懸浮球

總結

微信的懸浮球,用到的技術點相對比較多,代碼也比較分    散,如果你的APP要集成該功能,需要認真封裝代碼。

相對于如何實現,我認為如何設計好一個需求更重要。我在模仿的過程中,發現其中有許多細節的邏輯,彼此環環相扣,最終就呈現出了你正在使用的懸浮球功能。

都說程序員和產品經理是相愛相殺,在這里我要為該功能的產品經理點個贊

倉庫地址

如果代碼中有任何問題,否則你有任何疑問,都可以反饋給我,我將第一時間處理。

Github地址 喜歡就點顆:heart:

總結

以上所述是小編給大家介紹的iOS高仿微信文章懸浮球功能,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對VEVB武林網網站的支持!


注:相關教程知識閱讀請移步到IOS開發頻道。
發表評論 共有條評論
用戶名: 密碼:
驗證碼: 匿名發表
主站蜘蛛池模板: 永吉县| 盘锦市| 兰坪| 沈阳市| 马公市| 北辰区| 玉溪市| 德江县| 聂荣县| 丽江市| 余干县| 镇巴县| 元江| 扎赉特旗| 佛山市| 金平| 安化县| 榆林市| 英德市| 衡东县| 莱西市| 万载县| 柳林县| 都江堰市| 治县。| 扎兰屯市| 秭归县| 丰镇市| 沾化县| 辽阳县| 清流县| 凤凰县| 津南区| 波密县| 重庆市| 平泉县| 中山市| 华池县| 松原市| 义马市| 思茅市|