Bán kính góc CardView

95

Có cách nào để làm cho CardView chỉ có bán kính góc ở trên cùng không?

<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 
— ép chặt
nguồn

Câu trả lời:

118

Trừ khi bạn cố gắng mở rộng CardViewlớp Android , bạn không thể tùy chỉnh thuộc tính đó từ XML.

Tuy nhiên, có một cách để đạt được hiệu quả đó.

Đặt một CardViewbên trong một cái khác CardViewvà áp dụng một nền trong suốt cho bên ngoài của bạn CardViewvà xóa bán kính góc của nó ( "cornerRadios = 0dp"). CardViewVí dụ, bên trong của bạn sẽ có giá trị angleRadius là 3dp. Sau đó, áp dụng marginTop vào bên trong của bạn CardView, vì vậy giới hạn dưới cùng của nó sẽ bị cắt bởi bên ngoài CardView. Bằng cách này, bán kính góc dưới cùng của bên trong của bạn CardViewsẽ bị ẩn.

Mã XML như sau:

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

Và hiệu ứng hình ảnh như sau:

CardView chỉ có các góc tròn ở trên cùng

Luôn đặt nội dung của bạn vào Nội tâm của bạn CardView. CardView bên ngoài của bạn chỉ phục vụ mục đích "ẩn" các Góc tròn phía dưới của bên trong CardView.

— joao2fast4u
nguồn
8
Lưu ý rằng bóng đổ không chính xác (bóng ở góc dưới cùng vẫn được làm tròn) và bộ chọn tiền cảnh sẽ không chính xác hơn rõ ràng.
— ataulm
Tôi nghĩ rằng con đường @shreedhar dễ Bhat mô tả là tốt hơn
— Matei Suica
Giả sử, bạn có biết giá trị mặc định cho cardCornerRadius là gì không? nó là 4dp?
— nhà phát triển android
Tôi không chắc tại sao mọi người đánh dấu đây là câu trả lời. Đây không phải là câu trả lời đúng. Tôi đã thử điều này, nhưng nó không hoạt động theo cách nó phải như vậy.
— 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
nguồn
8
Bạn có thể giải thích khối mã này làm gì không? Tôi dường như không thể tìm thấy bất kỳ nguồn lực giải thích về tài sản XML innerRadius, shapevàthicknessRatio
— atjua
2
Chỉ app:cardCornerRadius="40dp"sẽ hoạt động quá.
— Rumit Patel
27

Bạn có thể sử dụng tiêu chuẩn MaterialCardcó trong thư viện Thành phần Vật liệu chính thức .

Sử dụng trong bố cục của bạn:

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

Theo phong cách của bạn, hãy sử dụng shapeAppearanceOverlaythuộc tính để tùy chỉnh hình dạng (bán kính góc mặc định là 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>

Bạn cũng có thể dùng:

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

Đó là kết quả:

nhập mô tả hình ảnh ở đây

— Gabriele Mariotti
nguồn
điều này không hoạt động với TabLayout. Các tab góc của tôi r không được làm tròn. Yêu cầu của tôi là chỉ các góc trên cùng của các tab phải được làm tròn, nơi dưới cùng vẫn phải như hình vuông. bạn có thể giúp tôi trong việc này?
— Tara
2
Nếu bạn chỉ áp dụng điều này cho một thành phần duy nhất, bạn có thể áp dụng lớp phủ giao diện hình dạng trực tiếp trong XML mà không cần kiểu tùy chỉnh. app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.MaterialCardView.Cut"
— Affian
8

Có một ví dụ về cách đạt được nó, khi thẻ nằm ở cuối màn hình. Nếu ai đó gặp phải vấn đề này, chỉ cần làm điều gì đó như sau:

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

Chế độ xem thẻ có lề dưới âm. Chế độ xem bên trong Chế độ xem thẻ có cùng lề dưới dương. Bằng cách này, các phần được làm tròn bị ẩn bên dưới màn hình, nhưng mọi thứ trông giống hệt nhau, vì chế độ xem bên trong có lề ngược.

— koras
nguồn
6

Bạn có thể sử dụng xml có thể vẽ này và đặt làm nền cho chế độ xem thẻ: 

<?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
nguồn
Điều này sẽ không hoạt động với cardView mà bạn cần phải có một Bố cục tức là. Tuyến tính hoặc Tương đối và đặt nền cho nó. sau đó nó sẽ hoạt động.
— Surender Kumar
1
nhưng sau đó những gì về hiệu ứng đổ bóng?
— Ravi Rajput
Đối với điều đó, bạn có thể sử dụng danh sách lớp. Kiểm tra liên kết này .
— Surender Kumar,
@SurenderKumar aree bhaii bhaii bhaaiii: D: D
— Abhishek
2

Bạn cần làm 2 điều:

1) Gọi setPreventCornerOverlap(false)trên CardView của bạn.

2) Đặt Imageview tròn bên trong CardView

Về việc làm tròn chế độ xem hình ảnh của bạn, tôi đã gặp vấn đề tương tự vì vậy tôi đã tạo một thư viện để bạn có thể đặt các bán kính khác nhau trên mỗi góc . Cuối cùng tôi đã nhận được kết quả như mong muốn dưới đây.

https://github.com/pungrue26/SelectableRoundsImageView

Hình ảnh tròn bên trong CardView

