Özel bir görünümü etkileşimli hale getirme

"Oluştur" yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle nasıl çalışacağınızı öğrenin.

Hareketler → 'nı inceleyin.

Kullanıcı arayüzü çizmek, özel görünüm oluşturmanın yalnızca bir parçasıdır. Ayrıca şunu da yapmanız gerekir: görünümünün kullanıcı girişine benzer bir şekilde yanıt vermesini sağlayabilirsiniz. gerçek hayattan bir aksiyon örneğidir.

Uygulamanızdaki nesnelerin, gerçek nesnelerin yaptığı gibi hareket etmesini sağlayın. Örneğin, her projede uygulamanızdaki resimler varlık dışına çıkar ve başka bir yerde görünür çünkü nesneler gerçek dünyada bunu yapamazsınız. Bunun yerine, resimlerinizi tek bir yerden başka bir yere başka bir tane.

Kullanıcılar, arayüzde çok daha zor fark edilen davranışları veya hisleri hisseder ve en iyi tepkiyi veren ve gerçek dünyayı taklit eden incelikler. Örneğin, kullanıcılar bir kullanıcı arayüzü nesnesini hızla başlangıçta hareketi geciktiren bir eylemsizlik duygusu vermesini sağlar. Sonda hareketinin ötesinde, nesneyi diğer kuvvetin ötesinde taşıyan momentum hissi verin fırlama.

Bu sayfada, 300'den fazla içerik eklemek için Android çerçevesinin bunları özel görünümünüze ekleyebilirsiniz.

Bu konuyla ilgili daha fazla bilgiyi şurada bulabilirsiniz: Giriş etkinliklerine genel bakış ve Özellik animasyonu genel bakış başlıklı makaleyi inceleyin.

Giriş hareketlerini işleme

Diğer birçok kullanıcı arayüzü çerçevesi gibi Android de bir giriş etkinliği modelini destekler. Kullanıcı işlemler, geri çağırmaları tetikleyen etkinliklere dönüşür ve geri çağırma özelliklerini kullanarak uygulamanızın kullanıcıya yanıt verme şeklini özelleştirebilirsiniz. En çok kullanılan giriş etkinliği olan Dokunma işlemi, onTouchEvent(android.view.MotionEvent). Etkinliği işlemek için bu yöntemi aşağıdaki gibi geçersiz kılın:

override fun onTouchEvent(event: MotionEvent): Boolean {
    return super.onTouchEvent(event)
}

@Override
   public boolean onTouchEvent(MotionEvent event) {
    return super.onTouchEvent(event);
   }

Dokunma etkinlikleri tek başına kullanışlı değildir. Modern dokunmatik kullanıcı arayüzleri dokunma, çekme, itme ve benzeri hareketler açısından etkileşimleri tanımlar. kaydırma ve yakınlaştırma gibi özellikler içerir. Ham dokunma etkinliklerini hareketlere dönüştürmek için Android sağlar GestureDetector

Bir sınıfın örneğini ileterek bir GestureDetector oluşturma Google Analytics 4'teki GestureDetector.OnGestureListener. Yalnızca birkaç hareketi işlemek istiyorsanız GestureDetector.SimpleOnGestureListener. GestureDetector.OnGestureListener kodunu uygulamak yerine kullanır. Örneğin, bu kod; GestureDetector.SimpleOnGestureListener ve geçersiz kılmalar onDown(MotionEvent).

private val myListener =  object : GestureDetector.SimpleOnGestureListener() {
    override fun onDown(e: MotionEvent): Boolean {
        return true
    }
}

private val detector: GestureDetector = GestureDetector(context, myListener)

class MyListener extends GestureDetector.SimpleOnGestureListener {
   @Override
   public boolean onDown(MotionEvent e) {
       return true;
   }
}
detector = new GestureDetector(getContext(), new MyListener());

GestureDetector.SimpleOnGestureListener kullanmasanız da, her zaman bir onDown() true yöntemini döndürür. Hareketler her yönüyle bir onDown() mesajıyla başlar. false adlı yeri iade ederseniz onDown() kaynağından, şu şekilde: GestureDetector.SimpleOnGestureListener ise sistem, hareketin geri kalanını ve diğer GestureDetector.OnGestureListener çağrılmadı. Yalnızca geri dönecek Tamamını yoksaymak istiyorsanız onDown() adlı kullanıcıdan false hareketi yapın.

GestureDetector.OnGestureListener uygulayıp oluşturduktan sonra GestureDetector örneği için Aldığınız dokunma etkinliklerini yorumlamak için GestureDetector onTouchEvent().

override fun onTouchEvent(event: MotionEvent): Boolean {
    return detector.onTouchEvent(event).let { result ->
        if (!result) {
            if (event.action == MotionEvent.ACTION_UP) {
                stopScrolling()
                true
            } else false
        } else true
    }
}

@Override
public boolean onTouchEvent(MotionEvent event) {
   boolean result = detector.onTouchEvent(event);
   if (!result) {
       if (event.getAction() == MotionEvent.ACTION_UP) {
           stopScrolling();
           result = true;
       }
   }
   return result;
}

onTouchEvent() bir dokunma etkinliğini ilettiğinizde bir hareketin parçası olarak tanıdığında false değerini döndürür. Ardından kendi özel hareket algılama kodunuzla değiştirin.

Fiziksel olarak makul bir hareket yaratın

Hareketler, dokunmatik ekranlı cihazları kontrol etmenin güçlü bir yoludur, ancak fiziksel olarak üretmedikleri sürece mantıksız ve hatırlaması zor daha kolay olur.

