Wear OS'te liste oluşturma

Compose yöntemini deneyin
Wear OS'te Jetpack Compose, Wear OS için önerilen kullanıcı arayüzü araç setidir.
Wear OS'te Compose kullanarak liste oluşturma →

Listeler, kullanıcıların Wear OS cihazlarda bir dizi seçenek arasından kolayca seçim yapmasına olanak tanır.

Wearable UI Library, giyilebilir cihazlar için optimize edilmiş listeler oluşturmaya yönelik bir RecyclerView uygulaması olan WearableRecyclerView sınıfını içerir. Yeni bir WearableRecyclerView kapsayıcısı oluşturarak bu arayüzü giyilebilir uygulamanızda kullanabilirsiniz.

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

Not: Karmaşık düzenlerden kaçının. Kullanıcılar, özellikle giyilebilir cihazların sınırlı ekran boyutu nedeniyle bir öğenin ne olduğunu anlamak için yalnızca öğeye göz atmalıdır.

Mevcut RecyclerView sınıfı genişletilerek WearableRecyclerView API'leri, öğelerin dikey olarak kaydırılabilir listesini varsayılan olarak düz bir listede gösterir. Ayrıca, giyilebilir cihaz uygulamalarınızda kavisli düzen ve dairesel kaydırma hareketi için kaydolmak üzere 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ı nasıl kullanacağınız, kaydırılabilir öğeleriniz için kavisli düzene nasıl kaydolacağınız ve kaydırma sırasında alt öğelerin görünümünü nasıl özelleştireceğiniz gösterilmektedir.

XML kullanarak bir etkinliğe WearableRecyclerView ekleme

Aşağıdaki düzen, 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:

Kotlin

class MainActivity : Activity() {

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

Java

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

Kavisli düzen oluşturma

Giyilebilir uygulamanızdaki kaydırılabilir öğeler için kavisli bir düzen oluşturmak istiyorsanız 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, listedeki ilk ve son öğeleri ekranda dikey olarak ortalar.
  • Ekrandaki öğelerin düzenini ayarlamak için WearableRecyclerView.setLayoutManager() yöntemini kullanın.

Kotlin

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

Java

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

Uygulamanızda, öğeler merkezden uzaklaşırken simgeleri ve metni ölçeklendirme gibi, kaydırma sırasında çocukların görünümünü özelleştirmek için belirli şartlar varsa 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ı genişletilerek öğelerin kaydırılmasını merkezden daha uzağa ölçeklenecek şekilde özelleştirme örneği gösterilmektedir:

Kotlin

/** 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
        }
    }
}

Java

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);
    }
}

Kotlin

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

Java

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