Question

我想只在卡片视图的顶部转角。

我使用了以下属性，它正在四处转弯。

我想显示所有卡片的重叠

card_view:cardCornerRadius="4dp"

这是我的布局

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

Answer 1

我们可以将卡片视图的marginBottom设置为负值.Margin应该与卡片半径相同。例如，

git fetch

它对我有用。但我怀疑这是否是正确的做法。欢迎任何建议。

Answer 2

Android Cardview，可让您自定义圆角位置。参考：https://github.com/captain-miao/OptionRoundCardview

Answer 3

我一直在尝试相同的方法，但是没有提供的解决方案对我有用。

唯一起作用的是：

1）制作一个带有圆角的自定义背景资源（如矩形）。

2）使用命令设置此自定义背景-

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

非常适合我！希望对您有帮助。

我使用左上角和右下角半径制作的XML布局。

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

在这种情况下，您只需要更改topLeftRadius和topRightRadius。

Answer 4

棘手的事情，因为您无法让CardView做到这一点。在内部，它使用RoundRectDrawable（私有包），它像这样使用roundRect：

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

因此，您需要一个不同的解决方案，例如我发现this gist by Ahmed-Abdelmeged，他们在每个角落使用画布剪辑，并使用一条路径来描述轮廓。

因此，尽管我不是编写此代码的人，但我会将其发布在这里，以供将来的旅行者使用。

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

和

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();
    }
}

这将允许您在渲染图像和视图之前修剪它们的边缘，因此它确实可以满足您的要求。

Answer 5

好吧，我非常渴望找到一种方法来实现这一目标，这是不可能的，创建自己的阴影有点不满意结果，我很幸运在屏幕的角落需要它准确地说是右上角。

让它变得简单，在我使用框架布局的情况下，将超大卡片视图变成另一个视图，然后将其x和y平移更改为您需要的，我要做的是，将x和y平移为相同的确切卡半径角值。然后您就可以通过野蛮方式进入单面圆形卡片视图。

代码？样品？你走了

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

注意：哦，我会动态生成textview文本，所以请自己添加：）

Answer 6

如果您只想塑造图像，请使用材质 ShapeableImageView 以提供的形状绘制位图。

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

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

Answer 7

或者，您可以使用 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>

你可以找到一个很好的答案here

Answer 8

您可以简单地在卡片视图的底部添加一个空视图，将其背景颜色设置为与 cardView 相同，并在空视图的顶部留出一个小的负边距，这是一个示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/linBottomSheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    >


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        >

        <androidx.cardview.widget.CardView

            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginBottom="-8dp"
            android:elevation="2dp"
            app:cardBackgroundColor="@color/colorAccent"
            app:cardCornerRadius="10dp">




        </androidx.cardview.widget.CardView>

    </LinearLayout>

    <View
        
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:layout_marginTop="-10dp"
        android:background="@color/colorAccent" />
</LinearLayout>

Answer 9

我只创建了卡片视图来环绕图像的角半径，然后使用约束布局添加引导线并将下方文本布局添加到引导线。然后引导线在卡片上重叠了边距。

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

Please check result in image

Answer 10

我使用 lib 实现的自定义方式

//圆形卡片

在 build.gradle 上添加此实现

implementation 'com.github.captain-miao:optroundcardview:1.0.0'

在 XML 中：

<com.github.captain_miao.optroundcardview.OptRoundCardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="10dp"
    app:optRoundCardCornerRadius="40dp"
    app:optRoundCardLeftBottomCorner="false"
    app:optRoundCardRightBottomCorner="false"
    app:optRoundCardBackgroundColor="#E2EAF8">

Answer 11

根据这个问题，我假设你想要将角半径属性应用到卡的顶部。您可以使用两个CardView来获得此效果。将一个CardView放入另一个CardView内，并删除外部CardView角半径属性。同时对您的外部CardView应用透明背景。您的内部CardView的cornerRadius值为4dp。然后将marginTop应用于内部CardView，以使其底部被外部CardView隐藏。这样，内部CardView的底角半径将被隐藏。

您必须将xml内容放入内部CardView。外CardView仅用于隐藏内部CardView的底部圆角。您的xml布局如下所示：

<?xml version="1.0" encoding="utf-8"?>
<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="match_parent"
    android:layout_gravity="center"
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardCornerRadius="0dp"
    card_view:cardElevation="4dp" >

<android.support.v7.widget.CardView
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="3dp"
    card_view:cardElevation="0dp"
    card_view:cardCornerRadius="4dp"
    >

    <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>
  </android.support.v7.widget.CardView>

我参考了这个问题：Question。我希望它能解决你的问题。

只围绕cardview的顶角

11 个答案: