> 編寫: [roya](https://github.com/RoyaAoki) 原文:[https://developer.android.com/training/wearables/ui/cards.html](https://developer.android.com/training/wearables/ui/cards.html) 卡片以一致的外觀在不同的apps上為用戶呈現當前信息。這個章節為你演示了如何在你的Android Wear apps中創建卡片。 Wearable UI Library提供了為穿戴設備特別設計的卡片實現。這個庫包含了 _CardFrame_ 類，它在卡片風格的框架中包裹views，且提供一個白色的背景，圓角，和光投射陰影。_CardFrame_ 只能包裹一個直接的子view，這通常是一個layout manager，你可以向它添加其他views以定制卡片內容。 你有兩種方法向你的app添加cards： - 直接使用或繼承 _CardFragment_ 類。 - 在你的layout內，在一個 _CardScrollView_ 中添加一個card。 > _Note:_ 這個課程為你展示了如何在Android Wear activities中添加cards。Android可穿戴設備上的notifications同樣以卡片顯示。更多信息請查看 [Adding Wearable Features to Notifications](https://developer.android.com/training/wearables/notifications/index.html) ### 創建Card Fragment _CardFragment_ 類提供一個默認card layout含有一個title一個description和一個icon，如果你需要的card layout看起來和默認figure 1一樣，使用這個方法向你的app添加cards。  **Figure 1.** 默認的 _CardFragment_ layout. 為了添加一個 _CardFragment_ 到你的app： - 在你的layout為包含內容卡片的節點分配一個ID - 在你的[activity](# "An activity represents a single screen with a user interface.")中創建一個 _CardFragment_ 實例 - 使用fragment manager添加 _CardFragment_ 實例到這個容器 下面的示例代碼顯示了Figure 1中的屏幕顯示代碼： ~~~ <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"> <FrameLayout android:id="@+id/frame_layout" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_box="bottom"> </FrameLayout> </android.support.wearable.view.BoxInsetLayout> ~~~ 下面的代碼添加_CardFragment_ 實例到Figure 1的[activity](# "An activity represents a single screen with a user interface.")中： ~~~ protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear_activity2); FragmentManager fragmentManager = getFragmentManager(); FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction(); CardFragment cardFragment = CardFragment.create(getString(R.string.cftitle),getString(R.string.cfdesc),R.drawable.p); fragmentTransaction.add(R.id.frame_layout, cardFragment); fragmentTransaction.commit(); } ~~~ 為了創建使用自定義layout的card，繼承這個類然后override onCreateContentView方法。 ### 添加一個CardFrame到你的Layout 你也可以直接添加一個card到你的layout描述，類似于figure 2。當你希望為layout描述文件中的card自定義一個layout時使用這個方法。  **Figure 2.** 添加一個 _CardFrame_ 到你的layout. 下面的layout代碼例子示范了一個含有兩個節點的垂直linear layout。你可以創建更加復雜的layouts以適合你需要的app。 ~~~ <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.support.wearable.view.CardScrollView android:id="@+id/card_scroll_view" android:layout_height="match_parent" android:layout_width="match_parent" app:layout_box="bottom"> <android.support.wearable.view.CardFrame android:layout_height="wrap_content" android:layout_width="fill_parent"> <LinearLayout android:layout_height="wrap_content" android:layout_width="match_parent" android:orientation="vertical" android:paddingLeft="5dp"> <TextView android:fontFamily="sans-serif-light" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="@string/custom_card" android:textColor="@color/black" android:textSize="20sp"/> <TextView android:fontFamily="sans-serif-light" android:layout_height="wrap_content" android:layout_width="match_parent" android:text="@string/description" android:textColor="@color/black" android:textSize="14sp"/> </LinearLayout> </android.support.wearable.view.CardFrame> </android.support.wearable.view.CardScrollView> </android.support.wearable.view.BoxInsetLayout> ~~~ 這個例子上的 _CardScrollView_ 節點讓你可以配置gravity，當包含的內容小于容器時。這個例子為card對齊屏幕底部： ~~~ @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_wear_activity2); CardScrollView cardScrollView = (CardScrollView) findViewById(R.id.card_scroll_view); cardScrollView.setCardGravity(Gravity.BOTTOM); } ~~~ _CardScrollView_ 檢查屏幕形狀后以不同的顯示方式顯示卡片在圓形或方形設備上，它使用更寬的側邊緣在圓形屏幕上。不管怎樣，在 _BoxInsetLayout_ 中放置 _CardScrollView_ 節點然后使用layout_box="bottom"屬性對圓形屏幕上的卡片對齊底部并且沒有內容被剪裁是有有用的。