Как растянуть картинку android studio

ImageView

Общая информация

Компонент ImageView предназначен для отображения изображений. Находится в разделе Widgets.

Для загрузки изображения в XML-файле используется атрибут android:src, в последнее время чаще используется атрибут app:srcCompat.

ImageView является базовым элементом-контейнером для использования графики. Можно загружать изображения из разных источников, например, из ресурсов программы, контент-провайдеров. В классе ImageView существует несколько методов для загрузки изображений:

• setImageResource(int resId) — загружает изображение по идентификатору ресурса
• setImageBitmap(Bitmap bitmap) — загружает растровое изображение
• setImageDrawable(Drawable drawable) — загружает готовое изображение
• setImageURI(Uri uri) — загружает изображение по его URI

Метод setImageResource()

Сначала нужно получить ссылку на ImageView, а затем используется идентификатор изображения из ресурсов:

Метод setImageBitmap()

Используется класс BitmapFactory для чтения ресурса изображения в объект Bitmap, а затем в ImageView указывается полученный Bitmap. Могут быть и другие варианты.

Метод setImageDrawable()

Если у вас есть готовое изображение, например, на SD-карте, то его можно использовать в качестве объекта Drawable.

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

Метод setImageURI()

Берётся URI файла изображения и используется в качестве источника изображения. Этот способ годится для работы с локальными изображениями.

Загружаем Drawable через URI.

Другие методы

Также вам часто придется использовать методы, связанные с размерами и масштабированием: setMaxHeight(), setMaxWidth(), getMinimunHeight(), getMinimunWidth(), getScaleType(), setScaleType().

Масштабирование через свойство Scale Type

Для масштабирования картинки в ImageView есть свойство Scale Type и соответствующий ему атрибут android:scaleType и перечисление ImageView.ScaleType.

• CENTER
• CENTER_CROP
• CENTER_INSIDE
• FIT_CENTER
• FIT_START
• FIT_END
• FIT_XY
• MATRIX

Чтобы увидеть разницу между разными режимами, желательно использовать большую картинку, превосходящую по ширине экрана устройства. Допустим, у нас есть простенькая разметка:

Для наглядности я задал красный цвет для фона ImageView.

Режим android:scaleType=»center» выводит картинку в центре без масштабирования. Если у вас будет картинка большего размера, то края могут быть обрезаны.

Режим android:scaleType=»centerCrop» также размещает картинку в центре, но учитывает ширину или высоту контейнера. Режим попытается сделать так, чтобы ширина (или высота) картинки совпала с шириной (или высотой) контейнера, а остальное обрезается.

Режим android:scaleType=»centerInside» масштабирует картинку, сохраняя пропорции. Можно увидеть задний фон контейнера, если его размеры отличаются от размера картинки.

Режим android:scaleType=»fitCenter» (по умолчанию) похож на предыдущий, но может не сохранять пропорции.

Если выбрать режим android:scaleType=»fitStart», то картинка прижимается к левому верхнему углу и таким образом заполняет верхнюю половину контейнера.

Значение android:scaleType=»fitEnd» сместит картинку в нижнюю часть контейнера.

Режим android:scaleType=»fitXY» растягивает/сжимает картинку, чтобы подогнать её к контейнеру. Может получиться вытянутая картинка, поэтому будьте осторожны.

Последний атрибут android:scaleType=»matrix» вывел картинку без изменений в левом верхнем углу с обрезанными краями.

Атрибут android:adjustViewBounds=»true»

При использовании атрибута scaleType=»fitCenter» из предыдущего примера Android вычисляет размеры самой картинки, игнорируя размеры ImageView. В этом случае ваша разметка может «поехать». Атрибут adjustViewBounds заставляет картинку подчиниться размеру компонента-контейнера. В некоторых случаях это может не сработать, например, если у ImageView установлен атрибут layout_width=»0dip». В таком случае поместите ImageView в RelativeLayout или FrameLayout и используйте значение 0dip для этих контейнеров.

Загрузка изображения из галереи

Предположим, у вас есть на экране компонент ImageView, и вы хотите загрузить в него какое-нибудь изображение из галереи по нажатию кнопки:

