缩放图像以填充图像视图宽度并保持长宽比

I have a GridView. The data of GridView is request from a server.

我有一个显示数据表格。GridView的数据是从服务器请求的。

Here is the item layout in GridView:

这是GridView中的项目布局:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/analysis_micon_bg"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    android:paddingBottom="@dimen/half_activity_vertical_margin"
    android:paddingLeft="@dimen/half_activity_horizontal_margin"
    android:paddingRight="@dimen/half_activity_horizontal_margin"
    android:paddingTop="@dimen/half_activity_vertical_margin" >

    <ImageView
        android:id="@+id/ranking_prod_pic"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:adjustViewBounds="true"
        android:contentDescription="@string/app_name"
        android:scaleType="centerCrop" />

    <TextView
        android:id="@+id/ranking_rank_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/ranking_prod_num"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/ranking_prod_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

I request data from server, get image url and load image to Bitmap

我从服务器请求数据，获取图像url并将图像加载到位图

public static Bitmap loadBitmapFromInputStream(InputStream is) {
    return BitmapFactory.decodeStream(is);
}

public static Bitmap loadBitmapFromHttpUrl(String url) {
    try {
        return loadBitmapFromInputStream((InputStream) (new URL(url).getContent()));
    } catch (Exception e) {
        Log.e(TAG, e.getMessage());
        return null;
    }
}

and there is the code of getView(int position, View convertView, ViewGroup parent) method in adapter

适配器中有getView(int position, View convertView, ViewGroup parent)方法的代码

Bitmap bitmap = BitmapUtil.loadBitmapFromHttpUrl(product.getHttpUrl());
prodImg.setImageBitmap(bitmap);

The image size is 210*210. I run my application on my Nexus 4. The image does fill ImageView width, but the ImageView height does not scale. ImageView does not show the whole image.

图像大小为210*210。我在Nexus 4上运行我的应用程序。图像确实填充了ImageView的宽度，但是ImageView的高度没有缩放。ImageView不显示整个图像。

How do I solve this problem?

我如何解决这个问题?

14 个解决方案

#1

Without using any custom classes or libraries:

不使用任何自定义类或库:

<ImageView
    android:id="@id/img"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitCenter" />

scaleType="fitCenter" (default when omitted)

scaleType = " fitCenter "省略时(默认)

• will make it as wide as the parent allows and up/down-scale as needed keeping aspect ratio.
• 将使它尽可能宽的家长允许和上升/下降的需要保持纵横比。

scaleType="centerInside"

scaleType = " centerInside "

• if the intrinsic width of src is smaller than parent width
  will center the image horizontally
• 如果src的固有宽度小于父宽度，则将图像水平居中。
• if the intrinsic width of src is larger than parent width
  will make it as wide as the parent allows and down-scale keeping aspect ratio.
• 如果src的固有宽度大于父宽，则使其尽可能宽，并降低了保持高宽比。

It doesn't matter if you use android:src or ImageView.setImage* methods and the key is probably the adjustViewBounds.

使用android:src还是ImageView都无所谓。setImage*方法和键可能是调整边界。

#2

I like answer of arnefm but he made a small mistake (see comments) which I will try to correct:

我喜欢arnefm的回答，但他犯了一个小错误(见评论)，我将努力改正:

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

/**
 * ImageView that keeps aspect ratio when scaled
 */
public class ScaleImageView extends ImageView {

  public ScaleImageView(Context context) {
    super(context);
  }

  public ScaleImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

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

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    try {
      Drawable drawable = getDrawable();
      if (drawable == null) {
        setMeasuredDimension(0, 0);
      } else {
        int measuredWidth = MeasureSpec.getSize(widthMeasureSpec);
        int measuredHeight = MeasureSpec.getSize(heightMeasureSpec);
        if (measuredHeight == 0 && measuredWidth == 0) { //Height and width set to wrap_content
          setMeasuredDimension(measuredWidth, measuredHeight);
        } else if (measuredHeight == 0) { //Height set to wrap_content
          int width = measuredWidth;
          int height = width *  drawable.getIntrinsicHeight() / drawable.getIntrinsicWidth();
          setMeasuredDimension(width, height);
        } else if (measuredWidth == 0){ //Width set to wrap_content
          int height = measuredHeight;
          int width = height * drawable.getIntrinsicWidth() / drawable.getIntrinsicHeight();
          setMeasuredDimension(width, height);
        } else { //Width and height are explicitly set (either to match_parent or to exact value)
          setMeasuredDimension(measuredWidth, measuredHeight);
        }
      }
    } catch (Exception e) {
      super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
  }

}

