annuaire

I. introduction

Deux, Scroller

Trois, VelocityTracker

Quatrièmement, réel - histogramme d'inertie de la courroie coulissante

V. Écrit dans la dernière

I. introduction

des contrôles personnalisés, inévitablement rencontrer des besoins Faites glisser la scène . La toile scrollTo et scrollBy fournit des méthodes atteignent seulement mobile Effet, il est nécessaire de parvenir à un véritable glissière Ensuite, nous devons partager avec vous aujourd'hui deux armes de base scroller et VelocityTracker . Les anciennes règles, la première vraie carte, puis partager.

Histogramme de glissement inertiel avec

Deux, Scroller

1, le rôle de

Les chaussures pour enfants peuvent regarder la pièce suivante de notes de cours d'anglais officiels. Xiaopen amis pour donner leur compréhension de cette action de classe, Scroller est une vue let Défilement vers le haut des outils , Responsable du calcul les données que nous fournissons les coordonnées correspondantes, mais la logique spécifique ou pour faire défiler par notre singe programme contenu mobile  Atteindre (pourquoi dire contenu mobile Nous saurons dans le vrai, le Shaoanwuzao).

* < p > Cette classe encapsule le défilement. Vous pouvez utiliser changeurs ({} @link Scroller * Ou {} @link OverScroller) pour recueillir les données nécessaires pour produire un défilement * Animation, par exemple, en réponse à un geste fling. Piste changeurs * décalages de défilement pour vous au fil du temps, mais ils ne sont pas automatiquement les * Positions à votre point de vue. Il est de votre responsabilité d'obtenir et d'appliquer de nouvelles * Les coordonnées à un taux qui faciliterons l'apparence d'animation de défilement. < / P >

2, API expliquer

Cette section est scroller  de constructeur  et Méthodes publiques communes  Pour expliquer, si vous êtes déjà familier avec ces méthodes peuvent être sautées.

constructeur

(1) Scroller (contexte de contexte)

Scroller publique (contexte de contexte)

Méthode Description:

Créer une instance Scroller.

Résolution Paramètres:

Le premier contexte de paramètres:  contexte;

(2) Scroller (contexte de contexte, Interpolateur interpolateur)

Scroller publique (contexte de contexte, Interpolateur interpolateur)

Méthode Description:

Créer une instance Scroller.

Résolution Paramètres:

Le premier contexte de paramètres:  contexte;

Le second interpolateur de paramètres:  interpolateur pour computeScrollOffset  Méthode, et est SCROLL_MODE  Mode, la position est calculée en conformité avec le temps qui passe. Il est nul Lorsque vous utilisez la valeur par défaut ViscousFluidInterpolator  Interpolateur.

(3) Scroller (contexte de contexte, Interpolateur interpolateur, volant boolean)

Scroller publique (contexte de contexte, Interpolateur interpolateur, volant booléen)

Méthode Description:

Créer une instance Scroller.

Résolution Paramètres:

Le premier contexte de paramètres:  contexte;

Le second interpolateur de paramètres:  interpolateur pour computeScrollOffset  Méthode, et est SCROLL_MODE  Mode, la position est calculée en conformité avec le passage du temps. Il est nul Lorsque vous utilisez la valeur par défaut ViscousFluidInterpolator  Interpolateur.

Le troisième paramètre de volant:  Il prend en charge le comportement progressif, agir uniquement sur le paramètre FLING_MODE  Mode.

Méthodes publiques communes

(1) setFriction (frottement du flotteur)

setFriction public final void (frottement du flotteur)

Méthode Description:

pour le réglage FLING_MODE  Mode de coefficient de frottement

Résolution Paramètres:

Le premier friction argument:  Coefficient de frottement

(2) isFinished ()

booléen public final isFinished ()

Méthode Description:

Que ce soit rouler, processus de laminage pour déterminer l'état Scroller, nous pouvons faire certaines branches logiques se terminent ou de continuer à fonctionner.

(3) forceFinished (boolean fini)

public final vide forceFinished (boolean fini)

Méthode Description:

statut obligatoire pour permettre le défilement des paramètres que nous fixons fini.

(4) getDuration ()

public final int getDuration ()

Méthode Description:

Retour Scroller la durée (en millisecondes).

(5) getCurrX ()

int getCurrX (public final)

Méthode Description:

Renvoie la spirale courant de décalage X par rapport à l'origine, à savoir coordonnée X des coordonnées actuelles.

(6) getCurrY ()

final int getCurrY public ()

Méthode Description:

Renvoie la spirale de courant décalé par rapport à l'origine de Y, à savoir coordonnée Y des coordonnées actuelles.

(7) getCurrVelocity ()

getCurrVelocity du flottant ()

Méthode Description:

Obtenez la vitesse en cours.

(8) computeScrollOffset ()

computeScrollOffset public boolean ()

Méthode Description:

Le nouveau calcul des coordonnées de laminage, seront combinés avec le getCurrX  et getCurrY  La méthode utilisée pour obtenir un effet de roulement. Il est intéressant de noter que, si elle retourne vrai, expliquer l'animation n'a pas été achevée. En revanche, les rendements faux, animation explication est terminée ou terminée.

(9) startScroll

publique startScroll vide (int startX, int startY, int dx, dy int) publique startScroll vide (int startX, int startY, int dx, dy int, int durée)

Méthode Description:

En fournissant un point de départ, la distance parcourue et la durée de défilement, le défilement d'une manière qui SCROLL_MODE . Le procédé peut être utilisé pour obtenir l'effet de glissement comme ViewPager.

Résolution Paramètres:

Le premier paramètre startX:  x coordonnée du point de départ

Le second paramètre startY:  coordonnée y du point de départ

Le troisième paramètre dx:  Décalage de la direction horizontale, le contenu positif défilera vers la gauche.

Le quatrième paramètre dy:  Décalage dans la direction verticale, le nombre de contenu positif défiler vers le haut.

La cinquième durée de paramètre:  Lorsque long rouleau

(10) Fling

Fling public void (int startX, int startY, int velocityX, int velocityY, int minX, int maxX, int minY, int maxY)

Méthode Description:

Pour le coulissement de la vitesse de la bande, la distance parcourue dépendra de la vitesse initiale de lancement. Il peut être utilisé pour réaliser une lame de RecycleView effet similaire.

Résolution Paramètres:   Le premier paramètre startX:  coordonnée x du point de départ de la glissière

Le second paramètre startY:  coordonnée y du point de départ de la glissière

Le troisième paramètre velocityX:  La vitesse initiale dans la direction horizontale, l'unité est le nombre de pixels par seconde (px / s)

Le quatrième paramètre velocityY:  La vitesse initiale dans la direction verticale, l'unité est le nombre de pixels par seconde (px / s)

Le cinquième paramètre minX:  coordonnée x est la valeur minimale, le résultat final ne tombe pas au-dessous de cette valeur;

Le sixième paramètre maxX:  valeur de coordonnée x maximale, le résultat final ne dépassera pas cette valeur;

Le septième paramètre minY:  valeur coordonnée y minimum, le résultat final ne tombe pas en dessous de cette valeur;

Le huitième paramètre maxY:  y coordonnée valeur maximale, le résultat final ne dépassera pas cette valeur;

Il dit vaut:

 minX < = Coordonnée X la valeur de la terminaison < = MaxX

 minY < = Coordonnée Y valeur de la terminaison < = Maxy

(11) abortAnimation ()

abortAnimation public void ()

Méthode Description:

Arrêter l'animation, il convient de noter que, à ce moment si l'appel getCurrX ()  et getCurrY ()  Déplacez les coordonnées finales, et par ce point forceFinished  Directement aux arrêts d'animation ne sont pas les mêmes.

3 Résumé

API de l'explication ci-dessus, nous constatons que, début à la fin n'a pas eu aucune pertinence sur la vue que nous devons agir, mais à travers les calculs, puis obtenir le point de l'heure correspondant aux coordonnées, voilà tout. Cela confirme également la défini précédemment, à la façon dont l'utilisation réelle, nous restons aux articles réels.

Trois, VelocityTracker

1, le rôle de

En outre, compte tenu des premières notes de cours d'anglais officiels. Xiaopen amis à leur propre compréhension de cette définition donnée, VelocityTracker est un événement tactile en fonction de nos doigts, des outils pour calculer la vitesse de la diapositive, nous pouvons le faire en fonction de leurs propres calculs vitesse vue mobile, pour obtenir une telle lame visqueuse effet.

 * Aide pour le suivi de la vitesse des événements tactiles, pour la mise en uvre * Jetant et d'autres gestes.

2, API expliquer

Cette section est VelocityTracker méthodes publiques  Pour expliquer, si vous êtes déjà familier avec ces méthodes peuvent être sautées.

(1) obtenir ()

VelocityTracker publique statique obtenir ()

Méthode Description:

