CardView Köşe Yarıçapı

95

CardView'ın yalnızca üstte köşe yarıçapına sahip olmasını sağlamanın bir yolu var mı?

<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  android-appcompat  android-cardview 
— yumuşacık
kaynak

Yanıtlar:

119

Android CardViewsınıfını genişletmeye çalışmadığınız sürece , bu özniteliği içinden özelleştiremezsiniz XML.

Yine de, bu etkiyi elde etmenin bir yolu var.

Bir CardViewdiğerinin içine bir yerleştirin CardViewve dış tarafınıza şeffaf bir arka plan uygulayın CardViewve köşe yarıçapını ( "cornerRadios = 0dp") kaldırın . CardViewÖrneğin, iç tarafınızın bir cornerRadius değeri 3dp olacaktır. Ardından iç tarafınıza bir marginTop uygulayın CardView, böylece alt sınırları dış tarafından kesilecektir CardView. Bu şekilde içinizin alt köşe yarıçapı CardViewgizlenecektir.

XML kodu aşağıdaki gibidir:

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

Ve görsel efekt şudur:

Yalnızca üstte yuvarlatılmış köşeli CardView

İçeriğinizi her zaman İçinize yerleştirin CardView. Dış CardView'unuz yalnızca iç tarafın alt Yuvarlatılmış Köşelerini "gizleme" amacına hizmet eder CardView.

— joao2fast4u
kaynak
8
Gölgenin yanlış olduğunu (alt köşe gölgelerinin hala yuvarlatılmış olduğunu) ve ön plan seçicinin daha belirgin şekilde hatalı olacağını unutmayın.
— ataulm
Bence @shreedhar bhat'ın tarif ettiği kolay yol daha iyi
— Matei Suica
CardCornerRadius için varsayılan değerin ne olduğuna dair bir fikriniz var mı? 4dp mi?
— android geliştiricisi
Neden herkesin bunu cevap olarak işaretlediğinden emin değilim. Bu doğru cevap değil. Bunu denedim ama olması gerektiği gibi çalışmıyor.
— 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>
— Shreedhar bhat
kaynak
8
Bu kod bloğunun ne yaptığını açıklayabilir misiniz? Ben XML özellik hakkında açıklayan herhangi kaynakları bulmak gibi olamaz innerRadius, shapevethicknessRatio
— atjua
2
Sadece app:cardCornerRadius="40dp"işe yarayacak.
— Rumit Patel
28

MaterialCardResmi Malzeme Bileşenleri kitaplığında bulunan standardı kullanabilirsiniz .

Düzeninizde kullanın:

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

Tarzınızda shapeAppearanceOverlayşekli özelleştirmek için niteliği kullanın (varsayılan köşe yarıçapıdır 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>

Ayrıca kullanabilirsin:

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

Sonuç:

görüntü açıklamasını buraya girin

— Gabriele Mariotti
kaynak
bu TabLayout ile çalışmıyor. Köşe çıkıntılarım yuvarlak değil. Benim ihtiyacım, tırnakların sadece üst köşelerinin yuvarlatılması ve altının kare kalması gerektiğidir. bana bu konuda yardım edebilir misin?
— Tara
2
Bunu yalnızca tek bir bileşene uyguluyorsanız, şekil görünümü kaplamasını özel bir stile ihtiyaç duymadan doğrudan XML'de uygulayabilirsiniz. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— Affian
8

Kart ekranın en altındayken nasıl başarılacağına dair bir örnek var. Birinin bu tür bir sorunu varsa, şöyle bir şey yapın:

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

Kart Görünümü negatif alt kenar boşluğuna sahip. Bir Kart Görünümü içindeki görünüm aynı, ancak pozitif alt kenar boşluğuna sahiptir. Bu şekilde yuvarlak kısımlar ekranın altına gizlenir, ancak her şey tamamen aynı görünür, çünkü iç görünümde bir karşı kenar boşluğu vardır.

— Koras
kaynak
6

Bu çekilebilir xml'yi kullanabilir ve kart görünümüne arka plan olarak ayarlayabilirsiniz: 

<?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>
— Surender Kumar
kaynak
Bu cardView ile çalışmaz, yani bir Düzen almanız gerekir. Doğrusal veya Bağıl ve arka planı buna ayarlayın. o zaman işe yarayacak.
— Surender Kumar
1
ama sonra gölge efekti ne olacak?
— Ravi Rajput
Bunun için katman listesini kullanabilirsiniz. Bu bağlantıyı kontrol edin .
— Surender Kumar
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
— Abhishek
2

2 şey yapmanız gerekiyor:

1) setPreventCornerOverlap(false)CardView'unuzu arayın .

2) Yuvarlatılmış Görüntü Görünümünü CardView'a yerleştirin

Görüntü görünümünüzü yuvarlamakla ilgili olarak, aynı problemi yaşadım, bu yüzden her köşeye farklı yarıçaplar ayarlayabileceğiniz bir kitaplık yaptım . Sonunda aşağıdaki gibi istediğim sonucu aldım.

