g u t x .com.tr İpek yolu - Çin'i anlamaya götürürüm

Kontrolü çok ipeksi Scroller ve VelocityTracker API açıklaması ve gerçek savaş yapın

içindekiler

I.Giriş

İki, Kaydırıcı

Üç, VelocityTracker

Dördüncü, atalet kaymalı gerçek savaş histogramı

Beş, sonunda yaz

I.Giriş

Özel kontrollerde, kaçınılmaz olarak ihtiyaçlarla karşılaşırsınız Kayan sahne . Canvas tarafından sağlanan scrollTo ve scrollBy yöntemleri yalnızca seyyar Etkinin gerçeğe ulaşması gerekiyor kaymak Bugün paylaştığımız iki temel araca ihtiyacımız var Kaydırıcı ile VelocityTracker . Eski kurallar, önce gerçek savaş haritasını yükleyin ve ardından paylaşın.

Eylemsiz kaymalı histogram

İki, Kaydırıcı

1. İşlev

Çocuk ayakkabıları önce aşağıdaki resmi İngilizce ders notlarına bakabilir. Küçük arkadaşların kendi anlayışlarıyla verdikleri bu sınıfın rolü, Scroller'ın bir görüş olmasıdır. Haddeleme araçları , Sağladığımız verilere göre karşılık gelen koordinatları hesaplamaktan sorumludur, ancak belirli kaydırma mantığı hala programcılarımız tarafından yürütülmektedir. Mobil içerik Gerçekleşme (neden Mobil içerik , Asıl savaş bölümünde biliyoruz, endişelenmeyin).

* < p > Bu sınıf, kaydırmayı kapsüller. Kaydırıcıları kullanabilirsiniz ({@link Scroller} * veya {@link OverScroller}) kaydırma oluşturmak için ihtiyacınız olan verileri toplamak için * animasyon - örneğin, hızla fırlatma hareketine yanıt olarak. Kaydırıcılar izler * sizin için zaman içinde kaydırma ofsetleri, ancak bunları otomatik olarak uygulamazlar * görüşünüze göre pozisyonlar. Yenilerini almak ve uygulamak sizin sorumluluğunuzdadır * Kaydırma animasyonunun pürüzsüz görünmesini sağlayacak hızda koordinatlar. < / p >

2. API açıklaması

Bu bölüm doğru Kaydırıcı nın-nin Yapım metodu ile Yaygın olarak kullanılan genel yöntemler Açıklamak gerekirse, bu yöntemlere zaten aşina iseniz, atlayabilirsiniz.

Yapım metodu

(1) Kaydırma Çubuğu (Bağlam bağlamı)

public Scroller (Bağlam bağlamı)

Yöntem açıklaması:

Scroller'ın bir örneğini oluşturun.

Parametre analizi:

İlk parametre bağlamı: Bağlam

(2) Kaydırma Çubuğu (Bağlam bağlamı, Interpolator interpolator)

public Scroller (Bağlam bağlamı, Interpolator interpolator)

Yöntem açıklaması:

Scroller'ın bir örneğini oluşturun.

Parametre analizi:

İlk parametre bağlamı: Bağlam

İkinci parametre enterpolatörü: Interpolator, kullanılan computeScrollOffset Yöntem ve içinde SCROLL_MODE Modda konum, zamanın geçişine göre hesaplanır. Boş , Varsayılanı kullan ViscousFluidInterpolator İnterpolatör.

(3) Kaydırıcı (Bağlam bağlamı, Interpolator interpolator, boolean volan)

public Scroller (Bağlam bağlamı, Interpolator interpolator, boolean volan)

Yöntem açıklaması:

Scroller'ın bir örneğini oluşturun.

Parametre analizi:

İlk parametre bağlamı: Bağlam

Üçüncü parametre volanı: Aşamalı davranışı destekleyin, bu parametre yalnızca FLING_MODE Mod.

Yaygın olarak kullanılan genel yöntemler

(1) setFriction (şamandıra sürtünmesi)

genel son boşluk setiFriction (float friction)

Yöntem açıklaması:

Ayarlamak için kullanılır FLING_MODE Modda sürtünme katsayısı

Parametre analizi:

İlk parametre sürtünmesi: Sürtünme katsayısı

