突出显示按下的卡片项:使用来自cardslib的CardView

时间:2015-02-21 02:35:23

标签: android highlight cardslib

我在CardListView中使用CardView。 我想知道如何突出显示卡片项目,就像在“CardsLibDemo Extras”应用程序中一样,当您按下“你可能知道”列表中的卡片时,正好在“卡片和天气列表”片段中? 附: :我正在使用API​​ 15(Android 4.0.4冰淇淋三明治)来测试这个应用程序。

这是我的片段布局:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- You can customize this layout.
     You need to have in your layout a `CardView` with the ID `list_cardId` -->
    <it.gmariotti.cardslib.library.view.CardListView
        xmlns:card="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/rent_list"
        android:foreground="?android:attr/selectableItemBackground"
        card:list_card_layout_resourceID="@layout/card_row_layout_rent_list" />

</LinearLayout>

以下是 card_row_layout_rent_list.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <it.gmariotti.cardslib.library.view.CardView
        xmlns:card="http://schemas.android.com/apk/res-auto"
        android:id="@+id/list_cardId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card:card_layout_resourceID="@layout/card_layout"
        style="@style/list_card.base"/>

</LinearLayout>

以下是 card_layout.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- Card visible layout -->
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/card_main_layout"
        style="@style/card.main_layout">

            <it.gmariotti.cardslib.library.view.component.CardThumbnailView
                xmlns:card="http://schemas.android.com/apk/res-auto"    
                style="@style/card_thumbnail_outer_layout"
                android:id="@+id/card_thumbnail_layout"
                android:layout_gravity="center_vertical"
                android:layout_width="wrap_content"                
                android:layout_height="wrap_content"
                card:card_thumbnail_layout_resourceID="@layout/card_image" />

            <FrameLayout                
                android:id="@+id/card_main_content_layout"
                android:layout_gravity="right"
                style="@style/card.content_outer_layout"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />    

    </LinearLayout>

    <!-- Compound view for Shadow
           If you want to customize this element use attr card:card_shadow_layout_resourceID -->
    <it.gmariotti.cardslib.library.view.component.CardShadowView
        style="@style/card.shadow_outer_layout"
        android:id="@+id/card_shadow_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <FrameLayout
        android:id="@+id/card_content_expand_layout"
        style="@style/card.main_contentExpand"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</LinearLayout>

以下是 card_inner_layout_rent_list.xml

<?xml version="1.0" encoding="UTF-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- This is the base Inner View inside a CardHeader.
        You can customize it with your layout xml file and your CardHeader.
        You can popolate your elements with CardHeader#setupInnerViewElements(android.view.ViewGroup, android.view.View) method -->

    <TextView
        android:id="@+id/textViewPrix"
        style="@style/card.header_simple_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="2dp"
        android:text="@string/card_txtPrix"
        android:textColor="@color/blue"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewAdr"
        style="@style/card.expand_simple_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="2dp"
        android:text="@string/card_txtAdr"
        android:textColor="@color/black"
        android:textSize="@dimen/card_expend_simple_title_text_size_16sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/textViewType"
        style="@style/card.expand_simple_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="2dp"
        android:text="@string/card_txtType"
        android:textColor="@color/black"
        android:textSize="@dimen/card_expand_simple_title_text_size_12sp" />

    <TextView
        android:id="@+id/textViewSup"
        style="@style/card.expand_simple_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginTop="1dp"
        android:text="@string/card_txtSup"
        android:textColor="@color/black"
        android:textSize="@dimen/card_expand_simple_title_text_size_12sp" />

    <TextView
        android:id="@+id/textViewHonor"
        style="@style/card.expand_simple_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginTop="0dp"        
        android:text="@string/card_txtHonor"
        android:textSize="@dimen/card_expand_simple_title_text_size_12sp" />

</LinearLayout>

这是 card_image.xml

    <?xml version="1.0" encoding="UTF-8"?>
<ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_thumbnail_image"
    android:layout_width="100dp"
    android:layout_height="100dp"
    android:layout_margin="1dp"
    android:layout_weight="0"
    android:layout_gravity="center"
    android:contentDescription="@string/imageview_desc" 
    android:orientation="vertical"/>

最后,我在这里填写CardList(从片段类中提取):

private void initColorCard() {

        int listImages[] = new int[]{R.drawable.angry_1, R.drawable.angry_2,
                R.drawable.angry_3, R.drawable.angry_4, R.drawable.angry_5};

        ArrayList<Card> cards = new ArrayList<Card>();

        for (int i = 0; i<5; i++) {
            // Create a Card
            ColorCard card = new ColorCard(getActivity());

            //Set onClick listener
            card.setOnClickListener(new Card.OnCardClickListener() {
                @Override
                public void onClick(Card card, View view) {                                     
                    Toast.makeText(getActivity(), "Clickable card : " + card.getCardHeader().getTitle(), Toast.LENGTH_SHORT).show();
                }
            });

            // Create a CardHeader
            CardHeader header = new CardHeader(getActivity());

            // Add Header to card
            header.setTitle("" + i);
            card.addCardHeader(header);

            CardThumbnail thumb = new CardThumbnail(getActivity());
            thumb.setDrawableResource(listImages[i]);
            card.addCardThumbnail(thumb);

            cards.add(card);
        }

        CardArrayAdapter mCardArrayAdapter = new CardArrayAdapter(getActivity(), cards);

        CardListView listView = (CardListView) getActivity().findViewById(R.id.rent_list);

        if (listView != null) {
            listView.setAdapter(mCardArrayAdapter);
        }
    }

知道这段代码中缺少什么,所以任何压出的卡都会突出显示?

1 个答案:

答案 0 :(得分:0)

如果您使用CardViewNative,则必须自定义此样式:

 <style name="card.native.main_layout_foreground">
        <item name="android:foreground">?android:selectableItemBackground</item>
        <item name="android:background">@color/card_native_background</item>
        <item name="android:layout_marginTop">@dimen/card_main_layout_native_view_margin_top</item>
        <item name="android:layout_marginBottom">@dimen/card_main_layout_native_view_margin_bottom</item>
        <item name="android:layout_marginLeft">@dimen/card_main_layout_native_view_margin_left</item>
        <item name="android:layout_marginRight">@dimen/card_main_layout_native_view_margin_right</item>
    </style>

否则,如果您使用的是旧CardView,则可以阅读: https://github.com/gabrielemariotti/cardslib/blob/master/doc/CARD.md#customize-card-background