Thus your ImageView will be scaled properly and will have no dimension problems if (for instance) put inside of ScrollView

因此，您的ImageView将被适当地缩放，如果(例如)放在ScrollView中，则不会出现任何维数问题

#3

I had a similar problem once. I solved it by making a custom ImageView.

我曾经遇到过类似的问题。我通过定制ImageView来解决它。

public class CustomImageView extends ImageView

Then override the onMeasure method of the imageview. I did something like this I believe:

然后重写imageview的onMeasure方法。我做过这样的事:

    @Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    try {
        Drawable drawable = getDrawable();

        if (drawable == null) {
            setMeasuredDimension(0, 0);
        } else {
            float imageSideRatio = (float)drawable.getIntrinsicWidth() / (float)drawable.getIntrinsicHeight();
            float viewSideRatio = (float)MeasureSpec.getSize(widthMeasureSpec) / (float)MeasureSpec.getSize(heightMeasureSpec);
            if (imageSideRatio >= viewSideRatio) {
                // Image is wider than the display (ratio)
                int width = MeasureSpec.getSize(widthMeasureSpec);
                int height = (int)(width / imageSideRatio);
                setMeasuredDimension(width, height);
            } else {
                // Image is taller than the display (ratio)
                int height = MeasureSpec.getSize(heightMeasureSpec);
                int width = (int)(height * imageSideRatio);
                setMeasuredDimension(width, height);
            }
        }
    } catch (Exception e) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

This will stretch the image to fit the screen while maintaining the aspect ratio.

这将拉伸图像以适应屏幕，同时保持高宽比。

#4

Use android:scaleType="centerCrop".

使用android:scaleType = " centerCrop”。

#5

I did something similar to the above and then banged my head against the wall for a few hours because it did not work inside a RelativeLayout. I ended up with the following code:

我做了类似的事情，然后我的头撞到墙上几个小时，因为它在一个相对布局中不起作用。我得到了以下代码:

package com.example;

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

public class ScaledImageView extends ImageView {
    public ScaledImageView(final Context context, final AttributeSet attrs) {
        super(context, attrs);
    }