Намерение ACTION_PICK вызывает отображение галереи всех изображений, хранящихся на телефоне, позволяя выбрать одно изображение. При этом возвращается адрес URI, определяющий местоположение выбранного изображения. Для его получения используется метод getData(). Далее для преобразования URI-адреса в соответствующий экземпляр класса Bitmap используется специальный метод Media.getBitmap(). И у нас появляется возможность установить изображение в ImageView при помощи setImageBitmap().

На самом деле можно поступить ещё проще и использовать метод setImageURI.

Сравните с предыдущим примером — чувствуете разницу? Тем не менее, приходится часто наблюдать подобный избыточный код во многих проектах. Это связано с тем, что метод порой кэширует адрес и не происходит изменений. Рекомендуется использовать инструкцию setImageURI(null) для сброса кэша и повторный вызов метода с нужным Uri.

В последних версиях системных эмуляторов два примера не работают. Проверяйте на реальных устройствах.

Получить размеры ImageView — будьте осторожны

У элемента ImageView есть два метода getWidth() и getHeight(), позволяющие получить его ширину и высоту. Но если вы попробуете вызвать указанные методы сразу в методе onCreate(), то они возвратят нулевые значения. Можно добавить кнопку и вызвать данные методы через нажатие, тогда будут получены правильные результаты. Либо использовать другой метод активности, который наступает позже.

Копирование изображений между ImageView

Если вам надо скопировать изображение из одного ImageView в другой, то можно получить объект Drawable через метод getDrawable() и присвоить ему второму компоненту.

Примеры

В моих статьях можно найти примеры использования ImageView.

Источник

Android: Как растянуть изображение до ширины экрана при сохранении соотношения сторон?

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

17 ответов

Я выполнил это с помощью пользовательского представления. Установите layout_width= «fill_parent»и layout_height=» wrap_content » и укажите на соответствующий drawable:

в конце концов, я сгенерировал размеры вручную, что отлично работает:

Я только что прочитал исходный код для ImageView и это в основном невозможно без использования решений подклассов в этом потоке. В ImageView.onMeasure мы добираемся до этих строк:

здесь h и w размеры изображения, и p* — это обивка.

Итак, если у вас есть layout_height=»wrap_content» он будет ставить widthSize = w + pleft + pright , или другими словами, максимальная ширина равна ширине изображения.

это означает это если вы не установите точный размер, изображения никогда не увеличиваются. Я считаю, что это ошибка, но удачи получить Google, чтобы заметить или исправить это. Edit: есть мои собственные слова, я представил сообщение об ошибке и они говорят, что это было исправлено в будущем выпуске!

другое решение

вот еще один подкласс обходного пути, но вы должны (теоретически, я действительно не проверял его много!) быть возможность использовать его в любом месте вы ImageView . Чтобы использовать его set layout_width=»match_parent» и layout_height=»wrap_content» . Это тоже гораздо более общее, чем принятое решение. Е. Г. вы можете сделать посадку на высоте так же как ширина.

настройки adjustViewBounds true и через группу схема расположения. вид очень хорошо работал для меня. Нет необходимости подкласса или просить метрики устройства:

Я боролся с этой проблемой в той или иной форме в течение веков, спасибо, спасибо, спасибо. 🙂

Я просто хотел указать, что вы можете получить обобщаемое решение из того, что сделал Боб Ли, просто расширяя представление и переопределяя onMeasure. Таким образом, вы можете использовать это с любым drawable вы хотите, и он не сломается, если нет изображения:

в некоторых случаях эта волшебная формула прекрасно решает проблему.

для тех, кто борется с этим из другой платформы «размер и форма, чтобы соответствовать» опция обрабатывается красиво в Android, но это трудно найти.

вы обычно хотите эту комбинацию:

• ширина матча родитель,
• содержание обруча высоты,
• adjustViewBounds включен (sic)
• масштаб fitCenter
• cropToPadding OFF (sic)

тогда это автоматически и удивительно.

Если вы разработчик iOS, это совершенно удивительно, как просто вы можете сделать «полностью динамические высоты ячеек» в виде таблицы .. я имею в виду ListView. Наслаждаться.

Я сделал это с этими значениями в LinearLayout:

