仅圆形卡片视图的顶角

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应该与卡片半径相同。 例如，

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

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

Answer 2

我一直在尝试相同的方法，但所提供的解决方案都不适合我。

唯一有效的是：

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 3

棘手的事情，因为你不能让 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 4

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

如果您只想对图像进行整形，请使用材质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 6

好吧，我很绝望地想找到一种方法来实现这一点，这是不可能的，而且创建自己的阴影有点我不喜欢结果，我很幸运，我需要它在屏幕的角落准确的说是右上角。

让我们让它变得简单，在我的情况下，将超大的卡片视图变成另一个视图角值。然后你就可以用野蛮的方式进行单面圆形卡片视图了。

代码？样本 ？给你

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

您可以简单地在卡片视图的底部添加一个空视图，将其背景颜色设置为与 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 8

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

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

我使用 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 10

只需在 Y 轴上滚动 CardView 就可以了。注意 CardView 上的 scrollY 属性

<androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:cardElevation="0dp"
                app:cardCornerRadius="12dp"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                android:scrollY="10dp"
                >

            <ImageView
                android:id="@+id/imageView"
                android:layout_width="match_parent"
                android:layout_height="80dp"
                android:scaleType="fitXY"
                android:src="@drawable/sample_post_image"
                />

            </androidx.cardview.widget.CardView>

我尝试了this 的回答，但切口半径有一些深色背景，这是不可取的。

Answer 11

根据问题，我假设您只想将角半径属性应用于卡片的顶部。您可以通过使用两个CardView 来获得此效果。将一个CardView 放在另一个CardView 中，并删除外部CardView 角半径属性。还为您的外部CardView 应用透明背景，您的内部 CardView 的cornerRadius 值为 4dp。然后在你的内部CardView 上应用一个marginTop，这样它的底部就被外部CardView 隐藏了。这样，您的内部CardView 的底角半径将被隐藏。

您必须将您的 xml 内容放入您的 Inner 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>

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