Радіус кута 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 із закругленими кутами лише зверху

Завжди розміщуйте свій вміст у своєму внутрішньому 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включений в офіційну бібліотеку Material Components .

Використовуйте у своєму макеті:

<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, що малюється, і встановити як фон для перегляду картки:

<?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) Покласти закруглений Imageview всередину CardView

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

https://github.com/pungrue26/SelectableRoundedImageView

Закруглений ImageView всередині CardView

Question 9

Ви можете використовувати бібліотеку: OptionRoundCardview

Question 10

Ви можете помістити ImageView всередину CardView і додати ці властивості до ImageView:

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

Таким чином ви позбудетеся закругленого нижнього кута, але майте на увазі, що це пов’язано з відрізанням невеликої частини вашого зображення.

Question 11

ПРИМІТКА: Це тут обхідний шлях, якщо ви хочете досягти закруглених кутів лише внизу та регулярних кутів у верхній частині. Це не спрацює, якщо ви хочете мати різний радіус для всіх чотирьох кутів перегляду карти. Вам доведеться використовувати для цього перегляд картки матеріалу або скористатися якоюсь сторонньою бібліотекою.

Ось, що, здавалося, працювало для мене:

<?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()і обов’язково використовуйте, використовуючи app:cardPreventCornerOverlap="true"на cardView.xml. Це мені це виправило.

До речі, наведений вище код (у лапках) знаходиться на Kotlin, а не на Java. Використовуйте еквівалент Java, якщо ви використовуєте Java.