创建Cards
最后更新于:2022-04-01 01:41:53
> 编写: [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](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-07-28_55b72473a7966.png)
**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时使用这个方法。
![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2015-07-28_55b72473bbcbf.png)
**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"属性对圆形屏幕上的卡片对齐底部并且没有内容被剪裁是有有用的。