> 編寫: [roya](https://github.com/RoyaAoki) 原文:[https://developer.android.com/training/wearables/ui/layouts.html](https://developer.android.com/training/wearables/ui/layouts.html) 可穿戴設備使用與手持Android設備同樣的布局技術，但需要有具體的約束來設計。不要以一個手持app的角度開發功能和UI以期待提供一個好的體驗。關于如何設計優秀的可穿戴apps的更多信息，請閱讀[Android Wear Design Guidelines](https://developer.android.com/design/wear/index.html)。 當你為Android Wear apps創建layouts時，你需要同時考慮方形和圓形屏幕的設備。在圓形Android Wear設備上所有放置在靠近屏幕邊角的內容會被剪裁掉，所以為方形屏幕設計的layouts不能在圓形設備上很好的工作。對這類問題是示范請查看這個視屏[Full Screen Apps for Android Wear](https://www.youtube.com/watch?v=naf_WbtFAlY)。 舉個例子，figure 1展示了下面的layout在圓形和方形屏幕上看起來是怎樣的：  **Figure 1.**_為方形屏幕設計的layouts不能在圓形設備上很好工作的示范_ ~~~ <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <TextView android:id="@+id/text" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/hello_square" /> </LinearLayout> ~~~ text沒有正確的顯示在圓形屏幕上。 Wearable UI Library為這個問題提供了兩種不同的解決方案： - 為圓形和方形屏幕定義不同的layouts。你的app會在運行時檢查設備屏幕形狀后inflates正確的layout。 - 用一個包含在library里面的特殊layout同時適配方形和圓形設備。這個layout會在不同形狀的設備屏幕窗口中插入間隔。 當你希望你的app在不同形狀的屏幕上看起來不同時，你可以典型的使用第一種方案。當你希望用一個相似的layout在兩種屏幕上且在圓形屏幕上沒有視圖被邊緣剪裁時，你可以使用第二種方案。 ### 添加Wearable UI庫 Android Studio會在你使用工程向導時includes你在**wear** module中的Wearable UI庫。為了編譯你的工程和這個庫，確保 _Extras > Google Repository_ 包已經被安裝在Android SDK manager里、以下的**wear** module依賴被包含在你的**build.gradle**文件中。 ~~~ dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.google.android.support:wearable:+' compile 'com.google.android.gms:play-services-wearable:+' } ~~~ 要實現以下的布局方法 **'com.google.android.support:wearable'** 依賴是必須的。 瀏覽[API reference documentation](https://developer.android.com/reference/android/support/wearable/view/package-summary.html)查看Wearable UI類庫。 ### 為方形和圓形屏幕指定不同的Layouts 在Wearable UI庫中的**WatchViewStub**類允許你為方形和圓形屏幕指定不同的layouts。這個類會在運行時檢查屏幕形狀后inflates符合的layout。 在你的app中使用這個類以應對不用和的屏幕形狀： - 在你的[activity](# "An activity represents a single screen with a user interface.")'s layout以WatchViewStub為主元素。 - 為方形屏幕指定一個layout解釋文件使用rectLayout屬性。 - 為圓形屏幕指定一個layout解釋文件使用roundLayout屬性。 定義你的[activity](# "An activity represents a single screen with a user interface.")'s layout類似于： ~~~ <android.support.wearable.view.WatchViewStub xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/watch_view_stub" android:layout_width="match_parent" android:layout_height="match_parent" app:rectLayout="@layout/rect_activity_wear" app:roundLayout="@layout/round_activity_wear"> </android.support.wearable.view.WatchViewStub> ~~~ 在你的[activity](# "An activity represents a single screen with a user interface.")中inflate這個layout： ~~~ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear); } ~~~ 然后為方形和圓形屏幕創建不同的layout描述文件，在這個例子中，你需要創建文件 _res/layout/rect_activity_wear.xml_ 和 _res/layout/round_activity_wear.xml_ 。像創建手持apps的layouts一樣定義這些layouts，但同時考慮可穿戴設備的限制。系統會在運行時以屏幕形狀inflates適合的layout。 ### 取得layout views 你為方形或圓形屏幕定義的layouts在WatchViewStub檢查完屏幕形狀之前不會被inflated。所以你的app不能立即取得它們的views。為了取得這些views，你需要在你的[activity](# "An activity represents a single screen with a user interface.")中設置一個listener，當屏幕適配的layout被inflated時會通知這個listener： ~~~ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear); WatchViewStub stub = (WatchViewStub) findViewById(R.id.watch_view_stub); stub.setOnLayoutInflatedListener(new WatchViewStub.OnLayoutInflatedListener() { @Override public void onLayoutInflated(WatchViewStub stub) { // Now you can access your views TextView tv = (TextView) stub.findViewById(R.id.text); ... } }); } ~~~ ### 使用形狀感知的Layout 包含在你的Wearable UI庫中的 **BoxInsetLayout** 繼承自 [FrameLayout](https://developer.android.com/reference/android/widget/FrameLayout.html)允許你定義一個同時適配方形和圓形屏幕的layout。這個類適用于需要根據屏幕形狀插入間隔的情況并允許你簡單的對齊views在屏幕邊緣或中心。 figure 2中，在 **BoxInsetLayout** 里的灰色方形區域會在圓形屏幕里應用所需的窗口間隔后自動放置child views。為了顯示在這個區域內，子views需要具體聲明附加屬性 _layout_box_ 為這些值： - 一個_top_, _bottom_, _left_, _right_的復合屬性。比如 _"left|top"_ 說明子view的左和上邊緣如figure 2。 - _all_ 說明子view的內容在灰色方形內如figure 2。  **Figure 2.**_在圓形屏幕上的窗口間隔_ 在方形屏幕上，窗口間隔為0、 _layout_box_ 屬性會被忽略。  **Figure 3.**_同一個layout定義工作在方形和圓形屏幕上_ 這個layout在figure 3中展示了在圓形和方形屏幕上使用 _BoxInsetLayout_ ： ~~~ <android.support.wearable.view.BoxInsetLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" * android:background="@drawable/robot_background" android:layout_height="match_parent" android:layout_width="match_parent" * android:padding="15dp"> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" * android:padding="5dp" * app:layout_box="all"> <TextView android:gravity="center" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="@string/sometext" android:textColor="@color/black" /> <ImageButton android:background="@null" android:layout_gravity="bottom|left" android:layout_height="50dp" android:layout_width="50dp" android:src="@drawable/ok" /> <ImageButton android:background="@null" android:layout_gravity="bottom|right" android:layout_height="50dp" android:layout_width="50dp" android:src="@drawable/cancel" /> </FrameLayout> </android.support.wearable.view.BoxInsetLayout> ~~~ 注意layout中這些被加*的部分 - android:padding="15dp" 這行指定了 _BoxInsetLayout_ 元素的padding。因為在圓形設備商窗口間隔大于15dp，這個padding只工作在方形屏幕上。 - android:padding="5dp" 這行指定 _FrameLayout_ 內部的元素padding。這個padding同時生效在方形和圓形屏幕上。在方形屏幕上總的padding是20dp(15+5)、在圓形屏幕上是5dp。 - app:layout_box="all" 這行聲明 _FrameLayout_ 和它的子views都被放在有窗口間隔的圓形屏幕里。這行在方形屏幕上沒有任何效果。