闪光效果不适用于高度 wrap_content

Posted 2023-03-05

【中文标题】闪光效果不适用于高度 wrap_content

【英文标题】：Shimmer Effect not working on Height wrap_content

【发布时间】：2021-07-07 04:58:53

【问题描述】：

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

在微光中实现例如 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_
    android:layout_
    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_
android:layout_
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

将 minHeight 添加到两者或实际 imageView 后的样子

【问题讨论】：

试试这个库github.com/sharish/ShimmerRecyclerView

@SagarRawal 这可能是因为您的 imageview 没有确定的大小，例如尝试将您的 imageview 高度更改为 48dp。

@YaMiN 你的意思是我必须在图像视图或微光 XML 中更改大小？

@YaMiN 好的，我尝试将微光高度设置为 200dp，微光正在工作，但之后图像没有加载我知道为什么现在但问题是我必须使图像高度 wrap_content 因为我想让它像 Pinterest 一样根据法师高度调整高度，所以如果我修复图像高度，我将无法获得可调整高度元素

你是在尝试 recyclerView 中的微光效果

【参考方案1】：

默认情况下，wrapcontent 没有任何大小，因此它是 0dp，您需要为 shimmer 的高度定义 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_
         android:layout_
         android:scaleType="fitCenter"
         android:layout_marginStart="6dp"
         android:layout_marginTop="11dp"
         android:layout_marginEnd="6dp"
         android:contentDescription="@string/todo"
         app:shapeAppearanceOverlay="@style/RoundedCorner" />

【参考方案2】：

在微光中实现例如 200dp 的固定高度后，它可以工作，但之后图像不会加载

在这种情况下，您应该首先为ImageView 设置绝对宽度/高度。稍后，如果您确实需要，可以将其设置回WARP_CONTENT。但首先您需要一个估计的/绝对的视图宽度/高度。

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;

【讨论】：

我必须在搜索片段java文件中实现这个方法吗？

错误：- int android.graphics.Bitmap.getHeight()' 在空对象引用上

当然是在活动或片段中。检查here 以了解如何获取片段中的 id。位图是您要重新加载的图像。在这种情况下，您可以使用微光图像。

***.com/questions/67866395/… 请看我的这个问题，有错误

【参考方案3】：

请为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_
android:layout_
android:minHeight="100dp"
android:layout_marginStart="11dp"
android:layout_marginTop="11dp"
android:background="#E7E7E7"
android:contentDescription="@string/todo"
app:shapeAppearanceOverlay="@style/RoundedCorner" />

【讨论】：

我试过了，但我没有得到可调节高度元素

您是否在两个图像上都保留了minHeight - 实际和微光？新图像的尺寸是多少？

兄弟，我已经尝试了所有三种可能的方法 1. 在微光图像视图中添加 minHieght .2。在实际 imageView 中添加 minHieght 3. 在实际 imageView 和 shimmer imageView 中添加 minHieght

，在第 1 和第 3 个选项中，图像正在加载，但不是根据我想要的，而在第 2 种图像中根本没有加载

您是否可以将屏幕截图/短视频附加到显示正在发生的事情的问题中？

【参考方案4】：

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

//XML

<RelativeLayout
        android:layout_
        android:layout_>

        <shimmerView //You can use your own
            android:id="@+id/dummyShimmerView"
            android:layout_
            android:layout_/>

        <ImageView
            android:id="@+id/postImageView"
            android:layout_
            android:layout_
            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)

【讨论】：

兄弟能不能多解释一下代码

@SagarRawal 请看一下