мне удалось достичь этого, используя только этот XML-код. Возможно, eclipse не отображает высоту, чтобы показать, что она расширяется, чтобы соответствовать; однако, когда вы фактически запускаете это на устройстве, он правильно отображает и обеспечивает желаемый результат. (ну по крайней мере для меня)

все делают это программно, поэтому я подумал, что этот ответ идеально подойдет здесь. Этот код работал для моего в xml. Я еще не думал о соотношении, но все же хотел разместить этот ответ, если это кому-то поможет.

очень простое решение-просто использовать функции, предоставляемые RelativeLayout .

вот xml, который делает возможным со стандартным Android Views :

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

его просто параметр adjustViewBounds=»true» и scaleType=»fitCenter» в XML-файле для ImageView!

Примечание: layout_width установлено значение match_parent

вы устанавливаете ScaleType в ScaleType.FIT_XY. Согласно javadocs, это растянет изображение, чтобы соответствовать всей области, изменяя соотношение сторон, если это необходимо. Это объясняет поведение, которое вы видите.

чтобы получить поведение, которое вы хотите. FIT_CENTER, FIT_START или FIT_END близки, но если изображение уже, чем оно высокое, оно не начнет заполнять ширину. Вы можете посмотреть, как они реализованы, и вы должны возможно, удастся выяснить, как настроить его для ваших целей.

ScaleType.CENTER_CROP будет делать то, что вы хотите: растянуть на всю ширину и масштабировать высоту соответственно. если уменьшенная высота превышает пределы экрана, изображение будет обрезано.

посмотрите, есть гораздо более простое решение вашей проблемы:

вы можете использовать my StretchableImageView сохранение соотношения сторон (по ширине или по высоте) в зависимости от ширины и высоты drawable:

для меня android: scaleType= «centerCrop» не решил мою проблему. Это на самом деле расширило изображение. Поэтому я попробовал с android: scaleType= «fitXY», и он отлично работал.

это работает нормально в соответствии с моим требованием

Источник

Android: как растянуть изображение до ширины экрана при сохранении соотношения сторон?

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

Я сделал это с помощью специального представления. Установите layout_width = «fill_parent» и layout_height = «wrap_content» и укажите его на соответствующий объект для рисования:

В конце концов, я сгенерировал размеры вручную, что отлично работает:

Я просто прочитал исходный код, ImageView и это в принципе невозможно без использования решений для создания подклассов в этом потоке. В ImageView.onMeasure мы получаем эти строки:

Где h и w — размеры изображения, а p* — отступ.

Таким образом, если у вас есть, layout_height=»wrap_content» он будет установлен widthSize = w + pleft + pright , или, другими словами, максимальная ширина равна ширине изображения.

Это означает, что если вы не установите точный размер, изображения НИКОГДА не увеличиваются . Я считаю это ошибкой, но удачи, чтобы Google заметил или исправил ее. Изменить: Я сам написал отчет об ошибке, и они говорят, что он будет исправлен в следующем выпуске!

Другое решение

Вот еще один подкласс обходного пути, но вы должны (теоретически, я особо не тестировал его!) Иметь возможность использовать его где угодно ImageView . Чтобы использовать его, установите layout_width=»match_parent» , и layout_height=»wrap_content» . Это гораздо более общее решение, чем принятое решение. Например, вы можете подгонять как по высоте, так и по ширине.

Источник

Поддержка разных размеров экрана при разработке android приложений

В этом уроке рассказывается, как создать макет, который адаптируется к разным размерам экрана, используя масштабируемые представления, объекты RelativeLayout , квалификаторы размера и ориентации, фильтры псевдонимов и растровые изображений формата nine-patch.

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

В этом уроке описаны следующие аспекты обеспечения совместимости интерфейса с разными экранами:

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

Использование параметров wrap_content и match_parent

Чтобы создать масштабируемый макет, способный адаптироваться к разным экранам, используйте в качестве значений ширины и высоты отдельных компонентов представления параметры «wrap_content» и «match_parent» . Если используется «wrap_content» , для ширины или высоты представления устанавливается минимальное значение, позволяющее уместить содержание на экран, а параметр «match_parent» (известный как «fill_parent» в API до 8 уровня) служит для растягивания компонента по размеру родительского представления.

Если указать параметры «wrap_content» и «match_parent» вместо строго заданных размеров, в представлениях будет использоваться минимально необходимое место или они будут растягиваться на всю доступную длину и ширину соответственно. Например:

