Поиск…


Вступление

ImageView ( android.widget.ImageView ) представляет собой представление для отображения и управления ресурсами изображения, такими как Drawables и Bitmaps.

Некоторые эффекты, обсуждаемые в этом разделе, могут быть применены к изображению. Источник изображения может быть установлен в файле XML (папке layout ) или программно в коде Java.

Синтаксис

  • Метод setImageResource(int resId) устанавливает setImageResource(int resId) в качестве содержимого этого ImageView .
  • Использование: imageView.setImageResource(R.drawable.anyImage)

параметры

параметр Описание
resId ваше имя файла изображения в папке res (обычно в папке с возможностью drawable )

Установить ресурс изображения

<ImageView
 android:id="@+id/imgExample"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 ...
 />

установить в качестве содержимого ImageView атрибут XML с атрибутом XML:

android:src="@drawable/android2"  

установить программно:

 ImageView imgExample = (ImageView) findViewById(R.id.imgExample);
 imgExample.setImageResource(R.drawable.android2);

Установить альфа

«alpha» используется для указания непрозрачности для изображения.

установить альфа, используя атрибут XML:

android:alpha="0.5"  

Примечание: принимает значение float от 0 (прозрачное) до 1 (полностью видимое)

установить букву программно:

imgExample.setAlpha(0.5f);

введите описание изображения здесь

ImageView ScaleType - Центр

Изображение, содержащееся в ImageView, может не соответствовать точному размеру, указанному в контейнере. В этом случае структура позволяет изменять размер изображения несколькими способами.

Центр

    <ImageView android:layout_width="20dp"
           android:layout_height="20dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="center"
           android:background="@android:color/holo_orange_light"/>

Это не изменит размер изображения, и оно центрирует его внутри контейнера (оранжевый = контейнер)

Центр

В случае, если ImageView меньше изображения, изображение не будет изменяться, и вы сможете увидеть его часть

Изображение центра больше, чем изображение

сильный текст

ImageView ScaleType - CenterCrop

Равномерно масштабируйте изображение (поддерживайте соотношение сторон изображения), чтобы обе размеры (ширина и высота) изображения были равны или больше соответствующего размера представления (минус заполнение).

Официальные документы

Когда изображение соответствует пропорциям контейнера:

введите описание изображения здесь

Когда изображение будет больше, чем контейнер, оно расширит его до большего размера (в этом случае высота) и отрегулирует ширину изображения без изменения его пропорций, в результате чего он будет обрезаться.

введите описание изображения здесь

ImageView ScaleType - CenterInside

Равномерно масштабируйте изображение (поддерживайте соотношение сторон изображения), чтобы обе размеры (ширина и высота) изображения были равны или меньше соответствующего размера представления (минус заполнение).

Официальные документы

Он будет центрировать изображение и изменять его размер до меньшего размера, если размеры обоих контейнеров больше, он будет действовать так же, как и центр.

центр внутри 1

Но если один из размеров мал, он будет соответствовать этому размеру.

центр внутри 2

ImageView ScaleType - FitStart и FitEnd

Увеличьте изображение с помощью START.

Увеличьте изображение с помощью END.

Официальные документы

FitStart

Это будет соответствовать наименьшему размеру контейнера, и он выровнят его до начала.

<ImageView android:layout_width="200dp"
           android:layout_height="200dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitStart"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

подойдет к началу

поместиться влево

FitEnd

Это будет соответствовать минимальному размеру контейнера, и он выровнят его до конца.

<ImageView android:layout_width="200dp"
           android:layout_height="100dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitEnd"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

подходить под дно

подходит для правой

ImageView ScaleType - FitCenter

Увеличьте изображение с помощью CENTER.

Официальные документы

Это расширяет изображение, чтобы попытаться сопоставить контейнер, и он выровнят его по центру, он будет соответствовать меньшему размеру.

Большая высота (соответствует ширине)

введите описание изображения здесь

Такая же ширина и высота.

введите описание изображения здесь

ImageView ScaleType - FitXy

Масштабируйте изображение, используя FILL.

Официальные документы

