- WebView
- Загружаем локальные страницы и картинки
- Загружаем данные при помощи loadData() и loadDataWithBaseURL()
- Проблемы с кодировкой
- Методы
- Используем зум для просмотра
- Прозрачность
- WebView в Lollipop
- Советы
- Фон
- Касания экрана
- Настройки
- Ночной режим
- Работа с WebView в Android: пример и описание возможностей
- Подробно о WebView в Android: что, как и почему
- Руководство по работе с 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:
webView = findViewById(R.id.mybrowser); webView.loadUrl("file:///android_asset/mypage.html");
Аналогично поступаем с картинками, которые встречаются в html-файле
Также можно загрузить файл из папки res/raw:
webView.loadUrl("file:///android_res/raw/cat.html");
Если картинка находится на внешнем накопителе, то попробуйте вариант:
WebView webView = findViewById(R.id.webView); String imageName = "cutecat.png"; String catUrl = "file://" + Environment.getExternalStorageDirectory().getAbsolutePath() .toString() + "/" + imageName; webView.loadUrl(catUrl);
Недавно наткнулся на фрагмент кода, где нужно добавить несколько новых настроек для работы с файлами. Пример для Kotlin.
val webView = findViewById(R.id.webView) // Enable the WebView to access content through file: URLs webView.settings.apply
Загружаем данные при помощи loadData() и loadDataWithBaseURL()
Данные можно загрузить с помощью метода loadData():
String htmlText = "Percent test: 100% "; WebView webView = findViewById(R.id.webView); webView.loadData(htmlText, "text/html", "en_US");
Если текст простой, то этот способ подойдёт. Но в данном примере встречается символ процента, который относится к спецсимволам и часть текста может оказаться недоступной. Если в тексте встречаются подобные символы, то лучше использовать метод loadDataWithBaseURL():
webView.loadDataWithBaseURL(null, htmlText, "text/html", "en_US", null);
Если вам приходится использовать loadData(), то спецсимволы можно заменить при помощи метода replace():
String webData = stringBuffer.toString(); // поступающие данные webData = webData.replace("#", "%23"); webData = webData.replace("%", "%25"); webData = webData.replace("\\", "%27"); webData = webData.replace("?", "%3f"); webView.loadData(webData, "text/html", "UTF-8");
Проблемы с кодировкой
У меня есть программа в Google Play, использующая WebView. К моему удивлению, некоторые пользователи жаловались, что текст нечитаем, так как они видят только кракозябры. Особенно много жалоб было от пользователей с планшетами. Оказалось, что проблема довольна распространённая и обсуждается на форумах. Танцы с бубнами (установка явной кодировки UTF-8) не помогают. Нашёл один ответ, который у некоторых заработал, на всякий случай я его здесь оставлю.
// перед загрузкой данных (load. ) WebSettings settings = mWebView.getSettings(); settings.setDefaultTextEncodingName("utf-8");
Но я рекомендую просто использовать метод loadDataWithBaseURL(). Работает стабильно.
Методы
У WebView есть множество методов, которые позволяют добиваться полной функциональности как у обычного браузера — обновить страницу, перейти на предыдущую страницу и т.д. Часть методов представлена ниже:
Используем зум для просмотра
Не забывайте, что WebView можно использовать не только для просмотра html-страниц, но и для просмотра изображений. Поэтому данный компонент вполне можно использовать просмотра картинок с котиками, к тому же вы можете включить встроенный механизм масштабирования:
mWebView = findViewById(R.id.webView1); // устанавливаем Zoom control mWebView.getSettings().setBuiltInZoomControls(true); // загружаем картинку (не забудьте установить разрешение на интернет) mWebView.loadUrl("http://netsources.narod.ru/friday/alkocat.jpg"); this.setTitle("WebView");
Прозрачность
Устанавливать прозрачность лучше программно. Встречал жалобы, что через XML это свойство не работает.
webView.setBackgroundColor(0x00000000);
WebView в Lollipop
В Android 5.0 компонент доступен в Google Play (Android System WebView) и его можно обновлять на устройстве.
Компонент теперь основывается на движке Chromium и поддерживает следующие новинки.
Можно ознакомиться с некоторыми примерами — GoogleChrome/chromium-webview-samples. Там есть примеры с WebRTC, полноэкранным режимом, касаниями экрана, выбора файла, работой с JavaScript-сценариями.
Кроме того, стал доступен Safe Browsing — механизм, предупреждающий об опасных ссылках. Включается через манифест.
Советы
Фон
Если вы заметили, что экран мерцает во время загрузки WebView, то поменяйте фон. Мерцание происходит из-за смены фона приложения (темы), на белый фон по умолчанию для WebView, а потом на фон, который прописан на странице.
mWebView.setBackgroundColor(Color.parseColor("#3498db")); mWebView.setBackgroundColor(getResources().getColor(R.color.my_color_name)); // и т.п.
Касания экрана
Так как поддерживаются касания экрана, то старайтесь использовать на веб-странице визуальные эффекты нажатия кнопок и других элементов при помощи псевдокласса :active, например, так:
Настройки
В API 24 появилась возможность открыть окно настроек и выбрать движок для WebView:
Intent intent = new Intent(Settings.ACTION_WEBVIEW_SETTINGS); if (intent.resolveActivity(getPackageManager()) != null)
Ночной режим
Появилась поддержка тёмной темы в последних версиях WebView.
implementation "androidx.webkit:webkit:1.2.0-alpha01"
За ночной режим отвечает класс WebViewFeature, который имеет в своём составе коллекцию различных возможностей. Проверить поддержку той или иной возможности можно через isFeatureSupported().
// Поддерживается ли ночной режим if (WebViewFeature.isFeatureSupported(WebViewFeature.FORCE_DARK))
Всего три варианта для тёмной темы.
WebSettingsCompat.setForceDark(webView.settings, WebSettingsCompat.FORCE_DARK_ON)
val forceDarkMode = WebSettingsCompat.getForceDark(webView.settings)
Работа с WebView в Android: пример и описание возможностей
В Android есть несколько способов отображения HTML-страниц в вашем приложении. Наиболее эффективным способом является использование виджета Android WebView — о нем мы сегодня и поговорим.
Компонент WebView в Android представляет собой полноценный браузер, который реализован как подкласс View, поэтому мы с легкостью можем встроить его в наше приложение на Android.
Подробно о WebView в Android: что, как и почему
Чаще всего для работы с простыми html-страницами используется виджет TextView . В этом случае мы можем реализовать статический метод fromHtml() , который принадлежит утилитному HTML классу для парсинга строк с html кодом и дальнейшим его отображением в TextView .
Виджет TextView обеспечивает простое форматирование для стилей (жирный, курсив), шрифтов, различным цветов, гиперссылок и т.д.
Однако со сложным форматированием и большим объемом HTML-страниц виджет TextView справиться уже не в состоянии. Например, работать с такими функциональными и объемными сайтами, как Facebook или другие соц сети через TextView уже не получится.
В таких случаях на помощь приходит WebView , так как только он может обрабатывать большие обхемы и множество HTML-тегов. Виждет WebView также может работать с CSS и JavaScript , которые метод Html.fromHtml() бы просто проигнорировал.
WebView также обеспечивает работу с историей посещений и навигацией назад и вперед по страницам.
Тем не менее WebView также имеет целый набор недостатков: с точки зрения эффективности потребления памяти он значительно уступает TextView . Причиной большого потребления памяти WebView является веб-движок рендеринга контента WebKit/Blink, который еще используется в таких браузерах, как Chrome.
Руководство по работе с WebView
Ниже представлен пример работы с макетом, установкой виджета в коде и обзор наиболее полезных методов при работе с WebView в Android.
1. Установка WebView в макете
Компонент WebView вставляется в тот файл XML-макета, где мы хотим видеть виджет WebView . Давайте создадим простой Hello World проект на Android и посмотрим его работу в макете activity_main.xml :