微光效果不适用于高度 wrap_content

Question

我正在尝试使用 wrap_content 的高度实现微光效果，但图像没有加载，我知道为什么它没有加载图像，因为 imageView 有 wrap_content 和shimmer 也有 wrap_content 但我希望高度应该是 wrap_content 而不是固定的。

在 shimmer 中实现固定高度（例如 200dp）后它可以工作，但之后图像无法加载

我想让它像Pinterest一样根据图片调整高度

XML 文件

post_item_container_search.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/imagePostSearch"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="6dp"
    android:layout_marginTop="11dp"
    android:layout_marginEnd="6dp"
    android:contentDescription="@string/todo"
    app:shapeAppearanceOverlay="@style/RoundedCorner" />

post_item_containe_shimmer.xml

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

这是将 minHeight 添加到两个或实际 imageView 后的样子

Answer 1

默认情况下，wrapcontent 没有任何大小，所以它是 0dp，你需要定义 50dp 或其他的微光高度，然后你才能看到微光。

可以参考这个blog 或者尝试使用这个

post_item_container_search.xml

 <com.google.android.material.imageview.ShapeableImageView
 xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/imagePostSearch"
         android:layout_width="200dp"
         android:layout_height="200dp"
         android:scaleType="fitCenter"
         android:layout_marginStart="6dp"
         android:layout_marginTop="11dp"
         android:layout_marginEnd="6dp"
         android:contentDescription="@string/todo"
         app:shapeAppearanceOverlay="@style/RoundedCorner" />

Answer 2

请为 ImageView 保留 android:minHeight，因为它会给你一个最小高度，而且 android:height 可以是 wrap_content，所以如果图像大于minHeight.

例如，

<com.google.android.material.imageview.ShapeableImageView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/imageShimmer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:minHeight="100dp"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

Answer 3

您可以为 shimmer 创建一个具有固定高度的虚拟视图，使其可见并显示它直到图像加载，一旦图像加载，使虚拟视图可见性消失。

//XML

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <shimmerView //You can use your own
            android:id="@+id/dummyShimmerView"
            android:layout_width="100dp"
            android:layout_height="100dp"/>

        <ImageView
            android:id="@+id/postImageView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:visibility="gone"/>

    </RelativeLayout>

//dummyShimmerView visibility is visible byDefault
Glide.with(context)
            .load(url)
            .listener(object : RequestListener<Drawable> {
                override fun onLoadFailed(e: GlideException?, model: Any?, target: Target<Drawable>?, isFirstResource: Boolean): Boolean {
                    //TODO: something on exception
                }
                override fun onResourceReady(resource: Drawable?, model: Any?, target: Target<Drawable>?, dataSource: DataSource?, isFirstResource: Boolean): Boolean {
                    Log.d(TAG, "OnResourceReady")
                    dummyShimmerView.visibility = View.GONE
                    postImageView.visibility = View.VISIBLE
                    return false
                }
            })
            .into(imgView)

Answer 4

After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading

在那种情况下，您应该首先为 ImageView 设置一个绝对值 width/height。稍后，如果确实需要，您可以将其设置回 WARP_CONTENT。但首先您需要一个 estimated/absolute width/height 用于视图。

int height = bitmap.getHeight();
int width = bitmap.getWidth();

ShapeableImageView siv = findViewById(R.id.imagePostSearch);
ViewGroup.LayoutParams params = siv.getLayoutParams();
params.height = height;
params.width = width;

//To set it back to warp content or match parent:
params.height = ViewGroup.LayoutParams.WRAP_CONTENT;
params.width = ViewGroup.LayoutParams.MATCH_PARENT;

微光效果不适用于高度 wrap_content

Shimmer Effect not working on Height wrap_content

java

android

placeholder

android-animation

android-recyclerview