webentwicklung-frage-antwort-db.com.de

Unnötige Auffüllung in CardView?

Ich habe CardView in meiner App implementiert und alles funktioniert einwandfrei, es sei denn, das Bild wird etwas aufgefüllt, wenn ich die Karte mit einem Radius versetze.

Es sieht so aus: screenshot_2014-12-27-20-31-55

Aber in Android docs und in diesem Artikel Das Bild nimmt den gesamten Kartenausschnitt ein, also können Sie mir dabei helfen.

Meine Layoutdatei ist wie folgt:

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

HINWEIS: Der Screenshot wird auf einem Gerät vor dem Lollipop-Gerät aufgenommen.

androidandroid-layoutandroid-5.0-lollipopandroid-cardview
31
Ram Patra

Ich habe die developer docs noch einmal durchgesehen und festgestellt:

Bei API 20 und zuvor schneidet CardView die Begrenzungen der Karte für die abgerundeten Ecken nicht ab. Stattdessen wird der Inhalt mit Füllungen versehen, damit er nicht mit den abgerundeten Ecken überlappt.

Für Pre-Lollipop-Geräte muss ich also setPreventCornerOverlap (false); im cardview aufrufen.

Update: Dasselbe kann mit XML-Code durch Hinzufügen von app:cardPreventCornerOverlap="false" in der Kartenansicht erfolgen.

65
Ram Patra

Durch die Einstellung von app:cardPreventCornerOverlap="false" wird das Problem behoben, es werden jedoch auch alle Geräte vor Lollipop entfernt. Wenn Sie auf allen Geräten eine runde Ecke wünschen, fügen Sie sie manuell hinzu: 

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>

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

Diese Lösung funktioniert jedoch nur bei festem Hintergrund wie Schwarz oder Weiß. 

1
thanhbinh84

Verwenden Sie einfach FrameLayout anstelle von LinearLayout, es funktioniert

<?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>
0
Jitendra Bansiwal