Anroid Wear OS 手錶應用開發 - UI

Wear UI

智能手錶相對手機來講，因爲使用場景不一樣，且屏幕較小，因此應用的設計、交互和手機是有些區別的。相對來講，佈局會更簡潔，更多地使用滑動手勢進行操做。

爲此，在 Wear OS 上，官方提供了一系列新的控件和交互，經過它們，咱們能夠很方便地打造出一個適合手錶交互的應用。

添加依賴

下面用到的控件都來自 Wear 控件庫，須要在 build.gradle 文件中添加如下依賴：

implementation 'com.android.support:wear:28.0.0'
複製代碼

佈局

常見的錶盤有方形和圓形兩種，使用普通佈局的狀況下，可能會出現這種狀況：

爲了使圓形錶盤上的內容不超出邊界，同時兼容方形錶盤，咱們可使用 BoxInsetLayout 這個佈局：

<android.support.wear.widget.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_height="match_parent" android:layout_width="match_parent">

    <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" app:boxedEdges="all">
        
        <...>
        
    </FrameLayout>
    
</android.support.wear.widget.BoxInsetLayout>
複製代碼

這樣能夠在保證方形錶盤不受影響的狀況下，圓形佈局的內容，不會超過顯示邊界：

導航抽屜欄

爲了節省寶貴的顯示空間，一般手錶應用是沒有標題欄的，在使用 ViewPager 的時候，也沒有 TabLayout 的顯示，但所以咱們沒法很好的確認當前頁面。

導航欄 WearableNavigationDrawerView 就是用來解決這個問題的，咱們先看看它的效果：

從手錶頂部向下滑，會出現一個導航欄，顯示當前頁面的圖標和標題。當存在多個頁面時，經過左右滑動它來切換頁面。

下面來看看它的用法，咱們修改佈局文件，使用 WearableDrawerLayout 做爲根佈局，添加導航欄控件：

<android.support.wear.widget.drawer.WearableNavigationDrawerView android:id="@+id/navigation_drawer" android:layout_width="match_parent" android:layout_height="match_parent" app:navigationStyle="multiPage"/>
複製代碼

當存在多個頁面時，須要添加 app:navigationStyle="multiPage" 這個屬性。

和 ViewPager 相似，咱們須要給它設置一個適配器，設置每一個頁面的圖標和標題，像這樣：

class MainDrawerAdapter(context: Context) :
    WearableNavigationDrawerView.WearableNavigationDrawerAdapter() {

    private val mContext = context

    override fun getItemText(pos: Int): CharSequence {
        return when (pos) {
            0 -> "第一頁"
            else -> "第二頁"
        }
    }

    override fun getItemDrawable(pos: Int): Drawable {
        return when (pos) {
            0 -> ContextCompat.getDrawable(mContext, R.drawable.icon_one)!!
            else -> ContextCompat.getDrawable(mContext, R.drawable.icon_two)!!
        }
    }

    override fun getCount(): Int {
        return 2
    }

}
複製代碼

而後在 Activity 中設置：

navigation_drawer.setAdapter(MainDrawerAdapter(this))
navigation_drawer.controller.peekDrawer()
navigation_drawer.addOnItemSelectedListener { pos ->
    // TODO 切換頁面
}
複製代碼

這裏面的 controller.peekDrawer() 是讓導航欄在頂部露出一小部分，提示用戶這裏是有東西能夠下滑的，也能夠調用 controller.closeDrawer() 徹底隱藏導航欄。

操做抽屜欄

當須要對當前頁面進行一些操做的時候，但頁面裏又沒有空間再放按鈕了怎麼辦？既然能夠從頂部下拉出導航欄，要不在底部上拉出一個操做欄？操做欄 WearableActionDrawerView 就是用來作這個的。

經過給操做欄設置 menu 文件，它會以列表的形式展現可操做項，佈局中這麼寫：

<android.support.wear.widget.drawer.WearableActionDrawerView android:id="@+id/action_drawer" android:layout_width="match_parent" android:layout_height="match_parent" app:actionMenu="@menu/action_drawer_menu"/>
複製代碼

代碼中使用：

action_drawer.controller.peekDrawer()
action_drawer.setOnMenuItemClickListener { item -> 
    // TODO 點擊菜單
    true
}
複製代碼