Обратите внимание на то, что в коде учебного приложения размеры компонентов заданы с помощью параметров «wrap_content» и «match_parent» . В результате макет правильно отображается на экранах разных размеров при разных ориентациях.

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

Рисунок 1. Приложение News Reader при вертикальной (слева) и горизонтальной (справа) ориентации.

Использование объекта RelativeLayout

С помощью вложенных экземпляров объекта LinearLayout и параметров «wrap_content» и «match_parent» можно создавать достаточно сложные макеты. Однако LinearLayout не дает возможности точно управлять взаимным расположением дочерних представлений: в LinearLayout они просто помещаются в ряд друг за другом. Если необходимо расположить дочерние представления иным образом, используйте объект RelativeLayout , позволяющий задать относительные позиции компонентов. Например, одно дочернее представление можно выровнять по левому краю экрана, а другое – по правому.

На рис. 2 показано, как этот макет выглядит на экране QVGA.

Рисунок 2. Скриншот экрана QVGA (маленького размера).

На рис. 3 показано, как он выглядит на экране с большей диагональю.

Рисунок 3. Скриншот экрана WSVGA (большего размера).

Обратите внимание: несмотря на изменение размера компонентов их взаимное расположение остается прежним, так как оно задано объектом RelativeLayout.LayoutParams .

Использование квалификаторов размера

Масштабируемые или относительные макеты, один из которых продемонстрирован выше, имеют свои ограничения. Хотя они позволяют создать интерфейс, способный адаптироваться к разным экранам за счет растягивания пространства внутри и вокруг компонентов, пользователю может оказаться не слишком удобно работать с таким интерфейсом. Поэтому в приложении должен использоваться не один масштабируемый макет, а несколько альтернативных вариантов для разных конфигураций экрана. Их можно создать с помощью квалификаторов конфигураций, которые позволяют оперативно выбирать ресурсы, отвечающие текущим параметрам экрана (например, разные варианты макетов для экранов разных размеров).

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

res/layout/main.xml , однопанельный макет (по умолчанию):

Обратите внимание, что во втором случае в названии каталога использован квалификатор large . Этот макет будет выбран на устройствах, экраны которых считаются большими (например, 7 дюймов и более). Первый макет (без квалификаторов) будет выбран для устройств с маленьким экраном.

Использование квалификатора Smallest-width

Одной из проблем, с которой сталкивались разработчики приложений для устройств Android версий до 3.2, было слишком общее определение «большого» экрана. Это касалось устройств Dell Streak, первой модели Galaxy Tab и планшетных ПК с экраном размером 7 дюймов. Многие приложения требовалось по-разному отображать на разных устройствах (например, с 5- и 7-дюймовыми экранами), хотя они и относились к одной категории «больших» экранов. В Android версии 3.2 и более поздних доступен квалификатор Smallest-width.

Он позволяет определять экраны с заданной минимальной шириной в dp. Например, типичный планшетный ПК с экраном 7 дюймов имеет минимальную ширину 600 dp, и если вы хотите, чтобы приложение работало на нем в двухпанельном режиме (а на меньших экранах в однопанельном), используйте два макета из предыдущего раздела, но вместо квалификатора размера large укажите sw600dp . В таком случае на экранах, минимальная ширина которых составляет 600 dp, будет использоваться двухпанельный макет.

res/layout/main.xml , однопанельный макет (по умолчанию):

Это означает, что на устройствах, минимальная ширина экрана которых не меньше 600 dp, будет выбран layout-sw600dp/main.xml (двухпанельный макет), а на экранах меньшего размера – layout/main.xml (однопанельный макет).

Следует учесть, что на Android-устройствах до версии 3.2 квалификатор sw600dp не будет работать, поэтому для них по-прежнему нужно использовать large . Таким образом, вам потребуется еще один файл с названием res/layout-large/main.xml , идентичный файлу res/layout-sw600dp/main.xml . В следующем разделе вы познакомитесь с методом, который позволяет избежать дублирования таких файлов макета.

Использование псевдонимов макетов