(2) Bitti ()

public final boolean isFinished ()

Yöntem açıklaması:

Kaydırma işleminde Kaydırıcı'nın durumunu belirlemek için kaydırmanın bitip bitmediği kullanılır.Bazı mantık dallarını sonlandırmak veya çalışmaya devam etmek için yapabiliriz.

(3) forceFinished (boole bitmiş)

public final void forceFinished (boolean tamamlandı)

Yöntem açıklaması:

Kaydırma durumunu zorla bitirdiğimiz parametre değerine ayarlayın.

(4) getDuration ()

public final int getDuration ()

Yöntem açıklaması:

Kaydırıcının dayanacağı zamanı (milisaniye cinsinden) döndürür.

(5) getCurrX ()

genel nihai int getCurrX ()

Yöntem açıklaması:

Kaydırma sırasında başlangıç noktasına göre geçerli X'in ofsetini, yani mevcut koordinatın X koordinatını döndürür.

(6) getCurrY ()

genel nihai int getCurrY ()

Yöntem açıklaması:

Kaydırma sırasında orijine göre geçerli Y ofsetini, yani mevcut koordinatın Y koordinatını döndürür.

(7) getCurrVelocity ()

public float getCurrVelocity ()

Yöntem açıklaması:

Mevcut hızı alın.

(8) computeScrollOffset ()

genel boole computeScrollOffset ()

Yöntem açıklaması:

Kaydırmada yeni koordinatları hesaplayın, eşleşecek getCurrX ile getCurrY Yöntem, kaydırma efektini elde etmek için kullanılır. True dönerse, animasyonun henüz tamamlanmadığını belirtmekte fayda var. Aksine, animasyonun tamamlandığını veya sonlandırıldığını belirten yanlış döndürür.

(9) startScroll

public void startScroll (int startX, int startY, int dx, int dy) public void startScroll (int startX, int startY, int dx, int dy, int süre)

Yöntem açıklaması:

Başlangıç noktasını, hareket mesafesini ve yuvarlanma süresini sağlayarak bir yuvarlanma yolu, yani SCROLL_MODE . Bu yöntem, ViewPager gibi kayan efektler elde etmek için kullanılabilir.

Parametre analizi:

İlk parametre startX: Başlangıç noktasının X koordinatı

İkinci parametre startY: Başlangıç noktasının y koordinatı

Üçüncü parametre dx: Yatay yöndeki uzaklık Pozitif bir sayı, içeriği sola kaydırır.

Dördüncü parametre dy: Dikey uzaklık, pozitif bir sayı, içeriği yukarı kaydırır.

Beşinci parametre süresi: Kaydırma süresi

(10) kaçmak

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

Yöntem açıklaması:

Hızla kaymak için, kat edilen mesafe atışın başlangıç hızına bağlı olacaktır. RecycleView'e benzer bir kayma efekti elde etmek için kullanılabilir.

Parametre analizi: İlk parametre startX: Başlangıç noktasının x koordinatı

İkinci parametre startY: Başlangıç noktasının y koordinatı

Üçüncü parametre velocityX: Yatay yöndeki başlangıç hızı, piksel / saniye (px / s)

Dördüncü hız parametresiY: Saniyedeki piksel cinsinden ilk dikey hız (px / s)

Beşinci parametre minX: X koordinatının en küçük değeri, nihai sonuç bu değerden daha düşük olmayacaktır;

Altıncı parametre maxX: X koordinatının maksimum değeri, nihai sonuç bu değeri aşmayacaktır;

Yedinci parametre minY: Y koordinatının en küçük değeri, nihai sonuç bu değerden daha düşük olmayacaktır;

Sekizinci parametre maxY: Y koordinatının maksimum değeri, nihai sonuç bu değeri aşmayacaktır;

Söylemeye değer:

sürtük < = Bitiş değerinin x koordinatı < = maxX

minY < = Bitiş değerinin y koordinatı < = maxY

(11) iptalAnimasyon ()

public void abortAnimation ()

Yöntem açıklaması:

Animasyonu durdurun. Eğer ararsanız getCurrX () ile getCurrY () Son koordinatlara git, bu noktaya ve geç forceFinished Animasyonu doğrudan durdurmak aynı şey değildir.