和頂部導航欄相似，controller.peekDrawer() 會在底部露出一小部分操做欄，若是當前頁面是一個列表，這一部分會在列表滑動時隱藏，在列表到頂部和底部時顯示：

露出部分默認會顯示操做欄第一項的圖標，能夠在佈局中添加 app:showOverflowInPeek="true"，讓它顯示豎直三個點的省略圖標。

自定義抽屜欄

導航欄 WearableNavigationDrawerView 和 操做欄 WearableActionDrawerView 用起來很簡單，可是它們的樣式是固定的，一個只能顯示圖標加標題，一個只能顯示 menu 格式的列表。

這兩個控件都繼承自 WearableDrawerView，因此二者均可以經過 WearableDrawerView 來實現自定義樣式。下面是一個簡單的自定義底部抽屜欄佈局：

<android.support.wear.widget.drawer.WearableDrawerView android:id="@+id/action_drawer" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="bottom" app:drawerContent="@+id/drawer_content" app:peekView="@+id/peek_view">

    <FrameLayout android:id="@+id/drawer_content" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical">

        <include layout="@layout/layout_bottom_drawer"/>

    </FrameLayout>

    <FrameLayout android:id="@+id/peek_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center_horizontal" android:paddingTop="8dp" android:paddingBottom="8dp" android:orientation="horizontal">

        <ImageView android:layout_width="16dp" android:layout_height="16dp" android:src="@drawable/icon_omit" tools:ignore="ContentDescription"/>

    </FrameLayout>

</android.support.wear.widget.drawer.WearableDrawerView>
複製代碼

經過 layout_gravity 來設置抽屜欄是在頂部仍是底部。它包裹了抽屜欄的主視圖 drawer_content 和關閉時露出部分的視圖 peek_view。這樣咱們就能夠在 layout_bottom_drawer 中設置本身想要的佈局了，其餘用法都和上面是同樣的。

確認動畫

當處理完某個業務以後，咱們一般須要給用戶一個處理成功或失敗的提示，在 Wear OS 上，咱們能夠用一個 Activity 來展現確認動畫。

ConfirmationActivity 是官方提供的用來展現確認動畫的 Activity。

用起來也很簡單，先在 manifest 文件中註冊：

<manifest>
  <application>
    ...
    <activity android:name="android.support.wearable.activity.ConfirmationActivity">
    </activity>
  </application>
</manifest>
複製代碼

須要顯示確認的時候，經過傳參跳轉就行了：

val intent = Intent(this, ConfirmationActivity::class.java)
intent.putExtra(ConfirmationActivity.EXTRA_ANIMATION_TYPE, ConfirmationActivity.SUCCESS_ANIMATION)
intent.putExtra(ConfirmationActivity.EXTRA_MESSAGE, message)
startActivity(intent)
複製代碼

這裏面，EXTRA_ANIMATION_TYPE 是動畫類型，它有如下三個可選項：

• SUCCESS_ANIMATION
• FAILURE_ANIMATION
• OPEN_ON_PHONE_ANIMATION

EXTRA_MESSAGE 則是要顯示的文字內容。

環形進度條

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 的監聽和操做以下：

// 監聽進度
circular_progress.setOnTimerFinishedListener {
    // TODO 進度完成
}
// 設置進度總時間
circular_progress.totalTime = 1000
// 開始計時
circular_progress.startTimer()
// 結束計時
circular_progress.stopTimer()
複製代碼

列表

若是對比方形錶盤和圓形錶盤的手錶，他們的應用列表界面是這樣的：

在圓形錶盤上，列表是沿着錶盤左邊，曲線排列滾動的。這就是列表控件 WearableRecyclerView 實現的效果。

WearableRecyclerView 繼承自 RecyclerView，因此基本用法都是同樣的。

在佈局中加入：

<android.support.wear.widget.WearableRecyclerView android:id="@+id/wearable_recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" android:scrollbars="vertical" />
複製代碼

代碼中設置：

// 使列表上的第一項和最後一個項在屏幕上垂直居中對齊
wearable_recycler_view.isEdgeItemsCenteringEnabled = true
// 使用 WearableLinearLayoutManager 管理佈局
wearable_recycler_view.layoutManager = WearableLinearLayoutManager(this)
複製代碼

若是想自定義別的滾動效果，咱們能夠經過拓展 WearableLinearLayoutManager.LayoutCallback 來實現，這裏就不展開說了。