Квалификатор Smallest-width работает только на устройствах Android 3.2 или более поздних версий. Для совместимости с более ранними устройствами по-прежнему следует использовать абстрактные размеры (small, normal, large и xlarge). Например, чтобы интерфейс открывался в однопанельном режиме на телефонах и в многопанельном на планшетных ПК с 7-дюймовым экраном, телевизорах и других крупных устройствах, подготовьте следующие файлы:

• res/layout/main.xml: однопанельный макет;
• res/layout-large: многопанельный макет;
• res/layout-sw600dp: многопанельный макет.

Последние два файла идентичны: один из них предназначен для устройств Android 3.2 и новее, а второй для более старых планшетных ПК и телевизоров на платформе Android.

Чтобы не создавать дубликаты файлов и упростить процесс поддержки приложения, используйте псевдонимы. Например, можно определить следующие макеты:

• res/layout/main.xml (однопанельный макет);
• res/layout/main_twopanes.xml (двухпанельный макет).

Затем добавьте следующие два файла:

Содержание последних двух файлов одинаково, но сами по себе они не определяют макет. Они служат для того, чтобы назначить файл main в качестве псевдонима main_twopanes . Так как в них используются селекторы large и sw600dp , они применяются к планшетным ПК и телевизорам на платформе Android независимо от версии (для версий до 3.2 используется large , а для более новых – sw600dp ).

Использование квалификаторов ориентации

Хотя некоторые макеты одинаково хорошо смотрятся в вертикальной и горизонтальной ориентациях, в большинстве случаев интерфейс все же приходится адаптировать. Ниже показано, как изменяется макет в приложении News Reader в зависимости от размера и ориентации экрана.

• Маленький экран, вертикальная ориентация: однопанельный вид с логотипом.
• Маленький экран, горизонтальная ориентация: однопанельный вид с логотипом.
• Планшетный ПК с 7-дюймовым экраном, вертикальная ориентация: однопанельный вид с панелью действий.
• Планшетный ПК с 7-дюймовым экраном, горизонтальная ориентация: двухпанельный вид с панелью действий.
• Планшетный ПК с 10-дюймовым экраном, вертикальная ориентация: двухпанельный вид (узкий вариант) с панелью действий.
• Планшетный ПК с 10-дюймовым экраном, горизонтальная ориентация: двухпанельный вид (широкий вариант) с панелью действий.
• Телевизор, горизонтальная ориентация: двухпанельный вид с панелью действий.

Каждый из этих макетов определен в XML-файле в каталоге res/layout/ . Чтобы сопоставить их с определенными конфигурациями экрана, в приложении используются псевдонимы:

После того как все возможные макеты определены, остается сопоставить каждый из них с подходящей конфигурацией, используя квалификаторы конфигураций. Воспользуемся псевдонимами макетов:

Использование растровых изображений nine-patch

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

Если использовать для компонентов, размеры которых меняются, обычные изображения, то они будут равномерно сжиматься и растягиваться, и результат будет далек от идеального. Решением являются растровые изображения формата nine-patch – специальные PNG-файлы, содержащие информацию о том, какие области можно растягивать, а какие нет.

Создавая растровые изображения для масштабируемых компонентов, обязательно используйте формат nine-patch. На рис. 4 показано обычное растровое изображение (увеличенное в 4 раза для наглядности), которое мы переведем в формат nine-patch.

Рисунок 4. button.png

Откройте его с помощью утилиты draw9patch , входящей в комплект разработчика (в каталоге tools/ ). Установите метки на левом и верхнем краях, чтобы ограничить области, которые можно растягивать. Можно также провести линию вдоль правого и нижнего краев, как показано на рис. 5, чтобы отметить области, в которых содержание должно быть зафиксировано.

Рисунок 5. button.9.png

Обратите внимание на черные пиксели по краям. Метки у верхней и левой границ обозначают те области, которые можно растягивать, а метки у правой и нижней границ – те, куда должно быть помещено содержание.

Также обратите внимание на расширение .9.png . Оно должно быть задано именно в таком виде, чтобы система могла определить, что это формат nine-patch, а не обычный PNG-файл.

При применении этого фона к компоненту (с помощью android:background=»@drawable/button» ) изображение будет растянуто по размеру кнопки, как показано на рис. 6.

Рисунок 6. Кнопки разных размеров с файлом фона button.9.png в формате nine-patch.

Источник