Android. Вывод изображений, различные способы
Эта статья будет полезна начинающим разработчикам, здесь я предложу несколько вариантов вывода изображений на Android. Будут описаны следующие способы:
Обычный метод – стандартный способ, используя ImageView. Рассмотрены варианты загрузки картинки из ресурса, а также из файла на SD карте устройства.
Продвинутый вариант — вывод изображения, используя WebView. Добавляется поддержка масштабирования и прокрутки картинки при помощи жестов.
“Джедайский” способ – улучшенный предыдущий вариант. Добавлен полноэкранный просмотр с автоматическим масштабированием изображения при показе и поддержкой смены ориентации устройства.
Исходники тестового проекта на GitHub github.com/Voldemar123/andriod-image-habrahabr-example
В этой статье я не рассматриваю вопросы загрузки изображений из Интернета, кеширования, работы с файлами и необходимых для работы приложения permissions – только вывод картинок.
Итак, задача — предположим, в нашем приложении необходимо вывести изображение на экран.
Картинка может размерами превышать разрешение экрана и иметь различное соотношение сторон.
Хранится она либо в ресурсах приложения, либо на External Storage — SD карте.
Также допустим, мы уже записали на карту памяти несколько изображений (в тестовом проекте – загружаем из сети). Храним их в каталоге данных нашего приложения, в кеше.
public static final String APP_PREFS_NAME = Constants.class.getPackage().getName();
public static final String APP_CACHE_PATH =
Environment.getExternalStorageDirectory().getAbsolutePath() +
«/Android/data/» + APP_PREFS_NAME + «/cache/»;
Layout, где выводится картинка
<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»
android:layout_width=»match_parent»
android:layout_height=»match_parent»
android:orientation=»vertical» >
<ImageView
android:id=»@+id/imageView1″
android:layout_width=»fill_parent»
android:layout_height=»fill_parent» />
Масштабирование по умолчанию, по меньшей стoроне экрана.
В Activity, где загружаем содержимое картинки
private ImageView mImageView;
mImageView = (ImageView) findViewById(R.id.imageView1);
Из ресурсов приложения (файл из res/drawable/img3.jpg)
Задавая Bitmap изображения
FileInputStream fis = new FileInputStream(Constants.APP_CACHE_PATH + this.image);
BufferedInputStream bis = new BufferedInputStream(fis);
Bitmap img = BitmapFactory.decodeStream(bis);
Или передать URI на изображение (может хранится на карте или быть загружено из сети)
mImageView.setImageURI( imageUtil.getImageURI() );
Uri.fromFile( new File( Constants.APP_CACHE_PATH + this.image ) );
Этот способ стандартный, описан во множестве примеров и поэтому нам не особо интересен. Переходим к следующему варианту.
Предположим, мы хотим показать большое изображение (например фотографию), которое размерами превышает разрешение нашего устройства. Необходимо добавить прокрутку и масштабирование картинки на экране.
<LinearLayout xmlns:android=»http://schemas.android.com/apk/res/android»
android:layout_width=»match_parent»
android:layout_height=»match_parent»
android:orientation=»vertical» >
<WebView
android:id=»@+id/webView1″
android:layout_width=»fill_parent»
android:layout_height=»fill_parent» />
В Activity, где загружаем содержимое
protected WebView webView;
webView = (WebView) findViewById(R.id.webView1);
установка черного цвета фона для комфортной работы (по умолчанию – белый)
включаем поддержку масштабирования
больше места для нашей картинки
webView.setPadding(0, 0, 0, 0);
полосы прокрутки – внутри изображения, увеличение места для просмотра
загружаем изображение как ссылку на файл хранящийся на карте памяти
webView.loadUrl(imageUtil.getImageFileLink() );
«file:///» + Constants.APP_CACHE_PATH + this.image;
Теперь мы хотим сделать так, чтобы картинка при показе автоматически масштабировалась по одной из сторон, при этом прокрутка остается только в одном направлении.
Например, для просмотра фотографий более удобна ландшафтная ориентация устройства.
Также при смене ориентации телефона масштаб изображения должен автоматически меняться.
Дополнительно расширим место для просмотра изображения на полный экран.
В AndroidManifest.xml для нашей Activity добавляем
В код Activity добавлен метод, который вызыватся при каждом повороте нашего устройства.
@Override
public void onConfigurationChanged(Configuration newConfig) <
super.onConfigurationChanged(newConfig);
changeContent();
>
В приватном методе описана логика пересчета масштаба для картинки
Получаем информацию о размерах дисплея. Из-за того, что мы изменили тему Activity, теперь WebView раскрыт на полный экран, никакие другие элементы интерфейса не видны. Видимый размер дисплея равен разрешению экрана нашего Android устройства.
Display display = ((WindowManager) getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = display.getWidth();
int height = display.getHeight();
Размеры изображения, выбранного для показа
Bitmap img = imageUtil.getImageBitmap();
int picWidth = img.getWidth();
int picHeight = img.getHeight();
Меняем масштаб изображения если его высота больше высоты экрана. Прокрутка теперь будет только по горизонтали.
if (picHeight > height)
val = new Double(height) / new Double(picHeight);
Подбрасываем в WebView специально сформированный HTML файл, содержащий изображение.
webView.loadDataWithBaseURL(«/»,
imageUtil.getImageHtml(picWidth, picHeight),
«text/html»,
«UTF-8»,
null);
StringBuffer html = new StringBuffer();
Такой способ я применил из-того, что после загрузки изображения в WebView через метод loadUrl, как в прошлом варианте, setInitialScale после поворота устройства не изменяет масштаб картинки. Другими словами, показали картинку, повернули телефон, масштаб остался старый. Очень похоже на то, что изображение как-то кешируется.
Я не нашел в документации упоминания об этом странном поведении. Может быть местные специалисты скажут, что я делаю не так?
Работа с изображениями
Одним из наиболее распространенных источников ресурсов являются файлы изображений. 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()
Как добавить изображение в папку «drawable» в Android Studio?
когда я выбираю new > image asset , появляется диалоговое окно для выбора Asset Type .
как я могу добавить изображение к ?
21 ответов
на Android Studio 1.5:
- щелкните правой кнопкой мыши на res, new Image Asset
- On тип актива выбрать панель действий и значки вкладок
- выбрать путь образа
- дайте вашему изображению имя в имени ресурса
- Далее->Готово
обновление Android Studio 2.2:
щелкните правой кнопкой мыши на res, new Image Asset
On Тип Значок выбрать панель действий и значки вкладок
On тип актива выбрать изображения
On путь выберите путь изображения
изображение будет сохранено в папке/res / drawable.
предупреждение! Если вы решите используйте изображения, отличные от значков в SVG или PNG, имейте в виду, что он может стать серым, если изображение не прозрачно. Вы можете найти ответ в комментариях к этой проблеме, но ни один из них не проверяется, потому что я никогда не сталкивался с этой проблемой. Я предлагаю вам использовать иконки отсюда: материал иконки
копировать .png изображение и вставить в drawable.
вы можете добавить изображение с помощью xml-файла
или вы можете установить изображение с помощью программы:
например, я должен добавить список.png в папке drawable.
и теперь я просто вставлю в drawable папку. В качестве альтернативы вы можете сделать это Ctrl + C / V, как это делаем мы, программисты. 🙂
его очень просто просто скопировать изображение и вставить в папку drawable. еще одна вещь, когда вы вставляете изображение в папку drawable появится всплывающее окно с просьбой имя папки добавить xxhdpi, xhdpi, hdpi или mdpi в соответствии с вашим изображением, как показано ниже image
все еще есть проблема проверить эту ссылку: Drawable папка в Android studio
вы можете просто скопировать и вставить файл изображения(.jpg по крайней мере) в ваш res/drawable. У меня получилось!
сделайте это через то, как Android Studio предоставил вам
щелкните правой кнопкой мыши на папке res и добавьте изображение как Изображения таким образом. Android studio автоматически генерирует ресурсы изображений с различными разрешениями.
вы можете напрямую создать папку и перетащить изображение внутрь, но у вас не будет значков разного размера, если вы это сделаете.
откройте свой проект в Android Studio
нажать на кнопку res
Правой Кнопкой Мыши на drawable
нажать на кнопку Show in Explorer
дважды щелкните по drawable папка.
скопируйте в него файл изображения и переименуйте его по своему желанию.
теперь напишите имя файла изображения после @drawable/ .
он будет показывать изображение вы выбрали.
вам нужно использовать сторонний плагин, такой как Androidicons Drawable Import установить это. Идти к Android Studio > Prefrences > плагины > и найдите Выигрышного AndroidIcons Вы можете делать такие вещи, как
- Androidicons Drawable Import
- Материал Иконки Drawable Импорт
- Масштабируемый Drawable
- Multisource-Drawable
перезапустить Android studio. Если вы не создали папку рисунки , создайте его, импортировав любое изображение как — «панель действий и значки вкладок» и «значки уведомлений»,. Затем прямо падала на проводник и видим 4 варианта в new tab. Используйте любое одно согласно вашей потребности.
Android Studio 3.0:
1) Щелкните правой кнопкой мыши каталог «drawable».
2) Нажмите на: Показать в Проводнике
теперь у вас есть explorer opent с несколькими каталогами в нем, один из них «drawable».
3) перейдите в каталог ‘drawable’.
4) Поместите изображение, которое вы хотите там.
5) закройте проводник еще раз.
теперь изображение находится в Android Studio в разделе «res / drawable».
самый простой способ-просто перетащить изображение в папку drawable. Важно иметь в виду, если вы используете Android Studio в 2.2.X версии убедитесь, что вы находитесь в ВИД ПРОЕКТА иначе он не позволит перетаскивать изображение.
установите и используйте плагин android Drawable Importer:
инструкции по установке плагина находятся на этой странице. Это называется «android Drawable Importer» в результатах поиска плагинов.
- щелкните правой кнопкой мыши на папке » res » и выберите New -> Batch Drawable Import
- нажмите + и выберите источник изображение
- выберите, какое разрешение вы хотите его рассмотреть и какие другие размеры автоматически генерировать для
кажется смешным, что Android Studio не поддерживает это напрямую.
EDIT: но Xcode тоже не так. 🙁
мой способ экспорта / импорта активов изображений. Я использую эскиз.
Шаг 1. Эскиз: экспорт с помощью Android preset
Шаг 2. Finder: перейдите в папку экспорт > Cmd + C 
Шаг 3. Finder: перейдите в папку /res вашего проекта > Cmd + V > применить ко всем > слияние 
OK, изображения теперь они в вашем проекте.
его довольно просто
1) Просто скопируйте изображения и вставьте в папку drawable.
2) при вставке изображения(например,»mdpi) в папку drawable появится всплывающее окно с запросом имени папки add-mdpi .
3) Сделайте это для всех(hdpi, xhdpi, xxhdpi).
Я только что добавил одну ссылку, которую вы можете проверить, если у вас есть какие-либо сомнения.
В Android Studio вы можете выполнить следующие шаги, чтобы добавить изображение в папку drawable:
- Правой Кнопкой Мыши на drawable папку
- выберите Показать Explorer
- вставить изображение, которое вы хотите добавить
просто скопируйте изображения и выберите drawable затем на опции вставить или нажмите сочетание клавиш ctrl v. изображения добавляются
пример без каких-либо XML
изображение image_name.jpg на res/drawable/image_name.jpg и использовать:
протестировано на Android 22.
скопируйте изображение, затем вставьте его в drawables в папке ресурсов проекта в Android studio.Убедитесь, что имя вашего изображения не слишком длинное и не имеет пространственных символов.Затем нажмите SRC (source) в разделе свойства и найдите свое изображение нажмите на него, затем он автоматически импортируется вам представление изображения на вас эмулятор.
добавление изображений в папку drawable довольно просто. Просто выполните следующие действия:
- скачать необходимое изображение и сохраните его на рабочем столе.
- Теперь перейдите в Android Studio и щелкните правой кнопкой мыши на drawable внутри res.
- при щелчке правой кнопкой мыши вы увидите ‘показать в Проводнике’ или ‘показать в Finder.
- нажмите «Показать в проводнике» или «показать в Finder» , а затем перетащите или просто скопируйте загруженное изображение в папку drawable.
ваше изображение будет сохранено внутри drawable и вы можете использовать его.
создать > актив изображения > тип актива. очень хорошо работает. спасибо.
вам просто нужно скопировать файл изображения из папки местоположения, а затем щелкните правой кнопкой мыши на drawable в Android studio, а затем вставьте его.