    @Override
    protected void onMeasure(final int widthMeasureSpec, final int heightMeasureSpec) {
        final Drawable d = getDrawable();

        if (d != null) {
            int width;
            int height;
            if (MeasureSpec.getMode(heightMeasureSpec) == MeasureSpec.EXACTLY) {
                height = MeasureSpec.getSize(heightMeasureSpec);
                width = (int) Math.ceil(height * (float) d.getIntrinsicWidth() / d.getIntrinsicHeight());
            } else {
                width = MeasureSpec.getSize(widthMeasureSpec);
                height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
            }
            setMeasuredDimension(width, height);
        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
}

And then to prevent RelativeLayout from ignoring the measured dimension I did this:

为了防止你忽略测量的尺寸我这样做了

    <FrameLayout
        android:id="@+id/image_frame"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_below="@+id/something">

        <com.example.ScaledImageView
            android:id="@+id/image"
            android:layout_width="wrap_content"
            android:layout_height="150dp"/>
    </FrameLayout>

#6

This will not be applicable if you set image as background in ImageView, need to set at src(android:src).

如果在ImageView中设置图像为背景，需要在src(android:src)设置，则不适用。

Thanks.

谢谢。

#7

Use these properties in ImageView to keep aspect ratio:

在ImageView中使用这些属性来保持长宽比:

android:adjustViewBounds="true"
android:scaleType="fitXY"

#8

You can try to do what you're doing by manually loading the images, but I would very very strongly recommend taking a look at Universal Image Loader.

您可以尝试通过手动加载图像来完成您正在做的工作，但是我强烈建议您看看Universal Image Loader。

I recently integrated it into my project and I have to say its fantastic. Does all the worrying about making things asynchronous, resizing, caching images for you. It's really easy to integrate and set up. Within 5 minutes you can probably get it doing what you want.

我最近把它融入到我的项目中，我不得不说它太棒了。所有的担心都是为了让事情异步化，调整大小，为您缓存图像。集成和设置非常容易。5分钟之内你就能让它做你想做的事。

Example code:

示例代码:

//ImageLoader config
DisplayImageOptions displayimageOptions = new DisplayImageOptions.Builder().showStubImage(R.drawable.downloadplaceholder).cacheInMemory().cacheOnDisc().showImageOnFail(R.drawable.loading).build();

    ImageLoaderConfiguration config = new ImageLoaderConfiguration.Builder(getApplicationContext()).
            defaultDisplayImageOptions(displayimageOptions).memoryCache(new WeakMemoryCache()).discCache(new UnlimitedDiscCache(cacheDir)).build();

    if (ImageLoader.getInstance().isInited()) {
        ImageLoader.getInstance().destroy();
    }
    ImageLoader.getInstance().init(config);

    imageLoadingListener = new ImageLoadingListener() {
        @Override
        public void onLoadingStarted(String s, View view) {

        }

        @Override
        public void onLoadingFailed(String s, View view, FailReason failReason) {
            ImageView imageView = (ImageView) view;
            imageView.setImageResource(R.drawable.android);
            Log.i("Failed to Load " + s, failReason.toString());
        }

        @Override
        public void onLoadingComplete(String s, View view, Bitmap bitmap) {

        }

        @Override
        public void onLoadingCancelled(String s, View view) {

        }
    };

//Imageloader usage
ImageView imageView = new ImageView(getApplicationContext());
    if (orientation == 1) {
        imageView.setLayoutParams(new LinearLayout.LayoutParams(width / 6, width / 6));
    } else {
        imageView.setLayoutParams(new LinearLayout.LayoutParams(height / 6, height / 6));
    }
    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
    imageLoader.displayImage(SERVER_HOSTNAME + "demos" + demo.getPathRoot() + demo.getRootName() + ".png", imageView, imageLoadingListener);

This can lazy load the images, fit them correctly to the size of the imageView showing a placeholder image while it loads, and showing a default icon if loading fails and caching the resources.

这可以延迟加载图像，将它们正确地调整到imageView的大小，在加载时显示占位符图像，并在加载失败并缓存资源时显示默认图标。

-- I should also add that this current config keeps the image aspect ratio, hence applicable to your original question

——我还应该加上，这个当前的配置保持了图像宽比，因此可以适用于你的原始问题。

#9

Try this: it solved the problem for me

试试这个:它帮我解决了问题

   android:adjustViewBounds="true"
    android:scaleType="fitXY"

#10

Yo don't need any java code. You just have to :

您不需要任何java代码。你只需要:

<ImageView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:adjustViewBounds="true"
    android:scaleType="centerCrop" />

The key is in the match parent for width and height

键在匹配父元素中表示宽度和高度

#11

To create an image with width equals screen width, and height proportionally set according to aspect ratio, do the following.

要创建一个宽度等于屏幕宽度、高度按长宽比按比例设置的图像，请执行以下操作。

Glide.with(context).load(url).asBitmap().into(new SimpleTarget<Bitmap>() {
                    @Override
                    public void onResourceReady(Bitmap resource, GlideAnimation<? super Bitmap> glideAnimation) {

                        // creating the image that maintain aspect ratio with width of image is set to screenwidth.
                        int width = imageView.getMeasuredWidth();
                        int diw = resource.getWidth();
                        if (diw > 0) {
                            int height = 0;
                            height = width * resource.getHeight() / diw;
                            resource = Bitmap.createScaledBitmap(resource, width, height, false);
                        }
                                              imageView.setImageBitmap(resource);
                    }
                });

Hope this helps.

希望这个有帮助。

#12

try with this simple line... add this line in your xml code in image view tag with out adding any dependency android:scaleType="fitXY"

试试这条简单的线……在图像视图标签的xml代码中添加这一行，并添加任何依赖项android:scaleType="fitXY"

#13

Use picasso which is easy to use..

使用容易使用的毕加索。

In your Adapter ..

在你的适配器。

@Override
public void getView(int position, View convertView, ViewGroup parent) {

 ImageView view = (ImageView) convertView.findViewById(R.id.ranking_prod_pic);

 Picasso.with(context).load(url).into(view); //url is image url

 //you can resize image if you want

 /* Picasso.with(context) .load(url) .resize(50, 50) .centerCrop() .into(view) */

}

http://square.github.io/picasso/

http://square.github.io/picasso/

#14

Just use UniversalImageLoader and set

使用UniversalImageLoader和set

DisplayImageOptions.Builder()
    .imageScaleType(ImageScaleType.EXACTLY_STRETCHED)
    .build();

and no scale settings on ImageView

在ImageView上没有缩放设置