Google は、黒人コミュニティに対する人種平等の促進に取り組んでいます。取り組みを見る

Wear 上でリストを作成する

リスト機能を使用すると、Wear OS デバイス上でユーザーが選択肢の中から簡単にアイテムを選択できるようになります。

ウェアラブル UI ライブラリには、ウェアラブル デバイス向けに最適化されたリストを作成するための RecyclerView の実装である WearableRecyclerView クラスが用意されています。ウェアラブル アプリでこのインターフェースを使用するには、新しい WearableRecyclerView コンテナを作成します。

以下の関連リソースもご覧ください。

WearableRecyclerView を使用するかどうかは、提供するユーザー エクスペリエンスの種類に基づいて決定する必要があります。単純なアイテム(アプリ ランチャーなど)の長いリストや連絡先リストには WearableRecyclerView を使用することをおすすめします。各アイテムには、短い文字列と、関連付けられているアイコンを表示できます。また、各アイテムに文字列とアイコンのどちらかしか表示できないこともあります。非常に短いリストや複雑なリストの場合は、WearableRecyclerView を使用しないことをおすすめします。このような場合には、通常の Android サポート ライブラリの RecyclerView または ListView を使用してください。

既存の RecyclerView クラスを拡張することにより、WearableRecyclerView API ではデフォルトで、上下にスクロール可能なアイテムリストが直線上に表示されます。ウェアラブル アプリで WearableRecyclerView API を使用すると、曲線レイアウトと円形スクロール操作を有効にすることができます。

図 1. Wear OS のデフォルトのリスト表示

このレッスンでは、WearableRecyclerView クラスを使用して、Wear OS アプリでリストを作成する方法について説明します。また、このドキュメントでは、スクロール可能なアイテムの曲線レイアウトを有効する方法、円形スクロール操作を有効にする方法、スクロール時の子の表示をカスタマイズする方法についても説明します。

XML を使用して WearableRecyclerView をアクティビティに追加する

次のレイアウト(res/layout/activity_main.xml などに挿入される)では、WearableRecyclerView をアクティビティに追加しています。これにより、円形と正方形のどちらのデバイスでもリストが適切に表示されます。

    <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" />
    

以下に、アクティビティに適用可能な WearableRecyclerView を示します。

Kotlin

    import android.os.Bundle
    import android.app.Activity
    import android.support.wear.widget.WearableRecyclerView

    class MainActivity : Activity() {

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

        ...
    }
    

Java

    import android.os.Bundle;
    import android.app.Activity;
    import android.support.wear.widget.WearableRecyclerView;

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

        ...
    }
    

注: WearableRecyclerView クラスは、ウェアラブル サポート ライブラリのサポートが終了した類似クラスの後継クラスです。

曲線レイアウトを作成する

ウェアラブル アプリ内でスクロール可能なアイテムの曲線レイアウトを作成する手順は次のとおりです。

  • 対象の XML レイアウト内で、メインコンテナとして WearableRecyclerView を使用します。
  • setEdgeItemsCenteringEnabled(boolean) メソッドを true に設定します。これにより、リストの最初と最後のアイテムが画面上で縦方向に中央揃えされます。
  • WearableRecyclerView.setLayoutManager() メソッドを使用して、画面上のアイテムのレイアウトを設定します。

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

スクロール時の子の表示に関して具体的なカスタマイズ要件がある場合は(アイテムがスクロールされて中央から離れるときにアイコンとテキストのサイズを変更するなど)、WearableLinearLayoutManager.LayoutCallback クラスを拡張して onLayoutFinished メソッドをオーバーライドします。

スクロールによって中央から離れるアイテムのサイズを変更するカスタマイズを、WearableLinearLayoutManager.LayoutCallback クラスの拡張によって実現しているコード スニペットを以下に示します。

Kotlin

    /** How much should we scale the icon 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 should we scale the icon 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));
    

円形スクロール操作を追加する

WearableRecyclerView の場合、円形スクロールはデフォルトで無効化されています。子ビュー内で円形スクロール操作を有効にしたい場合は、WearableRecyclerViewsetCircularScrollingGestureEnabled() メソッドを使用します。また、次のいずれか、あるいは両方を定義することによって、円形スクロール操作をカスタマイズできます。

  • 画面 1 つ分の高さをスクロールするのに必要となる回転の角度。 この setScrollDegreesPerScreen を定義することで、スクロール速度を効果的に調整できます。デフォルト値は 180 度に設定されています。
  • 画面の端の近くにある仮想の「ベゼル」の幅。操作は、この setBezelFraction の範囲内で認識されます。デフォルト値は 1 に設定されています。この幅は、ビューの半径に対する割合で指定します。

次のコード スニペットは、これらのメソッドの設定方法を示しています。

Kotlin

    wearableRecyclerView.apply {
        isCircularScrollingGestureEnabled = true
        bezelFraction = 0.5f
        scrollDegreesPerScreen = 90f
    }
    

Java

    wearableRecyclerView.setCircularScrollingGestureEnabled(true);
    wearableRecyclerView.setBezelFraction(0.5f);
    wearableRecyclerView.setScrollDegreesPerScreen(90);