Android 創(chuàng)建Card

編寫: roya 原文:https://developer.android.com/training/wearables/ui/cards.html

Card在不同的應(yīng)用上以一致的外觀為用戶顯示信息。這個(gè)章節(jié)介紹如何在Android Wear應(yīng)用中創(chuàng)建Card。

Wearable UI庫提供了為穿戴設(shè)備特別設(shè)計(jì)的Card實(shí)現(xiàn)。這個(gè)庫包含了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的形式顯示。更多信息請查看為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。

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è)方法。

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對齊屏幕底部：

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