CardView Угловой радиус

Question 1

Есть ли способ сделать так, чтобы у 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"
    >

Question 2

Если вы не попытаетесь расширить CardViewкласс Android , вы не сможете настроить этот атрибут из 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 со скругленными углами только сверху

Всегда помещайте свой контент в свой Inner CardView. Ваш внешний CardView служит только для «сокрытия» нижних закругленных углов внутреннего CardView.

Question 3

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>

Question 4

Вы можете использовать стандарт, 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"
     ...>

Это результат:

Question 5

Вот пример, как этого добиться, когда карточка находится в самом низу экрана. Если у кого-то есть такая проблема, просто сделайте что-нибудь вроде этого:

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

Карточка имеет отрицательное нижнее поле. Вид внутри Карточки имеет такое же, но положительное нижнее поле. Таким образом закругленные части скрываются под экраном, но все выглядит точно так же, потому что внутренний вид имеет поле счетчика.

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

Question 7

Я написал настраиваемую библиотеку для настраиваемой позиции закругленного угла, она выглядит так:

Вы можете получить эту библиотеку здесь:

https://github.com/mthli/Slice

Question 8

Вам нужно сделать 2 вещи:

1) Вызовите setPreventCornerOverlap(false)свой CardView.

2) Поместите округленное изображение внутри CardView

Что касается округления вашего изображения, у меня была та же проблема, поэтому я сделал библиотеку, в которой вы можете установить разные радиусы для каждого угла . Наконец я получил результат, который я хотел, как показано ниже.

https://github.com/pungrue26/SelectableRoundedImageView

Скругленный ImageView внутри CardView

Question 9

вы можете использовать библиотеку: OptionRoundCardview

Question 10

Вы можете поместить свой ImageView в CardView и добавить эти свойства в ImageView:

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

Таким образом вы избавитесь от закругленного нижнего угла, но имейте в виду, что это происходит за счет обрезания небольшой части изображения.

Question 11

ПРИМЕЧАНИЕ. Это обходной путь, если вы хотите добиться закругленных углов только внизу и правильных углов вверху. Это не сработает, если вы хотите иметь разный радиус для всех четырех углов вида карты. Вам придется использовать для этого материал 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>

Всего есть два карточных просмотра. Второй вид карточек будет иметь закругленные углы (как обычно со всех сторон) и будет содержать все остальные подвиды под ним. Первый вид карты над ним также находится на том же уровне (возвышения) и имеет тот же фон, но составляет только половину высоты второго вида карты и не имеет закругленных углов (только обычные острые углы). Таким образом, я смог добиться частично закругленных углов внизу и нормальных углов вверху. Но для всех четырех сторон вам, возможно, придется использовать материальный вид карты.

Вы можете сделать обратное, чтобы получить закругленные углы вверху и обычные внизу, то есть пусть первое представление карты имеет закругленные углы, а второе представление карты имеет правильные углы.

Question 12

Самый простой способ добиться этого в 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>

Question 13

Легкий способ добиться этого:

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 установите этот фоновый ресурс для своего макета.

Я попробовал и протестировал вышеуказанный метод. Надеюсь, это тебе поможет.

Question 14

Если вы устанавливаете фон карты программно, используйте, cardView.setCardBackgroundColor()а не используйте, cardView.setBackgroundColor()и обязательно используйте using app:cardPreventCornerOverlap="true"в cardView.xml. Это исправило это для меня.

Кстати, приведенный выше код (в кавычках) находится на Kotlin, а не на Java. Используйте эквивалент Java, если вы используете Java.