JXWeChatFloatView
1.0.0
Bola mengambang artikel WeChat imitasi tinggi
Di WeChat versi terbaru 6.6.7, artikel baru fungsi bola mengambang telah ditambahkan. Saat Anda membaca artikel tersebut, seorang teman tiba-tiba mengirimkan pesan penting dan Anda harus segera membalasnya. Atau mungkin Anda kebetulan melewati kedai makanan ringan dan perlu membuka pembayaran WeChat untuk sementara, atau menghentikan aktivitas membaca untuk sementara. Dulu, saya hanya bisa keluar dari halaman detail artikel, dan setelah menyelesaikan pekerjaan saya, saya bisa menemukan artikel asli bersebelahan. Bagi pengguna berat WeChat seperti kami, sungguh menyakitkan setiap kali kami menghadapi situasi ini. Oleh karena itu, ketika fungsi ini diluncurkan, langsung diupdate ke versi terbaru. Fungsi ini serasa bertemu teman dekat, dan sangat mudah digunakan. Anda bisa merasakannya melalui animasi di bawah ini
Sebenarnya konsep bola melayang sudah ada sejak lama. Misalnya, bola pemantau lalu lintas 360 Assistant, AssistiveTouch milik iPhone (bola putih kecil yang lucu), dll.
Jika Anda menyukai alamat Github, klik ❤️
Setelah mengalaminya, tangan saya terasa gatal dan mau tidak mau saya ingin menirunya. Jika APP Anda dapat mengintegrasikan fungsi ini, saya rasa ini dapat langsung meningkatkan APP Anda ke level baru. Baiklah, mari kita membedah poin-poin teknis inti dari artikel bola mengambang WeChat satu per satu:
Saat kita menggunakan gerakan tepi layar untuk memunculkan tampilan, akan ada perintah sudut membulat di sudut kanan bawah, yang bergerak seiring dengan kemajuan gerakan tersebut. Bagaimana cara mendapatkan kemajuan UIScreenEdgePanGestureRecognizer ? Karena interactivePopGestureRecognizer yang disertakan dengan sistem dienkapsulasi, kami tidak dapat mengaitkan tindakannya untuk memasukkan kemajuan isyarat ke dalamnya. Oleh karena itu, kita perlu mencari cara lain.
self . interactivePopGestureRecognizer ? . delegate = self
func gestureRecognizer ( _ gestureRecognizer : UIGestureRecognizer , shouldRecognizeSimultaneouslyWith otherGestureRecognizer : UIGestureRecognizer ) -> Bool {
return true
}UIScreenEdgePanGestureRecognizer ke UINavigationController untuk mendapatkan kemajuan gerakan pop. let gesture = UIScreenEdgePanGestureRecognizer ( target : self , action : #selector ( handleNavigationTransition ( gesture : ) ) )
gesture . edges = . left
self . view . addGestureRecognizer ( gesture ) Dengan cara ini, ada dua UIScreenEdgePanGestureRecognizer yang dapat merespons secara bersamaan. Yang disertakan dengan sistem masih mempertahankan logika aslinya, dan yang baru kami tambahkan digunakan untuk mendapatkan kemajuan dari gerakan pop rukun satu sama lain dan bahagia. Teknik saya ini juga digunakan dalam artikel ini di iOS: Integrasikan halaman profil APP mainstream (seperti Jianshu, Weibo, dll.) dalam satu menit
Karena bola mengambang dapat ditangguhkan di halaman mana pun, maka harus ditempatkan di UIWindow baru. Misalnya, saat keyboard sistem muncul, keyboard tersebut di-host oleh UIRemoteKeyboardWindow . Maka siklus hidup jendela ini tidak bergantung pada halaman tertentu, jadi lebih baik menggunakan singleton untuk mengimplementasikannya. Potongan kode ini relatif tersebar. Anda dapat memahaminya dengan melihat langsung kode sumbernya.
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 , lalu gunakan metode contains(point) CGPath untuk menentukannya. 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 )
}Siswa yang belum mengetahui banyak tentang topik ini dapat merujuk ke artikel ini. Artikel untuk memahami penggunaan pengiriman peristiwa, rantai responden, hitTest, dan pointInside
Anda dapat melihat bahwa artikel yang dibuka dengan mengklik bola mengambang diimplementasikan melalui animasi transisi khusus, dimulai dari posisi bola mengambang. Ada banyak artikel yang menjelaskan cara menyesuaikan animasi transisi, tetapi saya sarankan Anda membaca artikel ini untuk mengintegrasikan efek transisi khusus + driver gerakan lengkap dengan beberapa baris kode dengan cepat
Bola mengambang WeChat menggunakan relatif banyak poin teknis, dan kodenya relatif tersebar. Jika APP Anda ingin mengintegrasikan fungsi ini, Anda perlu mengemas kodenya dengan hati-hati. Menurut saya cara merancang suatu persyaratan lebih penting daripada cara mengimplementasikannya. Dalam proses peniruannya, saya menemukan banyak logika detail yang saling terkait satu sama lain, dan akhirnya disajikan fungsi bola mengambang yang Anda gunakan. Dikatakan bahwa programmer dan manajer produk saling jatuh cinta. Disini saya ingin mengacungkan jempol kepada manajer produk untuk fungsi ini?
Jika ada masalah dalam kode, atau jika Anda memiliki pertanyaan, Anda dapat memberi saya masukan dan saya akan menanganinya sesegera mungkin. Jika Anda menyukai alamat Github, klik ❤️
