Wear で確認を表示する

Wear OS アプリで表示される確認は、画面全体を使用するか、ハンドヘルド アプリで表示される確認より画面を占める割合が大きくなっています。このため、ユーザーは画面を一目見るだけで確認を理解できます。また、ターゲットをタップして操作をキャンセルすることもできます。

以下のセクションをお読みいただき、さらに、Wear OS のデザインの原則もご覧ください。

ウェアラブル UI ライブラリを使用すると、アプリで確認タイマーと確認アニメーションを表示できます。

確認タイマー
自動確認タイマーではアニメーション タイマーが表示され、ユーザーが直前に行った操作をキャンセルできます。
確認アニメーション
確認アニメーションは、ユーザーが操作を完了したときに視覚的なフィードバックを提供します。

以降のセクションで、これらのパターンの実装方法について説明します。

自動確認タイマーを使用する

図 1: 確認タイマー

自動確認タイマーでは、ユーザーが直前に行った操作をキャンセルできます。ユーザーが操作を行うと、操作をキャンセルするためのタイマー アニメーション付きのボタンが表示され、タイマーが開始されます。ユーザーはタイマーが終了するまでの間に操作をキャンセルできます。ユーザーが操作をキャンセルした場合、およびタイマーが切れたときに、アプリが通知を受け取ります。

ユーザーがアプリで操作を完了したときに確認タイマーを表示する手順は次のとおりです。

  1. <CircularProgressLayout> 要素をレイアウトに追加します。
  2. アクティビティに OnTimerFinishedListener インターフェースを実装します。
  3. タイマーの時間を設定し、ユーザーが操作を完了したときにタイマーを開始します。

アプリで CircularProgressLayout を使用するには、wear モジュールの build.gradle ファイルに次の依存関係(またはそれ以降のバージョン)を含める必要があります。

    dependencies{
         ...
        compile 'androidx.wear:wear:1.2.0'
        compile 'androidx.core:core:1.2.0'
        compile 'androidx.legacy:legacy-support-core-utils:1.0.0'
        compile 'androidx.legacy:legacy-support-core-ui:1.0.0'
        ...
    }
    

次のように、<CircularProgressLayout> 要素をレイアウトに追加できます。

    <androidx.wear.widget.CircularProgressLayout
        android:id="@+id/circular_progress"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="4dp"
        app:backgroundColor="@color/darkblue"
        app:colorSchemeColors="@color/lightblue"
        app:strokeWidth="4dp">
        <ImageView
          android:id="@+id/image_view"
          android:src="@drawable/cancel"
          android:layout_width="40dp"
          android:layout_height="40dp" />
    </androidx.wear.widget.CircularProgressLayout>
    

また、CircularProgressLayout に任意のビューを子として追加し、その周りに進行状況タイマーを表示することもできます。上記の例では ImageView を使用していますが、TextView を使用して内部にテキストを表示することも可能です。

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

タイマーが終了したとき、またはユーザーがタイマーをタップしたときに通知を受け取るには、対応するリスナー メソッドをアクティビティに実装します。

Kotlin

    class WearActivity :
            AppCompatActivity(),
            CircularProgressLayout.OnTimerFinishedListener,
            View.OnClickListener {

        private var circularProgress: CircularProgressLayout? = null

        override fun onCreate(savedInstanceState: Bundle?) {
            super.onCreate(savedInstanceState)
            setContentView(R.layout.activity_wear_activity)
            circularProgress = findViewById<CircularProgressLayout>(R.id.circular_progress).apply {
                onTimerFinishedListener = this@WearActivity
                setOnClickListener(this@WearActivity)
            }
        }

        override fun onTimerFinished(layout: CircularProgressLayout) {
            // User didn't cancel, perform the action
        }

        override fun onClick(view: View) {
            // User canceled, abort the action
            circularProgress?.stopTimer()
        }
    }
    

Java

    public class WearActivity extends Activity implements
        CircularProgressLayout.OnTimerFinishedListener, View.OnClickListener {
      private CircularProgressLayout circularProgress;

      @Override
      protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_wear_activity);
        circularProgress =
            (CircularProgressLayout) findViewById(R.id.circular_progress);
        circularProgress.setOnTimerFinishedListener(this);
        circularProgress.setOnClickListener(this);
      }

      @Override
      public void onTimerFinished(CircularProgressLayout layout) {
        // User didn't cancel, perform the action
      }

      @Override
      public void onClick(View view) {
        if (view.equals(circularProgress)) {
          // User canceled, abort the action
          circularProgress.stopTimer();
        }
      }
    }
    

タイマーを開始するには、アクティビティ内でユーザーが操作を選択する場所に次のコードを追加します。

Kotlin

    circularProgress?.apply {
        // Two seconds to cancel the action
        totalTime = 2000
        // Start the timer
        startTimer()
    }
    

Java

    // Two seconds to cancel the action
    circularProgress.setTotalTime(2000);
    // Start the timer
    circularProgress.startTimer();
    

図 2: 確認アニメーション

確認アニメーションを表示する

ユーザーがアプリ内で操作を完了したときに確認アニメーションを表示するには、アクティビティのいずれかから ConfirmationActivity を開始するインテントを作成します。EXTRA_ANIMATION_TYPE インテント エクストラで以下のいずれかのアニメーションを指定できます。

確認アイコンの下に表示されるメッセージを追加することもできます。

アプリで ConfirmationActivity を使用するには、まず、マニフェスト ファイルで次のアクティビティを宣言します。

    <manifest>
      <application>
        ...
        <activity
            android:name="android.support.wearable.activity.ConfirmationActivity">
        </activity>
      </application>
    </manifest>
    

次に、ユーザー操作の結果を確認し、インテントで指定したアクティビティを開始します。

Kotlin

    val intent = Intent(this, ConfirmationActivity::class.java).apply {
        putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, ConfirmationActivity.SUCCESS_ANIMATION)
        putExtra(ConfirmationActivity.EXTRA_MESSAGE, getString(R.string.msg_sent))
    }
    startActivity(intent)
    

Java

    Intent intent = new Intent(this, ConfirmationActivity.class);
    intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE,
                    ConfirmationActivity.SUCCESS_ANIMATION);
    intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE,
                    getString(R.string.msg_sent));
    startActivity(intent);
    

確認アニメーションが表示された後、ConfirmationActivity が終了してアクティビティが再開されます。