[android] CardView 코너 반경

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



답변

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.


답변

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>


답변

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

결과는 다음과 같습니다.

여기에 이미지 설명 입력


답변

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

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

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


답변

이 드로어 블 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>


답변

사용자 정의 둥근 모서리 위치에 드로어 블 라이브러리를 썼습니다.

example.png

이 lib는 여기에서 얻을 수 있습니다.

https://github.com/mthli/Slice


답변

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

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

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

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

https://github.com/pungrue26/SelectableRoundedImageView

CardView 내부의 둥근 ImageView