Работа с изображениями
Одним из наиболее распространенных источников ресурсов являются файлы изображений. Android поддерживает следующие форматы файлов: .png (предпочтителен), .jpg (приемлем), .gif (нежелателен). Для графических файлов в проекте уже по умолчанию создана папка res/drawable . По умолчанию она уже содержит ряд файлов — пару файлов иконок:
При добавлении графических файлов в эту папку для каждого из них Android создает ресурс Drawable . После этого мы можем обратиться к ресурсу следующим образом в коде Java:
Например, добавим в проект в папку 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 могла бы выглядеть так:
В данном случае ресурс drawable напрямую передается в метод imageView.setImageResource() , и таким образом устанавливается изображение. В результате мы получим тот же результат.
Однако может возникнуть необходимость как-то обработать ресурс перед использованием или использовать его в других сценариях. В этом случае мы можем сначала получить его как объект Drawable и затем использовать для наших задач:
Для получения ресурса применяется метод ResourcesCompat.getDrawable() , в который передается объект Resources, идентификатор ресурса и тема. В данном случае тема нам не важна, поэтому для нее передаем значение null. Возвращается ресурс в виде объекта Drawable :
Затем, например, можно также передать ресурс объекту ImageView через его метод setImageDrawable()
How to add an image to the "drawable" folder in Android Studio?
When I choose new > Image Asset , it comes out a dialog to choose Asset Type .
How can I add an image to res/drawable folder?
23 Answers 23
For Android Studio 1.5:
- Right click on res -> new ->Image Asset
- On Asset type choose Action Bar and Tab Icons
- Choose the image path
- Give your image a name in Resource name
- Next -> Finish
Update for Android Studio 2.2:
Right click on res -> new -> Image Asset
On Icon Type choose Action Bar and Tab Icons
On Asset type choose Image
On Path choose your image path
The image will be saved in the /res/drawable folder.
Warning! If you choose to use images other than icons in SVG or PNG be aware that it could turn grey if the image is not transparent. You can find an answer in comments for this problem but none of these are verified by me because I never encountered this problem. I suggest you to use icons from here: Material icons
For Android Studio 3.4+:
You can use the new Resource Manager tab Click on the + sign and select Import Drawables .
From here, you can select multiple folders/files and it will handle everything for you.
The result will look something like this:
Click the import button and the images will be automatically imported to the correct folder.
Copy *.png image and paste to drawable folder.
After adding the image, you can use the added image asset in code:
You can either add image by using xml file
OR You can set image by using program:
Do it through the way Android Studio provided to you
Right click on the res folder and add your image as Image Assets in this way. Android studio will automatically generate image assets with different resolutions.
You can directly create the folder and drag image inside but you won’t have the different sized icons if you do that.
For Example, I’ve to add list.png in drawable folder..
And now I’ll paste it in drawable folder. Alternatively you can do it Ctrl + C / V , as we programmers do it. 🙂
It’s very simple. Just copy your image and paste it in the drawable folder. One more thing. When you paste an image in the drawable folder, a popup window will appear asking for a folder name. Add xxhdpi,xhdpi,hdpi or mdpi according to your image, like in the image below:
If you are still having problems, check out this link: Drawable folder in android studio
You can just copy and paste an image file(.jpg at least) into your res/drawable. It worked for me!
Open your project in Android Studio
Right click on drawable
Click on Show in Explorer
Double click on drawable folder.
Copy your image file in it and rename as your wish.
Now write your image file name after @drawable/ .
It will show the image you’ve selected.
Install and use the Android Drawable Importer plugin:
Instructions on how to install the plugin are on that page. It’s called «Android Drawable Importer» in the plugin search results.
- right click on «res» folder and select New -> Batch Drawable Import
- hit the + and select your source image
- choose what resolution you want it considered and which other sizes to auto-generate for
Seems kind of ridiculous that Android Studio doesn’t support this directly.
EDIT: But Xcode doesn’t either so. 🙁
You need to use a third party plugin like AndroidIcons Drawable Import to install this. Goto Android Studio > Prefrences > Plugins > and browse for AndroidIcons Drawable You can do things like
- AndroidIcons Drawable Import
- Material Icons Drawable Import
- Scaled Drawable
- Multisource-Drawable
Restart android studio. If you do not have the drawables folder created, create it by importing any image as -«Action Bar and Tab Icons» & «Notification Icons»,. Then right clink on the file explorer and you can see 4 options in the new tab. Use any one according to your need.
Drawable. Изображения, фигуры и градиенты
Android генерирует идентификаторы ресурсов для файлов изображений, расположенных в подкаталоге /res/drawable. Поддерживаются файлы PNG (самый предпочтительный), GIF, JPG. Для каждого файла изображения, который находится в этом каталоге, генерируется уникальный идентификатор на основе имени файла без расширения. Например, если у файла имя «cat.jpg», то для него будет создан идентификатор ресурса R.drawable.cat. Нужно следить за уникальностью имён, так как если у вас будут два файла «cat.jpg» и «cat.png», то возникнет ошибка. Кроме того, не нужно создавать дополнительных подкаталогов в папке res/drawable, так как файлы оттуда не будут считываться.
Можно адаптировать картинки для разных разрешений и размеров экранов. Для этого нужно создать специальные папки и складывать там нужные картинки. Например, для различных разрешений экрана используются папки drawable-hdpi, drawable-mdpi, drawable-ldpi и пр.. Существует аналогичное деление для размеров экрана: drawable-normal, drawable-large и т.д.. Можно совмещать эти способы и создавать папки типа drawable-normal-hdpi. Для изображений, которые должны оставаться неизменными вне зависимости от разрешения экрана, следует создать папку drawable-nodpi.
Для памятки приведу используемые размеры изображений для значков и фона экрана:
- res/drawable-ldpi — (120 DPI) (QVGA):
ic_launcher.png (значок), 36 × 36 background.png (фон), 320 × 240 pixels - res/drawable-mdpi — (160 DPI) (HVGA):
background.png, 320 × 480 - res/drawable-hdpi — (240 DPI) (WVGA):
ic_launcher.png, 72 × 72
background.png, 800 × 480 - res/drawable-xhdpi (320 DPI) (WSVGA or HDTV):
ic_launcher.png, 96 × 96
background.png, 1024 × 600 или 1280 × 720 pixels
Чтобы сослаться на изображение из res/drawable в XML-файлах разметки, используйте следующий синтаксис:
Обратите внимание, что в любом случае мы обращаемся к ресурсу как drawable, а не drawable-hdpi или как-то еще.
Программным способом можно достучаться до изображения следующим образом:
Android включает простые ресурсы для рисования, которые можно полностью описать в формате XML. Это касается классов ColorDrawable, ShapeDrawable и GradientDrawable. Данные ресурсы хранятся в каталоге res/drawable и могут быть идентифицированы в коде приложения по именам файлов, записанным в нижнем регистре.
Если описывать эти ресурсы в формате XML и указывать атрибуты для них с помощью аппаратно-независимых пикселей (density-independent pixels), система сможет их плавно масштабировать. Как и в случае с векторной графикой, эти ресурсы могут динамически масштабироваться, отображаясь корректно и без артефактов при любых размерах и разрешениях экрана, независимо от плотности пикселов. Исключение — ресурс GradientDrawable, радиус для которого должен быть указан в пикселях.
Получить имя ресурса
Иногда нужно получить не сам идентификатор, а его имя в виде R.drawable.cat, что сохранить его, скажем, в базе данных. Воспользуйтесь следующим приёмом:
Бывает и обратная задача — из имени ресурса получить идентификатор. Тот же принцип.
Строго говоря это относится не только к типу drawable, но обычно приходится встречаться с проблемой именно для них.
<animated-rotate> (класс AnimatedRotateDrawable)
Ресурсы для создания эффекта вращения.
Атрибут | Тип | Значение по умолчанию | Описание |
---|---|---|---|
visible | boolean | parent|true | Determines if drawable is visible. |
frameDuration | integer | 150 | The duration of each frame, in milliseconds. |
framesCount | integer | 12 | Number of frames of rotation to animate. |
pivotX | float|fraction | .5 | The pivot point, as a fraction of the width. |
pivotY | float|fraction | .5 | The pivot point, as a fraction of the height. |
drawable | reference | null | The drawable to use for this item. Either this must be present or a drawable subelement must exist. |
<animation-list> (класс AnimationDrawable)
Вращение по кадрам. Нужно подготовить несколько похожих изображений, которые будут сменять друг друга.
Атрибут | Тип | Значение по умолчанию | Описание |
---|---|---|---|
visible | boolean | parent|true | Determines if drawable is visible. |
variablePadding | boolean | false | If true, allows the drawable’s padding to change based on the current state that is selected. |
oneshot | boolean | false | If true, the animation will only run a single time and then stop. |
Если у нас имеется несколько изображений одного ProgressBar
<bitmap> (класс BitmapDrawable)
Позволяет использовать растровые изображения и проделывать с ними различные операции: растягивать, размножать, выравнивать. Часто используется в составе других ресурсов. Смотри примеры ниже.
Основной атрибут src, в котором указывается файл изображения.
Атрибут gravity позволяет управлять размещением картинки внутри контейнера. Можно использовать несколько значений, разделенных знаком |: top, left, center, fill и др.
У него также есть интересный атрибут tileMode, позволяющий замостить изображением всё доступное пространство. Можно использовать значения repeat, mirror, clamp. Пример есть выше по ссылке.
Другие атрибуты: antialias (сглаживание), dither (преобразование цветов, если текущей палитры недостаточно для отображения), filter (фильтр при сжатии или растягивании), mipMap.
В Android 5.0 (API 21) у bitmap появился новый атрибут android:tint, позволяющий задавать оттенки.
<clip> (класс ClipDrawable)
Данный вид ресурсов часто используется для создания индикаторов прогресса.
Тег clip позволяет обрезать Drawable по горизонтальной или по вертикальной оси через атрибут clipOrientation.
Атрибут gravity позволяет указать направление обрезания. Значения атрибута можно комбинировать. Например, если у clipOrientation значение равно vertical, а у gravity — top, то отрежется нижняя часть изображения.
Создадим файл res/drawable/clipping.xml
Присвоим созданный ресурс компоненту ImageView:
Сама обрезка производится программно через метод setLevel() с диапазоном значений от 0 до 10000, где 0 — картинка полностью обрезана и не видна, 10000 — картинка видна полностью.
В примере обрезается правая часть по центру, оставляя видимой левую часть картинки.
Чтобы оставить только четвертинку (левую верхнюю часть), изменим атрибуты
Следующая комбинация отрежет лишнее слева и справа, оставив только центральную часть изображения.
<color> (класс ColorDrawable)
Цветовые ресурсы используются в виде значений в папке res/values, например, в файле colors.xml. Но можно обращаться к цвету, как drawable-ресурсу.
<inset> (Класс InsetDrawable)
Пример создания объёмной панели с помощью inset.
<layer-list> (класс LayerDrawable)
Можно задавать не только простые формы, но и их комбинации. Для этого служит класс LayerDrawable, позволяющий накладывать несколько объектов Drawable один поверх другого. Описав массив полупрозрачных объектов Drawable, вы можете создать сложную комбинацию динамических фигур и преобразований.
LayerDrawable описывается с помощью тега <layer-list>, внутри которого для каждого дочернего узла <item> используется атрибут drawable, указывающий на ресурс для наложения.
Каждый объект Drawable будет накладываться в соответствии со своим индексом — первый элемент массива размещается в самом низу.
Переделаем пример программного использования LayerDrawable на пример с использованием XML. Создадим в папке res/drawable файл layerdrawable.xml:
Осталось применить к макету, при этом нам не нужен метод из примера по ссылке.
Кнопка с бликом
Рассмотрим другие примеры. Например, можно создать такую кнопку с бликом.
Марка
Можно даже создать изображение марки.
Создав два похожих объекта и сместив их относительно друг друга, вы можете реализовать эффект тени.
Кнопка-треугольник
Создадим кнопку треугольной формы. Файл res/drawable/arrow_up.xml.
Применим стиль к кнопке. Текст задавать не будем.
Если понадобится такая же кнопка с направлением вниз, то достаточно добавить атрибут android:rotation=»180″.
<transition> (класс TransitionDrawable)
Является расширением предыдущего layer-list и позволяет использовать наложение.
В теге transition указываются два объекта Drawable, между которыми можно переключаться с fade-эффектом и указанием продолжительности перехода.
<level-list> (класс LevelListDrawable)
Используя LevelListDrawable, вы можете эффективно размещать ресурсы Drawable один поверх другого, указывая целочисленный индекс для каждого слоя.
Чтобы вывести на экран определенное изображение, вызовите метод setImageLevel() из представления, которому назначен ресурс LevelListDrawable, передавая в качестве параметра индекс объекта Drawable, который вы хотите отобразить.
Представление отобразит ресурс с соответствующим (или большим) индексом. Ресурс LevelListDrawable нужен при компоновке виджетов.
<nine-patch> (класс NinePatchDrawable)
<rotate> (класс RotateDrawable)
Данный ресурс позволяет повернуть изображение на нужный градус. Допустим, у вас есть стрелки в разные стороны. Совсем не обязательно создавать копии стрелок. Достаточно нарисовать одну стрелку, а в файлах прописать нужные повороты. Например, повернём значок приложения вверх тормашками в файле drawable/rotate_up.xml:
Присвойте атрибуту src компонента ImageView и вы увидите значок перевёрнутым.
- drawable — изображение для поворота
- fromDegrees — начальный угол поворота, в градусах. По умолчанию 0.0
- toDegrees — конечный угол поворота, в градусах. По умолчанию 360.0
- pivotX — опорная точка по X
- pivotY — опорная точка по Y
Опорная точка — это место для виртуальной булавки, вокруг которой будет вращаться пришпиленный листок. Для центра мы указали половину по высоте и ширине. Для неподвижной картинки углы поворота можно указать одинаковыми.
Тег rotate также используется в анимационных ресурсах, не путайте их.
<scale> (класс ScaleDrawable)
Позволяет масшабировать (сжать или расширить) изображение по горизонтальной (scaleWidth) и/или вертикальной (scaleHeight) оси и сместить полученное изображение в указанную часть (scaleGravity) доступного пространства.
<selector> (класс StateListDrawable)
У некоторых элементов управления есть различные состояния: нажато, выбрано и т.д.. Вы можете задавать изображения для любого из таких состояний.
Чтобы описать StateListDrawable, создайте файл в формате XML, в котором указываются разные ресурсы Drawable для каждого состояния компонента. Каждый атрибут вида android:state_* может принимать одно из двух значений: true или false.
Доступны следующие состояния:
- state_focused — в фокусе или нет
- state_window_focused — имеет ли фокус родительское окно
- state_enabled — доступен или нет
- state_checkable — может ли быть отмечен или нет
- state_checked — отмечен или нет
- state_selected — выделен или нет
- state_activated — активирован или нет
- state_pressed — нажат или не нажат
- state_hovered — находится ли курсор над компонентом или нет (API 11 и выше)
Для списков есть также:
- state_single
- state_first
- state_middle
- state_last
Рассмотрим примеры. Нас не устраивает внешний вид кнопки. Хочется, чтобы она выглядела так (Да еще и чтобы подсвечивалась при нажатии):
Сделать это просто. Добавляем в ресурсы изображения нормального (button_up.png) и нажатого (button_down.png) состояний кнопки. И создаём в папке drawables XML-файл со следующим содержанием (states_button.xml):
Важный момент: в списке состояний нужно сначала указывать специализированные состояния, а последним должно следовать состояние по умолчанию (без атрибутов state-* вообще).
Ещё один момент. Кнопка может одновременно находиться в состоянии pressed и focused, поэтому сначала указывайте state_pressed, а затем state_focused. Иначе, если кнопка будет в состоянии focused, то состояние pressed не применится.
Теперь осталось у атрибута background для кнопки прописать созданный ресурс.
Можно обойтись без использования изображений для кнопки, а воспользоваться фигурами (states_shapes.xml).
А можно использовать просто цвета:
Попробуйте применить файл не к атрибуту background, а к атрибуту android:textColor, чтобы цвет влиял на текст кнопки, а не на саму кнопку.
Можно использовать как шпаргалку следующую картинку.
RadioBox, CheckBox и др.
Похожим образом можно задавать стили для RadioButtom, CheckBox и т.п.. Но тут мало того, что можно отдельным ресурсом задавать фон, так отдельным же ресурсом можно задавать саму пиктограмму через атрибут button (states_compound.xml).
Разметка с созданными стилями
-nodpi, -anydpi
Есть очень интересная статья о папках с квалификаторами -nodpi, -anydpi — The CommonsBlog — -nodpi, -anydpi, and WTF?
Вкратце, nodpi для исключительных случаев, когда картинка нужного разрешения не найдётся. Например, у нас есть res/drawable-nodpi/foo.xml и res/drawable-xxhdpi/foo.png. Устройство с -xxhdpi должно использовать PNG; остальные — XML-версию.
Изображения в res/drawable-anydpi/ также подойдут для любого разрешения экрана, но работают по другому принципу. Например, у нас есть res/drawable-anydpi/foo.xml и res/drawable-xxhdpi/foo.png. Все устройства должны использовать XML, даже устройства с разрешением -xxhdpi. Поэтому квалификатор удобно использовать совместно с другими квалификаторами. В частности, с -v21, что полезно при работе с вектором.
Допустим, у нас есть res/drawable-anydpi-v21/foo.xml и res/drawable-xxhdpi/foo.png. В этом случае, все устройства 5.0+ будут использовать XML. Все xxhdpi-устройства на Android 4.4 и ниже будут использовать PNG. И все остальные устройства на Android 4.4 и ниже также будут использовать PNG, подгоняя картинку под своё разрешение.
Векторные файлы нельзя размещать в папке -nodpi, если minSdkVersion меньше 21.
Папка res/drawable/ по сути является синонимом для res/drawable-mdpi/ и была оставлена в целях совместимости, когда на первых устройствах ещё не было деления на разрешения экрана. Никто же не предполагал, что Android так разовьётся. Сейчас эту папку используют для xml-файлов, которые ведут себя достаточно независимо то разрешения экранов при правильном использовании.
Представление изображений в Android
Одним из наиболее распространенных источников графических ресурсов являются файлы изображений. Android поддерживает следующие форматы файлов : .png (предпочтителен), .jpg (приемлем), .gif (нежелателен). Для графических файлов в проекте уже по умолчанию создана папка res/drawable. При добавлении графических файлов в эту папку для каждого из них Android создает идентификатор ресурса (int) R.drawable.image. После этого ресурс можно использовать в приложении.
Для работы с изображениями создадим приложение/модуль p03images. Процесс создания модулей (приложений) подробно рассмотрен здесь. В этом простом примере по работе с изображениями рассмотрим вопросы добавления изображений в проект, представление изображений в интерфейсе и динамическую смену изображений. Структура модуля с уже добавленными изображениями представлена на следующем скриншоте.
Итак, в папку res/drawable были добавлены два изображения в виде стрелок (arrow_left.png, arrow_right.png) и три фото московских усадеб : Коломенское (kolomenskoye.jpg), Кусково (kuskovo.jpg) и Царицыно (tsaritsyno.jpg).
Добавление изображения в drawable
Рассмотрим два способа добавления графического изображения в проект. При первом способе будет использоваться мастер размещения изображения. При втором способе будет выполняться обычное копирование.
Сначала добавим в папку «drawable» изображения стрелок arrow_left.png, arrow_right.png. Для этого выделяем модуль p03images, открываем контекстное меню правой клавишей мыши и выбираем New / Image asset. В открывшемся диалоговом окне выполняем следующие действия :
- В поле «Icon Type» выбираем «Action Bar and Tab Icons».
- В поле Name определяем наименование графического ресурса.
- В поле Asset Type указываем тип изображения.
- В поле Path указываем путь к файлу изображения. Можно открыть вспомогательное диалоговое окно выбора файла нажатием на кнопку с многоточием.
- Нажимаем кнопку Next, в результате чего будет открыто следующее диалоговое окно, в котором никаких изменений вносить не требуется. Завершаем процесс нажатием на кнопку Finish.
Android Studio автоматически сгенерирует объекты изображения с различными разрешениями. При этом для каждого разрешения будет создана своя папка (директория) типа res/drawable-xxx. Например, drawable-hdpi, drawable-mdpi, drawable-ldpi и прочее. В каждую папку будет помещено графическое изображение. В среде разработки студио в структуре модуля это не видно; необходимо перейти в проводник.
Теперь, чтобы сослаться на данный ресурс для его отображения на кнопке btnRight типа ImageButton, можно использовать следующий синтаксис в XML-файле разметки интерфейса :
Здесь следует несколько слов сказать о том, что такое ldpi, mdpi, hdpi и т.д. Данные аббревиатуры, заканчивающие на символы dpi, используются в обозначении наименований ресурсов (наименований папок). Эти обозначения связаны с разрешениями экрана.
Разрешение экрана
Разрешение экрана определяется параметром DPI (Dots Per Inch) — это количество точек на дюйм. Совершенно ясно, что нет никакого смысла рисовать высококачественную большую тяжёлую графику на экран с разрешением 320х240 пикселей, а потому в Android предусмотрены некоторые категории, каждая из которых совпадает с теми или иными аппаратными характеристиками устройства.
Приведу соответствие обозначений разрешениям экрана :
- Low DPI (LDPI) = 120DPI.
- Medium DPI (MDPI) = 160DPI.
- High DPI (HDPI) = 240DPI (Nexus S, SGS2). Сокращение SGS2 обозначает Samsung Galaxy S2.
- Extra High DPI (XHDPI) = 320DPI (Galaxy Nexus, Nexus 4, SGS3).
- Extra Extra High DPI (XXHDPI) = 480DPI (HTC One и SGS4).
Разработчикам приходится рисовать графику сразу под несколько разрешений. Скажем, обычная иконка приложения для MDPI должна быть 48×48 пикселей, для HDPI — 72×72, для XHDPI уже 96×96.
Разметка Android учитывается не в пикселях, а в dp’ах для унификации. Если все параметры прописывались бы в пикселях, то на Galaxy Nexus, к примеру, был бы хороший statusbar, а на Galaxy S4 это была бы тонкая полоса, в которую и пальцем-то было бы попасть нереально. Размер одного dp’а тоже зависит от DPI, например при DPI=160 1dp=1px, а при DPI=320 1dp=2px. Именно из-за этой разницы размер компонентов и изображений в интерфейсе на четырёхдюймовом Nexus 4 точно такой же, как и на семидюймовом Nexus 7. Разработчики представляют разные изображения, устанавливают соответствующую разметку, а в устройстве определяется количество точек на дюйм, благодаря чему Android понимает какие ресурсы ему нужны.
Простое копирование изображения в drawable
При простом копировании изображения в папку res/drawable используется буфер обмена. Т.е. сначала необходимо в проводнике выполнить копирование изображения в буфер обмена с помощью горячих клавиш Ctrl+C. После этого в модуле/проекте выделить запись res/drawable и нажать Ctrl+V, либо открыть контекстное меню и выбрать пункт Paste. Добавим, таким образом, в проект изображения усадеб. При копировании изображения Studio спросит Вас о директории, в которой файл изображения будет размещен :
Поскольку трансформировать изображения под разные разрешения не будем, то выбираем директорию res/drawable и нажимаем кнопку ОК. После этого, Studio откроет второе диалоговое окно и попросит подтверждения. Здесь без каких-либо изменений нажимаем кнопку ОК. При желании Вы можете изменить, к примеру, наименование файла.
Таким образом, в проект/модуль были внесены все файлы изображений. Теперь необходимо определить интерфейс приложения, в который включим две кнопки для «пролиставания» изображений и компонент ImageView для представления изображений московских усадеб.
Определение графического интерфейса
На следующем скриншоте представлен интерфейс приложения. В центре окна размещен компонент ImageView с привязками к трём сторонам. В нижней части размещаются две кнопки типа ImageButton. Поскольку вопросы разметки интерфейса и привязки компонентов были рассмотрены на странице Layout интерфейса приложения Android, то здесь не будем на этом заострять наше внимание.
На кнопки нанесены соответствующие изображения. Пример определения изображения на кнопке типа ImageButton был приведен выше. Точно также можно определить изображение для компонента ImageView. Это можно выполнить либо непосредственно в файле разметки XML (Text режим), либо в атрибутах компонента (Design режим). Теперь необходимо несколько слов сказать о компоненте ImageView.
Компонент представления изображения, ImageView
Для отображение изображения в интерфейсе Android приложения используется компонент ImageView, расположенной в палитре Common. ImageView является базовым элементом-контейнером для использования графики. Изображения в компонент можно загружать из разных источников; например, из ресурсов программы, из галереи, из контент-провайдеров. В классе ImageView имеется несколько методов для загрузки изображений :
• setImageResource(int) | : представление изображения по идентификатору ресурса; |
• setImageBitmap(Bitmap) | : представление растрового изображения; |
• setImageDrawable(Drawable) | : представление изображения типа png, jpg; |
• setImageURI(Uri) | : загрузка изображения по URI. |
Примеры методов представления изображений
Небольшой комментарий к использованию методов. Самый простой способ загрузки в ImageView изображения из приложения связан с использованием ресурсов и метода setImageResource.
Для загрузки растрового приложения, если оно отсутствует в приложении, его необходимо создать с использованием BitmapFactory. Формат изображения Bitmap – это представление изображения в памяти. Объект Bitmap хранит в себе информацию о каждом пикселе изображения, поэтому может "весить" в десятки/сотни раз больше, чем файл с изображением .png/.jpg.
Drawable — это объект, который может быть изображен в каком-либо View. Drawable не обязательно является изображением. Это может быть, например, форма (shape), созданная в ресурсах, или комбинация изображений. Объект Drawable можно получить из ресурсного изображения методом getDrawable. Можно также использовать метод Drawable.createFromPath(String).
Ну и в заключение использование метода загрузки файла с использованием android.net.Uri. В примере используется путь, определенный в модуле p03images (пакет com.android.test.p03images) и файл ресурсов R.drawable.tsaritsyno.
Прозрачность изображения
Иногда необходимо будет изменить прозрачность изображения. Например, когда оно используется в качестве фонового изображения. В этом случае используйте метод setAlpha(int alpha) объекта Drawable. Диапазон значений параметра alpha от 0 (полностью прозрачный) до 255 (непрозрачный). Пример :
Масштабирование изображение
Существуют несколько способов масштабирования изображения в ImageView. Атрибут компонента android:scaleType определяет способ масштабирования. Динамически способ масштабирования можно изменить методом ImageView.setScaleType(). Ниже представлены некоторые способы масштабирования изображения :
android:scaleType="fitCenter". При масштабировании изображения с использованием fitCenter выполняется масштабирование с сохранением пропорций. При этом одна из сторон будет равной соответствующей стороне ImageView. Для наглядности в компоненте ImageView был определен черный цвет фона.
android:scaleType="center". В этом режиме изображение размещается в центре компонента без масштабирования (сжатия и растягивания).
android:scaleType="fitStart". Изображение масштабируется с сохранием пропорций. При этом хотя бы одна из сторон будет равна соответствующей стороне ImageView. После этого изображение перемещается в верхнюю часть ImageView. Аналогично работает масштабирование "fitEnd" с размещением изображения в нижней части компонента.
android:scaleType="fitXY". Изображение масштабируется без сохранения пропорций таким образом, чтобы размеры сторон изображения совпадали с размерами сторон ImageView.
android:scaleType="centerCrop". Изображение масштабируется равномерно с сохранением пропорций. При этом высота и ширина изображения будут больше или равны высоте и ширине ImageView. После этого центр изображения устанавливается в центре ImageView.
Кроме представленных выше масштабирований ещё имеются масштабирование "matrix" с использованием матрицы, определяемой методом ImageView.setImageMatrix(), и масштабирование "centerInside", которое равномерно с сохранением пропорций масштабирует изображение и устанавливает изображение в центре ImageView (при этом высота и ширина изображения будут меньше или равны высоте и ширине ImageView).
Программный модуль MainActivity
После того, как интерфейс приложения определен, необходимо к кнопкам подключить соответствующие обработчики событий. Для этого открываем модуль MainActivity в режиме редактирования и вносим следующие изменения :
- определяем целочисленную переменную imageIDX, используемую для индексации изображений усадеб;
- создаем метод getImageID(), возвращающий идентификатор графического ресурса изображения в зависимости от текущего значения imageIDX;
- создаем метод changeImage(), отображающий текущее графическое изображение;
- подключаем к кнопкам обработчики событий. При нажатии на кнопку сначала изменяется значение текущего идентификатора imageIDX, и после этого вызывается метод changeImage().
Полагаю, что код модуля MainActivity тривиально прост и не требует особых комментариев.
После старта приложения Вы должны увидеть следующий интерфейс :
Исходный код примера не приводится, всё описано подробно. Поэтому у Вас не должно возникнуть сложностей самостоятельно повторить этот пример.
Использование фонового изображения в разметке интерфейса активности Android приложения представлено здесь.
Использование изображений/иконок в меню Android приложений представлено здесь.