Wear OS'te liste oluşturma

Listeler, kullanıcıların Wear OS cihazlarda bir dizi seçenek arasından kolayca bir öğe seçmelerine olanak tanır.

Giyilebilir Cihaz Kullanıcı Arayüzü Kitaplığı'nda WearableRecyclerView sınıfı RecyclerView Giyilebilir cihazlar için optimize edilmiş listeler oluşturma yöntemlerinden bahsedeceğiz. Bunu kullanabilirsiniz arayüzünde yeni bir WearableRecyclerView kapsayıcısı oluşturun.

Şunun için WearableRecyclerView kullanın: basit öğelerden oluşan uzun bir liste veya bir kişi listesi oluşturabilirsiniz. Her öğe kısa bir dize ve ilişkili bir simge olmalıdır. Alternatif olarak, her öğede yalnızca bir veya simge olabilir.

Not: Karmaşık düzenlerden kaçının. Kullanıcıların bir öğeye bakarak ne olduğunu daha iyi anlarlar. Özellikle giyilebilir sınırlı ekran boyutu.

Mevcut RecyclerView sınıfı genişletildiğinde, WearableRecyclerView API'ler varsayılan olarak, dikey olarak kaydırılabilen bir öğe listesini düz bir liste halinde görüntüler. Ayrıca şunu da kullanabilirsiniz: ve kavisli düzeni etkinleştirmek için WearableRecyclerView API'lerini dairesel kaydırma hareketi .

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

Bu kılavuzda, WearableRecyclerView sınıfının içerik oluşturmak için nasıl kullanılacağı Wear OS uygulamalarınızdaki listeleri, eğimli düzeni etkinleştirme ve görünümünün nasıl özelleştirileceğini, çocuklar için içerik sunar.

XML kullanarak bir etkinliğe 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 WearableRecyclerView gösterilmektedir bir etkinliğe uygulandı:

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

Eğri düzen oluşturma

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

  • kullan WearableRecyclerView öğesini, ilgili XML düzeninde ana kapsayıcınız olarak belirleyin.
  • Ayarlayın: setEdgeItemsCenteringEnabled(boolean) yöntemini kullanarak true. Bu ekrandaki ilk ve son öğeyi dikey olarak ortalar.
  • Öğenin düzenini ayarlamak için WearableRecyclerView.setLayoutManager() yöntemini kullanın görebilirsiniz.

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ızın, kaydırma sırasında çocukların görünümünü özelleştirmek için belirli şartları varsa (örneğin, öğeler merkezden uzağa kaydırılırken simgeleri ve metni ölçeklendirin WearableLinearLayoutManager.LayoutCallback sınıfını kullanır ve onLayoutFinished yöntemini kullanabilirsiniz.

Aşağıdaki kod snippet'leri, öğelerin kaydırılmasını ölçeklemeye göre özelleştirmeye dair bir örnek göstermektedir uzaklaştırarak merkezden uzaklaşmasına WearableLinearLayoutManager.LayoutCallback sınıf:

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