— 김준호
nguồn
1
Và đó là cách bạn biến ứng dụng Android của mình thành
— iOS
0

bạn có thể sử dụng thư viện: OptionRoundCardview

nhập mô tả hình ảnh ở đây

— qinmiao
nguồn
Chương trình Điều này không làm tròn góc ... Tôi đang sử dụng API> 23
— Ravi Rajput
thêm đủ không gian lề?
— qinmiao,
Không quan điểm con là phù hợp với cha mẹ
— Ravi Rajput
Margin là có
— Ravi Rajput
thư viện này không hoạt động với ứng dụng màu nền: optRoundCardBackgroundColor = "@ color / gray" nó loại bỏ các hiệu ứng bán kính góc
— Kishan Donga
0

Bạn có thể đặt ImageView của mình bên trong CardView và thêm các thuộc tính đó vào ImageView:

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

Bằng cách đó, bạn sẽ loại bỏ góc dưới cùng được làm tròn, nhưng hãy nhớ rằng điều này đi kèm với cái giá là cắt bỏ một phần nhỏ hình ảnh của bạn.

— omzer
nguồn
0

LƯU Ý: Đây là một cách giải quyết nếu bạn chỉ muốn đạt được các góc tròn ở dưới cùng và các góc thông thường ở trên cùng. Điều này sẽ không hoạt động nếu bạn muốn có bán kính khác nhau cho tất cả bốn góc của chế độ xem thẻ. Bạn sẽ phải sử dụng thẻ materialview cho nó hoặc sử dụng một số thư viện của bên thứ ba.

Đây là những gì có vẻ hiệu quả với tôi:

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

Có hai chế độ xem thẻ trong tất cả. Chế độ xem thẻ thứ hai là chế độ xem sẽ có các góc tròn (ở tất cả các cạnh như bình thường) và sẽ chứa tất cả các chế độ xem phụ khác bên dưới nó. Chế độ xem thẻ đầu tiên ở trên nó cũng ở cùng mức (độ cao) và có cùng nền nhưng chỉ bằng khoảng một nửa chiều cao của chế độ xem thẻ thứ hai và không có góc tròn (chỉ là các góc nhọn thông thường). Bằng cách này, tôi có thể đạt được các góc tròn một phần ở dưới cùng và các góc bình thường ở trên cùng. Nhưng đối với tất cả bốn mặt, bạn có thể phải sử dụng cardview vật liệu.

Bạn có thể làm ngược lại điều này để có được các góc tròn ở trên cùng và những góc thông thường ở dưới cùng, tức là để cho chế độ xem thẻ đầu tiên có các góc tròn và chế độ xem thẻ thứ hai có các góc thông thường.

— Max
nguồn
-1

Cách dễ nhất để đạt được nó trong Android Studio được giải thích dưới đây:

Bước 1:
Viết dòng phụ thuộc dưới đây trong build.gradle:

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

Bước 2:
Sao chép mã bên dưới vào tệp xml của bạn để tích hợp CardView.

Để cardCornerRadiushoạt động, hãy đảm bảo đưa dòng dưới đây vào bố cục chính: xmlns:card_view="http://schemas.android.com/apk/res-auto"

Và hãy nhớ sử dụng card_viewlàm không gian tên để sử dụng thuộc cardCornerRadiustính.

Ví dụ : card_view:cardCornerRadius="4dp"

Mã 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>
— Hoang đường
nguồn
4
Anh ấy chỉ muốn nó ở đỉnh cao.
— Heisenberg
2
Mặc dù, đây không phải là câu trả lời cho câu hỏi này, nhưng nó đã giúp tôi rất nhiều, để tìm ra một vấn đề nhức nhối với không gian tên! :)
— Fragment
1
Đây không phải là câu trả lời cho câu hỏi cụ thể nhưng nó đã giúp nhiều người dùng.
— Thần thoại
-1

Một cách dễ dàng để đạt được điều này sẽ là:

1. Tạo tài nguyên nền tùy chỉnh (như hình chữ nhật) với các góc tròn.

2. đặt nền tùy chỉnh này bằng lệnh -

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

điều này đã làm việc cho tôi.

Các XMLbố trí tôi thực hiện với trên bên trái và bán kính dưới bên phải.

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

Trong trường hợp của bạn, bạn chỉ cần thay đổi topLeftRadius cũng như topRightRadius.

Nếu bạn có bố cục chồng lên các góc của chế độ xem thẻ và có thể có màu khác, thì bạn có thể cần tệp tài nguyên nền khác cho bố cục và trong xml đặt tài nguyên nền này thành bố cục của bạn.

Tôi đã thử và kiểm tra phương pháp trên. Hy vọng điều này sẽ giúp bạn.

— Ankit Deshmukh
nguồn
-2

Nếu bạn đang đặt nền thẻ theo chương trình, hãy sử dụng bạn sử dụng cardView.setCardBackgroundColor()và không sử dụng và cardView.setBackgroundColor()đảm bảo sử dụng app:cardPreventCornerOverlap="true"trên cardView.xml. Điều đó đã sửa nó cho tôi.

Btw, đoạn mã trên (trong phần trích dẫn) là bằng Kotlin chứ không phải Java. Sử dụng java tương đương nếu bạn đang sử dụng Java.

— Joseph Magara
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.