为什么我的图像在加载滑动库后会缩小

时间:2015-08-03 11:50:35

标签: android gridview android-glide

嗨我正在使用glide图像加载器库填充gridview,当它们第一次被调用到我的片段时,它们看起来像这样perfect 但在上下滚动后,它们会调整大小并显示为too small 这是我正在使用我的gridview,滑动库,还是像我的占位符图像?在第二个屏幕截图上如果我按下一个图像,它会亮起来显示它实际上填满整个空间,任何人都知道我在这里做错了什么?我已经尝试在滑行中使用centercrop改变调用等等,但似乎没有任何区别,我不确定如何计算每个单元格的宽度和高度,欢迎任何建议

EDIT  这是我如何调用glide

   Glide.with(getActivity())
                .load(mThumbIds[position])
                .placeholder(R.drawable.placeholder)
                .error(R.drawable.ic_drawer)
                .centerCrop()
                .override(500,300)
                .into(imageView);

7 个答案:

答案 0 :(得分:9)

实际上,您必须为图像容器(ImageView)提供固定宽度和高度。

<ImageView
    android:id="@+id/channelImage"
    android:layout_width="65dp"
    android:layout_height="65dp"
    android:layout_centerHorizontal="true"
    android:layout_margin="10dp"
    android:src="@drawable/sama" />

然后当你调用滑行时,你必须使用覆盖方法动态覆盖你的宽度和高度。这是容器的最大宽度和高度。

Glide.with(getActivity())
                    .load("your url")

                    .placeholder(R.drawable.tv2v_icon)
                    .diskCacheStrategy(DiskCacheStrategy.ALL)
                    .fitCenter()
                    .override(500,500)
                    .into(channelImage);
希望这可以帮到你。

答案 1 :(得分:3)

使用 .dontAnimate()方法解决问题。

Glide.with(context)
                .using(new FirebaseImageLoader())
                .load(pathReference)
                .dontAnimate()
                .placeholder(R.drawable.place_holder)
                .into(holder.logo);

答案 2 :(得分:2)

无论如何,有.fitCenter()或.centerCrop()等方法。尝试在

中使用此方法
    Glide.with(getApplicationContext())
                            .load("")
                            .centerCrop()
                            .placeholder(R.drawable.ic_launcher)
                            .crossFade()
.override(1000,1000)
                            .into(myImageView); 
           .

答案 3 :(得分:0)

对于几乎完全相同的问题我只需要添加.override( maxItemWidth maxItemHeight 。这似乎阻止了Glide所做的任何事情导致图像缩小。

注意: maxItemWidth / maxItemHeight 是我用于回收站视图项容器的值,但保存图像的ImageView实际上更小(因为边框和标签)。

    Glide
        .with(context)
        .load(categoryItem.getThumbnail())
        .asBitmap()
        .fitCenter()
        .override(itemWidth, itemHeight)
        .into(holder.imgIcon);

这是我的xml好奇:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:id="@id/item_container"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:layout_gravity="center_vertical"
             android:orientation="vertical"
             android:padding="4dp">


    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:background="@drawable/rounded_white_rectangle"
        android:padding="2dp"
        >

        <ImageView
            android:id="@+id/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:scaleType="fitCenter"
            android:adjustViewBounds="true"
            />

    </FrameLayout>

</FrameLayout>

答案 4 :(得分:0)

我找到了适用于Glide V4(4.8.0)版本的解决方案

在gradle中导入“ Glide”(当前最新版本为4.8.0):

    implementation 'com.github.bumptech.glide:glide:4.8.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.8.0'

您在RecycleView项目中的ImageView应该如下所示:

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/ic_launcher_background" />

    </RelativeLayout>

并在您的适配器中:

        final Content content = getItem(position);
        ImageViewHolder viewHolder = (ImageViewHolder) holder;

        RequestOptions options = new RequestOptions();
        options.optionalFitCenter();

        Glide.with(Application_News16.getAppContext())
                .load(content.getValue())
                .apply(options)
                .apply(new RequestOptions()
                        .placeholder(R.drawable.img_loading_s)
                        .error(R.drawable.img_error_s))
                .into(viewHolder.image);

答案 5 :(得分:0)

以下帮助了我

1)在图像视图中使用过的AdjustViewBounds =“ true”->这将使图像视图在绘制/重新绘制/调整大小时根据其图像保持其宽高比

2)为回收者视图的项目视图xml和图像视图设置layout_width = match_parent和layout_height = wrap_content。

原因:

假设使用Grid Layout Manager设置了Recycler视图,该管理器在垂直方向上具有2列 它将强制回收者视图的项目行的xml为屏幕宽度的一半。 由于项目行及其chid的(imageview)layout_height属性中match_parent的值,它将导致图像变为屏幕宽度的一半。 现在,由于adjustViewBounds = true,图像视图本身将调整其高度以保持纵横比。

答案 6 :(得分:-1)

覆盖矩形图像可能会导致有时高度更大而宽度有时更无法正确显示图像。

这是我所做的,以防万一有人想探索。修复了Glide导致上下滚动RecyclerView时缩小图像的错误。

仅供参考:我使用的是androidx而不是支持库,但它也应该与ImageView和AppCompatImageView小部件一起使用。

这是RecyclerView的项目布局中的代码段:

<RelativeLayout...
       <androidx.appcompat.widget.AppCompatImageView
           android:id="@+id/attachment_image"
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_centerInParent="true"
           android:adjustViewBounds="true"
           android:background="@drawable/camera_image_preview_default"
           android:minWidth="400dp"
           android:scaleType="centerCrop" />

</RelativeLayout>

这是我的适配器中onBindViewHolder重写中的代码:

@Override
public void onBindViewHolder(@NonNull RecyclerView.ViewHolder holder, int position) {
    ....
    ....
    attachmentImage.layout(0, 0, 0, 0);
    Glide.with(context)
        .load(Uri.fromFile(new File(AppGlobals.IMAGES_THUMBNAIL_STORE_PATH + packet.getImageFileName())))
        .placeholder(ResourcesCompat.getDrawable(context.getResources(), R.drawable.image_loading_placeholder, null))
        .centerCrop()
        .error(ResourcesCompat.getDrawable(context.getResources(), R.drawable.missing_thumbnail, null))
        .into(attachmentImage);
    ....
    ....
}

如果您注意到,

  1. 在Glide绑定之前,ImageView已设置为布局0、0、0、0。这将确保Glide将其解释为新的布局膨胀并且不使用缓存策略。

  2. minWidth已设置为400dp,而layout_width已设置为match_parent,而layout_height已设置为{{ 1}}。您可以根据自己选择的限制来操纵wrap_content

  3. 绑定将在运行时使用minWidth,因此在设计时在xml布局中设置的centerCrop()并不重要。

仅供参考:此示例使用从本地设备的公共外部存储目录中加载图像。使用其他实现从网络或URL加载

信用:TWiStErRob在Glide Github社区论坛中提到并建议将布局设置为全零。

@ https://github.com/TWiStErRob

对于问题#1591

https://github.com/bumptech/glide/issues/1591

请注意,如果您在XML布局中使用绝对scaleTypelayout_height设置ImageView -分别说400dp和300dp,则Glide可以完美地工作。只有当每张图像的尺寸都不同时,人们才能看到问题所在。