Android studio webview масштабирование

Android WebView, масштабирование изображения в соответствии с экраном

что у меня есть: я загружаю изображение с URL-адреса. Я просто делаю (WebView).loadUrl(imageurl, extraheaders)

что я получаю: изображение не отображается на полной ширине WebView, оно имеет пустое пространство вокруг (например, если вы откроете немного iamge в своем настольном браузере)

что я пробовал: установка LayoutAlgorithm в SINGLE_COLUMN. Работает идеально, но масштабирование не работает. (У меня он включен в WebView.getSettings() Не знаю, почему. Настройка setUseWideViewPort(true); загрузить изображение без каких-либо пробелов нет, но он полностью увеличен.

9 ответов

у меня была такая же проблема, и это сработало просто отлично:

изменить: Поскольку это осталось в качестве принятого ответа, вот лучшее решение (все кредит Тони ниже):

вы также можете сделать что-то подобное.

добавить стиль CSS для img в начале (зависит от вашего формата веб-данных) строки данных.

чтобы быстро сделать это с данными в WebView, я сделал это.

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

Edit (уточнение по содержанию сообщения):

вы можете text/html значение вместо post.getContent() из примера.

содержание сообщения вот только пример text/html содержимое, которое загружается из некоторого источника данных, а затем объединяется с style часть, которая делает любое изображение в данном содержимом, чтобы соответствовать экрану.

вы должны масштабировать webView, чтобы соответствовать экрану:

что сработало для меня: я прочитал, что для того, чтобы соответствовать ширине экрана, вы должны добавить это в свой HTML или xml внутри поля:

Так что я сделал, вместо масштабирования и масштабирования изображений, я получил xml, поместил его в StringBuilder, нашел src=»https://blablabla.com/image.png» то есть внутри поля и непосредственно перед подстрокой » src «я вставил» width= » 100%»», затем y установил мой webView с помощью StringBuilder, mi код это:

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

немного поздно, но я надеюсь, что это поможет, что вы можете сделать:

это сделает изображение точно таким же, как ширина вашего WebView, остальное вы можете настроить сам WebView.

Источник

Как установить начальный масштаб / ширину для webview

Я пытаюсь заставить WebView иметь подобное поведение, как браузер android. Браузер открывает все страницы таким образом, что пытается подогнать их ширину на экране. Однако поведение WebView по умолчанию должно начинаться со 100% пиксельного масштаба, поэтому он начинает увеличиваться в верхнем левом углу.

Я потратил последние пару часов, пытаясь найти способ заставить WebView масштабировать страницу на экран, как это происходит в браузере, но мне не повезло. Кто-нибудь нашли способ сделать это?

Я вижу, что параметр называется setLoadWithOverviewMode, но это, похоже, ничего не делает. Я также экспериментировал с setInitialScale, но на разных размерах экрана и размерах веб-страниц, которые не будут такими изящными, как масштабирование браузеров.

У кого-нибудь есть зацепки?

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

6 ответов:

следующий код загружает настольную версию домашней страницы Google полностью уменьшена, чтобы соответствовать в пределах webview для меня в Android 2.2 на экране 854×480 пикселей. Когда я переориентирую устройство и он перезагружается в портретной или альбомной ориентации, ширина страницы полностью вписывается в представление каждый раз.

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

это приводит к тому, что полоса прокрутки не занимает пространство макета и позволяет веб-странице заполнить видовой экран.

надеюсь, что это помогает

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

отличный ответ, опубликованный Брайаном, не работает для меня в Jelly Bean. Я должен также добавить:

параметр может быть любым процентом, который выполняет, что измененное содержимое меньше ширины веб-представления. Затем setUseWideViewPort (true) расширяет ширину содержимого до максимальной ширины webview.

Источник

WebView

WebView — это компонент, который позволяет встраивать веб-страницы в приложения, своеобразный мини-браузер. Находится в разделе Containers.

В старых версиях Android WebView использовал движок WebKit. В Android 4.4 он стал использовать движок Chromium или Blink. В Android 5 появилось отдельное приложение System WebView, которое можно скачать из Play Market. Такое разделение позволило обновлять движок без обновления системы. На этом приключения не закончились. В Android 7.0 уже используется движок Chrome, а если этого браузера на устройстве нет, то используется System WebView. Подобные выкрутасы не прошли даром, программисты часто жалуются, что какой-то кусок кода не работает. Приходится проверять работу на разных устройствах.

Надеюсь, вы уже познакомились с базовым примером по созданию собственного браузера. Рассмотрим дополнительные возможности элемента WebView.

Загружаем локальные страницы и картинки

Если вы хотите загружать в WebView страницы не из интернета, а со своего приложения, то разместите нужные файлы в папке assets, например, assets/mypage.html. Доступ к файлу вы можете получить через конструкцию file://android_asset:

Аналогично поступаем с картинками, которые встречаются в html-файле

Также можно загрузить файл из папки res/raw:

Если картинка находится на внешнем накопителе, то попробуйте вариант:

Недавно наткнулся на фрагмент кода, где нужно добавить несколько новых настроек для работы с файлами. Пример для Kotlin.

Загружаем данные при помощи loadData() и loadDataWithBaseURL()

Данные можно загрузить с помощью метода loadData():

Если текст простой, то этот способ подойдёт. Но в данном примере встречается символ процента, который относится к спецсимволам и часть текста может оказаться недоступной. Если в тексте встречаются подобные символы, то лучше использовать метод loadDataWithBaseURL():

Если вам приходится использовать loadData(), то спецсимволы можно заменить при помощи метода replace():

Проблемы с кодировкой

У меня есть программа в Google Play, использующая WebView. К моему удивлению, некоторые пользователи жаловались, что текст нечитаем, так как они видят только кракозябры. Особенно много жалоб было от пользователей с планшетами. Оказалось, что проблема довольна распространённая и обсуждается на форумах. Танцы с бубнами (установка явной кодировки UTF-8) не помогают. Нашёл один ответ, который у некоторых заработал, на всякий случай я его здесь оставлю.

Но я рекомендую просто использовать метод loadDataWithBaseURL(). Работает стабильно.

Методы

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

Используем зум для просмотра

Не забывайте, что WebView можно использовать не только для просмотра html-страниц, но и для просмотра изображений. Поэтому данный компонент вполне можно использовать просмотра картинок с котиками, к тому же вы можете включить встроенный механизм масштабирования:

Прозрачность

Устанавливать прозрачность лучше программно. Встречал жалобы, что через XML это свойство не работает.

WebView в Lollipop

В Android 5.0 компонент доступен в Google Play (Android System WebView) и его можно обновлять на устройстве.

Компонент теперь основывается на движке Chromium и поддерживает следующие новинки.

Можно ознакомиться с некоторыми примерами — GoogleChrome/chromium-webview-samples. Там есть примеры с WebRTC, полноэкранным режимом, касаниями экрана, выбора файла, работой с JavaScript-сценариями.

Кроме того, стал доступен Safe Browsing — механизм, предупреждающий об опасных ссылках. Включается через манифест.

Советы

Если вы заметили, что экран мерцает во время загрузки WebView, то поменяйте фон. Мерцание происходит из-за смены фона приложения (темы), на белый фон по умолчанию для WebView, а потом на фон, который прописан на странице.

Касания экрана

Так как поддерживаются касания экрана, то старайтесь использовать на веб-странице визуальные эффекты нажатия кнопок и других элементов при помощи псевдокласса :active, например, так:

Настройки

В API 24 появилась возможность открыть окно настроек и выбрать движок для WebView:

Ночной режим

Появилась поддержка тёмной темы в последних версиях WebView.

За ночной режим отвечает класс WebViewFeature, который имеет в своём составе коллекцию различных возможностей. Проверить поддержку той или иной возможности можно через isFeatureSupported().

Всего три варианта для тёмной темы.

• FORCE_DARK_OFF
• FORCE_DARK_AUTO
• FORCE_DARK_ON

Источник

Масштабирование окна редактора android studio [дубликат]

этот вопрос уже есть ответ здесь:

Это может показаться глупым вопросом, но кто-нибудь знает, как увеличить/уменьшить масштаб окна редактора в Android studio? Я действительно исследовал его, прежде чем люди дали мне минус-оценки. Ctrl+ и Ctrl-кажутся чтобы сложить и развернуть методы, в раскрывающемся списке » вид » нет элемента управления масштабированием, и все, что я сделал в googleing, относится к функции управления масштабированием WebView. Я что-то упускаю?

6 ответов

в настройках > редактор есть опция «изменить размер шрифта (масштабирование) с помощью команды+колесо мыши». (Я на MacOS; на других платформах это может быть control+mouse wheel).

вы также можете перейти в Настройки > Keymap > действия редактора > уменьшить размер шрифта / увеличить размер шрифта / сбросить размер шрифта и привязать некоторые ключи к этим командам.

IntelliJ и Android Studio имеют достойный встроенный поиск для поиска функций приложения. В диалоговом окне настройки можно просто начать ввод для поиска (вы можете просто начать печатать из многих мест в пользовательском интерфейсе, чтобы начать поиск); Есть также окно поиска.

существует ключевая привязка для поиска действий по имени; на MacOS это command-shift-A. Это супер-удобная функция.

измените настройки Android studio, как показано ниже

Шаг 1: Откройте Android Studio и перейти к

Шаг 2: Откройте настройки

Шаг 3: Нажмите кнопку редактор

Шаг 4: Нажмите Кнопку общие

Шаг 5: Проверка изменить размер шрифта (масштабирование) с помощью Ctrl + колесо мыши (как показано ниже снимок)

когда я обновляю Android studio до последней версии 2.0, шрифт изменился и стал больше.

предоставленные решения позволяют изменять размер шрифта только для текущей страницы (открытой страницы), если вы хотите изменить весь размер шрифта Android studio, вы должны сделать это:

на настройки>редактор>Цвета И Шрифты>шрифт

затем нажмите на кнопку «сохранить как» и создать новую имя профиля это «мой профиль», например

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

существует альтернативный способ сделать масштабирование моего кода, используя View —> Enter presentation Mode

на Macbook air 2016 года без внешней мыши, сделать принятый ответ, и ущипнуть на трекпаде, чтобы уменьшить текст, обратный щипок, чтобы увеличить.

Для Пользователей MacBook:

чтобы изменить размер шрифта:

для увеличения и уменьшения масштаба в Редакторе:

Источник

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, где выводится картинка

android:layout_width=»match_parent»
android:layout_height=»match_parent»
android:orientation=»vertical» >

Масштабирование по умолчанию, по меньшей ст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 ) );

Этот способ стандартный, описан во множестве примеров и поэтому нам не особо интересен. Переходим к следующему варианту.

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

android:layout_width=»match_parent»
android:layout_height=»match_parent»
android:orientation=»vertical» >

В 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 после поворота устройства не изменяет масштаб картинки. Другими словами, показали картинку, повернули телефон, масштаб остался старый. Очень похоже на то, что изображение как-то кешируется.

Я не нашел в документации упоминания об этом странном поведении. Может быть местные специалисты скажут, что я делаю не так?

Источник