Wear OS'te liste oluşturma

Listeler, kullanıcıların Wear OS cihazlarda bir dizi seçenek arasından kolayca bir öğe seçebilmesini sağlar.

Giyilebilir Kullanıcı Arayüzü Kitaplığı, giyilebilir cihazlar için optimize edilmiş listeler oluşturmak için kullanılan bir RecyclerView uygulaması olan WearableRecyclerView sınıfını içerir. Giyilebilir cihaz uygulamanızda yeni bir WearableRecyclerView kapsayıcısı oluşturarak bu arayüzü kullanabilirsiniz.

Uygulama başlatıcı veya kişi listesi gibi uzun bir basit öğe listesi için WearableRecyclerView kullanın. Her öğenin kısa bir dizesi ve ilişkili bir simgesi olabilir. Alternatif olarak, her öğede yalnızca bir dize veya simge bulunabilir.

Not: Karmaşık düzenlerden kaçının. Özellikle giyilebilir cihazların sınırlı ekran boyutunda, kullanıcıların bir öğenin ne olduğunu anlamak için yalnızca göz atması gerekir.

Mevcut RecyclerView sınıfının genişletilmesiyle WearableRecyclerView API'leri, varsayılan olarak düz bir liste içindeki dikey kaydırılabilir öğelerin listesini görüntüler. Giyilebilir uygulamalarınızda kavisli bir düzeni ve dairesel kaydırma hareketini etkinleştirmek için WearableRecyclerView API'lerini de kullanabilirsiniz.

Şekil 1. Wear OS'te varsayılan liste görünümü.

Bu kılavuzda, Wear OS uygulamalarınızda liste oluşturmak için WearableRecyclerView sınıfının nasıl kullanılacağı, kaydırılabilir öğeleriniz için kavisli düzeni nasıl etkinleştireceğiniz ve kaydırma sırasında alt öğelerin görünümünün nasıl özelleştirileceği gösterilmektedir.

XML kullanarak etkinliklere WearableRecyclerView ekleme

Aşağıdaki düzen, bir etkinliğe WearableRecyclerView ekler:

<androidx.wear.widget.WearableRecyclerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/recycler_launcher_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:scrollbars="vertical" />

Aşağıdaki örnekte, bir etkinliğe uygulanan WearableRecyclerView gösterilmektedir:

class MainActivity : Activity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
    ...
}

public class MainActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    ...
}

Eğri düzen oluşturma

Giyilebilir cihaz uygulamanızda kaydırılabilir öğeler için kavisli bir düzen oluşturmak üzere aşağıdakileri yapın:

• İlgili XML düzeninde ana kapsayıcınız olarak WearableRecyclerView öğesini kullanın.
• setEdgeItemsCenteringEnabled(boolean) yöntemini true olarak ayarlayın. Bu işlem, ekrandaki listedeki ilk ve son öğeleri dikey olarak ortalar.
• Ekrandaki öğelerin düzenini ayarlamak için WearableRecyclerView.setLayoutManager() yöntemini kullanın.

wearableRecyclerView.apply {
    // To align the edge children (first and last) with the center of the screen.
    isEdgeItemsCenteringEnabled = true
    ...
    layoutManager = WearableLinearLayoutManager(this@MainActivity)
}

// To align the edge children (first and last) with the center of the screen.
wearableRecyclerView.setEdgeItemsCenteringEnabled(true);
...
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this));

Uygulamanızın, kaydırma sırasında alt öğelerin görünümünü özelleştirmek için belirli şartları varsa (ör. öğeler merkezden uzaklaşırken simgeleri ve metni ölçeklendirmek) WearableLinearLayoutManager.LayoutCallback sınıfını genişletin ve onLayoutFinished yöntemini geçersiz kılın.

Aşağıdaki kod snippet'lerinde, WearableLinearLayoutManager.LayoutCallback sınıfını genişleterek öğelerin kaydırılmasını merkezden uzaklaştırılacak şekilde özelleştirmeye dair bir örnek gösterilmektedir:

/** How much icons should scale, at most.  */
private const val MAX_ICON_PROGRESS = 0.65f

class CustomScrollingLayoutCallback : WearableLinearLayoutManager.LayoutCallback() {

    private var progressToCenter: Float = 0f

    override fun onLayoutFinished(child: View, parent: RecyclerView) {
        child.apply {
            // Figure out % progress from top to bottom.
            val centerOffset = height.toFloat() / 2.0f / parent.height.toFloat()
            val yRelativeToCenterOffset = y / parent.height + centerOffset

            // Normalize for center.
            progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset)
            // Adjust to the maximum scale.
            progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS)

            scaleX = 1 - progressToCenter
            scaleY = 1 - progressToCenter
        }
    }
}

public class CustomScrollingLayoutCallback extends WearableLinearLayoutManager.LayoutCallback {
    /** How much icons should scale, at most. */
    private static final float MAX_ICON_PROGRESS = 0.65f;

    private float progressToCenter;

    @Override
    public void onLayoutFinished(View child, RecyclerView parent) {

        // Figure out % progress from top to bottom.
        float centerOffset = ((float) child.getHeight() / 2.0f) / (float) parent.getHeight();
        float yRelativeToCenterOffset = (child.getY() / parent.getHeight()) + centerOffset;

        // Normalize for center.
        progressToCenter = Math.abs(0.5f - yRelativeToCenterOffset);
        // Adjust to the maximum scale.
        progressToCenter = Math.min(progressToCenter, MAX_ICON_PROGRESS);

        child.setScaleX(1 - progressToCenter);
        child.setScaleY(1 - progressToCenter);
    }
}

wearableRecyclerView.layoutManager =
        WearableLinearLayoutManager(this, CustomScrollingLayoutCallback())

CustomScrollingLayoutCallback customScrollingLayoutCallback =
                new CustomScrollingLayoutCallback();
wearableRecyclerView.setLayoutManager(
                new WearableLinearLayoutManager(this, customScrollingLayoutCallback));