https://github.com/pungrue26/SelectableRoundedImageView

CardView içindeki Yuvarlatılmış ImageView

— 김준호
kaynak
1
İşte android uygulamanızı bu şekilde
— ios'a
0

ImageView'unuzu bir CardView içine koyabilir ve bu özellikleri ImageView'a ekleyebilirsiniz:

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

Bu şekilde yuvarlatılmış alt köşeden kurtulacaksınız, ancak bunun görüntünüzün küçük bir kısmının kesilmesinin bedeli olduğunu unutmayın.

— Omzer
kaynak
0

NOT: Yalnızca altta yuvarlatılmış köşeler ve üstte normal köşeler elde etmek istiyorsanız, bu geçici bir çözümdür. Kart görünümünün dört köşesi için farklı yarıçaplara sahip olmak istiyorsanız bu çalışmayacaktır. Bunun için malzeme kartı görünümünü kullanmanız veya bazı üçüncü taraf kitaplıkları kullanmanız gerekecektir.

İşte benim için işe yarayan şeyler:

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

Toplamda iki kart görünümü var. İkinci kart görünümü, köşeleri yuvarlatılmış (her zamanki gibi her tarafta) ve diğer tüm alt görünümleri altında tutacak olandır. Üstündeki ilk kart görünümü de aynı seviyededir (yükseklik) ve aynı arka plana sahiptir, ancak ikinci kart görünümünün yalnızca yaklaşık yarısı yüksekliğindedir ve yuvarlatılmış köşeleri yoktur (sadece normal keskin köşeler). Bu şekilde altta kısmen yuvarlatılmış köşeler ve üstte normal köşeler elde etmeyi başardım. Ancak dört tarafın tümü için malzeme kart görünümünü kullanmanız gerekebilir.

Üstte yuvarlatılmış köşeler ve altta düzgün köşeler elde etmek için bunun tersini yapabilirsiniz, yani ilk kart görünümünün köşeleri yuvarlatılmış ve ikinci kart görünümünün düzgün köşeleri olsun.

— Max
kaynak
-1

Bunu Android Studio'da gerçekleştirmenin en kolay yolu aşağıda açıklanmıştır:

Adım 1:
Bağımlılıklar için aşağıdaki satıra yazın build.gradle:

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

Adım 2:
.xml dosyanıza entegre etmek için aşağıdaki kodu kopyalayın CardView.

İçin cardCornerRadiusişe, ebeveyn düzeninde sınırının altında eklemeyi unutmayın lütfen: xmlns:card_view="http://schemas.android.com/apk/res-auto"

Ve özelliği kullanmak card_viewiçin ad alanı olarak kullanmayı unutmayın cardCornerRadius.

Örneğin : card_view:cardCornerRadius="4dp"

XML Kodu:

<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>
— Efsane
kaynak
4
Sadece en üstte olmasını istiyor.
— Heisenberg
2
Yine de, bu sorunun cevabı bu değil, ad alanlarıyla ilgili akıllara durgunluk veren bir sorun bulmamda bana çok yardımcı oldu! :)
— Parça
1
Bu, belirli bir sorunun cevabı değil, ancak birçok kullanıcıya yardımcı oldu.
— Efsane
-1

Bunu başarmanın kolay bir yolu şudur:

1. Yuvarlatılmış köşelere sahip özel bir arka plan kaynağı (dikdörtgen şekli gibi) yapın.

2. komutu kullanarak bu özel arka planı ayarlayın -

cardView = view.findViewById(R.id.card_view2);
cardView.setBackgroundResource(R.drawable.card_view_bg);

bu benim için çalıştı.

XMLArabanın üstü ile yapılan düzen sol ve sağ alt yarıçapı.

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white" />
<corners android:topLeftRadius="18dp" android:bottomRightRadius="18dp" />
</shape>

Sizin durumunuzda, sadece topLeftRadius ve topRightRadius'u değiştirmeniz gerekir.

Kart görünümünün köşeleriyle örtüşen ve farklı bir renge sahip bir düzeniniz varsa, düzen için farklı bir arka plan kaynak dosyasına ihtiyacınız olabilir ve xml'de bu arka plan kaynağını düzeninize ayarlayın.

Yukarıdaki yöntemi denedim ve test ettim. Umarım bu size yardımcı olur.

— Ankit Deshmukh
kaynak
-2

Kart arka planını programlı olarak ayarlıyorsanız, kullanın cardView.setCardBackgroundColor()ve kullanmayın ve cardView.setBackgroundColor()kullandığınızdan emin olun.app:cardPreventCornerOverlap="true" cardView.xml'de . Bu benim için sorunumu çözdü.

Btw, yukarıdaki kod (alıntılar halinde) Java'da değil Kotlin'dedir. Java kullanıyorsanız java eşdeğerini kullanın.

— Joseph Magara
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.