web-dev-qa-db-fra.com

CardView avec rayon de coin différent

J'ai le CardView suivant et je veux définir un rayon différent pour chaque coin de la carte. Est-il possible de les changer par XML ou par programmation? Merci d'avance.

<Android.support.v7.widget.CardView 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_marginRight="16dp"
    Android:layout_marginLeft="16dp"
    Android:layout_marginTop="5dp"
    Android:layout_marginBottom="5dp"
    app:cardCornerRadius="0dp"
    app:cardElevation="0dp">
</Android.support.v7.widget.CardView>

[~ # ~] modifier [~ # ~] Comme le suggère Avinash, je recherche le comportement de cette lib github.com/ captain-miao/OptionRoundCardview mais en utilisant l'élément CardView par défaut. S'il n'est pas possible de le changer individuellement, cette lib est une bonne approche.

androidandroid-layoutmaterial-designandroid-cardviewmaterial-components-android
11
Juanje

Il nécessite l'officiel MaterialCardView (qui étend le androidx.cardview.widget.CardView ) et la version 1.1.0 de la bibliothèque de composants matériels .

Ajoutez à votre mise en page le MaterialCardView:

    <com.google.Android.material.card.MaterialCardView
        style="@style/CustomCardViewStyle"
        ...>

    </com.google.Android.material.card.MaterialCardView>

Définissez un style personnalisé héritant d'un style de carte matière (par exemple Widget.MaterialComponents.CardView) et utilisez l'attribut shapeAppearanceOverlay:

  <style name="CustomCardViewStyle" parent="@style/Widget.MaterialComponents.CardView">
     <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay_card_custom_corners</item>
  </style>


  <style name="ShapeAppearanceOverlay_card_custom_corners" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">4dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">16dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

enter image description here

Vous pouvez également y parvenir par programme.
Appliquez simplement un ShapeAppearanceModel personnalisé aux coins de la carte.
Quelque chose comme:

float radius = getResources().getDimension(R.dimen.my_corner_radius);
cardView.setShapeAppearanceModel(
  cardView.getShapeAppearanceModel()
      .toBuilder()
      .setTopLeftCorner(CornerFamily.ROUNDED,..)
      .setTopRightCorner(CornerFamily.ROUNDED,..)
      .setBottomRightCorner(CornerFamily.ROUNDED,radius)
      .setBottomLeftCornerSize(0)
      .build());

Remarque: il nécessite la version 1.1.0 de la bibliothèque. Actuellement:

implementation 'com.google.Android.material:material:1.1.0'
19
Gabriele Mariotti

Vous pouvez créer un xml personnalisé et le nommer rounded_corners.xml comme ça:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:Android="http://schemas.Android.com/apk/res/Android">
<corners Android:radius="1dp"
    Android:topLeftRadius="20dp"
    Android:topRightRadius="30dp"
    Android:bottomLeftRadius="40dp"
    Android:bottomRightRadius="50dp"/>
<solid Android:color="your_background_color" />
</shape>

Et puis utilisez ceci comme arrière-plan pour votre CardView:

Android:background="@drawable/rounded_corners"

EDIT: Je viens de remarquer que cela peut fonctionner pour toutes les autres vues autres que CardView, donc référez-vous à cette question pour voir comment faire une solution de contournement.

3
Vucko

Salut, vous pouvez l'ajouter par programme ou par xml avec le code suivant.

app:cardCornerRadius="0dp"// xml
cardView.setRadius(0);

celui-ci est extra qui cherche l'élévation

app:cardElevation="0.7dp"//xml
app:cardMaxElevation="1dp"//xml
cardView.setCardElevation(2.1f);//code
cardView.setMaxCardElevation(3f);//code

La représentation complète Java du XML de CardView).

CardView cardView = (CardView) findViewById(R.id.cardView);
cardView.setUseCompatPadding(true);
cardView.setContentPadding(30, 30, 30, 0);
cardView.setPreventCornerOverlap(true);
cardView.setCardBackgroundColor(Color.WHITE);
cardView.setCardElevation(2.1f);
cardView.setRadius(0);
cardView.setMaxCardElevation(3f);
0
Avinash Ajay Pandey