<ImageView android:layout_width="100dp"
           android:layout_height="200dp"
           android:src="@mipmap/ic_launcher"
           android:id="@+id/imageView"
           android:scaleType="fitXY"
           android:layout_gravity="center"
           android:background="@android:color/holo_orange_light"/>

введите описание изображения здесь

введите описание изображения здесь

введите описание изображения здесь

Тип шкалы

Управляет изменением размера или перемещения изображения в соответствии с размером ImageView .

XML-атрибут:

android:scaleType="..."

я проиллюстрирую различные типы шкал с квадратным ImageView который имеет черный фон, и мы хотим отобразить прямоугольный чертеж на белом фоне в ImageView .

 <ImageView
  android:id="@+id/imgExample"
  android:layout_width="200dp"
  android:layout_height="200dp"
  android:background="#000" 
  android:src="@drawable/android2"
  android:scaleType="..."/>

scaleType должен быть одним из следующих значений:

  1. center : центрируйте изображение в представлении, но не масштабируйте.

введите описание изображения здесь

  1. centerCrop : масштабируйте изображение равномерно (поддерживайте пропорции изображения), чтобы оба размера (ширина и высота) изображения были равны или больше соответствующего размера представления (минус заполнение). Изображение затем центрируется в представлении.

введите описание изображения здесь

  1. centerInside : равномерно масштабируйте изображение (поддерживайте соотношение сторон изображения), чтобы обе размеры (ширина и высота) изображения были равны или меньше соответствующего размера представления (минус заполнение). Изображение затем центрируется в представлении.

введите описание изображения здесь

  1. matrix : Масштабирование с использованием матрицы изображения при рисовании.

введите описание изображения здесь

  1. fitXY : масштабируйте изображение, используя FILL .

введите описание изображения здесь

  1. fitStart : масштабируйте изображение с помощью START .

введите описание изображения здесь

  1. fitCenter : масштабируйте изображение с помощью CENTER .

введите описание изображения здесь

  1. fitEnd : масштабируйте изображение с помощью END .

введите описание изображения здесь

Установить оттенок

Установите цвет тонирования для изображения. По умолчанию оттенок будет смешиваться с использованием режима SRC_ATOP .

задать оттенок с использованием атрибута XML:

android:tint="#009c38"

Примечание. Должно быть значение цвета в виде "#rgb" , "#argb" , "#rrggbb" или "#aarrggbb" .

установить оттенок программно:

imgExample.setColorFilter(Color.argb(255, 0, 156, 38));

и вы можете очистить этот цветной фильтр:

imgExample.clearColorFilter();

Пример:

введите описание изображения здесь

MLRoundedImageView.java

Скопируйте и вставьте следующий класс в свой пакет:

public class MLRoundedImageView extends ImageView {

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

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

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

    @Override
    protected void onDraw(Canvas canvas) {

        Drawable drawable = getDrawable();

        if (drawable == null) {
            return;
        }

        if (getWidth() == 0 || getHeight() == 0) {
            return;
        }
        Bitmap b = ((BitmapDrawable) drawable).getBitmap();
        Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);

        int w = getWidth(), h = getHeight();

        Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
        canvas.drawBitmap(roundBitmap, 0, 0, null);

    }

    public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
        Bitmap sbmp;
        
        if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
            float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
            float factor = smallest / radius;
            sbmp = Bitmap.createScaledBitmap(bmp, (int)(bmp.getWidth() / factor), (int)(bmp.getHeight() / factor), false);
        } else {
            sbmp = bmp;
        }
        
        Bitmap output = Bitmap.createBitmap(radius, radius,
                Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = 0xffa19774;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, radius, radius);

        paint.setAntiAlias(true);
        paint.setFilterBitmap(true);
        paint.setDither(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(Color.parseColor("#BAB399"));
        canvas.drawCircle(radius / 2 + 0.7f,
                radius / 2 + 0.7f, radius / 2 + 0.1f, paint);
        paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
        canvas.drawBitmap(sbmp, rect, rect, paint);

        return output;
    }
}

Используйте этот класс в XML с именем пакета вместо ImageView

<com.androidbuts.example.MLRoundedImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher" />


Modified text is an extract of the original Stack Overflow Documentation
Лицензировано согласно CC BY-SA 3.0
Не связан с Stack Overflow