Android studio imageview увеличить пальцами

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 с нуля реализует настраиваемый ImageView, который может масштабировать двумя пальцами, свободно перемещаться и дважды щелкать для увеличения

Android с нуля реализует настраиваемый ImageView, который может масштабировать двумя пальцами, свободно перемещаться и дважды щелкать для увеличения

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

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

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

Давайте сначала посмотрим на эффект

Первый шаг: наследовать ImageView и сделать изображение отображаемым в центре после масштабирования.

Это выглядит так после запуска

Картинка отображается не полностью, тогда пусть картинка масштабируется по умолчанию и потом отображается по центру

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

Затем отношение ширины нашего ImageView к ширине изображения и отношение высоты ImageView к высоте изображения, контрастируйте коэффициент масштабирования ширины и высоты и возьмите меньшее значение в качестве коэффициента масштабирования изображения.

Вот объяснение того, почему меньший используется в качестве коэффициента масштабирования изображения, потому что нам нужно, чтобы изображение было пропорционально масштабировано и отображено полностью. Здесь, на том же мобильном телефоне, в том же настраиваемом ZoomImageView вы можете учитывать x of viewSize, y фиксируется, то есть в следующей формуле числитель фиксирован, поэтому, если все значение меньше, знаменатель больше, что означает, что сторона изображения и сторона обзора Чем больше зазор, тем масштабирование в соответствии с коэффициентом масштабирования стороны с большей разницей определенно гарантирует, что полное отображение в поле зрения будет гарантировано.

Получив коэффициент масштабирования, мы можем увеличить изображение

Полный код этого шага выглядит следующим образом

Эффект от операции следующий

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

Выше приведен метод панорамирования изображения.

Затем вам необходимо рассчитать объем перевода, необходимый, если вы хотите, чтобы изображение отображалось в центре ImageView.

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

Итак, здесь первый шаг — это пропорциональное масштабирование, и центральный дисплей готов. Весь код на данный момент выглядит следующим образом

Схема эффекта выглядит следующим образом

Шаг 2. Дважды щелкните для увеличения

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

Затем мы реализуем OnTouchListener для реализации метода onTouch и сделаем некоторые суждения о событиях.

Перед формальной обработкой события мы сначала определяем несколько переменных и определяем три состояния двойного щелчка и масштабирования.

Ниже приводится обработка события нажатия экрана.

Эффект операции следующий, который также реализует эффект двойного щелчка в месте увеличения

Шаг 3: ущипните, чтобы увеличить

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

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

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

Посмотрите на фактический код ниже

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

Ладно, посмотрим эффект

Шаг 4. Переместите изображение одним или двумя пальцами.

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

Посмотрим на эффект еще раз

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

Код очень простой, добавьте в ветку MotionEvent.ACTION_POINTER_UP метода onTouch

К этому моменту функции выполнены, но помните яму, о которой я упоминал в начале? То есть вызвать getDrawable () в методе onMeasure, чтобы получить объект Drawable изображения. Здесь, если вы случайно получите пустой Drawable, у нас нет проблем, потому что мы назначаем изображение для отображения непосредственно в макете, но фактическое Во время разработки он, вероятно, будет динамически получен после запуска кода. В это время это настраиваемое представление будет сообщать об ошибке, как только оно будет загружено.

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

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

Источник