Obtient un objet VelocityTracker. constructeur VelocityTracker est privé, n'est pas en créant de nouvelles.

(2) recyclage ()

recyclage public void ()

Méthode Description:

Recyclage instance VelocityTracker.

(3) effacer ()

(Public vide clair) Copiez le code

Méthode Description:

VelocityTracker remise à son état d'origine.

(4) addMovement (event MotionEvent)

addMovement public void (événement MotionEvent)

Méthode Description:

Après VelocityTracker pour les événements tactiles entrants (y compris ACTION_DOWN, ACTION_MOVE, ACTION_UP, etc.), donc pour appeler la méthode computeCurrentVelocity VelocityTracker, le droit d'obtenir la vitesse actuelle.

(5) computeCurrentVelocity (unités int)

computeCurrentVelocity public void (unités int)

Méthode Description:

Calculé en fonction d'un événement tactile a passé la vitesse actuelle, la vitesse peut être acquis sur une direction correspondant ou getXVelocity getYVelocity. Il convient de noter que la vitesse calculée ne dépasse pas Float.MAX_VALUE.

Résolution Paramètres:

Les premières unités de paramètres:  vitesse Unité. La valeur 1 indique le nombre de pixels par milliseconde, 1000 représente le nombre de pixels par seconde.

(6) computeCurrentVelocity (unités int, float MaxVelocity)

computeCurrentVelocity public void (unités int, float MaxVelocity)

Méthode Description:

Calculé en fonction d'un événement tactile a passé la vitesse actuelle, la vitesse peut être acquis sur une direction correspondant ou getXVelocity getYVelocity. Il convient de noter que la vitesse calculée ne dépasse pas MaxVelocity.

Résolution Paramètres:

Les premières unités de paramètres:  vitesse Unité. La valeur 1 indique le nombre de pixels par milliseconde, 1000 représente le nombre de pixels par seconde.

Le second paramètre MaxVelocity:  Vitesse maximale, le taux calculé ne dépassera pas cette valeur. Il convient de noter que cet argument doit être un nombre positif, et l'unité est l'unité nous avons des réglages de paramètres.

(7) getXVelocity ()

getXVelocity du flottant ()

Méthode Description:

Obtient la dernière vitesse de calcul dans le sens horizontal, avant d'utiliser ce besoin de méthode de se rappeler que la première computeCurrentVelocity d'appel

(8) getYVelocity ()

 getYVelocity du flottant ()

Méthode Description:

Être dernière vitesse verticale calculée, avant d'utiliser cette méthode nécessite rappeler d'appeler computeCurrentVelocity

(9) getXVelocity (int id)

getXVelocity du flottant (id int)

Méthode Description:

Obtient correspond la direction horizontale à la vitesse de l'ID du doigt dernier calculé, avant d'utiliser ce besoin de méthode de se rappeler que la première computeCurrentVelocity d'appel

Résolution Paramètres:

Le premier paramètre id:  id toucher d'un doigt

(10) getYVelocity (id int)

getYVelocity du flottant (id int)

Méthode Description:

Obtenez la vitesse verticale du doigt correspondant à l'ID du dernier calcul, avant d'utiliser cette méthode nécessite rappeler d'appeler computeCurrentVelocity

Résolution Paramètres:

Le premier paramètre id:  id toucher d'un doigt

3 Résumé

VelocityTracker L'API est simple, nous pouvons nous rappeler une routine.

Lors de l'événement tactile est ACTION_DOWN ou entrer méthode onTouchEvent, en obtenant une VelocityTracker obtenir;

Lorsque l'événement touche est ACTION_UP, recyclage d'appel à libérer VelocityTracker;

Saisie méthode onTouchEvent ou ACTION_DOWN, ACTION_MOVE, événement ACTION_UP par la méthode addMovement add VelocityTracker;

Le cas échéant l'obtention de la vitesse, la première méthode de computeCurrentVelocity d'appel, puis getXVelocity, getYVelocity acquis direction vitesse correspondant;

Quatrièmement, réel - histogramme d'inertie de la courroie coulissante

1, l'effet de la Fig.

github Adresse: Portal

Bien que nous soyons scroller  et VelocityTracker  Combat, mais nous devons encore parler un peu de tirage au sort et le point de la colonne, et l'idée générale de son animation. ensuite, ajoutez scroller  et VelocityTracker .

2, idées de dessin

Nous examinons ici ce petit diagramme d'analyse des amis peints à la main, la boîte noire représente TOILE, boîte bleue représente l'utilisateur voit l'écran du téléphone, boîte bleu foncé est une zone dont nous avons vraiment besoin de chaque tirage.

De la figure ci-dessus, nous constatons que, en fait une loi, que chaque BarInterval  Pour dessiner une colonne représentée sur la figure, le nombre de cycles de la quantité de données entrant par le nombre déterminé.

Cependant, (frapper à des amis tableau noir !!) Il convient de noter, piliers sur l'écran, en fait, pour l'utilisateur ne peut pas voir, on n'a pas besoin de dépenser des ressources pour cette partie du tirage au sort, en suivant ce un code qui détermine si une colonne dans la région visible, la plage de la largeur de chaque région est visible à gauche et à droite en expansion d'une colonne entretoise écran mBarInterval. La raison en est que le texte ou rouge point vient d'être décrit dans la bordure gauche ou à droite de l'écran, sans dessin ne se produit pas. / ** * Que ce soit dans le visible * * @Param x * @Return vrai: dans le visible, false: pas dans le visible * / isInVisibleArea private boolean (float x) { flotteur dx = x - getScrollX (); retour -mBarInterval < = Dx && dx < = MViewWidth + mBarInterval; }

À ce stade, l'image problème rendu est résolu, le code ne serait pas en tenir dehors, chaussures pour enfants peuvent entrer dans le portail pour suivre les idées caressa un accident vasculaire cérébral.

Un autre problème est de savoir comment rendre l'écran avec votre doigt mobile  Up, qui doit être réécrite onTouchEvent une méthode pour calculer le niveau du doigt la distance de déplacement, puis laisser le contenu déplacer vers le haut par la méthode scrollBy.

Il est vaut mention, les méthodes et scrollTo scrollBy sont toutes basées sur le contenu ou cette toile pour le déplacer.

Quant à la façon de faire bouger petit point rouge, utilisé ici ValueAnimator passer de zéro à un, à garder près de l'effet des coordonnées cibles.

Des chaussures pour enfants intéressés par le code source d'animation de propriété, peut être un autre morceau du lieu Bowen amis Xiaopen: animation Propriété avec analyse de code source et dynamique

3, la façon de glisser vers le haut inertie

Après la section précédente, nous savons déjà comment dessiner ce simple mais barre commune graphique, mais la mouche dans la pommade est sans effet fling. Nous devons donc rester VelocityTracker  Laissez-vous notre vitesse de glissement du doigt courant, mais de noter ici est que, pour limiter la vitesse maximale et minimale. Parce que trop vite et trop lent, se traduira par une interactivité médiocre. Obtenez le code ci-dessous

mMaximumVelocity = ViewConfiguration.get (contexte) .getScaledMaximumFlingVelocity (); mMinimumVelocity = ViewConfiguration.get (contexte) .getScaledMinimumFlingVelocity ();

Ensuite, dans notre Résumé VelocityTracker  La routine, exécutée pour obtenir la vitesse horizontale lorsque le doigt de l'écran. Ce qui suit est uniquement réservée VelocityTracker  Le code correspondant

/ ** * Écran de contrôle ne sont pas hors limites * * Événement @param * @Return * / @Override onTouchEvent public boolean (événement MotionEvent) { // omis du code indépendant ... if (mVelocityTracker == NULL) { mVelocityTracker = VelocityTracker.obtain (); } mVelocityTracker.addMovement (event); if (MotionEvent.ACTION_DOWN == event.getAction ()) { // omis du code indépendant ... } Else if (MotionEvent.ACTION_MOVE == event.getAction ()) { // omis du code indépendant ... } Else if (MotionEvent.ACTION_UP == event.getAction ()) { // calculer la vitesse du courant, et ainsi le nombre de pixels par seconde représente 1000 mVelocityTracker.computeCurrentVelocity (1000, mMaximumVelocity); // Obtenez la vitesse latérale int velocityX = (int) mVelocityTracker.getXVelocity (); // vitesse est supérieure à la valeur de vitesse minimale, il a commencé à glisser if (Math.abs (velocityX) >  mMinimumVelocity) { // omis du code indépendant ... } si (mVelocityTracker! = null) { mVelocityTracker.recycle (); mVelocityTracker = null; } } retour super.onTouchEvent (event); }

la vitesse d'acquisition de niveau fini, alors nous devons jeter un effet réel. Réalisée par un fil continu mobile  Toile, de manière à obtenir un effet de roulement ( RecycleView Le défilement est un fil pour obtenir l'effet, les étudiants intéressés peuvent entrer RecycleView  Pour afficher le code source, le nom de la classe de fil est ViewFlinger  ).

