Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

在 Wear 上显示确认内容

Wear OS 应用中显示的各项确认内容会占用整个屏幕,或占用比手持式设备应用中的确认内容更大的屏幕区域。这样可确保用户只需瞥一眼屏幕就能看到这些确认内容,并确保他们用来取消操作的触摸目标也足够大。

除了阅读下面几部分之外,您还应参阅 Wear OS 设计原则

穿戴式设备界面库可帮助您在应用中显示确认动画和定时器:

确认定时器
自动确认定时器会向用户显示一个动画定时器,可让他们取消刚刚执行的操作。
确认动画
确认动画会在用户完成操作时向其提供视觉反馈。

下面几部分将向您介绍如何实现这些模式。

使用自动确认定时器

图 1:确认定时器。

自动确认定时器可让用户取消他们刚刚执行的操作。当用户执行操作时,您的应用会显示一个带定时器动画的操作取消按钮,并启动定时器。在定时器到时间之前,用户可以选择取消操作。用户取消操作和定时器到时间时,您的应用会收到通知。

要在用户在您的应用中完成操作时显示确认定时器,请执行以下操作:

  1. 向您的布局添加 <CircularProgressLayout> 元素。
  2. 在您的 Activity 中实现 OnTimerFinishedListener 接口。
  3. 设置定时器的时长,并在用户完成某项操作时启动定时器。

要在您的应用中使用 CircularProgressLayout,您需要在 wear 模块的 build.gradle 文件中添加以下依赖项(或更高版本):

    dependencies{
         ...
        compile 'com.android.support:wear:26.0.0'
        compile 'com.android.support:support-compat:26.0.0'
        compile 'com.android.support:support-core-utils:26.0.0'
        compile 'com.android.support:support-core-ui:26.0.0'
        ...
    }
    

您可以按如下方式向您的布局添加 <CircularProgressLayout> 元素:

    <android.support.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" />
    </android.support.wear.widget.CircularProgressLayout>
    

您还可以添加任何视图作为 CircularProgressLayout 的子布局,以在其周围显示一个进度定时器。上例使用了 ImageView,但也可以使用 TextView 以在内部显示文本。

注意 CircularProgressLayout 类取代了穿戴式设备支持库中的一个与其类似且已弃用的类。

要在定时器结束或用户点按它时收到通知,请在您的 Activity 中实现对应的监听器方法:

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

要启动定时器,请将以下代码添加到用户在您的 Activity 中选择操作的位置:

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:确认动画。

显示确认动画

要在用户在您的应用中完成操作时显示确认动画,请创建一个用于从您的某个 Activity 启动 ConfirmationActivity 的 intent。您可以使用 EXTRA_ANIMATION_TYPE intent extra 指定以下某个动画:

您还可以添加出现在确认图标下方的消息。

要在您的应用中使用 ConfirmationActivity,请先在您的清单文件中声明此 Activity:

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

然后确定用户操作的结果并使用 intent 启动 Activity:

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 完成,而且您的 Activity 将会恢复。