Runden Sie nur die obere Ecke der Kartenansicht ab

Lesezeit: 11 Minuten

Ich möchte nur den oberen Rand einer Kartenansicht abrunden.

Ich habe das folgende Grundstück verwendet und es rundet die ganze Ecke ab.

Ich möchte eine Überlappung aller Karten anzeigen

card_view:cardCornerRadius="4dp"

hier ist mein Layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    card_view:cardCornerRadius="4dp"
    card_view:cardPreventCornerOverlap="false"
    >

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:id="@+id/re1">

        <TextView
            android:id="@+id/title"
            android:layout_width="match_parent"
            android:layout_height="20dp"
            android:background="@color/colorAccent"
            android:text="contact det"
            android:gravity="center_vertical"
            android:textColor="@android:color/white"
            android:textSize="14dp"/>

        <TextView
            android:id="@+id/txtName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Name"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/title"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"/>

        <TextView
            android:id="@+id/txtSurname"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Surname"
            android:gravity="center_vertical"
            android:textSize="10dp"
            android:layout_below="@id/txtName"
            android:layout_marginTop="10dp"
            android:layout_marginLeft="5dp"
            />

        <TextView
            android:id="@+id/txtEmail"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Email"
            android:textSize="10dp"
            android:layout_marginTop="10dp"
            android:layout_alignParentRight="true"
            android:layout_marginRight="150dp"
            android:layout_alignBaseline="@id/txtName"/>

        <TextView
            android:id="@+id/txtAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Address"
            android:textSize="10dp"
            android:layout_alignLeft="@id/txtEmail"
            android:layout_alignBaseline="@id/txtSurname"/>

    </RelativeLayout>


    </android.support.v7.widget.CardView>

  • Überprüfen Sie diese Antwort

    – Gabriele Mariotti

    12. Februar 2020 um 7:58 Uhr

Wir können den marginBottom der Kartenansicht auf einen negativen Wert setzen. Der Rand sollte den gleichen Wert wie der Kartenradius haben. Zum Beispiel,

    <FrameLayout
        android:id="@+id/rootview"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

   <android.support.v7.widget.CardView
         android:id="@+id/card_view"
         android:layout_marginBottom="-3dp"
         project:cardCornerRadius="3dp"
         android:layout_width="match_parent"
         android:layout_height="match_parent">

         <!--The child view inside the cardview should have extra padding,so that negative margin will not affect the bottom padding of its child.Here normally we have 16dp bottom padding for child + margin bottom of the parent is 3dp=19dp comes.-->

       <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:paddingBottom="19dp"/>

   </android.support.v7.widget.CardView>
   </FrameLayout>

Es funktioniert für mich. Aber ich bin im Zweifel, ob es der richtige Weg ist. Alle Vorschläge sind willkommen.

  • Dies funktioniert nur, wenn sich die Kartenansicht unten auf dem Bildschirm befindet

    – Trommelfell

    2. August 2017 um 11:40 Uhr

  • aber android:layout_marginBottom=”-3dp” verringerte die Höhe der Kartenansicht jede andere alternative Lösung für dieselbe.

    – Arbaz.in

    19. September 2018 um 6:58 Uhr

  • Danke für die Antwort, aber es funktioniert bei mir nicht auf PreLollipop-Geräten

    – Surendar Dharavath

    6. Dezember 2018 um 9:21 Uhr

  • Großartig! fantastisch!

    – Felipe

    12. Februar 2019 um 16:06 Uhr

  • Probieren Sie dies einfach für eine halbrunde Ansicht aus. Du wirst den Fehler erfahren.

    – Vikas Acharya

    11. Juli 2020 um 4:49 Uhr

Benutzer-Avatar
Ankit Deshmukh

Ich habe dasselbe versucht, aber keine der bereitgestellten Lösungen hat bei mir funktioniert.

Das einzige was funktionierte war:

1) Erstellen Sie eine benutzerdefinierte Hintergrundressource (z. B. eine rechteckige Form) mit abgerundeten Ecken.

2) Legen Sie diesen benutzerdefinierten Hintergrund mit dem Befehl fest –

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

Hat bei mir perfekt funktioniert! Hoffe das hilft dir.

Das XML-Layout, das ich mit Radius oben links und unten rechts erstellt habe.

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

  • Das Problem bei diesem Ansatz besteht darin, dass beim Festlegen des Hintergrunds die meisten Eigenschaften der Kartenansicht verschwinden, z. B. Welleneffekt und Höhe

    – Pulkit

    17. Mai 2019 um 16:44 Uhr

  • Diese Lösung funktioniert nicht. Es funktioniert nur, wenn Sie keinen Teil des Inhalts von CardView ausschneiden müssen – was den Zweck von CardView zunichte macht.

    – Feuern

    9. Juni 2021 um 13:26 Uhr

Oder Sie können verwenden MaterialCardView

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

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