/ ** * Fil de défilement * / classe privée FlingRunnable de Runnable { privé Scroller mScroller; int mInitX privé; int mMinX privé; mMaxX private int; int mVelocityX privé; FlingRunnable (contexte de contexte) { this.mScroller = new Scroller (contexte, null, false); } vide start (int initx, int velocityX, int minX, int maxX) { this.mInitX = initx; this.mVelocityX = velocityX; this.mMinX = minX; this.mMaxX = maxX; // premier arrêt sur un rouleau if (! mScroller.isFinished ()) { mScroller.abortAnimation (); } // commencer Fling mScroller.fling (initx, 0, velocityX, 0, 0, maxX, 0, 0); après (ce); } @Override public void run () { // Si vous avez déjà terminé, ne sera plus if (! mScroller.computeScrollOffset ()) { retour; } // calculer le décalage int EXCH = mScroller.getCurrX (); int diffX = mInitX - EXCH; // utilisé pour enregistrer si en dehors des limites, hors des limites si vous avez, vous ne rappellerons, même si le défilement est pas encore terminée booléen ISEND = false; si (diffX! = 0) { // au-delà de la marge de droite, corrigée if (getScrollX () + diffX > = MCanvasWidth - mViewWidth) { diffX = (int) (mCanvasWidth - mViewWidth - getScrollX ()); ISEND = true; } // au-delà du bord gauche de l'amendement if (getScrollX () < = 0) { diffX = -getScrollX (); ISEND = true; } if (! mScroller.isFinished ()) { scrollBy (diffX, 0); } mInitX = EXCH; } if (! ISEND) { après (ce); } } / ** * Arrêt * / void stop () { if (! mScroller.isFinished ()) { mScroller.abortAnimation (); } } }

La dernière étape consiste à utiliser jusqu'à ce fil, où il y a deux points principaux utilisés lorsqu'un doigt est pressé (c.-à-MotionEvent.ACTION_DOWN) et lever le doigt (c.-à-MotionEvent.ACTION_UP), ne supprimez pas le code correspondant, le reste du code est la suivante.

onTouchEvent public boolean (événement MotionEvent) { // omis code correspondant ... if (MotionEvent.ACTION_DOWN == event.getAction ()) { // omis code correspondant ... mFling.stop (); } Else if (== MotionEvent.ACTION_MOVE event.getAction ()) { // omis code correspondant ... } Else if (MotionEvent.ACTION_UP == event.getAction ()) { // omis code correspondant ... // vitesse est supérieure à la valeur de vitesse minimale, il a commencé à glisser if (Math.abs (velocityX) >  mMinimumVelocity) { int initx = getScrollX (); int maxX = (int) (mCanvasWidth - mViewWidth); si (maxX >  0) { mFling.start (initx, velocityX, initx, maxX); } } // omis code correspondant ... } retour super.onTouchEvent (event); }

Quand nous MotionEvent.ACTION_DOWN, nous avons besoin d'arrêter le défilement effet, d'arrêter immédiatement placer vos doigts touchés.

Quand nous MotionEvent.ACTION_UP, il faut calculer la méthode souhaitée minimum et maximum jeter. D'après nos calculs dans le fil, donc nous minimum et La valeur initiale Valeur getScrollX () tout en maximum Comme mCanvasWidth - mViewWidth.

Enfin fil ouvert, il permet d'obtenir l'effet que nous voyons. github adresse le code complet: Portail

V. Écrit dans la dernière

scroller  et VelocityTracker  Mix utilisation, il nous permet d'utiliser les contrôles de soyeux, plus fort sens de l'interaction, bien sûr, mieux l'expérience utilisateur. Enfin, si vous gagnez quelque chose de cet article, s'il vous plaît me donner une louange , et suivez-moi. Article si mal compris ou déclarations obscures, s'il vous plaît laisser une section commentaires de message, nous discutons des progrès communs. Votre encouragement est le plus grand ma motivation. Si vous avez besoin de plus en profondeur la discussion, lettre privée I Il.

[joint] Vidéos liées à l'architecture

collecte des données

Regarder + réponse privée lettre, libre accès « données Andrews »!

Android pour obtenir à recevoir l'architecture avancée de l'information, le code source, notes, vidéo. Interface utilisateur principale, optimisation des performances, des cours d'architecte, NDK, développement hybride (ReactNative + Weex) applet micro lettre, pratique avancée Flutter Android tous les aspects de la technologie