31

我已經在我的應用程序中實現了CardView,並且除了圖像周圍有一點點填充(如果將半徑放到卡上),一切都可以正常工作。CardView中不必要的填充?

這似乎是這樣的: screenshot_2014-12-27-20-31-55

但在android docsthis article圖像拍攝整個cardview,所以u能幫助我實現這個目標。

我的佈局文件是這樣的:

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

注:截圖是一個棒棒糖預裝置上捕獲。

+0

能否請你再試一次,而不'機器人:填充= 「4DP」'你的RelativeLayout的? – 2014-12-27 15:41:27

回答

62

我通過developer docs又去,結果發現:

在API 20之前,CardView不夾卡的邊界爲圓角。相反,它將填充添加到內容,以便它不會與圓角重疊。

因此,對於預棒棒糖設備,我必須在cardview上調用setPreventCornerOverlap (false);

更新:同樣可以通過在卡片視圖中添加app:cardPreventCornerOverlap="false"通過xml代碼完成。

+1

這是要走的路。 – 2015-04-05 14:28:29

+1

你真棒!這就是我所需要的。 – Krit 2015-06-26 19:44:27

+1

謝謝!有用。但有一個問題。添加此標籤後,它將消除角落半徑。我該如何解決這個問題? – 2015-09-14 16:20:37

1

設置app:cardPreventCornerOverlap="false"將解決問題,但也刪除角落所有的前棒棒糖設備。如果您希望在所有設備上圓角,手動添加:

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> 

在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" 
    /> 

但這種方法只適用於堅實的背景,如黑色或白色。

0

只需使用的FrameLayout而不是LinearLayout中,它的工作原理

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