Rayon d'angle CardView
Existe-t-il un moyen de faire en sorte que CardView ait uniquement un rayon de coin en haut?
<Android.support.v7.widget.CardView
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:tools="http://schemas.Android.com/tools"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
app:cardCornerRadius="10dp"
>
Si vous n'essayez pas d'étendre la classe CardView sous Android, vous ne pouvez pas personnaliser cet attribut à partir de XML.
Néanmoins, il existe un moyen d'obtenir cet effet.
Placez un CardView dans un autre CardView et appliquez un fond transparent à votre CardView extérieur et supprimez son rayon de coin ("cornerRadios = 0dp"). Votre CardView interne aura une valeur cornerRadius de 3dp, par exemple. Appliquez ensuite un marginTop à votre CardView intérieur afin que ses limites inférieures soient coupées par le CardView extérieur. De cette façon, le rayon du coin inférieur de votre CardView intérieur sera masqué.
Le code XML est le suivant:
<Android.support.v7.widget.CardView
xmlns:card_view="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/card_view_outer"
Android:layout_width="match_parent"
Android:layout_height="200dp"
Android:layout_gravity="center"
card_view:cardBackgroundColor="@Android:color/transparent"
card_view:cardCornerRadius="0dp"
card_view:cardElevation="3dp" >
<Android.support.v7.widget.CardView
xmlns:card_view="http://schemas.Android.com/apk/res-auto"
Android:id="@+id/card_view_inner"
Android:layout_width="match_parent"
Android:layout_height="200dp"
Android:layout_gravity="center"
Android:layout_marginTop="3dp"
card_view:cardBackgroundColor="@color/green"
card_view:cardCornerRadius="4dp"
card_view:cardElevation="0dp" >
</Android.support.v7.widget.CardView>
</Android.support.v7.widget.CardView>
Et l'effet visuel est le suivant:
Mettez toujours votre contenu dans votre CardView intérieur. Votre CardView externe sert uniquement à "masquer" les coins arrondis inférieurs de la CardView intérieure.
dependencies: compile 'com.Android.support:cardview-v7:23.1.1'
<Android.support.v7.widget.CardView
Android:layout_width="80dp"
Android:layout_height="80dp"
Android:elevation="12dp"
Android:id="@+id/view2"
app:cardCornerRadius="40dp"
Android:layout_centerHorizontal="true"
Android:innerRadius="0dp"
Android:shape="ring"
Android:thicknessRatio="1.9">
<ImageView
Android:layout_height="80dp"
Android:layout_width="match_parent"
Android:id="@+id/imageView1"
Android:src="@drawable/Your_image"
Android:layout_alignParentTop="true"
Android:layout_centerHorizontal="true">
</ImageView>
</Android.support.v7.widget.CardView>
J'ai écrit une bibliothèque tirable à la position du coin arrondi personnalisé, il ressemble à ceci:
Vous pouvez obtenir cette bibliothèque ici:
Vous pouvez utiliser ce fichier XML dessinable et définir comme arrière-plan cardview:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="#ffffffff"/>
<stroke Android:width="1dp"
Android:color="#ff000000"
/>
<padding Android:left="1dp"
Android:top="1dp"
Android:right="1dp"
Android:bottom="1dp"
/>
<corners
Android:topLeftRadius="7dp"
Android:topRightRadius="7dp"/>
</shape>
Voici un exemple de réalisation, lorsque la carte est tout en bas de l'écran. Si quelqu'un a ce genre de problème, faites quelque chose comme ça:
<Android.support.v7.widget.CardView
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_marginBottom="-5dp"
card_view:cardCornerRadius="4dp">
<SomeView
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginBottom="5dp">
</SomeView>
</Android.support.v7.widget.CardView>
La vue de carte a une marge inférieure négative. La vue dans une vue de carte a la même marge inférieure, mais positive. De cette façon, les parties arrondies sont cachées sous l'écran, mais tout a exactement la même apparence, car la vue interne a une marge de comptage.
Vous devez faire 2 choses:
1) Appelez setPreventCornerOverlap(false) sur votre CardView.
2) Placez arrondi ImageView dans CardView
À propos de l’arrondissement de votre imageview, j’avais le même problème et j’ai donc créé une bibliothèque sur laquelle vous pouvez définir rayons différents à chaque angle. Enfin, j'ai obtenu le résultat que je voulais comme ci-dessous.
https://github.com/pungrue26/SelectableRoundedImageView
Un moyen facile d'y parvenir serait:
1.Faites une ressource d’arrière-plan personnalisée (comme une forme de rectangle) avec des coins arrondis.
2.set cet arrière-plan personnalisé en utilisant la commande -
cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);
cela a fonctionné pour moi.
La disposition XML que j'ai faite avec le rayon en haut à gauche et en bas à droite.
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<solid Android:color="@color/white" />
<corners Android:topLeftRadius="18dp" Android:bottomRightRadius="18dp" />
</shape>
Dans votre cas, vous devez modifier uniquement topLeftRadius ainsi que topRightRadius.
Si vous avez une mise en page qui chevauche les coins de la vue de carte et a une couleur différente, vous aurez peut-être besoin d'un fichier de ressources d'arrière-plan différent pour la mise en page et définissez dans xml cette ressource en arrière-plan.
J'ai essayé et testé la méthode ci-dessus. J'espère que cela vous aide.
Si vous configurez l’arrière-plan de la carte par programmation, utilisez plutôt cardView.setCardBackgroundColor() et non cardView.setBackgroundColor() et assurez-vous que vous utilisez app:cardPreventCornerOverlap="true" sur le fichier cardView.xml. Cela a réglé le problème pour moi.
Au fait, le code ci-dessus (entre guillemets) est en Kotlin et non en Java. Utilisez l'équivalent Java si vous utilisez Java.
vous pouvez utiliser la bibliothèque: OptionRoundCardview
