CardView 内的 ImageView 内 CardView答案

【问题标题】：ImageView inside CardView inside CardViewCardView 内的 ImageView 内 CardView
【发布时间】：2019-09-02 14:57:41
【问题描述】：

这里是代码 sn-p ：

<androidx.cardview.widget.CardView
    android:id="@+id/new_main_store_image_CV"
    android:layout_width="@dimen/_250sdp"
    android:layout_height="@dimen/_250sdp"
    app:cardElevation="@dimen/_5sdp"
    app:cardCornerRadius="@dimen/_15sdp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/new_main_store_label_TV"
    app:layout_constraintVertical_bias="0.15">

    <androidx.cardview.widget.CardView
        android:id="@+id/new_main_store_image_CVCV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardCornerRadius="@dimen/_15sdp"
        app:cardElevation="@dimen/_5sdp"
        android:padding="@dimen/_5sdp">

        <ImageView
            android:id="@+id/new_main_store_image_IV"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="@dimen/_5sdp"
            android:scaleType="fitXY"/>

    </androidx.cardview.widget.CardView>

</androidx.cardview.widget.CardView>

这是最终结果：

我想要的是嵌套圆角半径的外观，这也会影响 ImageView。我已经为两个卡片视图提供了cornerRadius 属性，但它只对父卡片视图可见，而对于嵌套卡片视图不可见。

【问题讨论】：

CardView 内的 CardView 是一个糟糕的设计选择。阅读材料设计指南。你想通过嵌套卡片来实现什么？此外，如果您希望图像具有 CardView 的角，请删除填充。
我想要圆角白色边框内的圆角图像
为此使用第二个CardView 有点矫枉过正。相反，在ImageView 中为图像使用RoundedBitmapDrawable。
你可以用这个 RoundedBitmapDrawable
我不知道它是否证明了整个答案的合理性。 :-) 这里有如何使用它的例子：How to use RoundedBitmapDrawable.

标签： android android-layout

【解决方案1】：

不要使用卡片视图，请遵循此。

在 app build.gradle 文件中添加这些行。

implementation 'com.makeramen:roundedimageview:2.3.0'
implementation 'com.github.bumptech.glide:glide:4.9.0'
annotationProcessor 'com.github.bumptech.glide:compiler:4.9.0'

然后创建您的自定义图像视图类。

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;

import androidx.annotation.NonNull;

import com.makeramen.roundedimageview.RoundedImageView;
import com.testapp.application.instance.GlideApp;

import java.io.File;

public class GlideRoundedImageView extends RoundedImageView {
public GlideRoundedImageView(Context context) {
    this(context, null);
}

public GlideRoundedImageView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
}

public GlideRoundedImageView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
}

public void setImageUrl(String imageUrl) {
    if (imageUrl == null)
        return;
    GlideApp.with(getContext())
            .load(imageUrl)
//                .placeholder(R.drawable.profile_default)
            .into(this);
}

public void setImageUrl(String imageUrl, @NonNull Drawable drawable) {
    if (imageUrl == null)
        return;
    GlideApp.with(getContext())
            .load(imageUrl)
            .placeholder(drawable)
            .error(drawable)
            .fallback(drawable)
            .into(this);
}

public void setImageFile(File file) {
    GlideApp.with(getContext())
            .load(file)
//                .placeholder(R.drawable.profile_default)
            .into(this);
}
}

然后在你的 XML 中添加这个。

<com.testapp.GlideRoundedImageView
                        android:id="@+id/ivRounded"
                        android:layout_width="match_parent"
                        android:layout_height="70dp"
                        android:layout_gravity="end"
                        android:scaleType="fitXY"
                        android:src="@drawable/placeholder_image"
                        app:riv_corner_radius="@dimen/five_dp" />

然后在你的活动或片段中添加这个。

        binding.ivRounded.setImageUrl("imageUrl", getResources().getDrawable(R.drawable.placeholder_image));

【讨论】：

【解决方案2】：

您必须将此行添加到您的 CardViews

app:cardPreventCornerOverlap="false"

您的 CardView 代码

<androidx.cardview.widget.CardView
    android:id="@+id/new_main_store_image_CVCV"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardPreventCornerOverlap="false"
    app:cardCornerRadius="@dimen/_15sdp"
    app:cardElevation="@dimen/_5sdp">

    <ImageView
        android:id="@+id/new_main_store_image_IV"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="@dimen/_5sdp"
        android:scaleType="fitXY"/>

</androidx.cardview.widget.CardView>

【讨论】：