3. Özet

Yukarıdaki API açıklamasından, Görünüm ile baştan sona hareket etmemiz gereken bir bağlantı olmadığını, ancak hesaplama yoluyla ve ardından geçerli zaman noktasına karşılık gelen koordinatları elde etmemiz gerektiğini göreceğiz, hepsi bu. Bu aynı zamanda önceki tanımı da doğruluyor, nasıl kullanılacağına gelince, onu gerçek savaş bölümüne bırakıyoruz.

Üç, VelocityTracker

1. İşlev

Ayrıca önce resmi İngilizce ders notlarını verin. Küçük arkadaşlar bu tanımı kendi anlayışlarına göre verdiler.VelocityTracker parmaklarımızın dokunma olaylarına göre kayma hızını hesaplayan bir araçtır. Yapışkan kaymayı sağlamak için görünümü hareket ettirmek için bu hıza göre hesaplamalar yapabiliriz. etki.

* Uygulama için dokunma olaylarının hızını izlemek için yardımcı * fırlatma ve diğer bu tür hareketler.

2. API açıklaması

Bu bölüm VelocityTracker içindir Genel yöntem Açıklamak gerekirse, bu yöntemlere zaten aşina iseniz, atlayabilirsiniz.

(1) elde etmek ()

statik genel VelocityTracker elde etmek ()

Yöntem açıklaması:

VelocityTracker nesnesi edinin. VelocityTracker yapıcısı özeldir, yani new tarafından yaratılamaz.

(2) geri dönüşüm ()

genel boşluk geri dönüşümü ()

Yöntem açıklaması:

VelocityTracker örneğini geri dönüştürün.

(3) temizle ()

public void clear () Kodu kopyala

Yöntem açıklaması:

VelocityTracker'ı ilk durumuna sıfırlayın.

(4) addMovement (MotionEvent olayı)

public void addMovement (MotionEvent olayı)

Yöntem açıklaması:

VelocityTracker için gelen dokunma olayları (ACTION_DOWN, ACTION_MOVE, ACTION_UP, vb. Dahil), böylece VelocityTracker computeCurrentVelocity yöntemini çağırdıktan sonra mevcut hızı doğru bir şekilde elde edebilir.

(5) computeCurrentVelocity (int birim)

public void computeCurrentVelocity (int birimler)

Yöntem açıklaması:

Geçerli hız, geçirilen dokunma olayına göre hesaplanır ve karşılık gelen yöndeki hız getXVelocity veya getYVelocity aracılığıyla elde edilebilir. Hesaplanan hız değerinin Float.MAX_VALUE değerini aşmadığına dikkat etmek önemlidir.

Parametre analizi:

İlk parametre birimleri: Hız birimi. 1 değeri, milisaniye başına piksel anlamına gelir ve 1000, saniyede piksel anlamına gelir.

(6) computeCurrentVelocity (int birimler, float maxVelocity)

public void computeCurrentVelocity (int units, float maxVelocity)

Yöntem açıklaması:

Geçerli hız, geçirilen dokunma olayına göre hesaplanır ve karşılık gelen yöndeki hız getXVelocity veya getYVelocity aracılığıyla elde edilebilir. Hesaplanan hız değerinin maxVelocity'yi aşmadığına dikkat etmek önemlidir.

Parametre analizi:

İlk parametre birimleri: Hız birimi. 1 değeri, milisaniye başına piksel anlamına gelir ve 1000, saniyede piksel anlamına gelir.

İkinci parametre maxVelocity: Maksimum hız, hesaplanan hız bu değeri aşmayacaktır. Bu parametrenin pozitif bir sayı olması gerektiğine ve biriminin ilk parametrede belirlediğimiz birim olduğuna dikkat etmek önemlidir.

(7) getXVelocity ()

public float getXVelocity ()

Yöntem açıklaması:

Hesaplanan son yatay hızı alın, bu yöntemi kullanmadan önce computeCurrentVelocity'yi çağırmayı hatırlamanız gerekir.

(8) getYVelocity ()

public float getYVelocity ()

Yöntem açıklaması:

Hesaplanan son dikey hızı alın, bu yöntemi kullanmadan önce computeCurrentVelocity'yi çağırmayı unutmayın.

