31

Tôi đã triển khai CardView trong ứng dụng của mình và mọi thứ hoạt động tốt ngoại trừ có một chút đệm xung quanh hình ảnh nếu tôi đặt bán kính vào thẻ.Đệm không cần thiết trong CardView?

Nó xuất hiện như thế này: screenshot_2014-12-27-20-31-55

Nhưng trong android docs và trong this article hình ảnh mất toàn bộ cardview, vì vậy u có thể giúp tôi đạt được điều đó.

file layout của tôi là như sau:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
      xmlns:card_view="http://schemas.android.com/apk/res-auto" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:orientation="vertical" 
      android:padding="8dp"> 

<android.support.v7.widget.CardView 
    android:layout_width="match_parent" 
    android:layout_height="200dp" 
    card_view:cardBackgroundColor="@android:color/white" 
    card_view:cardCornerRadius="4dp"> 

    <ImageView 
     android:id="@+id/media_image_view" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:scaleType="centerCrop"/> 

     <RelativeLayout 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      android:alpha="0.8" 
      android:background="?attr/colorPrimary" 
      android:padding="4dp"> 

      <TextView 
       android:id="@+id/media_download" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentRight="true" 
       android:textSize="11sp"/> 

      <TextView 
       android:id="@+id/category_name" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignParentLeft="true" 
       android:textColor="@color/primary_text" 
       android:textSize="12sp"/> 

     </RelativeLayout> 

</android.support.v7.widget.CardView> 

</LinearLayout> 

Chú ý: Ảnh chụp màn hình được chụp trên một thiết bị pre-kẹo.

+0

bạn có thể vui lòng thử lại mà không có sự 'android: đệm = "4dp" 'trên RelativeLayout của bạn? –

Trả lời

62

tôi đã đi qua developer docs một lần nữa và phát hiện ra rằng:

Mở API 20 và trước đó, CardView không cắt giới hạn của thẻ cho các góc bo tròn. Thay vào đó, nó sẽ thêm phần đệm vào nội dung để nó không chồng chéo với các góc được làm tròn.

Vì vậy, đối với các thiết bị trước kẹo que, tôi phải gọi setPreventCornerOverlap (false); trên thẻ.

Cập nhật: Điều tương tự có thể được thực hiện thông qua mã xml bằng cách thêm app:cardPreventCornerOverlap="false" trong chế độ xem thẻ.

+1

Đây là con đường để đi. –

+1

bạn thật tuyệt vời! đây là những gì tôi chỉ cần. – Krit

+1

Cảm ơn! Nó hoạt động. Nhưng có một vấn đề. Sau khi thêm thẻ này, nó loại bỏ bán kính góc. Làm sao tôi có thể giải quyết việc này? –

1

Đặt app:cardPreventCornerOverlap="false" sẽ giải quyết sự cố nhưng cũng xóa góc tất cả các thiết bị trước kẹo. Nếu bạn muốn góc tròn trên mọi thiết bị, thêm nó bằng tay:

card_view_round_corner_background.xml

<?xml version="1.0" encoding="utf-8"?>  
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">   
    <item>  
    <shape android:shape="rectangle">     
     <solid android:color="@color/transparent"/>     
     <stroke android:width="2dp" android:color="@color/Black"/> 
     </shape> 
     </item> 
     <item>    
    <shape android:shape="rectangle"> 
    <solid android:color="@color/transparent"/>    
    <corners android:radius="6dp"/>    
    <stroke android:width="2dp" android:color="@color/Black"/>   
    </shape> 
    </item> 
    </layer-list> 

Trong cardview

<android.support.v7.widget.CardView android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:focusable="true" 
    android:clickable="true" 
    android:foreground="?android:attr/selectableItemBackground"card_view:cardCornerRadius="@dimen/conner_radius" 
    card_view:cardBackgroundColor="@color/Black" 
    card_view:cardElevation="@dimen/z_card"> 

    <!-- Put your card contain here --> 

    <View 
    android:background="@drawable/card_view_round_corner_border" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    /> 

Nhưng giải pháp này chỉ hoạt động trên nền tảng vững chắc như đen hoặc trắng.

0

Chỉ cần sử dụng FrameLayout thay vì LinearLayout, nó hoạt động

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginBottom="-4dp"> 

    <android.support.v7.widget.CardView 
     android:id="@+id/card_view" 
     xmlns:card_view="http://schemas.android.com/apk/res-auto" 
     android:layout_width="fill_parent" 
     android:layout_height="100dp" 
     android:layout_gravity="center" 
     android:layout_margin="5dp" 
     card_view:cardCornerRadius="4dp" 
     card_view:cardPreventCornerOverlap="false" 
     card_view:cardUseCompatPadding="true" 

     > 

     <FrameLayout 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:orientation="horizontal" 
      > 

      <ImageView 
       android:id="@+id/imageView" 
       android:tag="image_tag" 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_margin="5dp" 
       android:layout_weight="1" 
       android:src="@drawable/ic_launcher"/> 

      <LinearLayout 
       android:layout_width="0dp" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="5dp" 
       android:layout_weight="2" 
       android:orientation="vertical" 
       > 

       <TextView 
        android:id="@+id/textViewName" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal" 
        android:layout_marginTop="5dp" 
        android:text="Android Name" 
        android:textAppearance="?android:attr/textAppearanceLarge"/> 

       <TextView 
        android:id="@+id/textViewVersion" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_horizontal" 
        android:layout_marginTop="5dp" 

        android:text="Android Version" 
        android:textAppearance="?android:attr/textAppearanceMedium"/> 

      </LinearLayout> 
     </FrameLayout> 

    </android.support.v7.widget.CardView> 

</FrameLayout> 
Các vấn đề liên quan