Örneğin, akıllı bir şekilde gösterilen yatay bir kaydırma hareketi uygulamak görünümde çizilen öğeyi dikey ekseni etrafında dönerken ayarlar. Bu hareket Kullanıcı arayüzü hızla hamle yönünde hareket ederek yanıt verirse sanki kullanıcı volanı itip döner gibi yavaşlıyor.

Projenin gidişatına dair kaydırma animasyonu yap hareketi, kendi taramanızı nasıl uygulayacağınızla ilgili ayrıntılı bir açıklama sağlar gösterir. Ancak vola hissini simüle etmek de sıradan bir iş değil. Çok fazla fizik bir Volan modelinin doğru çalışması için matematik de gerekir. Neyse ki Android, bu ve diğer davranışları simüle etmek için yardımcı sınıflar sağlar. İlgili içeriği oluşturmak için kullanılan Scroller. sınıfı, çark tarzı hızla fırlatma hareketlerini yönetmenin temelini oluşturur.

Kısa bir flaş başlatmak için şu numarayı arayın: fling(). ve minimum ve maksimum x ve y değerleriyle değerleri. Hız değeri için, her zaman GestureDetector

fun onFling(e1: MotionEvent, e2: MotionEvent, velocityX: Float, velocityY: Float): Boolean {
    scroller.fling(
            currentX,
            currentY,
            (velocityX / SCALE).toInt(),
            (velocityY / SCALE).toInt(),
            minX,
            minY,
            maxX,
            maxY
    )
    postInvalidate()
    return true
}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
   scroller.fling(currentX, currentY, velocityX / SCALE, velocityY / SCALE, minX, minY, maxX, maxY);
   postInvalidate();
    return true;
}

fling() çağrısı, kısa mesafenin fizik modelini oluşturur hareketi yapın. Daha sonra, şu numarayı arayarak Scroller uygulamasını güncelleyin: Scroller.computeScrollOffset() kontrol edin. computeScrollOffset(), Geçerli saati okuyarak Scroller nesnesinin dahili durumu fizik modeli kullanarak x ve y konumlarının gerekir. Telefonla arama getCurrX(). ve getCurrY() almalısınız.

Çoğu görünüm Scroller nesnesinin x ve y parametrelerini geçer doğrudan scrollTo(). Bu örnek biraz farklıdır: Geçerli kaydırma x konumunu kullanır değerini girin.

scroller.apply {
    if (!isFinished) {
        computeScrollOffset()
        setItemRotation(currX)
    }
}

if (!scroller.isFinished()) {
    scroller.computeScrollOffset();
    setItemRotation(scroller.getCurrX());
}

Scroller sınıfı, kaydırma konumlarını sizin için hesaplar. Ancak, bu konumları görünümünüze otomatik olarak uygulamaz. Yeni koordinatlar uygulama genellikle kaydırma animasyonunun pürüzsüz görünmesine yetecek kadar yer alır. Paydaşlarla iletişime geçmenin şunu yap:

• Şu numarayı arayarak yeniden çizim yapmaya zorlayın: postInvalidate(). fling() arandıktan sonra. Bu teknik, uygulamanızın hesaplama kaydırma ofsetleri onDraw(). ve kaydırma ofseti her zaman postInvalidate() işlevini çağırın anlamına gelir.
• Kur ValueAnimator. animasyon ile kaydırmalı ve işlemesi için bir işleyici eklemelidir. animasyon güncellemeleri addUpdateListener(). Bu teknik, bir öğenin özelliklerini canlandırmanıza View

Geçişlerinizi akıcı hale getirin

Kullanıcılar, modern bir kullanıcı arayüzünün durumlar arasında sorunsuz geçiş yapmasını bekliyor: Kullanıcı arayüzü öğeleri görünür ve kaybolmak yerine gevşeyip azalan hareketler ve hareketler aniden başlayıp aniden durmak yerine sorunsuz bir şekilde biter. Android özellik animasyonu çerçeve, sorunsuz geçişleri kolaylaştırır.

Animasyon sistemini kullanmak için, bir özellik, reklamınızı görünümünün görünümünü doğrudan değiştirmeyin. Bunun yerine Değişikliği yapmak için ValueAnimator. Aşağıdaki örnekte, Görünümde seçilen alt bileşenin değiştirilmesi, oluşturulan tüm bileşeni yapar görünüm, seçim işaretçisi ortalanacak şekilde döner. ValueAnimator, birkaç yüz yıllık bir periyotta rotasyonu değiştirir milisaniye cinsinden ayarlar.

autoCenterAnimator = ObjectAnimator.ofInt(this, "Rotation", 0).apply {
    setIntValues(targetAngle)
    duration = AUTOCENTER_ANIM_DURATION
    start()
}

autoCenterAnimator = ObjectAnimator.ofInt(this, "Rotation", 0);
autoCenterAnimator.setIntValues(targetAngle);
autoCenterAnimator.setDuration(AUTOCENTER_ANIM_DURATION);
autoCenterAnimator.start();

Değiştirmek istediğiniz değer temel View değerlerinden biriyse özellikleri kullanarak animasyon oluşturmak daha da kolaydır çünkü görünümlerde, ViewPropertyAnimator olduğu gibi, birden fazla özelliğin eş zamanlı animasyonu için optimize edilmiş olan şu örneği inceleyin:

animate()
    .rotation(targetAngle)
    .duration = ANIM_DURATION
    .start()

animate().rotation(targetAngle).setDuration(ANIM_DURATION).start();