ImageButton (Кнопка-изображение)
Компонент ImageButton представляет собой кнопку с изображением (вместо текста). По умолчанию ImageButton похож на обычную кнопку.
В режиме дизайна изображение на кнопке определяется атрибутом android:src
Можно сделать двойной щелчок, чтобы сразу установить нужное свойство.
Методы
Программно можно установить изображения через различные методы.
setImageBitmap() Используется, чтобы указать в качестве изображения существующий экземпляр класса Bitmap setImageDrawable() Используется, чтобы указать в качестве изображения существующий экземпляр класса Drawable setImageResource() Используется, чтобы указать в качестве изображения существующий идентификатор ресурса (см. пример) setImageURI() Используется, чтобы указать в качестве изображения существующий адрес типа Uri. В некоторых случаях элемент кэширует изображение и после изменения изображения по прежнему выводит старую версию. Рекомендуется использовать инструкцию setImageURI(null) для сброса кэша и повторный вызов метода с нужным Uri
Примеры
С помощью метода setImageURI() можно обратиться к ресурсу типа Drawable по его идентификатору:
android.resource://[пакет]/[идентификатор ресурса]
Например, можно задать путь Uri:
Uri uri = Uri.parse("android.resource://ru.alexanderklimov.imagebuttondemo/" + R.drawable.cat);
Можно обратиться к ресурсу по его типу/имени:
android.resource://[пакет]/[тип ресурса]/[имя ресурса]
В этом случае код будет следующим:
Uri uri = Uri.parse("android.resource://ru.alexanderklimov.imagebuttondemo/drawable/cat"); imageButton.setImageUri(uri);
Щелчок
Как и у обычной кнопки, интерес представляет только щелчок. В нашем примере мы будем менять поочередно картинки на кнопке (нужно подготовить две картинки в папке drawable)
. ImageButton imageButton; boolean flag = true; imageButton.setOnClickListener(new View.OnClickListener() < public void onClick(View v) < // меняем изображение на кнопке if (flag) imageButton.setImageResource(R.drawable.cutecat4); else // возвращаем первую картинку imageButton.setImageResource(R.drawable.cutecat2); flag = !flag; >>);
Теперь при каждом щелчке изображение на кнопке будет циклически переключаться между двумя картинками.
Продолжительное нажатие
Кроме обычного щелчка, в Android есть особый вид нажатия на кнопку — продолжительное нажатие. Это событие происходит, когда пользователь нажимает и удерживает кнопку в течение одной секунды. Этот тип нажатия обрабатывается независимо от обычного щелчка.
Для обработки продолжительного нажатия нужно реализовать класс View.OnLongClickListener и передать его в метод setOnLongClickListener(). Класс OnLongClickListener имеет один обязательный метод OnLongClick(). В принципе это похоже на метод OnClick(), только имеет возвращаемое значение.
imageButton.setOnLongClickListener(new OnLongClickListener() < @Override public boolean onLongClick(View v) < Toast toast = Toast.makeText(getApplicationContext(), "Long Click", Toast.LENGTH_SHORT); toast.setGravity(Gravity.CENTER, 0, 0); toast.show(); return false; >>);
Запустите проект и убедитесь, что при быстром нажатии ничего не происходит, а при более продолжительном нажатии всплывает сообщение.
Работа с изображениями
Одним из наиболее распространенных источников ресурсов являются файлы изображений. Android поддерживает следующие форматы файлов: .png (предпочтителен), .jpg (приемлем), .gif (нежелателен). Для графических файлов в проекте уже по умолчанию создана папка res/drawable . По умолчанию она уже содержит ряд файлов — пару файлов иконок:
При добавлении графических файлов в эту папку для каждого из них Android создает ресурс Drawable . После этого мы можем обратиться к ресурсу следующим образом в коде Java:
R.drawable.имя_файла
@[имя_пакета:]drawable/имя_файла
Например, добавим в проект в папку res/drawable какой-нибудь файл изображения. Для этого скопируем на жестком диске какой-нибудь файл с расширением png или jpg и вставим его в папку res/drawable (для копирования в проект используется простой Copy-Paste)
Далее нам будет предложено выбрать папку — drawable или drawable-24 . Для добавления обычных файлов изображений выберем drawable :
Здесь сразу стоит учесть, что файл изображения будет добавляться в приложение, тем самым увеличивая его размер. Кроме того, большие изображения отрицательно влияют на производительность. Поэтому лучше использовать небольшие и оптимизрованные (сжатые) графические файлы. Хотя, также стоит отметить, что все файлы изображений, которые добавляются в эту папку, могут автоматически оптимизироваться с помощью утилиты aapt во время построения проекта. Это позволяет уменьшить размер файла без потери качества.
При копировании файла нам будет предложено установить для него новое имя.
Можно изменить название файла, а можно оставить так как есть. В моем случае файл называется dubi2.png . И затем нажмем на кнопку Refactor. И после этого в папку drawable будет добавлен выбранный нами файл изображения.
Для работы с изображениями в Android можно использовать различные элементы, но непосредственно для вывода изображений предназначен ImageView . Поэтому изменим файл activity_main.xml следующим образом:
В данном случае для отображения файла в ImageView у элемента устанавливается атрибут android:src . В его значении указывается имя графического ресурса, которое совпадает с именем файла без расширения. И после этого уже в Preview или в режиме дизайнере в Android Studio можно будет увидеть применение изображения, либо при запуске приложения:
Если бы мы создавали ImageView в коде java и из кода применяли бы ресурс, то activity могла бы выглядеть так:
package com.example.viewapp; import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import android.os.Bundle; import android.widget.ImageView; public class MainActivity extends AppCompatActivity < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); ConstraintLayout constraintLayout = new ConstraintLayout(this); ImageView imageView = new ImageView(this); // применяем ресурс imageView.setImageResource(R.drawable.dubi2); ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams (ConstraintLayout.LayoutParams.WRAP_CONTENT , ConstraintLayout.LayoutParams.WRAP_CONTENT); layoutParams.leftToLeft = ConstraintLayout.LayoutParams.PARENT_ID; layoutParams.topToTop = ConstraintLayout.LayoutParams.PARENT_ID; imageView.setLayoutParams(layoutParams); constraintLayout.addView(imageView); setContentView(constraintLayout); >>
В данном случае ресурс drawable напрямую передается в метод imageView.setImageResource() , и таким образом устанавливается изображение. В результате мы получим тот же результат.
imageView.setImageResource(R.drawable.dubi2);
Однако может возникнуть необходимость как-то обработать ресурс перед использованием или использовать его в других сценариях. В этом случае мы можем сначала получить его как объект Drawable и затем использовать для наших задач:
package com.example.viewapp; import androidx.appcompat.app.AppCompatActivity; import androidx.constraintlayout.widget.ConstraintLayout; import androidx.core.content.res.ResourcesCompat; import android.content.res.Resources; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.widget.ImageView; public class MainActivity extends AppCompatActivity < @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); //setContentView(R.layout.activity_main); ConstraintLayout constraintLayout = new ConstraintLayout(this); ImageView imageView = new ImageView(this); Resources res = getResources(); Drawable drawable = ResourcesCompat.getDrawable(res, R.drawable.dubi2, null); // применяем ресурс imageView.setImageDrawable(drawable); ConstraintLayout.LayoutParams layoutParams = new ConstraintLayout.LayoutParams (ConstraintLayout.LayoutParams.WRAP_CONTENT , ConstraintLayout.LayoutParams.WRAP_CONTENT); layoutParams.leftToLeft = ConstraintLayout.LayoutParams.PARENT_ID; layoutParams.topToTop = ConstraintLayout.LayoutParams.PARENT_ID; imageView.setLayoutParams(layoutParams); constraintLayout.addView(imageView); setContentView(constraintLayout); >>
Для получения ресурса применяется метод ResourcesCompat.getDrawable() , в который передается объект Resources, идентификатор ресурса и тема. В данном случае тема нам не важна, поэтому для нее передаем значение null. Возвращается ресурс в виде объекта Drawable :
Drawable drawable = ResourcesCompat.getDrawable(res, R.drawable.dubi2, null);
Затем, например, можно также передать ресурс объекту ImageView через его метод setImageDrawable()
imageView.setImageDrawable(drawable);
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, а затем используется идентификатор изображения из ресурсов:
ImageView imageView = findViewById(R.id.imageView); imageView.setImageResource(R.drawable.cat);
Метод setImageBitmap()
Используется класс BitmapFactory для чтения ресурса изображения в объект Bitmap, а затем в ImageView указывается полученный Bitmap. Могут быть и другие варианты.
ImageView imageView = findViewById(R.id.imageView); imageView.setImageBitmap(BitmapFactory.decodeResource(this.getResources(), R.drawable.cat)); // Kotlin val bitmap: Bitmap = (ResourcesCompat.getDrawable( resources,R.drawable.sleepbedcat,null) as BitmapDrawable).bitmap imageView.setImageBitmap(bitmap)
Метод setImageDrawable()
Если у вас есть готовое изображение, например, на SD-карте, то его можно использовать в качестве объекта Drawable.
ImageView imageView = findViewById(R.id.imageView); // плохой код, только для демонстрации imageView.setImageDrawable(Drawable.createFromPath("/mnt/sdcard/cat.jpg"));
Drawable можно получить и из ресурсов, хотя такой код выглядит избыточным, если можно сразу вызвать setImageResource().
// Kotlin val imageView: ImageView = findViewById(R.id.imageView) imageView.setImageDrawable( ContextCompat.getDrawable(this, R.drawable.cat) )
Метод setImageURI()
Берётся URI файла изображения и используется в качестве источника изображения. Этот способ годится для работы с локальными изображениями.
ImageView imageView = findViewById(R.id.imageView); imageView.setImageURI(URI.parse("file://mnt/sdcard/cat.jpg"));
Загружаем Drawable через URI.
// Kotlin val imageView: ImageView = findViewById(R.id.imageView) val button: Button = findViewById(R.id.button) button.setOnClickListener < val uri: Uri = Uri.parse("android.resource://$packageName/$") // remove previous image uri cache imageView.setImageURI(null) // set image view image from uri imageView.setImageURI(uri) // show the uri in text view textView.text = uri.toString() >
Другие методы
Также вам часто придется использовать методы, связанные с размерами и масштабированием: 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, и вы хотите загрузить в него какое-нибудь изображение из галереи по нажатию кнопки:
static final int GALLERY_REQUEST = 1; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Button button = findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() < @Override public void onClick(View v) < Intent photoPickerIntent = new Intent(Intent.ACTION_PICK); photoPickerIntent.setType("image/*"); startActivityForResult(photoPickerIntent, GALLERY_REQUEST); >>); > @Override protected void onActivityResult(int requestCode, int resultCode, Intent imageReturnedIntent) < super.onActivityResult(requestCode, resultCode, imageReturnedIntent); Bitmap bitmap = null; ImageView imageView = (ImageView) findViewById(R.id.imageView); switch(requestCode) < case GALLERY_REQUEST: if(resultCode == RESULT_OK)< Uri selectedImage = imageReturnedIntent.getData(); try < bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), selectedImage); >catch (IOException e) < e.printStackTrace(); >imageView.setImageBitmap(bitmap); > > >
Намерение ACTION_PICK вызывает отображение галереи всех изображений, хранящихся на телефоне, позволяя выбрать одно изображение. При этом возвращается адрес URI, определяющий местоположение выбранного изображения. Для его получения используется метод getData(). Далее для преобразования URI-адреса в соответствующий экземпляр класса Bitmap используется специальный метод Media.getBitmap(). И у нас появляется возможность установить изображение в ImageView при помощи setImageBitmap().
На самом деле можно поступить ещё проще и использовать метод setImageURI.
Uri selectedImage = imageReturnedIntent.getData(); imageView.setImageURI(selectedImage);
Сравните с предыдущим примером — чувствуете разницу? Тем не менее, приходится часто наблюдать подобный избыточный код во многих проектах. Это связано с тем, что метод порой кэширует адрес и не происходит изменений. Рекомендуется использовать инструкцию setImageURI(null) для сброса кэша и повторный вызов метода с нужным Uri.
В последних версиях системных эмуляторов два примера не работают. Проверяйте на реальных устройствах.
Получить размеры ImageView — будьте осторожны
У элемента ImageView есть два метода getWidth() и getHeight(), позволяющие получить его ширину и высоту. Но если вы попробуете вызвать указанные методы сразу в методе onCreate(), то они возвратят нулевые значения. Можно добавить кнопку и вызвать данные методы через нажатие, тогда будут получены правильные результаты. Либо использовать другой метод активности, который наступает позже.
@Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); final ImageView imageView = findViewById(R.id.imageView); final TextView infoTextView = findViewById(R.id.textView); // пробуем получить размеры ImageView сразу при загрузке. Вернёт нулевые значения infoTextView.setText("Размеры ImageView: " + String.valueOf(imageView.getWidth()) + " : " + String.valueOf(imageView.getHeight())); Button button = (Button)findViewById(R.id.button); button.setOnClickListener(new View.OnClickListener() < @Override public void onClick(View v) < // этот же код вызывается при нажатии кнопки. Теперь всё правильно infoTextView.setText("Размеры ImageView: " + String.valueOf(imageView.getWidth()) + " : " + String.valueOf(imageView.getHeight())); >>); >
Копирование изображений между ImageView
Если вам надо скопировать изображение из одного ImageView в другой, то можно получить объект Drawable через метод getDrawable() и присвоить ему второму компоненту.
ImageView ivSource = findViewById(R.id.sourceImageView); // 1-й компонент с какой-то картинкой ImageView ivTarget = findViewById(R.id.targetImageView); // 2-й компонент без картинки Drawable drawable = ivSource.getDrawable(); // получим картинку у первого компонента ivTarget.setImageDrawable(drawable); // присвоим второму
Примеры
В моих статьях можно найти примеры использования ImageView.
Библиотеки
CustomShapeImageView — позволяет создавать рамки разных форм.
MikeOrtiz/TouchImageView — расширенный вариант ImageView, который поддерживает касания экрана и масштабирование.
CircleImageView — компонент для создания круглых аватаров. Другая библиотека с похожим названием Pkmmte/CircularImageView. И ещё одна библиотека vinc3m1/RoundedImageView, позволяющая создавать не только круглые изображения, но и овальные и прямоугольные с закруглёнными углами. Сравнивайте. А также упрощённый компонент pavlospt/CircleView, который позволяет создавать круглый элемент с заголовком и подзаголовком.
Фоновое изображение в Layout
Android позволяет устанавливать фоновое (background) изображение в корневой элемент разметки интерфейса Layout. Реализовать это совсем просто; достаточно в описание разметки вставить соответствующий атрибут android:background=»@drawable/earth». Предполагается, что изображение earth хранится в директории проекта res/drawable. На следующем скриншоте представлено изображение земли earth.png, которое будет использовано в описанном ниже примере в качестве фонового изображения разметки интерфейса Layout.
В чем особенность данного фонового изображения? Прямоугольный размер картинки включает расположенное не по центру изображение земли, которое при смене ориентации (orientation) будет «сплющиваться». Все правильные фигуры изображения будут изменять геометрические размеры, поскольку android будет непропорционально растягивать или сжимать фоновое изображения. На следующем скриншоте представлено данное фоновое изображение при повороте устройства android в положение portrait.
В этой статье рассмотрим вопросы размещения и адаптации фонового изображения в разметке интерфейса в зависимости от ориентации устройства. Нам необходимо будет научиться перехватывать обработку события при изменении положения устройства, и устанавливать соответствующее его ориентации фоновое изображение разметки.
Рассмотрим пример использования фонового изображения в разметке интерфейса. Нам необходимо :
- определить фоновое изображение в разметке интерфейса;
- подключиться к событию изменения положения/ориентации устройства;
- определить фоновое изображение согласно положению/ориентации устройства.
Создайте новый модуль Module приложения и разместите два изображения (earth_portrait.png, earth_landscape.png) в директории проекта res/drawable. Правильнее было бы, конечно, создать несколько изображений под разные разрешения, о чем сказано в описании ImageView. Но, для решения текущей задачи обойдемся «малой кровью», т.е. двумя изображениями. Изображения можно скачать в конце статьи.
Разметка интерфейса
В файле описания интерфейса приложения res/layout/activity.xml определяем два атрибута : background и orientation. В атрибуте android:background определяем ресурсный файл одного из изображениий. Атрибут android:orientation добавляем в описание разметки LinearLayout, чтобы среда разработки Android Studio не «ругалась».
Изменение положения устройства
Для того, чтобы подключиться к событию изменения положения устройства необходимо переписать метод активности onConfigurationChanged и соответствующим образом определить атрибут configChanges в файле манифеста проекта, чтобы система вызывала этот метод.
Метод onConfigurationChanged
Метод активности onConfigurationChanged в качестве параметра получает значение конфигурации устройства, которое передается родительскому (super) методу. Новое положение устройства сохраняем в переменной orientation и после этого вызываем метод определения фонового изображения setBackgroundImage.
Для чего нам необходима переменная orientation? Давайте представим ситуацию, что в приложении несколько активностей. В одной из активностей положение устройства изменяется, и после этого открывается данная активность. Система вызовет представленный (переопределенный в листинге) метод onResume, в котором будет определяться соответствующее фоновое изображение вызовом метода setBackgroundImage.
private int orientation; . . . @Override public void onConfigurationChanged(Configuration newConfig) < super.onConfigurationChanged(newConfig); orientation = newConfig.orientation; setBackgroundImage(newConfig.orientation); >private void setBackgroundImage(final int orientation) < LinearLayout layout; layout = (LinearLayout) findViewById(R.id.mainlayout); if (orientation == Configuration.ORIENTATION_LANDSCAPE) layout.setBackgroundResource(R.drawable.earth_landscape); else if (orientation == Configuration.ORIENTATION_PORTRAIT) linear.setBackgroundResource(R.drawable.earth_portrait); >@Override public void onResume()
Итак, в листинге были переопределены два метода активности : onConfigurationChanged и onResume. Но, чтобы система вызвала метод onConfigurationChanged, необходимо настроить манифест приложения.
Манифест AndroidManifest.xml
В файле манифеста проекта manifests/AndroidManifest.xml необходимо в описании активности определить атрибут configChanges. Как видно в следующем коде атрибут включает 3 значения (keyboardHidden, orientation, screenSize), разделенных символом «или» ‘|’. То есть система будет реагировать на 3 события.
Дополнительную информацию по настройкам манифеста приложений с несколькими активностями, а также для взаимодействия разных приложений между собой можно получить на странице описания намерений Intent.
Активность приложения MainActivity
В активности приложения только определяется первоначальное значение переменной orientation. В листинг не включены представленные выше методы.
import android.os.Bundle; import android.app.Activity; import android.widget.LinearLayout; import android.content.res.Configuration; public class MainActivity extends Activity < private int orientation; @Override protected void onCreate(Bundle savedInstanceState) < super.onCreate(savedInstanceState); setContentView(R.layout.activity_custom); orientation = Configuration.ORIENTATION_PORTRAIT; >>
После старта приложения можно изменять положение устройства с portrait на landscape и обратно. Переопределенные в активности методы будут корректно устанавливать соответствующие фоновые изображения.
Положение portrait
Положение landscape
Скачать изображения
Используемые в примере изображения можно скачать здесь (742 Kб).