Масштабуйте зображення для заповнення ширини ImageView та збереження пропорцій


200

У мене є GridView. Дані 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>

Я запитую дані з сервера, отримую URL-адресу зображення та завантажую зображення Bitmap

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;
    }
}

і є код getView(int position, View convertView, ViewGroup parent)методу в адаптері

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

Розмір зображення - 210*210. Я запускаю свою програму на своєму Nexus 4. Зображення не заповнює ImageViewширину, але ImageViewвисота не масштабується. ImageViewне показує всього зображення.

Як вирішити цю проблему?

Відповіді:


548

Без використання спеціальних класів або бібліотек:

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

scaleType="fitCenter" (за замовчуванням, якщо пропущено)

  • зробить його настільки широким, наскільки дозволяє батько, і збільшуючи / зменшуючи масштаб при необхідності, зберігаючи співвідношення сторін.

scaleType="centerInside"

  • якщо внутрішня ширина srcменшої за батьківську ширину
    буде центрувати зображення по горизонталі
  • якщо внутрішня ширина srcбільше, ніж батьківська ширина
    , зробить її такою ж широкою, як це дозволяє батько, і зменшення співвідношення сторін у нижньому масштабі.

Не має значення, використовуєте ви android:srcчи ImageView.setImage*методи, і ключ, мабуть, є adjustViewBounds.


5
android: layout_height = "wrap_content" android: customViewBounds = "true" android: scaleType = "fitCenter" робить трюк
Джеймс Тан

@JamesTan fill_parentдля ширини - лише хороша практика, працює також фіксований розмір.
TWiStErRob

@TWiStErRob я розумію, що йому потрібен android: prilagodViewBounds = "вірно" з ним, інакше він не підходить відповідно до висоти. і так, ширина, яка відповідає батькам, - це повна версія
Джеймс Тан,

9
Діє як шарм на API 19+, але не на API 16 (тестовано). Власний вигляд Алекса Семенюка також працює на API 16.
Ашкан Сарлак

1
@ F.Mysir котрий 😅, так, це не має значення, яке саме питання, але для поширення належної практики, я цілком згоден.
TWiStErRob

42

Мені подобається відповідь 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);
    }
  }

}

Таким чином, ваш ImageViewрозмір буде належним чином масштабований і не матиме проблем із розмірністю, якщо (наприклад) його помістити всерединуScrollView


THX, я знайшов рішення, трохи нижче відповіді arnefm, перший коментар, який я додав. що thereце посилання
Джо

36

У мене колись була схожа проблема. Я вирішив це, створивши нестандартний ImageView.

public class CustomImageView extends 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);
    }

Це дозволить розтягнути зображення на екран, зберігаючи співвідношення сторін.


1
дивись там . перша відповідь
Джо

Що ж, ця відповідь не точна. Розглянемо ситуацію, де ти встановив android:layout_height="wrap_content". У цьому випадку MeasureSpec.getSize(heightMeasureSpec)буде, 0і ваш viewSideRatioрезультат призведе до Infinity(не потрібно дивуватися, Java float дозволяє такі значення.) У цьому випадку і ваш, heightі widthбуде 0.
Олексій Семенюк

1
Мені потрібно зробити заливку, яку мені потрібно було поміняти (imageSideRatio> = viewSideRatio) на (imageSideRatio <viewSideRatio) .. в іншому випадку хороша відповідь
Марек Халмо

23

Використовуйте android:scaleType="centerCrop".


Не саме те, що запитували, а саме те, що мені потрібно!
nickjm

Ви можете розробити @Jameson? Ви маєте на увазі версії Android?
Мік

Якщо я використовую centerCrop, зображення трохи ріжеться зверху та знизу.
Sreekanth Karumanaghat

9

Я зробив щось подібне до вищезазначеного, а потім ударив головою об стіну протягом декількох годин, бо це не працювало всередині RelativeLayout. Я закінчив із таким кодом:

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);
        }
    }
}

А потім, щоб запобігти RelativeLayoutігноруванню виміряного виміру, я зробив це:

    <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>

5

Використовуйте ці властивості у ImageView, щоб зберегти співвідношення сторін:

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

9
fitXY НЕ зберігає співвідношення сторін. Він розтягує зображення, щоб точно відповідати ширині та висоті макета.
Покинутий кошик

5

Це не застосовується, якщо ви встановите зображення як фон у ImageView, його потрібно встановити на src (android: src).

Дякую.


5

Щоб створити зображення з шириною, що дорівнює ширині екрана, а висоту пропорційно встановити відповідно до пропорції, виконайте наступне.

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);
                    }
                });

Сподіваюся, це допомагає.


це найкраща відповідь, яку я знайшов, і шукаю 2 дні, дякую Фатіма
Картік Рамананат


4

Йо не потрібен код Java. Ви просто повинні:

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

Ключ у батьківському збігу для ширини та висоти


centerCrop фактично вирізає частину зображення.
Sreekanth Karumanaghat

2

спробуйте за допомогою цього простого рядка ... додайте цей рядок у свій код XML у тег перегляду зображень, додавши будь-який андроїд залежності: scaleType = "fitXY"


fitXY не підтримує співвідношення сторін, тому зображення, ймовірно, буде розтягнуте
ProjectDelta

2

використовувати android: ScaleType = "fitXY" в ImageView xml


fitXY не підтримує співвідношення сторін, тому зображення, ймовірно, буде розтягнуте
ProjectDelta

1

Ви можете спробувати робити те, що ви робите, завантажуючи зображення вручну, але я дуже настійно рекомендую поглянути на Universal Image Loader .

Нещодавно я інтегрував його у свій проект, і я мушу сказати, що це фантастично. Чи турбує вас все про те, щоб зробити речі асинхронними, змінити розмір, кешувати зображення для вас. Інтегрувати та налаштувати це дуже просто. Протягом 5 хвилин ви, ймовірно, зможете зробити це, що хочете.

Приклад коду:

//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);

Це може ліниво завантажувати зображення, правильно їх підходити до розміру imageView, показуючи зображення заповнювача під час завантаження, та показуючи піктограму за замовчуванням, якщо завантаження не вдається та кешувати ресурси.

- Я також повинен додати, що ця поточна конфігурація зберігає співвідношення сторін зображення, отже, застосовно до вашого початкового запитання


0

Просто використовуйте UniversalImageLoader і встановлюйте

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

і немає налаштувань масштабу на ImageView


0

У мене була подібна проблема, і я знайшов причину цього через те, що вам потрібно обчислити dp. Android studio розраховує, ImageViewколи ви завантажуєте його з drawable, але коли ви використовуєте інший метод, наприклад завантаження з растрового зображенняdp автоматично не враховується,

Ось мій xml

<ImageView
  android:id="@+id/imageViewer"
  android:layout_width="match_parent"
  android:layout_height="match_parent"//dp is not automaticly updated, when loading from a other source
  android:scaleType="fitCenter"
  tools:srcCompat="@drawable/a8" />

Я використовую Kotlin і завантажую файл, що виводиться з файлу активів, ось як я це обчислюю

val d = Drawable.createFromStream(assets.open("imageData/${imageName}.png"), null)
bitHeight = d.minimumHeight//get the image height
imageViewer.layoutParams.height = (bitHeight * resources.displayMetrics.density).toInt()//set the height
imageViewer.setImageDrawable(d)//set the image from the drawable
imageViewer.requestLayout()//here I apply it to the layout

-1

Використовуйте простий у використанні пікассо.

У своєму адаптері ..

@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/ введіть тут опис зображення

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.