web-dev-qa-db-fra.com

Cardview - bordure blanche autour de la carte

J'utilise une vue de carte comme racine d'une vue personnalisée que j'écris. J'utilise la bibliothèque de support v7. Mon XML ressemble à ceci:

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        xmlns:card_view="http://schemas.Android.com/apk/res-auto"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_marginRight="6dp"
        card_view:cardElevation="0dp">

    <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical">

        <!-- some other views -->
    </LinearLayout>
</Android.support.v7.widget.CardView>

Mon problème est que j'obtiens une bordure blanche autour de la vue de ma carte. Il semble qu'il soit là pour indiquer l'élévation car il est plus épais sur le côté droit. J'ai essayé d'ajuster cardElevation et MaxCardElevation dans mon XML comme ceci: card_view:cardElevation="0dp"

et dans le code de ma vue personnalisée qui étend CardView et utilise cette disposition:

setCardElevation(0);
setMaxCardElevation(0);

Mais la bordure blanche persiste. Je ne sais pas comment m'en débarrasser. Si quelqu'un avait une idée de la raison pour laquelle cela se produit ou des suggestions sur la façon de supprimer la bordure blanche, ce serait apprécié. Merci beaucoup.

31
TheMethod

Je sais qu'il est un peu tard, mais pour tous ceux qui ont un problème similaire:

J'ai eu le même problème: une bordure blanche a été affichée sur les appareils pré-Lollipop.

Je l'ai résolu en définissant cardPreventCornerOverlap sur false sur votre XML.

Comme ça:

<Android.support.v7.widget.CardView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:card_view="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_marginRight="6dp"
    card_view:cardPreventCornerOverlap="false">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <!-- some other views -->
    </LinearLayout>
</Android.support.v7.widget.CardView>

J'espère que cela t'aides!

84
pol_databender

Je suis peut-être en retard dans le jeu, mais j'ai eu le même problème. Je voulais juste partager une solution simple!

Ma vue personnalisée a étendu un CardView et j'ai eu une marge appliquée à l'élément racine (c'est-à-dire CardView) dans le XML, tout comme dans la question d'origine. Cela a fini par me donner la bordure blanche supplémentaire comme ceci:

Before

La solution consistait à déplacer la marge de la racine du XML de la vue personnalisée vers la déclaration de votre vue personnalisée (vérifiez les commentaires dans l'extrait de code)

Extrait de code:

<Android.support.v7.widget.CardView
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/cvSettings"
    style="@style/DefaultCardViewStyle"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_margin="@dimen/default_margin" <!-- Remove this -->
    app:cardElevation="@dimen/default_card_elevation">

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">
        .
        .
        .
</Android.support.v7.widget.CardView>

J'ai fini par déplacer la marge vers ma déclaration de vue personnalisée qui s'est débarrassée de la bordure blanche supplémentaire:

<com.example.Android.custom.MyCustomView
        Android:id="@+id/custom_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_margin="@dimen/default_margin" <!-- Move it here-->
        cv:pt_widgetColor="@color/colorAccent" />

Après le changement, beaucoup plus propre :):

enter image description here

3
prerak

CardView ne prend pas en charge l'écrêtage de contenu, car il coûte cher sur les appareils plus anciens. Il est possible de découper du contenu en utilisant les modes Canvas.saveLayer/restoreLayer et PorterDuff. C'est ainsi que Carbon implémente les coins arrondis avec un écrêtage de contenu correct. Voir l'image:

enter image description here

3
Zielony