web-dev-qa-db-ja.com

CardViewの不要なパディング？

アプリにCardViewを実装しましたが、カードに半径を付けた場合、画像の周りに小さなパディングがあることを除いて、すべて正常に動作します。

次のように表示されます。 screenshot_2014-12-27-20-31-55

しかし、 Android docs および この記事 では、画像はカードビュー全体を取得するため、それを達成するのに役立ちます。

私のレイアウトファイルは次のようなものです：

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

注：スクリーンショットは、Lollipop以前のデバイスでキャプチャされています。

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

開発者ドキュメント をもう一度調べてみたところ、次のことがわかりました。

API 20以前では、CardViewは角丸のカードの境界をクリップしません。代わりに、丸い角と重ならないようにコンテンツにパディングを追加します。

したがって、Lollipop以前のデバイスの場合、カードビューでsetPreventCornerOverlap (false);を呼び出す必要があります。

更新：app:cardPreventCornerOverlap="false"カードビュー。

66
Ram Patra

設定app:cardPreventCornerOverlap="false"は問題を解決しますが、Lollipop以前のすべてのデバイスのコーナーも削除します。すべてのデバイスで角を丸くしたい場合は、手動で追加します。

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>

カードビューで

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

ただし、このソリューションは、黒や白などの無地の背景でのみ機能します。

2
thanhbinh84

LinearLayoutの代わりにFrameLayoutを使用するだけで機能します

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