JXWeChatFloatView
1.0.0
บทความ WeChat เลียนแบบสูงลูกบอลลอย
ใน WeChat เวอร์ชันล่าสุด 6.6.7 มีการเพิ่มฟังก์ชันลูกบอลลอยบทความใหม่ ขณะที่คุณกำลังอ่านบทความ จู่ๆ เพื่อนก็ส่งข้อความด่วนมา และคุณต้องตอบกลับทันที หรือบางทีคุณอาจบังเอิญเดินผ่านสแน็คบาร์และจำเป็นต้องเปิดการชำระเงิน WeChat ชั่วคราว หรือรบกวนการอ่านชั่วคราว เมื่อก่อนทำได้แค่ออกจากหน้ารายละเอียดบทความ พอทำงานเสร็จ ก็เจอบทความต้นฉบับอยู่ข้างๆ กัน สำหรับผู้ใช้ WeChat จำนวนมากอย่างพวกเรา ทุกครั้งที่เจอสถานการณ์นี้ เป็นเรื่องที่เจ็บปวดจริงๆ ดังนั้นเมื่อเปิดตัวฟังก์ชั่นนี้ก็จะอัพเดทเป็นเวอร์ชั่นล่าสุดทันที คุณสามารถสัมผัสได้ถึงมันผ่านแอนิเมชั่นด้านล่าง
จริงๆ แล้ว แนวคิดเรื่องลูกบอลลอยน้ำมีมานานแล้ว ตัวอย่างเช่น ลูกบอลติดตามการจราจรของ 360 Assistant, AssistiveTouch ของ iPhone (ลูกบอลสีขาวเล็กๆ น่ารัก) เป็นต้น
หากคุณชอบที่อยู่ Github ให้คลิกเลย ❤️
หลังจากสัมผัสแล้วมือของฉันก็คันและอดไม่ได้ที่จะเลียนแบบ หากแอปของคุณสามารถรวมฟังก์ชันนี้ได้ ฉันคิดว่าจะสามารถยกระดับแอปของคุณไปสู่ระดับใหม่ได้ทันที เอาล่ะ เราจะมาวิเคราะห์ประเด็นทางเทคนิคหลักของบทความ WeChat แบบลอยตัวทีละรายการ:
เมื่อเราใช้ท่าทางขอบหน้าจอเพื่อแสดงมุมมองจะมีข้อความเตือนมุมโค้งมนที่มุมขวาล่างซึ่งจะเลื่อนไปตามความคืบหน้าของท่าทาง จะรับความคืบหน้าของ UIScreenEdgePanGestureRecognizer ได้อย่างไร เนื่องจาก interactivePopGestureRecognizer ที่มาพร้อมกับระบบถูกห่อหุ้มไว้ เราจึงไม่สามารถเชื่อมโยงการทำงานของระบบเพื่อรับความคืบหน้าของท่าทางภายในได้ เราจึงต้องหาวิธีอื่น
self . interactivePopGestureRecognizer ? . delegate = self
func gestureRecognizer ( _ gestureRecognizer : UIGestureRecognizer , shouldRecognizeSimultaneouslyWith otherGestureRecognizer : UIGestureRecognizer ) -> Bool {
return true
}UIScreenEdgePanGestureRecognizer ให้กับ UINavigationController เพื่อรับความคืบหน้าของท่าทางป๊อป let gesture = UIScreenEdgePanGestureRecognizer ( target : self , action : #selector ( handleNavigationTransition ( gesture : ) ) )
gesture . edges = . left
self . view . addGestureRecognizer ( gesture ) ด้วยวิธีนี้ มี UIScreenEdgePanGestureRecognizer สองตัวที่สามารถตอบสนองพร้อมกันได้ อันที่มาพร้อมกับระบบยังคงรักษาตรรกะดั้งเดิมไว้ และอันใหม่ที่เราเพิ่มเข้ามานั้นใช้เพื่อรับความคืบหน้าของท่าทางป๊อปทั้งสอง สามัคคีและสนุกสนานไปกับตัวเอง เทคนิคของฉันนี้ยังใช้ในบทความบน iOS ด้วย: รวมหน้าโปรไฟล์แอปกระแสหลัก (เช่น Jianshu, Weibo ฯลฯ ) ในหนึ่งนาที
เนื่องจากสามารถระงับลูกบอลลอยบนหน้าใดก็ได้ จึงต้องวางบน UIWindow ใหม่ ตัวอย่างเช่น เมื่อแป้นพิมพ์ของระบบปรากฏขึ้น แป้นพิมพ์ดังกล่าวจะโฮสต์โดย UIRemoteKeyboardWindow วงจรชีวิตของหน้าต่างนี้ไม่ขึ้นอยู่กับหน้าใดหน้าหนึ่ง ดังนั้นจึงเป็นการดีกว่าถ้าใช้ซิงเกิลตันเพื่อนำไปใช้ โค้ดชิ้นนี้ค่อนข้างกระจัดกระจาย คุณสามารถเข้าใจได้โดยดูที่ซอร์สโค้ดโดยตรง
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
}UIBezierPath จากนั้นใช้เมธอด contains(point) ของ CGPath เพื่อกำหนด 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 )
}นักเรียนที่ไม่ค่อยมีความรู้เกี่ยวกับหัวข้อนี้มากนักสามารถอ่านบทความนี้ได้ บทความเพื่อทำความเข้าใจการใช้การจัดกิจกรรม, ห่วงโซ่การตอบกลับ, HitTest และ pointInside
คุณจะเห็นว่าบทความที่เปิดโดยการคลิกที่ลูกบอลลอยนั้นถูกนำมาใช้ผ่านแอนิเมชั่นการเปลี่ยนแปลงที่กำหนดเอง โดยเริ่มจากตำแหน่งของลูกบอลลอย มีบทความมากมายที่อธิบายวิธีปรับแต่งแอนิเมชั่นการเปลี่ยนภาพ แต่ฉันขอแนะนำให้คุณอ่านบทความนี้เพื่อรวมเอฟเฟกต์การเปลี่ยนภาพที่กำหนดเอง + โปรแกรมควบคุมท่าทางเต็มรูปแบบเข้ากับโค้ดไม่กี่บรรทัดอย่างรวดเร็ว
ลูกบอลลอยของ WeChat ใช้ประเด็นทางเทคนิคค่อนข้างมาก และโค้ดก็ค่อนข้างกระจัดกระจาย หากแอปของคุณต้องการรวมฟังก์ชันนี้ คุณจะต้องจัดแพ็คเกจโค้ดอย่างระมัดระวัง ฉันคิดว่าวิธีการออกแบบข้อกำหนดมีความสำคัญมากกว่าวิธีนำไปปฏิบัติ ในกระบวนการเลียนแบบ ฉันพบว่ามีตรรกะที่มีรายละเอียดมากมายซึ่งเชื่อมต่อกัน และสุดท้ายก็นำเสนอฟังก์ชันลูกบอลลอยที่คุณใช้อยู่ ว่ากันว่าโปรแกรมเมอร์และผู้จัดการผลิตภัณฑ์รักกัน ที่นี่ฉันอยากจะยกนิ้วให้กับผู้จัดการผลิตภัณฑ์ของฟังก์ชั่นนี้?
หากมีปัญหาใดๆ ในโค้ด หรือหากคุณมีคำถามใดๆ คุณสามารถให้ข้อเสนอแนะแก่ฉันได้ และเราจะจัดการกับมันโดยเร็วที่สุด หากคุณชอบที่อยู่ Github ให้คลิกเลย ❤️
