Wearable UI庫(kù)提供了為穿戴設(shè)備特別設(shè)計(jì)的Card實(shí)現(xiàn)。這個(gè)庫(kù)包含了CardFrame類，它將view包在一個(gè)Card風(fēng)格的框架中，該框架有白色的背景、圓角和光投射陰影。CardFrame只能包含一個(gè)直接子類，通常是一個(gè)layout管理器，我們可以向它添加其他views以定制Card內(nèi)容。

你有兩種方法向應(yīng)用添加Card：

使用或繼承CardFragment類。
在layout的CardScrollView中添加一個(gè)Card。

Note: 這個(gè)課程展示了如何在Android Wear activities中添加Card。Android可穿戴設(shè)備上的notifications同樣以Card的形式顯示。更多信息請(qǐng)查看為Notification賦加可穿戴特性。

創(chuàng)建Card Fragment

CardFragment類提供一個(gè)默認(rèn)的Card layout，該layout含有一個(gè)標(biāo)題、描述文字和一個(gè)圖標(biāo)。如果figure 1的默認(rèn)Card layout符合你的要求，那么使用這個(gè)方法向你的app添加Card。

http://wiki.jikexueyuan.com/project/android-training-geek/images/05_uilib.png" alt="Figure 1" />

Figure 1. 默認(rèn)的CardFragment layout.

為了添加一個(gè)CardFragment到應(yīng)用中，我們需要：

在layout中，為包含Card的節(jié)點(diǎn)分配一個(gè)ID
在activity中，創(chuàng)建一個(gè)CardFragment實(shí)例
使用fragment管理器將CardFragment實(shí)例添加到它的容器

下面的示例代碼顯示了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實(shí)例到Figure 1的activity中：

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

為了使用CardFragment創(chuàng)建一個(gè)帶有自定義layout的Card，需要繼承這個(gè)類和重寫它的onCreateContentView方法。

添加CardFrame到Layout

我們也可以直接添加一個(gè)Card到layout中，如figure 2所示。當(dāng)希望為layout文件中的Card自定義一個(gè)layout時(shí)，使用這個(gè)方法。

http://wiki.jikexueyuan.com/project/android-training-geek/images/04_uilib.png" alt="" />

Figure 2. 添加一個(gè)CardFrame到layout.

下面的layout代碼例子示范了一個(gè)含有兩個(gè)節(jié)點(diǎn)的垂直linear layout。你可以創(chuàng)建更加復(fù)雜的layouts以適合你應(yīng)用的需要。

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

當(dāng)CardScrollView的內(nèi)容小于容器時(shí)，這個(gè)例子上的CardScrollView節(jié)點(diǎn)讓我們可以配置Card的gravity，。這個(gè)例子是Card對(duì)齊屏幕底部：

@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檢測(cè)屏幕形狀后以不同的顯示方式在圓形或方形設(shè)備上顯示Card（在圓形屏幕上使用更寬的側(cè)邊緣。不管怎樣，在BoxInsetLayout中放置CardScrollView節(jié)點(diǎn)然后使用layout_box="bottom"屬性，這對(duì)圓形屏幕上的Card對(duì)齊底部并且沒(méi)有內(nèi)容被剪裁是很有用的。

上一篇：在 Notifcation 中接收語(yǔ)音輸入下一篇：建立簡(jiǎn)單的用戶界面