web-dev-qa-db-ja.com

カードビューコーナーの背景が透明ではない

CardViewサポートウィジェットのカスタム実装がありますが、レイアウトファイルに含めると、コーナーの背景を透明にできないようです。ただし、CardViewサポートウィジェットをレイアウトファイルに配置するだけで、突然機能します。カスタムコンポーネントのコーナーを透明にするにはどうすればよいですか？

example

これは、CardViewのカスタム実装のレイアウトファイルです。

view_card.xml

<?xml version="1.0" encoding="utf-8"?>
<Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:id="@+id/view_card"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    style="@style/Custom.Widget.CardView">

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical"
    Android:padding="@dimen/default_padding">

    <TextView
        Android:id="@+id/view_mainText"
        style="@style/Custom.Widget.TextView.Header"
        Android:textColor="@color/instruction_balloon_text"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

    <TextView
        Android:id="@+id/view_subText"
        Android:textSize="@dimen/text_size_medium"
        Android:textColor="@color/instruction_balloon_text"
        Android:singleLine="false"
        Android:text="Please remove white corners :-("
        Android:textIsSelectable="true"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />
</LinearLayout>

styles.xml

<style name="Custom.Widget.CardView" parent="CardView">
    <item name="cardBackgroundColor">@color/card_backgroundColor</item>
    <item name="cardCornerRadius">12dp</item>
</style>

これは、2つのCardViewを含む私のレイアウトファイルです。 1つ目は白い角があり、2つ目は基本的にview_card.xmlと同じレイアウトですが、白い角がありません（透明）。

example.xml

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="vertical">

    <some.private.namespace.CardView
        Android:id="@+id/custom_card_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_margin="@dimen/default_margin" />

    <Android.support.v7.widget.CardView xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:id="@+id/view_card"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_margin="@dimen/default_margin"
        style="@style/Custom.Widget.CardView">

        <LinearLayout
            Android:layout_width="match_parent"
            Android:layout_height="match_parent"
            Android:orientation="vertical"
            Android:padding="@dimen/default_padding">

            <TextView
                Android:id="@+id/view_mainText"
                style="@style/Custom.Widget.TextView.Header"
                Android:textColor="@color/instruction_balloon_text"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content" />

            <TextView
                Android:id="@+id/view_subText"
                Android:textSize="@dimen/text_size_medium"
                Android:textColor="@color/instruction_balloon_text"
                Android:singleLine="false"
                Android:text="I have no white corners :-)"
                Android:textIsSelectable="true"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content" />
        </LinearLayout>
    </Android.support.v7.widget.CardView>
    ... some other views
</LinearLayout>

更新1

Just89のソリューションを試しましたが、低いAndroidバージョンではクラッシュします。

 Android.graphics.drawable.ColorDrawable cannot be cast to Android.support.v7.widget.RoundRectDrawableWithShadow

簡単に検索したところ、次の投稿が見つかりました。 Android.graphics.drawable.ColorDrawableをAndroid.support.v7.widget.RoundRectDrawableWithShadowにキャストできません

答えは、：setCardBackgroundColorを使用して背景色を設定することを提案しています。ただし、これにより白いコーナーが元に戻ります。

アップデート2

受け入れられた答えはこの問題を解決しますが、それは好ましい解決策ではありません。これらの白い角を引き起こしていたカスタムCardViewコンポーネントを作成するときに間違えました。 this 回答をチェックして、私が間違ったことを確認してください。

androidandroid-layoutandroid-support-libraryandroid-custom-viewandroid-cardview
11
Wirling

カスタム実装では、コンテキストが利用可能な場所で次のコードを使用します。

setBackgroundColor(ContextCompat.getColor(context, Android.R.color.transparent));

編集：

上記のクラッシュを回避するには、Lollipopより前のバージョンのAndroidバージョンに次のコードを使用してください。

  if (Android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.Lollipop){
     getBackground().setAlpha(0);
  } else {
     setBackgroundColor(ContextCompat.getColor(context, Android.R.color.transparent);
  }
24
Just89

数年後、私は複合コンポーネントを作成するときに根本的な間違いを犯しているという結論に達しました。

Android.support.v7.widget.CardViewを拡張する複合コンポーネントを作成する場合、拡張されたレイアウトxmlにCardViewを含めることはできません。基本的には、CardViewを別のCardViewに追加するだけで、カスタムCardViewの背後に白い角ができます。

受け入れられた答え はこの問題を解決します。しかし、それは完璧な解決策ではありません。

実際の問題を解決するには、2つの方法があります。

  1. 複合ビューはAndroid.support.v7.widget.CardViewを拡張し、レイアウトxmlにはAndroid.support.v7.widget.CardViewは含まれていませんが、ルートとして代わりにLinearLayoutが含まれています。スタイリングはクラスで処理する必要があります。
  2. 複合ビューはLinearLayoutを拡張し、レイアウトxmlにはルートとしてAndroid.support.v7.widget.CardViewが含まれています。

私はこの問題を解決するために最初の解決策を選びました。これが同じ過ちを犯した人々に役立つことを願っています。

2
Wirling

このため、レイアウトファイルからカスタムCardViewを作成しているようです。

<some.private.namespace.CardView
        Android:id="@+id/custom_card_view"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content"
        Android:layout_margin="@dimen/default_margin" />

CardViewが何か（LinearLayoutなど）を拡張していて、その親ビュー内に別の子ビューを作成している可能性があります。したがって、カードレイアウトの直接の親を透明に設定してみてください

setBackground（）;

これが役立つかもしれません。

1
Sandeep Sharma

次のような新しいスタイルをstyles.xmlファイルに追加します。

<style name="CardViewRadius">
    <item name="cardBackgroundColor">@color/colorGray</item>
    <item name="cardCornerRadius">18dp</item>
</style>

と使用：

<Android.support.v7.widget.CardView
        style="@style/CardViewRadius"
        Android:layout_marginTop="15dip"
        Android:layout_width="200dp"
        Android:layout_height="100dp"
        Android:layout_gravity="center_horizontal"/>

そして結果： enter image description here

0
ghasem deh

丸みを帯びたコーナービューを別のビュー/レイアウト内にネストしてみることができます。ここの外側のビューは透明な背景を持つことができるので、内側の丸い角が角にスペースを残しても、外側のビューは透明な背景色であるため、それは表示されません。このようなもの ：

<RelativeLayout>
Android:background = "@color/transparent"
< some.private.namespace.CardView
Android:margin="8dp"
.....
/>
</RelativeLayout>
0
Shivam Bhalla

このスクリーンショットに示されているように、湾曲したコーナーが暗い領域/背景で同様の問題が発生していました。 screenshot showing weird dark color in the corner 。

CardElevationを0dpに設定して解決しました。シャドウが必要な場合、これは機能しない可能性があります。

app:cardElevation="0dp"

0
scottyab