Hier finden Sie eine gute Antwort

  • die beste Lösung

    – Michail

    1. April um 4:54

Benutzer-Avatar
EpicPandaForce

Schwierige Sache, weil Sie CardView nicht dazu bringen können, dies zu tun. Intern verwendet es a RoundRectDrawable (Paket privat) was verwendet roundRect so was:

 // rectf, rx, ry, paint
 canvas.drawRoundRect(mBoundsF, mRadius, mRadius, paint);

Daher benötigen Sie eine andere Lösung, die ich zum Beispiel gefunden habe diesen Kern von Ahmed-Abdelmeged wo sie Leinwandausschnitte für jede Ecke verwenden, indem sie einen Pfad verwenden, um den Umriss zu beschreiben.

Obwohl ich nicht derjenige bin, der diesen Code erstellt hat, werde ich ihn hier für zukünftige Reisende veröffentlichen.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundedView">
        <attr name="topLeftCornerRadius" format="dimension" />
        <attr name="topRightCornerRadius" format="dimension" />
        <attr name="bottomLeftCornerRadius" format="dimension" />
        <attr name="bottomRightCornerRadius" format="dimension" />
    </declare-styleable>
</resources>

und

package com.abdelmeged.ahmed.roundedlayout;

/**
 * Created by ahmed on 9/17/2017.
 */

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Path;
import android.graphics.RectF;
import android.graphics.Region;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;
import android.widget.FrameLayout;

/**
 * Custom wrapper view to get round corner round view
 */
public class RoundedView extends FrameLayout {

    /**
     * The corners than can be changed
     */
    private float topLeftCornerRadius;
    private float topRightCornerRadius;
    private float bottomLeftCornerRadius;
    private float bottomRightCornerRadius;

    public RoundedView(@NonNull Context context) {
        super(context);
        init(context, null, 0);
    }

    public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs, defStyleAttr);
    }

    private void init(Context context, AttributeSet attrs, int defStyle) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs,
                R.styleable.RoundedView, 0, 0);

        //get the default value form the attrs
        topLeftCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_topLeftCornerRadius, 0);
        topRightCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_topRightCornerRadius, 0);
        bottomLeftCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_bottomLeftCornerRadius, 0);
        bottomRightCornerRadius = typedArray.getDimension(R.styleable.
                RoundedView_bottomRightCornerRadius, 0);

        typedArray.recycle();
        setLayerType(View.LAYER_TYPE_SOFTWARE, null);
    }

    @Override
    protected void dispatchDraw(Canvas canvas) {
        int count = canvas.save();

        final Path path = new Path();

        float[] cornerDimensions = {
                topLeftCornerRadius, topLeftCornerRadius,
                topRightCornerRadius, topRightCornerRadius,
                bottomRightCornerRadius, bottomRightCornerRadius,
                bottomLeftCornerRadius, bottomLeftCornerRadius};

        path.addRoundRect(new RectF(0, 0, canvas.getWidth(), canvas.getHeight())
                , cornerDimensions, Path.Direction.CW);

        canvas.clipPath(path);

        super.dispatchDraw(canvas);
        canvas.restoreToCount(count);
    }

    public void setTopLeftCornerRadius(float topLeftCornerRadius) {
        this.topLeftCornerRadius = topLeftCornerRadius;
        invalidate();
    }

    public void setTopRightCornerRadius(float topRightCornerRadius) {
        this.topRightCornerRadius = topRightCornerRadius;
        invalidate();
    }

    public void setBottomLeftCornerRadius(float bottomLeftCornerRadius) {
        this.bottomLeftCornerRadius = bottomLeftCornerRadius;
        invalidate();
    }

    public void setBottomRightCornerRadius(float bottomRightCornerRadius) {
        this.bottomRightCornerRadius = bottomRightCornerRadius;
        invalidate();
    }
}

Dadurch können Sie den Rand von Bildern und Ansichten beschneiden, bevor sie gerendert werden, daher macht es genau das, was Sie wollen.

Benutzer-Avatar
Anoop M Maddasseri

Wenn Sie nur ein Bild formen möchten, verwenden Sie Material ShapeableImageView die die Bitmap mit dem bereitgestellten Shape zeichnet.

 <!-- Media -->
<com.google.android.material.imageview.ShapeableImageView
  ...
     app:shapeAppearance="?attr/shapeAppearanceMediumComponent"
     app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.App.Card.Media" />

Im res/values/styles.xml:

<style name="ShapeAppearanceOverlay.App.Card.Media" parent="">
    <item name="cornerSizeBottomLeft">0dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeTopLeft">8dp</item>
    <item name="cornerSizeTopRight">8dp</item>
</style>

Benutzer-Avatar
hek

