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 클래스는 Wearable Support Library에서 지원 중단된 유사한 클래스를 대체합니다.

타이머가 끝나거나 사용자가 탭할 때 알림을 받으려면 해당하는 리스너 메서드를 활동에 구현합니다.

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

자바

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

자바

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

자바

    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가 완료되고 활동이 계속됩니다.