Радиус Угла 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"
>
731   8  

8 ответов:

если вы не пытаетесь расширить 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 with rounded corners only on top

всегда помещайте свой контент в свой внутренний 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>

Я написал drawable lib для пользовательской круглой угловой позиции, это выглядит так:

example.png

вы можете получить эту lib здесь:

https://github.com/mthli/Slice

вы можете использовать этот drawable 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>

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

1) Вызов setPreventCornerOverlap(false) на вашем CardView.

2) Поставить округлый Imageview внутри CardView

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

https://github.com/pungrue26/SelectableRoundedImageView

Rounded ImageView inside CardView

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

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

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

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

enter image description here

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

Comments

    Ничего не найдено.