Nun, ich bin so verzweifelt, einen Weg zu finden, dies zu erreichen, eines ist nicht möglich, und das Erstellen eines eigenen Schattens ist etwas, das mir das Ergebnis nicht gefällt, und in meinem Fall habe ich das Glück, dass ich es in der Ecke des Bildschirms oben rechts brauche genau sein.

Machen wir es einfach, machen Sie eine übergroße Kartenansicht in eine andere Ansicht. In meinem Fall verwende ich das Rahmenlayout und ändere dann die x- und y-Übersetzung auf das, was Sie brauchen. Nun, ich mache die Übersetzung x und y in denselben genauen Kartenradius-Eckenwert. und los geht’s mit einseitig gerundeter Kartenansicht auf barbarische Art und Weise.

Code ? Probe ? Bitte schön

<FrameLayout
    android:id="@+id/miniTimer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintBottom_toBottomOf="@+id/frameLayout"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:translationX="10dp"
        android:translationY="-10dp"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardCornerRadius="10dp"
        app:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@drawable/drwable_red__rounded_botleft_10"
            android:gravity="center"
            android:orientation="horizontal"
            android:paddingStart="5dp"
            android:paddingLeft="5dp"
            android:paddingTop="10dp"
            android:paddingEnd="10dp"
            android:paddingRight="10dp"
            android:paddingBottom="5dp">

            <TextView
                android:id="@+id/miniTimerText"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/colorAccent"
                android:textSize="12dp" />

        </LinearLayout>
    </androidx.cardview.widget.CardView>
</FrameLayout>

Hinweis: Oh, ich generiere den Textansichtstext dynamisch, also füge ihn selbst hinzu 🙂

Benutzer-Avatar
Krushna Bade

Ich habe nur eine Kartenansicht erstellt, um das Bild für den Eckenradius zu umschließen, und dann das Beschränkungslayout verwendet, um eine Führungslinie hinzuzufügen, und das Textlayout unten zur Führungslinie hinzugefügt. dann haben sich Hilfslinien auf Karte mit Rand überschnitten.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_icon"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="@dimen/_10sdp"
    android:layout_marginRight="@dimen/_10sdp"
    android:layout_marginTop="@dimen/_9sdp"
    android:elevation="@dimen/_2sdp"
    android:background="@drawable/card_top_corners"
    android:clipChildren="true"
     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">


    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="@dimen/_152sdp"
        app:cardCornerRadius="@dimen/_10sdp"
        app:cardPreventCornerOverlap="false"
        app:cardElevation="0dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="@dimen/_142sdp"
            android:scaleType="centerCrop"
            android:src="@drawable/shahruk"
            android:visibility="visible" />


    </androidx.cardview.widget.CardView>

    <androidx.constraintlayout.widget.Guideline
        android:id="@+id/guideline14"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        app:layout_constraintGuide_begin="@dimen/_142sdp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white"
        android:orientation="vertical"

        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/guideline14">

        <TextView
            android:id="@+id/txt_title"
            style="@style/medium_14sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="start"
            android:paddingLeft="@dimen/_8sdp"
            android:paddingTop="@dimen/_8sdp"
            android:paddingRight="@dimen/_8sdp"
            android:text="Rupa Singh: First indian woman to become a Jockey."
            android:textColor="@color/city_news_text" />

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="@dimen/_8sdp"
            android:layout_marginRight="@dimen/_8sdp"
            android:orientation="horizontal">

            <TextView
                android:id="@+id/txt_date"
                style="@style/medium_9sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="center"
                android:maxWidth="@dimen/_120sdp"
                android:maxLines="1"
                android:paddingTop="2dp"
                android:text="Today"
                android:textColor="@color/header_new"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <View
                android:id="@+id/view2"
                android:layout_width="1dp"
                android:layout_height="@dimen/_8sdp"
                android:layout_gravity="center"
                android:layout_marginLeft="@dimen/_7sdp"
                android:layout_marginRight="@dimen/_7sdp"
                android:background="@color/header_new"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintStart_toEndOf="@+id/txt_date"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/txt_special_tag"
                style="@style/medium_9sp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:gravity="start|center_vertical"
                android:maxLines="1"
                android:paddingTop="2dp"
                android:text="Top News"
                android:textColor="@color/header_new"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@+id/view2"
                app:layout_constraintTop_toTopOf="parent" />
        </LinearLayout>

        <TextView
            style="@style/regular_11sp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/_5sdp"
            android:paddingLeft="@dimen/_8sdp"
            android:paddingTop="@dimen/_2sdp"

            android:paddingRight="@dimen/_8sdp"
            android:paddingBottom="@dimen/_8sdp"
            android:text="Napur records highest temperature in summers this year with  measure of 225 degree celsius....[Read more]"
            android:textColor="@color/scheme_subtext" />
    </LinearLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

Bitte überprüfen Sie das Ergebnis im Bild

1283500cookie-checkRunden Sie nur die obere Ecke der Kartenansicht ab

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy