Android ImageView зменшує зображення до ширини із гнучкою висотою без обрізання та спотворення

Question 1

Часто запитують, ніколи не відповідають (принаймні не відтворюваним чином).

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

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
/>

Це призводить до того, що зображення центрируется у вихідному розмірі (менше ширини екрана) з полями збоку. Не добре.

Тож я додав

android:adjustViewBounds="true"

Той самий ефект, нічого хорошого. я додав

android:scaleType="centerInside"

Той самий ефект, нічого хорошого. Я змінився centerInsideна fitCenter. Той самий ефект, нічого хорошого. Я змінився centerInsideна centerCrop.

android:scaleType="centerCrop"

Нарешті, зображення масштабоване до ширини екрана, але обрізане зверху та знизу! Тож я змінився centerCropна fitXY.

android:scaleType="fitXY"

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

Видалення android:adjustViewBounds="true"не має ефекту. Додавання android:layout_gravity, як пропонується в інших місцях, знову не дає ефекту.

Я пробував інші комбінації - безрезультатно. Отже, будь ласка, хтось знає:

Як налаштувати XML ImageView для заповнення ширини екрана, масштабування меншого зображення, щоб заповнити весь вигляд, відображаючи зображення з його співвідношенням сторін без спотворень або обрізання?

EDIT: Я також спробував встановити довільну числову висоту. Це впливає лише на centerCropналаштування. Це спотворить зображення вертикально відповідно до висоти огляду.

Question 2

Я вирішив це, створивши клас Java, який ви включаєте у файл-макет:

public class DynamicImageView extends ImageView {

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

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

        if (d != null) {
            // ceil not round - avoid thin vertical gaps along the left/right edges
        final int width = MeasureSpec.getSize(widthMeasureSpec);
        final int height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
            this.setMeasuredDimension(width, height);
        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
}

Тепер ви використовуєте це, додавши свій клас до файлу макета:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <my.package.name.DynamicImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@drawable/about_image" />
</RelativeLayout>

Question 3

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

<ImageView
            android:id="@+id/imageview_company_logo"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter"
            android:src="@drawable/appicon" />

Question 4

В рамках стандарту розмітки XML немає життєздатного рішення.

Єдиним надійним способом реагувати на динамічний розмір зображення є використання LayoutParamsв коді.

Невтішний.

Question 5

  android:scaleType="fitCenter"

Обчисліть шкалу, яка збереже вихідне співвідношення сторін src, але також забезпечить, щоб src повністю помістився всередині dst. Принаймні одна вісь (X або Y) точно підійде. Результат сконцентрований всередині dst.

редагувати:

Проблема тут полягає в тому, що layout_height="wrap_content"це не дозволяє "збільшити" зображення. Для цього вам доведеться встановити розмір

  android:layout_height="wrap_content"

до

  android:layout_height="100dp"  // or whatever size you want it to be

edit2:

відмінно працює:

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:scaleType="fitCenter"
    android:src="@drawable/img715945m" />

Question 6

Це невелике доповнення до чудового рішення Марка Мартінссона.

Якщо ширина вашого зображення перевищує його висоту, рішення Марка залишить простір у верхній і нижній частині екрана.

Нижче це виправлено, порівнявши ширину та висоту: якщо ширина зображення> = висота, тоді вона буде масштабувати висоту відповідно до висоти екрану, а потім масштабувати ширину, щоб зберегти пропорції. Подібним чином, якщо висота зображення> ширина, тоді вона буде масштабувати ширину відповідно до ширини екрана, а потім масштабувати висоту, щоб зберегти пропорції.

Іншими словами, він належним чином відповідає визначенню scaleType="centerCrop":

http://developer.android.com/reference/android/widget/ImageView.ScaleType.html

Масштабуйте зображення рівномірно (підтримуйте співвідношення сторін зображення) так, щоб обидва розміри (ширина та висота) зображення були рівними або більшими, ніж відповідні розміри виду (мінус заповнення).

package com.mypackage;

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

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

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

        if(d != null) {
            int height = MeasureSpec.getSize(heightMeasureSpec);
            int width = MeasureSpec.getSize(widthMeasureSpec);

            if(width >= height)
                height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
            else
                width = (int) Math.ceil(height * (float) d.getIntrinsicWidth() / d.getIntrinsicHeight());

            this.setMeasuredDimension(width, height);

        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
}

Це рішення автоматично працює в портретному або альбомному режимі. Ви посилаєтесь на це у своєму макеті так само, як і у розв’язку Марка. Наприклад:

<com.mypackage.FixedCenterCrop
    android:id="@+id/imgLoginBackground"
    android:src="@drawable/mybackground"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:scaleType="centerCrop" />

Question 7

Я зіткнувся з тією ж проблемою, але з фіксованою висотою, масштабованою шириною, зберігаючи вихідне співвідношення сторін зображення. Я вирішив це за допомогою зваженого лінійного макета. Сподіваємось, ви можете змінити його відповідно до своїх потреб.

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ImageView
        android:id="@+id/image"
        android:layout_width="0px"
        android:layout_height="180dip"
        android:layout_weight="1.0"
        android:adjustViewBounds="true"
        android:scaleType="fitStart" />

</LinearLayout>

Question 8

Котлін версія Марка Martinsson в відповідь :

class DynamicImageView(context: Context, attrs: AttributeSet) : AppCompatImageView(context, attrs) {
override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {
    val drawable = this.drawable

    if (drawable != null) {
        //Ceil not round - avoid thin vertical gaps along the left/right edges
        val width = View.MeasureSpec.getSize(widthMeasureSpec)
        val height = Math.ceil((width * drawable.intrinsicHeight.toFloat() / drawable.intrinsicWidth).toDouble()).toInt()
        this.setMeasuredDimension(width, height)
    } else {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec)
    }
}

Question 9

Ще одне доповнення до рішення Марка Матінсона. Я виявив, що деякі мої зображення були надмірно масштабованими, ніж інші. Тож я модифікував клас так, щоб зображення масштабувалось на максимальний коефіцієнт. Якщо зображення занадто мало для масштабування на максимальну ширину, не розмито, воно перестає масштабуватися за максимальну межу.

public class DynamicImageView extends ImageView {

    final int MAX_SCALE_FACTOR = 2;
    public DynamicImageView(final Context context) {
        super(context);
    }

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

        if (d != null) {
            // ceil not round - avoid thin vertical gaps along the left/right edges
            int width = View.MeasureSpec.getSize(widthMeasureSpec);
            if (width > (d.getIntrinsicWidth()*MAX_SCALE_FACTOR)) width = d.getIntrinsicWidth()*MAX_SCALE_FACTOR;
            final int height = (int) Math.ceil(width * (float) d.getIntrinsicHeight() / d.getIntrinsicWidth());
            this.setMeasuredDimension(width, height);
        } else {
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        }
    }
}