web-dev-qa-db-fra.com

Rembourrage inutile dans CardView?

J'ai implémenté CardView dans mon application et tout fonctionne correctement, à l'exception d'un léger remplissage autour de l'image si je mets un rayon sur la carte.

Cela ressemble à ceci: screenshot_2014-12-27-20-31-55

Mais dans Docs Android et dans cet article l’image prend toute la carte, alors pouvez-vous m'aider à atteindre cet objectif?.

Mon fichier de mise en page est comme:

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

<Android.support.v7.widget.CardView
    Android:layout_width="match_parent"
    Android:layout_height="200dp"
    card_view:cardBackgroundColor="@Android:color/white"
    card_view:cardCornerRadius="4dp">

    <ImageView
        Android:id="@+id/media_image_view"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:scaleType="centerCrop"/>

        <RelativeLayout
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:layout_gravity="bottom"
            Android:alpha="0.8"
            Android:background="?attr/colorPrimary"
            Android:padding="4dp">

            <TextView
                Android:id="@+id/media_download"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_alignParentRight="true"
                Android:textSize="11sp"/>

            <TextView
                Android:id="@+id/category_name"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_alignParentLeft="true"
                Android:textColor="@color/primary_text"
                Android:textSize="12sp"/>

        </RelativeLayout>

</Android.support.v7.widget.CardView>

</LinearLayout>

REMARQUE: la capture d'écran est capturée sur un périphérique pré-Lollipop.

androidandroid-layoutandroid-5.0-lollipopandroid-cardview
31
Ram Patra

Je suis passé par la documentation de développeur encore et ai trouvé que:

Sur les API 20 et antérieures, CardView ne coupe pas les limites de la carte pour les coins arrondis. Au lieu de cela, il ajoute un remplissage au contenu afin d'éviter tout chevauchement avec les coins arrondis.

Donc, pour les appareils pré-Lollipop, je dois appeler setPreventCornerOverlap (false); sur la vue carte.

Update: La même chose peut être faite avec du code XML en ajoutant app:cardPreventCornerOverlap="false" en vue carte.

65
Ram Patra

Le paramétrage de app:cardPreventCornerOverlap="false" résoudra le problème, mais supprimera également tous les périphériques antérieurs à Lollipop. Si vous voulez un coin arrondi sur tous les appareils, ajoutez-le manuellement: 

card_view_round_corner_background.xml 

    <?xml version="1.0" encoding="utf-8"?>      
    <layer-list xmlns:Android="http://schemas.Android.com/apk/res/Android">        
    <item>      
    <shape Android:shape="rectangle">                
        <solid Android:color="@color/transparent"/>                
        <stroke  Android:width="2dp" Android:color="@color/Black"/>
        </shape>
        </item>
        <item>            
    <shape Android:shape="rectangle">
    <solid Android:color="@color/transparent"/>             
    <corners Android:radius="6dp"/>              
     <stroke  Android:width="2dp" Android:color="@color/Black"/>           
     </shape>
    </item>
    </layer-list>

Dans cardview

    <Android.support.v7.widget.CardView Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:focusable="true"
    Android:clickable="true"
    Android:foreground="?android:attr/selectableItemBackground"card_view:cardCornerRadius="@dimen/conner_radius"
    card_view:cardBackgroundColor="@color/Black"
    card_view:cardElevation="@dimen/z_card">

    <!-- Put your card contain here -->  

    <View
    Android:background="@drawable/card_view_round_corner_border"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    />

Mais cette solution ne fonctionne que sur un fond solide tel que le noir ou le blanc. 

1
thanhbinh84

Il suffit d'utiliser FrameLayout au lieu de LinearLayout, cela fonctionne

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginBottom="-4dp">

    <Android.support.v7.widget.CardView
        Android:id="@+id/card_view"
        xmlns:card_view="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="fill_parent"
        Android:layout_height="100dp"
        Android:layout_gravity="center"
        Android:layout_margin="5dp"
        card_view:cardCornerRadius="4dp"
        card_view:cardPreventCornerOverlap="false"
        card_view:cardUseCompatPadding="true"

        >

        <FrameLayout
            Android:layout_width="fill_parent"
            Android:layout_height="fill_parent"
            Android:orientation="horizontal"
            >

            <ImageView
                Android:id="@+id/imageView"
                Android:tag="image_tag"
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_margin="5dp"
                Android:layout_weight="1"
                Android:src="@drawable/ic_launcher"/>

            <LinearLayout
                Android:layout_width="0dp"
                Android:layout_height="wrap_content"
                Android:layout_marginTop="5dp"
                Android:layout_weight="2"
                Android:orientation="vertical"
                >

                <TextView
                    Android:id="@+id/textViewName"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center_horizontal"
                    Android:layout_marginTop="5dp"
                    Android:text="Android Name"
                    Android:textAppearance="?android:attr/textAppearanceLarge"/>

                <TextView
                    Android:id="@+id/textViewVersion"
                    Android:layout_width="wrap_content"
                    Android:layout_height="wrap_content"
                    Android:layout_gravity="center_horizontal"
                    Android:layout_marginTop="5dp"

                    Android:text="Android Version"
                    Android:textAppearance="?android:attr/textAppearanceMedium"/>

            </LinearLayout>
        </FrameLayout>

    </Android.support.v7.widget.CardView>

</FrameLayout>
0
Jitendra Bansiwal