Katlanabilir cihazlara uygun tasarım

ConstraintLayout içinde 2.1 sürümünde bu kullanıcılara yardımcı olmak için çeşitli özellikler eklendi SharedValues dahil katlanabilir cihazları yönetin ReactiveGuide ve MotionLayout ile gelişmiş animasyon desteği.

Paylaşılan Değerler

ConstraintLayout uygulamasına çalışma zamanı değerlerini eklemek için yeni bir mekanizma ekledik: Bunun, tüm sistem genelinde değerler için kullanılması amaçlanmıştır, çünkü tüm ConstraintLayout değere erişebilir.

Katlanabilir cihazlar bağlamında bu mekanizmayı kullanarak katlanabilir cihazları ekranın konumu:

Kotlin

ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, fold)

Java

ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, fold);

Özel bir yardımcıda, ortak kullanılan değerlere erişmek için değişiklikler:

Kotlin

val sharedValues: SharedValues = ConstraintLayout.getSharedValues()
sharedValues.addListener(mAttributeId, this)

Java

SharedValues sharedValues = ConstraintLayout.getSharedValues();
sharedValues.addListener(mAttributeId, this);

Katlanabilir Denemeler örneğine bakabilirsiniz. ekranın konumunu nasıl belirleyeceğimizi görmek için Jetpack WindowManager kitaplığı ve ekle ConstraintLayout konumuna taşıyacak.

Kotlin

inner class StateContainer : Consumer<WindowLayoutInfo> {

    override fun accept(newLayoutInfo: WindowLayoutInfo) {

        // Add views that represent display features
        for (displayFeature in newLayoutInfo.displayFeatures) {
            val foldFeature = displayFeature as? FoldingFeature
            if (foldFeature != null) {
                if (foldFeature.isSeparating &&
                    foldFeature.orientation == FoldingFeature.Orientation.HORIZONTAL
                ) {
                    // The foldable device is in tabletop mode
                    val fold = foldPosition(motionLayout, foldFeature)
                    ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, fold)
                } else {
                    ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, 0);
                }
            }
        }
    }
}

Java

class StateContainer implements Consumer<WindowLayoutInfo> {

    @Override
    public void accept(WindowLayoutInfo newLayoutInfo) {

        // Add views that represent display features
        for (DisplayFeature displayFeature : newLayoutInfo.getDisplayFeatures()) {
            if (displayFeature instanceof FoldingFeature) {
                FoldingFeature foldFeature = (FoldingFeature)displayFeature;
                if (foldFeature.isSeparating() &&
                    foldFeature.getOrientation() == FoldingFeature.Orientation.HORIZONTAL
                ) {
                    // The foldable device is in tabletop mode
                    int fold = foldPosition(motionLayout, foldFeature);
                    ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, fold);
                } else {
                    ConstraintLayout.getSharedValues().fireNewValue(R.id.fold, 0);
                }
            }
        }
    }
}

fireNewValue(), ilk parametre olarak değeri temsil eden bir kimlik alır ve ikinci parametre olarak eklenecek değer.

ReactiveGuide

Zorlamak zorunda kalmadan bir düzende SharedValue özelliğinden yararlanmanın bir yolu bir kod yazmak için ReactiveGuide yardımcı olur. Bu, yatay veya dikey bir çizgiyi SharedValue arasında bağlantı oluşturuldu.

    <androidx.constraintlayout.widget.ReactiveGuide
        android:id="@+id/fold"
        app:reactiveGuide_valueId="@id/fold"
        android:orientation="horizontal" />

Daha sonra, normal bir kılavuzda olduğu gibi kullanılabilir.

Katlanabilir cihazlar için MotionLayout

MotionLayout 2.1 sürümünde içerik biçimine dönüştürmeye yardımcı olan çeşitli özellikler ekledik. Bu özellik katlanabilir cihazlar için özellikle kullanışlı. farklı olası düzenler arasında animasyon işlemi yapmanız gerekir.

Katlanabilir cihazlar için iki yaklaşım mevcuttur:

• Çalışma zamanında mevcut düzeninizi (ConstraintSet) güncelleyerek katlayın.
• Katlanabilir cihaz durumlarının her biri için ayrı bir ConstraintSet kullanın. destek (closed, folded veya fully open).

ConstraintSet animasyonu

MotionLayout içindeki updateStateAnimate() işlevi 2.1 sürüm:

Kotlin

fun updateStateAnimate(stateId: Int, set: ConstraintSet, duration: Int)

Java

void updateStateAnimate(int stateId, ConstraintSet set, int duration);

Bu işlev, belirli bir öğeyi güncellerken değişiklikleri otomatik olarak canlandıracaktır anında güncelleme yapmak yerine ConstraintSet updateState(stateId, constraintset)) tıklayın. Bu şekilde, kullanıcı arayüzünüzü bağlı olarak değişiklik gösterir.

MotionLayout içinde ReactiveGuide

ReactiveGuide, MotionLayout:

• app:reactiveGuide_animateChange="true|false"

• app:reactiveGuide_applyToAllConstraintSets="true|false"

İlki, mevcut ConstraintSet öğesini değiştirir ve değişikliği canlandırır otomatik olarak oluşturur. İkincisi, yeni ReactiveGuide değerini uygular MotionLayout içindeki tüm ConstraintSet'lara konum. Proje yöneticileri katlanabilir reklamlar için katlama konumunu temsil eden bir ReactiveGuide kullanılması gerekir. düzen öğelerinizi ReactiveGuide göz önünde bulundurarak ayarlıyorsunuz.

Katlanabilir cihaz durumunu temsil etmek için birden fazla ConstraintSet kullanma

Mevcut MotionLayout durumunu güncellemek yerine mimariyi yapmanın başka bir yolu kullanıcı arayüzünüze katlanabilir cihazları desteklemek üzere özel ayrı eyaletler oluşturmaktır (ör. closed, folded ve fully open).

Bu senaryoda, bir ReactiveGuide yönergesini yine de daha fazla kontrole sahip olursunuz (otomatik dönüşüme kıyasla mevcut ConstraintSet) güncellenirken her durumun olabilir.

Bu yaklaşımla, DeviceState dinleyicinizde, gelen sesin içeriğini MotionLayout MotionLayout.transitionToState(stateId) yöntemidir.