CardView-Eckradius

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

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:

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.

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>

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:

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.

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>

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

Sie können diese Bibliothek hier bekommen:

https://github.com/mthli/Slice

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

Sie können die Bibliothek verwenden: OptionRoundCardview

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.

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>

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.

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.