android - Cardvew にあるときに画像が表示されない

okwaves2024-01-25  11

以下は私のコードです:

<androidx.cardview.widget.CardView
        android:id="@+id/cv_back"
        android:layout_width="@dimen/walletFuncFrameSize"
        android:layout_height="@dimen/walletFuncFrameSize"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginStart="24dp"
        app:cardCornerRadius="250dp">

        <androidx.cardview.widget.CardView
            android:layout_width="@dimen/walletFuncSize"
            android:layout_height="@dimen/walletFuncSize"
            app:cardCornerRadius="250dp"
            android:layout_gravity="center">

            <ImageView
                android:layout_width="@dimen/walletFuncImageSize"
                android:layout_height="@dimen/walletFuncImageSize"
                android:background="@drawable/back"
                android:scaleType="centerCrop"
                android:layout_gravity="center" />

        </androidx.cardview.widget.CardView>
    </androidx.cardview.widget.CardView>

Android 10 スマートフォンでテストすると、問題なく動作しました。しかし、Android 8.0 スマートフォンでテストすると、画像が表示されません。

すべてのカードビューを削除しようとしましたが、imageView のみを保持し、最終的に画像が表示されました。

この問題を解決する方法を知っている人はいますか?

私も試してみました:

src と srcCompat および ImageView の背景 両方の androidx.cardview.widget.CardView を com.google.android.material.card.materialCardView に変更します。 1 つの CardView を削除する

app:cardCornerRadius="250dp"と;適切な半径を指定します。例: 20dp 、 30dp

– チャンド・モハド

2020 年 9 月 3 日 10:42

@chandmohd CardView を円として作成したいのですが、

– ベルリン

2020 年 9 月 3 日 10:45

@chandmohd は、実際にあなたが指摘した問題であることがわかりました。どうもありがとうございます:D

– ベルリン

9月2020 年 3 月 11:03



------------------------

内側のカード ビューまたはその両方から半径を削除してみてください。 画像が表示される場合は、半径を小さくするか、カード ビューのサイズを大きくする必要があります。

両方のカード ビューの半径が大きすぎるため、ImageView が表示されません。また、カード ビューが十分に大きくないため、半径が画像と重なっている可能性があります。



------------------------

カード ビュー内にレイアウトを配置し、画像ビューをその子にします。

<androidx.cardview.widget.CardView
        android:id="@+id/cv_back"
        android:layout_width="@dimen/walletFuncFrameSize"
        android:layout_height="@dimen/walletFuncFrameSize"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        android:layout_marginTop="24dp"
        android:layout_marginStart="24dp"
        app:cardCornerRadius="250dp">

        <LinearLayout
            android:layout_width="@dimen/walletFuncSize"
            android:layout_height="@dimen/walletFuncSize"
            android:background="@drawable/oval"
            android:orientation=vertical
            android:layout_gravity="center">

            <ImageView
                android:layout_width="@dimen/walletFuncImageSize"
                android:layout_height="@dimen/walletFuncImageSize"
                android:background="@drawable/back"
                android:scaleType="centerCrop"
                android:layout_gravity="center" />

        </LinearLayout>
    </androidx.cardview.widget.CardView>

@drawable/oval:

<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="@color/colorPrimary" />
</shape>



------------------------

画像を円形で表示したい場合

マテリアル デザイン ライブラリは、カスタム シェイプを使用せずに任意のシェイプを作成する ShapeableImageView を提供します

例:

<com.google.android.material.imageview.ShapeableImageView
                android:id="@+id/ivSchoolIcon"
                android:layout_width="56dp"
                android:layout_height="56dp"
                android:adjustViewBounds="true"
                android:padding="2dp"
                android:scaleType="centerCrop"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:shapeAppearanceOverlay="@style/circleImageView"
                app:srcCompat="@drawable/ic_kid_placeholder" />

style.xml でスタイルを定義します。

 <style name="circleImageView" parent="">
        <item name="cornerFamily">rounded</item>
        <item name="cornerSize">50%</item>
        <item name="android:shadowRadius">100</item>
        <item name="android:shadowColor">@color/gray</item>
        <item name="backgroundOverlayColorAlpha">12</item>
    </style>

依存関係:

implementation 'com.google.android.material:material:1.3.0-alpha01'

総合生活情報サイト - OKWAVES
総合生活情報サイト - OKWAVES
生活総合情報サイトokwaves(オールアバウト)。その道のプロ(専門家)が、日常生活をより豊かに快適にするノウハウから業界の最新動向、読み物コラムまで、多彩なコンテンツを発信。