[英]Shimmer Effect not working on Height wrap_content
I'm trying to implement the shimmer effect with the Height of wrap_content but the images are not loading, I know why it is not loading the images because the imageView has wrap_content and the shimmer also has wrap_content but I want the Height Should be wrap_content and not fixed.我正在尝试使用 wrap_content 的高度来实现微光效果,但图像没有加载,我知道为什么它没有加载图像,因为 imageView 有 wrap_content 并且微光也有 wrap_content 但我希望高度应该是 wrap_content 和不固定。
After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading在微光中实现例如 200dp 的固定高度后,它可以工作,但之后图像没有加载
I want to make it like Pinterest where the height is adjusted according to the image我想让它像 Pinterest 一样根据图像调整高度
XML Files XML 文件
post_item_container_search.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 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" />
this how it looks like after adding minHeight to both or in actual imageView这是将 minHeight 添加到两者或实际 imageView 后的样子
By default, the wrapcontent doesn't have any size so it is 0dp you need to define 50dp or something for the height of shimmer then only you can see the shimmering.默认情况下,wrapcontent 没有任何大小,所以它是 0dp,你需要为微光的高度定义 50dp 或其他东西,然后只有你才能看到微光。
Can refer this blog or try to use this可以参考这个博客或尝试使用这个
post_item_container_search.xml
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" />
Please keep android:minHeight
for the ImageView
as it will give you a minimum height and also android:height
can be wrap_content
so it grows if the image is larger than minHeight
.请为
ImageView
保留android:minHeight
因为它会给你一个最小高度,并且android:height
可以是wrap_content
所以如果图像大于minHeight
它会增长。
For example,例如,
<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" />
You can create a dummy view for shimmer with fixed height, make its visibility to visible and show it until the image loads, and once the image is loaded make the dummy view visibility gone.您可以为具有固定高度的微光创建一个虚拟视图,使其可见性可见并显示它直到图像加载,一旦加载图像,虚拟视图的可见性就消失了。
//XML //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)
After implementing a fixed height of eg 200dp in shimmer it works but after that images are not loading
在微光中实现例如 200dp 的固定高度后,它可以工作,但之后图像没有加载
In that case, you should probably set an absolute width/height for the ImageView
first.在这种情况下,您可能应该首先为
ImageView
设置绝对宽度/高度。 Later, you can set it back to WARP_CONTENT
if you really need to.稍后,如果您确实需要,可以将其设置回
WARP_CONTENT
。 But first you'll need an estimated/absolute width/height for the view.但首先你需要一个估计/绝对宽度/高度的视图。
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.