CardView 코너 반경


95

CardView가 상단에 모서리 반경 만 갖도록하는 방법이 있습니까?

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

답변:


120

Android CardView클래스 를 확장하지 않는 한 XML.

그럼에도 불구하고 그 효과를 얻는 방법이 있습니다.

를 놓고 CardView또 다른 내부 CardView와 외부에 투명 배경을 적용 CardView하고 모서리 반경을 제거 ( "cornerRadios = 0dp"). CardView예를 들어 내부 의 cornerRadius 값은 3dp입니다. 그런 다음 안쪽에 marginTop을 적용하면 CardView아래쪽 경계가 바깥 쪽으로 잘립니다 CardView. 이렇게하면 내면의 하단 모서리 반경 CardView이 숨겨집니다.

XML 코드는 다음과 같습니다.

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

시각 효과는 다음과 같습니다.

둥근 모서리 만 상단에있는 CardView

항상 내면에 콘텐츠를 넣으십시오 CardView. 바깥 쪽 CardView는 안쪽의 둥근 모서리를 "숨기기"목적으로 만 사용됩니다 CardView.


8
그림자가 잘못되었으며 (하단 모서리 그림자는 여전히 둥글게 표시됨) 전경 선택기가 더 눈에 띄게 잘못되었습니다.
ataulm

나는 설명 바트 쉬운 방법의 @shreedhar 더 나은 생각
Matei 수박

cardCornerRadius의 기본값이 무엇인지 아십니까? 4dp입니까?
안드로이드 개발자

왜 모두가 이것을 답으로 표시했는지 모르겠습니다. 이것은 정답이 아닙니다. 시도했지만 제대로 작동하지 않습니다.
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>

8
이 코드 블록의 기능을 설명해 주시겠습니까? 나는 XML 속성에 대한 설명 리소스를 찾을 수 없습니다 innerRadius, shape그리고thicknessRatio
atjua

2
app:cardCornerRadius="40dp"작동합니다.
Rumit 파텔

31

MaterialCard공식 재료 구성 요소 라이브러리에 포함 된 표준을 사용할 수 있습니다 .

레이아웃에서 사용 :

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

스타일에서 shapeAppearanceOverlay속성을 사용하여 모양을 사용자 지정합니다 (기본 모서리 반경은 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>

다음을 사용할 수도 있습니다.

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

결과는 다음과 같습니다.

여기에 이미지 설명 입력


이것은 TabLayout에서 작동하지 않습니다. 내 모서리 탭이 둥글 지 않습니다. 내 요구 사항은 탭의 상단 모서리 만 둥글게하여 하단이 사각형으로 유지되어야한다는 것입니다. 이 일에서 나를 도울 수 있습니까?
Tara

2
이것을 단일 구성 요소에만 적용하는 경우 사용자 정의 스타일 없이도 XML에서 직접 모양 모양 오버레이를 적용 할 수 있습니다. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
Affian

9

카드가 화면 맨 아래에있을 때이를 달성하는 방법의 예가 있습니다. 누군가가 이런 종류의 문제가 있으면 다음과 같이하십시오.

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

카드보기의 하단 여백이 음수입니다. 카드보기 내부의보기는 동일하지만 양의 아래쪽 여백이 있습니다. 이렇게하면 둥근 부분이 화면 아래에 숨겨 지지만 내부 뷰에 카운터 여백이 있기 때문에 모든 것이 정확히 동일하게 보입니다.


6

이 드로어 블 xml을 사용하고 cardview에 배경으로 설정할 수 있습니다.

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

이것은 레이아웃 ie를 취하는 데 필요한 cardView와 함께 작동하지 않습니다. 선형 또는 상대를 선택하고 배경을 설정합니다. 그러면 작동합니다.
Surender 쿠마

1
그러면 그림자 효과는 어떻습니까?
라비 라즈

이를 위해 레이어 목록을 사용할 수 있습니다. 이 링크를 확인하십시오 .
Surender 쿠마

@SurenderKumar 아리 bhaii bhaii bhaaiii : D : D
Abhishek


2

다음 두 가지를 수행해야합니다.

1) setPreventCornerOverlap(false)CardView를 호출 하십시오.

2) 둥근 Imageview를 CardView 안에 넣으십시오.

이미지 뷰를 반올림하는 것과 관련하여 동일한 문제가 발생 하여 각 모서리에 다른 반경을 설정할 수있는 라이브러리를 만들었습니다 . 드디어 아래와 같은 결과를 얻었습니다.

https://github.com/pungrue26/SelectableRoundedImageView

CardView 내부의 둥근 ImageView


1
그리고 그것이 당신의 안드로이드 앱을 iOS로 바꾸는 방법입니다. :)
iOS

0

라이브러리를 사용할 수 있습니다. OptionRoundCardview

