CardView-Eckradius

90

Gibt es eine Möglichkeit, CardView so zu gestalten, dass oben nur ein Eckenradius angezeigt wird?

<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"
    >
quetschen
quelle

Antworten:

117

Wenn Sie nicht versuchen, die Android- CardViewKlasse zu erweitern, können Sie dieses Attribut nicht anpassen XML.

Es gibt jedoch eine Möglichkeit, diesen Effekt zu erzielen.

Platziere ein CardViewInneres in einem anderen CardViewund wende einen transparenten Hintergrund auf dein Äußeres an CardViewund entferne seinen Eckradius ( "cornerRadios = 0dp"). Ihr Inneres CardViewhat zum Beispiel einen CornerRadius-Wert von 3dp. Wenden Sie dann ein marginTop auf Ihr Inneres an CardView, sodass die unteren Ränder vom Äußeren abgeschnitten werden CardView. Auf diese Weise wird der Radius der unteren Ecke Ihres Inneren CardViewausgeblendet.

Der XML-Code lautet wie folgt:

 <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>

Und der visuelle Effekt ist der folgende:

CardView mit abgerundeten Ecken nur oben

Legen Sie Ihre Inhalte immer in Ihr Inneres CardView. Ihre äußere CardView dient nur dazu, die unteren abgerundeten Ecken der inneren zu "verstecken" CardView.

joao2fast4u
quelle
8
Beachten Sie, dass der Schatten falsch ist (Schatten in der unteren Ecke sind immer noch gerundet) und der Vordergrundwähler merklich falsch wäre.
Ataulm
Ich denke, der einfache Weg @shreedhar bhat beschrieben ist besser
Matei Suica
Sagen Sie, eine Idee, was ist der Standardwert für cardCornerRadius? ist es 4dp?
Android-Entwickler
Ich bin mir nicht sicher, warum alle dies als Antwort markiert haben. Dies ist nicht die richtige Antwort. Ich habe es versucht, aber es funktioniert nicht so, wie es sein sollte.
Visal Varghese
42
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>
Shreedhar Bhat
quelle
8
Können Sie erklären, was dieser Codeblock bewirkt? Ich kann keine Ressourcen scheinen Erklärung über die XML - Eigenschaft zu finden innerRadius, shapeundthicknessRatio
atjua
2
Nur app:cardCornerRadius="40dp"wird auch funktionieren.
Rumit Patel
22

Sie können den Standard verwenden, MaterialCardder in der offiziellen Materialkomponentenbibliothek enthalten ist .

Verwendung in Ihrem Layout:

<com.google.android.material.card.MaterialCardView
        style="@style/MyCardView"
        ...>

Verwenden Sie in Ihrem Stil das shapeAppearanceOverlayAttribut, um die Form anzupassen (der Standard-Eckenradius ist 4dp)

  <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>

Sie können auch verwenden:

<com.google.android.material.card.MaterialCardView
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
     ...>

Es ist das Ergebnis:

Geben Sie hier die Bildbeschreibung ein

Gabriele Mariotti
quelle
Dies funktioniert nicht mit TabLayout. Meine Ecklaschen sind nicht abgerundet. Meine Anforderung ist, dass nur die oberen Ecken der Registerkarten abgerundet werden sollten, während die unteren Ecken quadratisch bleiben sollten. Kannst du mir dabei helfen?
Tara
2
Wenn Sie dies nur auf eine einzelne Komponente anwenden, können Sie die Überlagerung der Formdarstellung direkt in XML anwenden, ohne einen benutzerdefinierten Stil zu benötigen. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
Affian
8

Es gibt ein Beispiel, wie dies erreicht werden kann, wenn sich die Karte ganz unten auf dem Bildschirm befindet. Wenn jemand ein solches Problem hat, machen Sie einfach so etwas:

<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>

Die Kartenansicht hat einen negativen unteren Rand. Die Ansicht in einer Kartenansicht hat den gleichen, aber positiven unteren Rand. Auf diese Weise werden abgerundete Teile unter dem Bildschirm ausgeblendet, aber alles sieht genauso aus, da die Innenansicht einen Gegenrand hat.

koras
quelle
6

Sie können diese zeichnbare XML-Datei verwenden und als Hintergrund für die Kartenansicht festlegen:

<?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>
Surender Kumar
quelle
Dies funktioniert nicht mit der cardView, die Sie benötigen, um ein Layout zu erstellen, dh. Linear oder Relativ und stellen Sie den Hintergrund ein. dann wird es funktionieren.
Surender Kumar
1
aber was ist dann mit dem Schatteneffekt?
Ravi Rajput
Dafür können Sie die Ebenenliste verwenden. Überprüfen Sie diesen Link .
Surender Kumar
@ SurenderKumar aree bhaii bhaii bhaaiii: D: D
Abhishek
6

