JXWeChatFloatView

JXWeChatFloatView

Boule flottante d'article WeChat à haute imitation

Préface

Dans la dernière version 6.6.7 de WeChat, une nouvelle fonction de boule flottante d'article a été ajoutée. Pendant que vous lisez l’article, un ami vous envoie soudainement un message urgent auquel vous devez répondre immédiatement. Ou peut-être que vous passez devant un snack-bar et que vous devez ouvrir temporairement le paiement WeChat ou interrompre temporairement la lecture. Dans le passé, je ne pouvais quitter que la page de détails de l'article et, une fois mon travail terminé, je pouvais trouver les articles originaux les uns à côté des autres. Pour les grands utilisateurs de WeChat comme nous, c’est vraiment douloureux chaque fois que nous sommes confrontés à cette situation. Par conséquent, lorsque cette fonction a été lancée, elle a été immédiatement mise à jour vers la dernière version. Cette fonction donne l'impression de rencontrer un ami proche et elle est très simple à utiliser. Vous pouvez le ressentir à travers l'animation ci-dessous

En fait, le concept des balles flottantes existe depuis longtemps. Par exemple, la boule de surveillance du trafic de 360 ​​Assistant, l’AssistiveTouch de l’iPhone (cette jolie petite boule blanche), etc.

Adresse de l'entrepôt

Si vous aimez l'adresse Github, cliquez dessus ❤️

Points techniques essentiels

Après l’avoir vécu, mes mains me démangent et je ne peux m’empêcher de vouloir l’imiter. Si votre application peut intégrer cette fonction, je pense qu'elle peut instantanément élever votre application à un nouveau niveau. D'accord, disséquons un par un les principaux points techniques de l'article WeChat sur la boule flottante :

1. L'émergence des boules flottantes

Lorsque nous utilisons le geste du bord de l'écran pour faire apparaître la vue, il y aura une invite de coin arrondi dans le coin inférieur droit, qui se déplace avec la progression du geste. Comment obtenir la progression de UIScreenEdgePanGestureRecognizer ? Étant donné que interactivePopGestureRecognizer fourni avec le système est encapsulé, nous ne pouvons pas accrocher son action pour obtenir la progression du geste à l'intérieur. Nous devons donc trouver une autre voie.

• Tout d’abord, rendez le délégué de UINavigationController égal à lui-même, puis autorisez plusieurs gestes à répondre en même temps.

 self . interactivePopGestureRecognizer ? . delegate = self

func gestureRecognizer ( _ gestureRecognizer : UIGestureRecognizer , shouldRecognizeSimultaneouslyWith otherGestureRecognizer : UIGestureRecognizer ) -> Bool {
        return true
    }

• Ajoutez ensuite un UIScreenEdgePanGestureRecognizer au UINavigationController pour obtenir la progression du geste pop.

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

De cette façon, il y a deux UIScreenEdgePanGestureRecognizer qui peuvent répondre en même temps. Celui fourni avec le système conserve toujours sa logique d'origine, et le nouveau que nous avons ajouté est utilisé pour obtenir la progression du geste pop. en harmonie les uns avec les autres et sont heureux. Cette technique est également utilisée dans cet article sur iOS : Intégrez les pages de profil d'applications grand public (telles que Jianshu, Weibo, etc.) en une minute

2. La boule flottante est placée globalement au-dessus

Étant donné que la boule flottante peut être suspendue sur n'importe quelle page, elle doit être placée sur une nouvelle UIWindow. Par exemple, lorsque le clavier système apparaît, il est hébergé par un UIRemoteKeyboardWindow . Ensuite, le cycle de vie de cette fenêtre ne dépend pas d'une certaine page, il est donc préférable d'utiliser un singleton pour l'implémenter. Ce morceau de code est relativement dispersé. Vous pouvez le comprendre en regardant directement le code source.

3. Réponse aux incidents

• La livraison d'événement de UIWindow suspendue ne répondra pas tant que la position de l'événement n'est pas sur le ballon et dans le coin inférieur droit.

 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
    }

• Dans le quart de cercle dans le coin inférieur droit, WeChat peut être vu en réponse à un événement. Ce n'est que lorsque le doigt entre dans le cercle dans le coin inférieur droit qu'il peut être suspendu. Au lieu de répondre selon le cadre de la vue. Commencez par tracer un quart de cercle via UIBezierPath , puis utilisez la méthode contains(point) de CGPath pour déterminer.

 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 )
    }

Les étudiants qui ne connaissent pas grand-chose à ce sujet peuvent se référer à cet article. Un article pour comprendre l'utilisation de la diffusion d'événements, de la chaîne de répondeurs, de hitTest et de pointInside

4. Personnalisez l'animation de transition

Vous pouvez voir que l'article ouvert en cliquant sur la boule flottante est implémenté via une animation de transition personnalisée, à partir de la position de la boule flottante. Il existe de nombreux articles expliquant comment personnaliser l'animation de transition, mais je vous recommande de lire cet article pour intégrer rapidement des effets de transition personnalisés + un pilote de geste complet avec quelques lignes de code

Réalisez l'effet

Résumer

La boule flottante de WeChat utilise relativement de nombreux points techniques et le code est relativement dispersé. Si votre application souhaite intégrer cette fonction, vous devez soigneusement emballer le code. Je pense que la manière de concevoir une exigence est plus importante que la manière de la mettre en œuvre. Dans le processus d'imitation, j'ai découvert qu'il existe de nombreuses logiques détaillées qui s'emboîtent les unes dans les autres, et finalement la fonction de boule flottante que vous utilisez est présentée. On dit que les programmeurs et les chefs de produit sont amoureux les uns des autres. Ici, je veux saluer le chef de produit de cette fonction ?

Adresse de l'entrepôt

S'il y a des problèmes dans le code ou si vous avez des questions, vous pouvez me faire part de vos commentaires et je les traiterai dans les plus brefs délais. Si vous aimez l'adresse Github, cliquez dessus ❤️