6
votes

Différentes valeurs de rayon de coin pour un MaterialCardView

Est-il possible d'avoir des valeurs différentes pour chaque rayon de coin d'une MaterialCardView? Et si oui comment?

J'ai essayé quelque chose comme le code ci-dessous mais cela ne semble pas avoir d'effet

@BindView(R.id.container) MaterialCardView container;

où se trouve le conteneur

    float radius = getContext().getResources().getDimension(R.dimen.default_corner_radius);
    ShapePathModel leftShapePathModel = new ShapePathModel();
    leftShapePathModel.setTopLeftCorner(new RoundedCornerTreatment(radius));
    leftShapePathModel.setTopRightCorner(new RoundedCornerTreatment(radius));
    MaterialShapeDrawable bg = new MaterialShapeDrawable(leftShapePathModel);
    container.setBackground(bg);


4 commentaires

au lieu de publier le lien, publiez le code relatif que vous avez essayé.


C'est fait, désolé! :)


Tout d'abord, postez toujours votre code dans une question. Deuxièmement, avez-vous vérifié toutes les solutions sur Stackoverflow? Avez-vous essayé ceci: stackoverflow.com/questions/29342633/cardview-corner-radius < / a>


J'ai vu cet article, mais j'espérais qu'il existe une meilleure solution que d'imbriquer deux vues de carte. J'ai trouvé ce problème issuetracker.google.com/issues/117662587 qui semble résoudre mon problème mais Je ne sais pas trop comment l'utiliser et je n'ai pas trouvé beaucoup de documentation à ce sujet.


4 Réponses :


2
votes

Je pense que vous devriez pouvoir appeler ShapeAppearanceModel shape = ((MaterialShapeDrawable) container.getBackground ()). getShapeAppearanceModel () sur votre MaterialCardView . De là, vous pouvez appeler setTopLeftCorner () ou les autres méthodes pour définir des traitements d'angle avec des valeurs différentes. Vous devrez peut-être appeler container.invalidate () après avoir défini les coins.


2 commentaires

Merci pour cela, mais malheureusement, l'arrière-plan renvoyé par MatericalCardView ne peut pas être converti en MaterialShapeDrawable. Cependant, l'invalidation du conteneur à l'aide du code que j'ai publié initialement semble avoir résolu le problème.


Je pense qu'il pourrait utiliser un LayerDrawable pour l'envelopper avec d'autres choses. Malheureusement pour l'instant, il semble que ce ne soit pas si facile d'y accéder. Nous travaillons pour faciliter la tâche pour chaque composant.



1
votes

Ma solution initiale était correcte mais il manquait une ligne:

container.invalidate()

Si vous ajoutez

float radius = getContext().getResources().getDimension(R.dimen.default_corner_radius);
ShapePathModel leftShapePathModel = new ShapePathModel();
leftShapePathModel.setTopLeftCorner(new RoundedCornerTreatment(radius));
leftShapePathModel.setTopRightCorner(new RoundedCornerTreatment(radius));
MaterialShapeDrawable bg = new MaterialShapeDrawable(leftShapePathModel);
container.setBackground(bg);

comme suggéré par Cameron au-dessus semble fonctionner.


1 commentaires

cela ne recadre pas le contenu, donc le contenu rectangulaire s'écoule à l'extérieur sur ces coins



7
votes

Vous pouvez utiliser un style personnalisé et l'attribut shapeAppearanceOverlay .

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

ou vous pouvez postuler un ShapeAppearanceModel strong> dans le coin de la carte en utilisant quelque chose comme:

  <style name="MyCardView" parent="@style/Widget.MaterialComponents.CardView">
    <item name="shapeAppearanceOverlay">@style/ShapeAppearanceOverlay.MaterialCardView.Cut</item>
  </style>


  <style name="ShapeAppearanceOverlay.MaterialCardView.Cut" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">8dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
  </style>

 entrez la description de l'image ici


8 commentaires

Affiche les coins arrondis sur le studio Android, mais sur l'appareil, tout est rectangulaire!


@VarunRaj utilisez-vous 1.1.0-alpha10? J'ai juste essayé et les deux avec ShapeAppearanceModel et shapeAppearanceOverlay avec les valeurs de l'exemple sur Android P / Q, le résultat est la même capture d'écran jointe à la réponse.


implementation 'com.google.android.material: material: 1.1.0-alpha10' ligne directement depuis l'application. Fonctionnera-t-il uniquement sur P et Q?


Je viens de le voir de très près, les coins arrondis sont là mais visibles uniquement en faisant glisser ma feuille du bas.


Essayez-vous d'avoir une feuille de fond avec des coins arrondis?


Oui! Mais je veux aussi des ombres, alors j'ai pensé que CardView serait facile et parfait pour le travail.


@VarunRaj Vous pouvez également avoir roundCorners dans le bottomSheet avec le même attribut shapeAppearanceOverlay sans utiliser de carte. Vous pouvez également avoir l'élévation en utilisant xxdp dans le style. Pour le BottomSheet persistant, vous pouvez vérifier cette réponse , pour le modal celui-ci .


cela ne recadre pas le contenu, donc le contenu rectangulaire s'écoule à l'extérieur sur ces coins



0
votes

Essayez ceci également

     <style name="TopCornerCardview" parent="Widget.MaterialComponents.CardView">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSizeTopRight">@dimen/dp25</item>
        <item name="cornerSizeTopLeft">@dimen/dp25</item>
        <item name="cornerSizeBottomRight">0dp</item>
        <item name="cornerSizeBottomLeft">0dp</item>
        <item name="contentPadding">0dp</item>
    </style>

    <com.google.android.material.card.MaterialCardView
            style="@style/TopCornerCardview"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:theme="@style/TopCornerCardview"
            app:cardBackgroundColor="@color/colorAccent"
            app:cardUseCompatPadding="true">

>
<!--views here-->
</com.google.android.material.card.MaterialCardView>


0 commentaires