여기에 이미지 설명 입력


이 나던 쇼 API> 23 사용하여 모서리 ... I 암 둥근
라비 라즈

충분한 여백 공간을 추가 하시겠습니까?
qinmiao

어떤 아이 뷰가 일치하는 부모 없다
라비 라즈

여유가 있습니다
라비 라즈

이 라이브러리는 background-color app : optRoundCardBackgroundColor = "@ color / gray"에서 작동하지 않습니다. 모서리 반경 효과를 제거합니다.
Kishan Donga

0

ImageView를 CardView에 넣고 해당 속성을 ImageView에 추가 할 수 있습니다.

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

이렇게하면 둥근 하단 모서리를 제거 할 수 있지만 이미지의 작은 부분을 잘라내는 대가가 따른다는 점을 명심하십시오.


0

참고 : 이것은 하단에만 둥근 모서리를, 상단에는 일반 모서리를 얻으려는 경우 해결 방법입니다. 카드 뷰의 네 모서리에 대해 다른 반경을 가지려는 경우에는 작동하지 않습니다. 이를 위해 Material cardview를 사용하거나 타사 라이브러리를 사용해야합니다.

다음은 저에게 효과가있는 것 같습니다.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:background="#F9F9F9">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@drawable/profile_bg"/>

    </androidx.cardview.widget.CardView>

    <androidx.cardview.widget.CardView
        android:id="@+id/cvProfileHeader"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:cardCornerRadius="32dp">
    
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:orientation="vertical"
            android:background="@drawable/profile_bg"
            android:id="@+id/llProfileHeader"
            android:gravity="center_horizontal">

            <!--Enter your code here-->

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

</RelativeLayout>

모두 두 개의 카드 뷰가 있습니다. 두 번째 카드 뷰는 모서리가 둥글게 (평상시처럼 모든면에) 있고 그 아래에 다른 모든 하위 뷰를 포함하는 카드 뷰입니다. 위의 첫 번째 카드 뷰도 같은 수준 (고도)에 있고 배경이 동일하지만 두 번째 카드 뷰 높이의 약 절반에 불과하며 둥근 모서리가 없습니다 (일반적인 날카로운 모서리 만 있음). 이렇게하면 바닥에 부분적으로 둥근 모서리를, 상단에 정상적인 모서리를 얻을 수있었습니다. 그러나 네면 모두에 대해 머티리얼 카드 뷰를 사용해야 할 수도 있습니다.

반대의 경우 상단에 둥근 모서리를, 하단에 규칙적인 모서리를 얻을 수 있습니다. 즉, 첫 번째 카드 뷰에 둥근 모서리를두고 두 번째 카드 뷰에 규칙적인 모서리를 갖도록합니다.


-1

Android Studio에서이를 달성하는 가장 쉬운 방법은 다음과 같습니다.

1 단계 :
종속성에 아래 줄을 작성하십시오 build.gradle.

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

2 단계 :
통합을 위해 xml 파일에 아래 코드를 복사합니다.CardView .

들어 cardCornerRadius작업에, 부모 레이아웃의 라인 아래에 포함하시기 바랍니다 : xmlns:card_view="http://schemas.android.com/apk/res-auto"

그리고 사용 card_view을위한 네임 스페이스로 사용 하는 것을 기억하십시오.cardCornerRadius 속성 .

예 : card_view:cardCornerRadius="4dp"

XML 코드 :

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

4
그는 그것을 정상에만 원합니다.
Heisenberg

2
이 질문에 대한 답은 아니지만 네임 스페이스에 대한 놀라운 문제를 찾는 데 많은 도움이되었습니다! :)
Fragment

1
이것은 특정 질문에 대한 답은 아니지만 많은 사용자에게 도움이되었습니다.
Myth

-1

이를 달성하는 쉬운 방법은 다음과 같습니다.

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 만 변경하면됩니다.

카드보기의 모서리와 겹치고 색상이 다를 수있는 레이아웃이있는 경우 레이아웃에 대해 다른 배경 리소스 파일이 필요할 수 있으며 xml에서이 배경 리소스를 레이아웃으로 설정합니다.

위의 방법을 시도하고 테스트했습니다. 도움이 되었기를 바랍니다.


-2

프로그래밍 방식으로 카드 배경을 설정하는 경우 사용 cardView.setCardBackgroundColor()하지 말고 사용 하고 다음을 사용 cardView.setBackgroundColor()하십시오.app:cardPreventCornerOverlap="true" 말고 cardView.xml에서 . 그것은 나를 위해 그것을 고쳤습니다.

Btw, 위 코드 (인용 부호)는 Java가 아닌 Kotlin에 있습니다. Java를 사용하는 경우 해당 Java를 사용하십시오.

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.