(9) getXVelocity (int id)

public float getXVelocity (int id)

Yöntem açıklaması:

İlgili parmak kimliğinin son hesaplanan yatay hızını alın, bu yöntemi kullanmadan önce computeCurrentVelocity'yi çağırmayı unutmayın.

Parametre analizi:

İlk parametre kimliği: Dokunulan parmağın kimliği

(10) getYVelocity (int id)

public float getYVelocity (int id)

Yöntem açıklaması:

İlgili parmak kimliğinin son hesaplanan dikey hızını alın, bu yöntemi kullanmadan önce computeCurrentVelocity'yi çağırmayı unutmayın.

Parametre analizi:

İlk parametre kimliği: Dokunulan parmağın kimliği

3. Özet

VelocityTracker'ın API'si basit ve açıktır, bir rutini hatırlayabiliriz.

Dokunma olayı ACTION_DOWN olduğunda veya onTouchEvent yöntemine girdiğinde, edinme yoluyla bir VelocityTracker edinin;

Dokunma olayı ACTION_UP olduğunda, VelocityTracker'ı serbest bırakmak için geri dönüşümü çağırın;

OnTouchEvent yöntemini girdikten veya addMovement yöntemiyle VelocityTracker'a ACTION_DOWN, ACTION_MOVE, ACTION_UP olaylarını ekledikten sonra;

Hızın elde edilmesi gerektiğinde, önce computeCurrentVelocity yöntemini çağırın ve ardından getXVelocity ve getYVelocity aracılığıyla karşılık gelen yöndeki hızı elde edin;

Dördüncü, atalet kaymalı gerçek savaş histogramı

1. Efekt resmi

github adresi: portal

Biz olsak da Kaydırıcı ile VelocityTracker Gerçek savaş, ancak yine de sütunların ve noktaların çiziminden ve bunların animasyonunun genel fikrinden bahsetmemiz gerekiyor. O zaman katıl Kaydırıcı ile VelocityTracker .

2. Çizim fikirleri

Küçük bir esrar arkadaşının elle çizdiği analitik resme bir göz atalım. Kara kutu CANVAS'ı, mavi kutu kullanıcının gördüğü cep telefonu ekranını ve koyu mavi kutu her seferinde gerçekten çizmemiz gereken alandır.

Yukarıdaki resimden, aslında bir model bulacağız, yani her biri BarInterval Aşağıdaki şekilde gösterildiği gibi bir sütun çizmeniz yeterlidir ve döngü sayısı, gelen veri sayısına göre belirlenir.

Ancak, (karatahtaya vurarak!) Ekranın dışındaki sütunların aslında kullanıcı tarafından görünmez olduğunu belirtmek gerekir, bu nedenle çizim yapmak için kaynakların bu kısmını tüketmemize gerek yoktur. Aşağıdaki paragrafı kullanabilirsiniz Sütunun görüntülenebilir alanda olup olmadığını belirleyen kod. Görüntülenebilir alanın aralığı, ekran mBarInterval'in genişliğidir. Bunun nedeni, açıklama metni veya küçük kırmızı nokta ekranın hemen sol veya sağ kenarındayken boyanmamış bir durum olmayacak olmasıdır. / ** * Görünür aralıkta mı * * @param x * @return true: görünür aralıkta; yanlış: görünür aralıkta değil * / özel boole isInVisibleArea (float x) { float dx = x-getScrollX (); dönüş -mBarInterval < = dx dx < = mViewWidth + mBarInterval; }

Bu noktada resmin çizilmesi sorunu çözülür, kod yapıştırılmaz ve çocuk ayakkabıları portala girip düşünce trenini takip edebilir.

Diğer bir sorun, ekranın parmağı takip etmesini sağlamaktır. seyyar Ayağa kalkmak için onTouchEvent yöntemini yeniden yazmanız, parmağın yatay hareket mesafesini hesaplamanız ve ardından içeriği scrollBy yöntemiyle hareket ettirmeniz gerekir.

ScrollTo ve scrollBy yöntemlerinin içerik veya tuval hareketi için olduğunu belirtmek gerekir.

Küçük kırmızı noktanın nasıl hareket ettirileceğine gelince, ValueAnimator burada hedef koordinatlara sürekli yaklaşma etkisini elde etmek için sıfırdan bire yükseltmek için kullanılır.

Öznitelik animasyonunun kaynak koduyla ilgilenen çocuk ayakkabıları için Xiaopenyou'nun başka bir blog gönderisine geçebilirsiniz: Dinamik öznitelik animasyon kaynak kodunun analizi ve gerçek çatışması

3. Başlangıçta nasıl kaydırılır

Son bölümden sonra, bu basit ama yaygın sütun grafiğini nasıl çizeceğimizi zaten biliyoruz, ancak asıl önemli olan, kaçma etkisi olmamasıdır. Bu yüzden önce ödünç almalıyız VelocityTracker Mevcut parmağımızın kayma hızını elde etmek için, ancak burada maksimum ve minimum hızını sınırlamaya dikkat etmemiz gerekiyor. Hız çok hızlı ve çok yavaş olduğu için etkileşim etkisi zayıf olacaktır. Kodu aşağıdaki gibi alın

mMaximumVelocity = ViewConfiguration.get (bağlam) .getScaledMaximumFlingVelocity (); mMinimumVelocity = ViewConfiguration.get (bağlam) .getScaledMinimumFlingVelocity ();

Sonra bizim göre VelocityTracker özeti Rutinlerde, parmak ekrandayken yatay hızı elde etmek için. Aşağıdakiler yalnızca rezerve edilmiştir VelocityTracker İlgili kod

/ ** * Sınırı geçmeden ekranı kontrol edin * * @param olayı * @dönüş * / @Override public boolean onTouchEvent (MotionEvent olayı) { // Alakasız kodu çıkar ... if (mVelocityTracker == null) { mVelocityTracker = VelocityTracker.obtain (); } mVelocityTracker.addMovement (olay); eğer (MotionEvent.ACTION_DOWN == event.getAction ()) { // Alakasız kodu çıkar ... } else if (MotionEvent.ACTION_MOVE == event.getAction ()) { // Alakasız kodu çıkar ... } else if (MotionEvent.ACTION_UP == event.getAction ()) { // Geçerli hızı hesaplayın, 1000, saniyedeki piksel sayısı vb. Anlamına gelir. mVelocityTracker.computeCurrentVelocity (1000, mMaximumVelocity); // Yatay hız elde edin int velocityX = (int) mVelocityTracker.getXVelocity (); // Hız, kaymadan önce minimum hız değerinden büyük olmalıdır eğer (Math.abs (velocityX) > mMinimumVelocity) { // Alakasız kodu çıkar ... } eğer (mVelocityTracker! = null) { mVelocityTracker.recycle (); mVelocityTracker = null; } } return super.onTouchEvent (olay); }

Yatay hızı elde ettikten sonra bundan sonra gerçek fırlatma efektini gerçekleştirmemiz gerekiyor. Sürekli bir ileti dizisi aracılığıyla seyyar Kaydırma efekti elde etmek için tuval ( RecycleView Ortadaki kaydırma da ileti dizileri aracılığıyla gerçekleştirilir ve ilgilenen öğrenciler girebilir RecycleView Kaynak kodunu görüntülemek için, iş parçacığı sınıfı adı ViewFlinger ).

/ ** * Kaydırma ipliği * / özel sınıf FlingRunnable, Runnable { özel Scroller mScroller; özel int mInitX; özel int mMinX; özel int mMaxX; özel int mVelocityX; FlingRunnable (Bağlam bağlamı) { this.mScroller = new Scroller (bağlam, boş, yanlış); } void start (int initX, int velocityX, int minX, int maxX) { this.mInitX = initX; this.mVelocityX = velocityX; this.mMinX = minX; this.mMaxX = maxX; // önce son kaydırmayı durdur eğer (! mScroller.isFinished ()) { mScroller.abortAnimation (); } // fırlatmaya başla mScroller.fling (initX, 0, velocityX, 0, 0, maksX, 0, 0); gönderi (bu); } @Override public void run () { // Bittiyse devam etmeyin eğer (! mScroller.computeScrollOffset ()) { dönüş; } // Ofseti hesapla int currX = mScroller.getCurrX (); int diffX = mInitX-currX; // Sınırın aşılıp aşılmadığını kaydetmek için kullanılır, sınır aşılırsa, kaydırma tamamlanmasa bile geri çağırma yapılmaz boolean isEnd = yanlış; eğer (diffX! = 0) { // Doğru sınırı aşın, düzeltmeler yapın eğer (getScrollX () + diffX > = mCanvasWidth-mViewWidth) { diffX = (int) (mCanvasWidth-mViewWidth-getScrollX ()); isEnd = true; } // Sol sınırı geç, düzeltmeler yap eğer (getScrollX () < = 0) { diffX = -getScrollX (); isEnd = true; } eğer (! mScroller.isFinished ()) { scrollBy (diffX, 0); } mInitX = currX; } eğer (! isEnd) { gönderi (bu); } } / ** * Durdurmak için * / void stop () { eğer (! mScroller.isFinished ()) { mScroller.abortAnimation (); } } }

Sonuncusu bu ipliği kullanmaktır ve esas olarak kullanıldığı iki nokta vardır, bir parmağa basıldığında (MotionEvent.ACTION_DOWN) ve parmak kaldırıldığında (MotionEvent.ACTION_UP), ilgisiz kod silinir ve kalan kod aşağıdaki gibidir.

public boolean onTouchEvent (MotionEvent olayı) { // Alakasız kodu çıkar ... eğer (MotionEvent.ACTION_DOWN == event.getAction ()) { // Alakasız kodu çıkar ... mFling.stop (); } else if (MotionEvent.ACTION_MOVE == event.getAction ()) { // Alakasız kodu çıkar ... } else if (MotionEvent.ACTION_UP == event.getAction ()) { // Alakasız kodu çıkar ... // Hız, kaymadan önce minimum hız değerinden büyük olmalıdır eğer (Math.abs (velocityX) > mMinimumVelocity) { int initX = getScrollX (); int maxX = (int) (mCanvasWidth-mViewWidth); eğer (maxX > 0) { mFling.start (initX, velocityX, initX, maxX); } } // Alakasız kodu çıkar ... } return super.onTouchEvent (olay); }

MotionEvent.ACTION_DOWN yaptığımızda, kaydırma efektini, parmağımızın dokunduğu yerde hemen durması için durdurmamız gerekir.

MotionEvent.ACTION_UP yaptığımızda, fling yönteminin gerektirdiği minimum ve maksimum değerleri hesaplamamız gerekir. İplikte hesaplama şeklimize göre, Minimum ile Başlangıç değeri GetScrollX () değeri ve Max MCanvasWidth-mViewWidth şeklindedir.

Son olarak, iş parçacığı açılır ve gördüğümüz etki elde edilir. Tam kodun github adresi: Portal

Beş, sonunda yaz

Kaydırıcı ile VelocityTracker Kombine kullanımı, kontrollerimizi daha ipeksi ve etkileşimli hale getirebilir ve elbette daha iyi kullanıcı deneyimi sağlayabilir. Son olarak, bu makaleden bir şey kazandıysanız, lütfen bana bir onay verin ve beni takip edin. Makalede yanlış anlaşılmalar veya belirsiz cümleler varsa, lütfen yorum alanına bir mesaj bırakın ve birlikte tartışacağız ve ilerleyeceğiz. Teşvikiniz, ilerlemek için en büyük motivasyonumdur. Daha derinlemesine bir tartışmaya ihtiyacınız varsa, Bana özel mesaj Sağ.

[Ekli] Alakalı mimari video materyalleri

Bilgi koleksiyonu

Takip edin + özel mesajı ücretsiz olarak "Android bilgileri" yanıtlayın!

Önceki Android gelişmiş mimari malzemelerine, kaynak koduna, notlarına ve videolarına erişim sağlayın. Gelişmiş UI, performans optimizasyonu, mimarlık kursu, NDK, hibrit geliştirme (ReactNative + Weex) WeChat uygulaması, Flutter çok yönlü Android gelişmiş uygulama teknolojisi

Model oyun kontrolü: Kalp rengine uyan HGUC God Gundam

Dönüşüm, mücadele ve düşünmeden sonra, C2B modeli kullanılmış araba e-ticaretinin sonu olabilir.