Ich habe eine zeichnbare Bibliothek für die benutzerdefinierte runde Eckposition geschrieben. Sie sieht folgendermaßen aus:

example.png

Sie können diese Bibliothek hier bekommen:

https://github.com/mthli/Slice

mthli
quelle
2

Sie müssen zwei Dinge tun:

1) Rufen Sie setPreventCornerOverlap(false)Ihre CardView auf.

2) Fügen Sie eine abgerundete Bildansicht in CardView ein

Beim Runden Ihrer Bildansicht hatte ich das gleiche Problem, daher habe ich eine Bibliothek erstellt, in der Sie an jeder Ecke unterschiedliche Radien festlegen können . Endlich habe ich das Ergebnis bekommen, wie ich es unten haben wollte.

https://github.com/pungrue26/SelectableRoundedImageView

Abgerundete ImageView in CardView

김준호
quelle
1
Und so verwandeln Sie Ihre Android-App in
iOS
0

Sie können die Bibliothek verwenden: OptionRoundCardview

Geben Sie hier die Bildbeschreibung ein

Qinmiao
quelle
Dies zeigt keine abgerundeten Ecken ... Ich verwende API> 23
Ravi Rajput
genügend Randraum hinzufügen?
Qinmiao
Nein, die Ansichten des Kindes stimmen mit den Eltern überein
Ravi Rajput,
Margin ist da
Ravi Rajput
Diese Bibliothek funktioniert nicht mit der Hintergrundfarben-App: optRoundCardBackgroundColor = "@ color / grey" entfernt Eckenradius-Effekte
Kishan Donga
0

Sie können Ihre ImageView in eine CardView einfügen und diese Eigenschaften zur ImageView hinzufügen:

android:cropToPadding="true"
android:paddingBottom="15dp"

Auf diese Weise werden Sie die abgerundete untere Ecke los, aber denken Sie daran, dass dies den Preis für das Abschneiden eines kleinen Teils Ihres Bildes mit sich bringt.

Omzer
quelle
-1

Der einfachste Weg, dies in Android Studio zu erreichen, wird unten erklärt:

Schritt 1:
Schreiben Sie die folgende Zeile in Abhängigkeiten in build.gradle:

compile 'com.android.support:cardview-v7:+'

Schritt 2:
Kopieren Sie den folgenden Code in Ihre XML-Datei, um die zu integrieren CardView.

Um cardCornerRadiuszu arbeiten, müssen Sie die folgende Zeile in das übergeordnete Layout einfügen: xmlns:card_view="http://schemas.android.com/apk/res-auto"

Und denken Sie daran, card_viewals Namespace für die Verwendung von cardCornerRadiusEigenschaften zu verwenden.

Zum Beispiel : card_view:cardCornerRadius="4dp"

XML-Code:

<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>
Mythos
quelle
4
Er will es nur oben.
Heisenberg
2
Dies ist zwar keine Antwort auf diese Frage, aber es hat mir sehr geholfen, ein umwerfendes Problem mit Namespaces zu finden! :)
Fragment
1
Dies ist nicht die Antwort auf die spezifische Frage, aber es hat vielen Benutzern geholfen.
Mythos
-1

Ein einfacher Weg, dies zu erreichen, wäre:

1.Erstellen Sie eine benutzerdefinierte Hintergrundressource (wie eine Rechteckform) mit abgerundeten Ecken.

2.Stellen Sie diesen benutzerdefinierten Hintergrund mit dem Befehl -

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

das hat bei mir funktioniert.

Das XMLLayout habe ich mit Radius oben links und unten rechts gemacht.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>

In Ihrem Fall müssen Sie nur topLeftRadius sowie topRightRadius ändern.

Wenn Sie ein Layout haben, das sich mit den Ecken der Kartenansicht überschneidet und möglicherweise eine andere Farbe hat, benötigen Sie möglicherweise eine andere Hintergrundressourcendatei für das Layout und stellen diese Hintergrundressource in der XML auf Ihr Layout ein.

Ich habe die obige Methode ausprobiert und getestet. Hoffe das hilft dir.

Ankit Deshmukh
quelle
-2

Wenn Sie den Kartenhintergrund programmgesteuert einstellen, verwenden Sie "Verwenden" cardView.setCardBackgroundColor()und "Nicht verwenden" cardView.setBackgroundColor()und stellen Sie sicher, dass Sie "Verwenden" app:cardPreventCornerOverlap="true"in der Datei "cardView.xml" verwenden. Das hat es für mich behoben.

Übrigens ist der obige Code (in Anführungszeichen) in Kotlin und nicht in Java. Verwenden Sie das Java-Äquivalent, wenn Sie Java verwenden.

Joseph Magara
quelle