Android studio webview примеры

WebView — создай свой браузер

Android позволяет создать собственное окно для просмотра веб-страниц или даже создать свой клон браузера при помощи элемента WebView. Сам элемент использует движок WebKit и имеет множество свойств и методов. Мы ограничимся базовым примером создания приложения, с помощью которого сможем просматривать страницы в интернете. В последних версиях используется движок от Chromium, но большой разницы в этом нет для простых задач.

Создадим новый проект MyBrowser и сразу заменим код в файле разметки res/layout/activity_main.xml:

Теперь откроем файл активности MainActivity.java и объявим компонент WebView, а также инициализируем его — включим поддержку JavaScript и укажем страницу для загрузки.

Так как приложение будет использовать интернет, необходимо установить разрешение на доступ к интернету в файле-манифесте.

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

Запустим приложение. В нашем распоряжении появился простейший вьювер веб-страниц, но с одним недостатком. Если вы щёлкнете на любой ссылке, то у вас автоматически запустится браузер по умолчанию и новая страница отобразится уже там. Точнее так было раньше. На новых устройствах при запуске приложения сразу открывается браузер.

Чтобы решить данную проблему и открывать ссылки в своей программе, нужно переопределить класс WebViewClient и позволить нашему приложению обрабатывать ссылки. Добавим в коде вложенный класс:

Затем в методе onCreate() определим экземпляр MyWebViewClient. Он может находиться в любом месте после инициализации объекта WebView:

Теперь в нашем приложении создан WebViewClient, который позволяет загружать любой указанный URL, выбранный в WebView, в сам контейнер WebView, а не запускать браузер. За данную функциональность отвечает метод shouldOverrideUrlLoading(WebView, String), в котором мы указываем текущий WebView и нужный URL. Возвращаемое значение true говорит о том, что мы не нуждаемся в запуске стороннего браузера, а самостоятельно загрузим контент по ссылке. В версии API 24 добавили перегруженную версию метода, учитывайте это обстоятельство.

Повторно запустите программу и убедитесь, что ссылки загружаются теперь в самом приложении. Но теперь возникла ещё одна проблема. Мы не можем вернуться к предыдущей странице. Если мы нажмём на кнопку «BACK» (Назад) на устройстве, то просто закроем своё приложение. Для решения новой проблемы нам необходимо обрабатывать нажатие кнопки «BACK». Добавляем новый метод:

Мы должны проверить, что WebView поддерживает навигацию на предыдущую страницу. Если условие верно, тогда вызывается метод goBack(), который возвращает нас на предыдущую страницу на один шаг назад. Если таких страниц набралось несколько, то мы можем последовательно вернуться к самой первой странице. При этом метод всегда будет возвращать значение true. Когда мы вернёмся на самую первую страницу, с которой начали путешествие по интернету, то вернётся значение false и обработкой нажатия кнопки BACK займётся уже сама система, которая закроет экран приложения.

Запустите приложение ещё раз. У вас появился свой собственный веб-браузер, позволяющий ходить по ссылкам и возвращаться на предыдущую страницу. Изучив документацию, вы можете оснастить приложение и другим вкусными плюшками для своего браузера.

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

Универсальный метод, который все локальные ссылки откроет в приложении, остальные в браузере (меняем одну строчку):

А сейчас немного усложним пример, чтобы у пользователя появилась альтернатива стандартным браузерам.

Чтобы было понятнее, переделаем пример следующим образом. Создайте две активности. На первой активности разместите кнопку для перехода на вторую активность, а на второй активности разместите компонент WebView.

В манифесте прописываем у второй активности фильтр.

Код для кнопки для перехода на вторую активность.

Мы создали собственное намерение с указанием фильтра и предоставили данные — адрес сайта.

Вторая активность должна принять данные:

В фильтре для второй активности мы указали два действия.

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

Запустите второе приложение (первое приложение можно закрыть) и нажмите на кнопку. У вас запустится не первое приложение с начальным экраном, а сразу вторая активность с мини-браузером. Таким образом, любое приложение может запустить браузер, не зная имени класса вашей активности, а используя только строку «ru.alexanderklimov.Browser», передаваемую в Intent. При этом ваша активность с браузером должна иметь категорию по умолчанию и данные. Напомню:

Вы можете представить свою строку в виде строковой константы и сообщить всем потенциальным пользователям вашего браузера, как они могут запустить его у себя. Но в Android уже есть такая готовая константа ACTION_VIEW, которая по справке документации представляет собой следующее:

Перепишем код для кнопки у второго приложения

Что произойдёт на этот раз? Мы помним, что у нас прописано два действия, включая и android.intent.action.VIEW. А значит наше первое приложение с браузером тоже должно распознавать эту команду, когда какое-то приложение у пользователя использует этот код. На эмуляторе как минимум есть одна такая программа «Browser», и теперь к ней добавилась наша вторая активность из первого приложения. На экране появится выбор из двух приложений.

А если удалить все альтернативные браузеры и оставить только вашу программу, то и выбора не будет. Ваш браузер станет основным. И если какое-то приложение захочет запустить веб-страницу указанным способом, то откроется ваша программа.

Небольшое замечание. Если заменить последнюю строчку на такую:

То в окне выбора программы вместо верхней строки «Open with» или её локального перевода появится ваша строка. Но не это главное. Если по каким-то причинам на устройстве не окажется ни одного браузера, то данный вариант кода не вызовет краха приложения, в отличие от первоначального варианта. Поэтому используйте предложенный вариант ради надёжности.

Источник

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 WebView Самоучитель и примеры

Это учебник и примеры для Android WebView . WebView — это представление SDK android, которое способно отображать веб-страницы.

Что такое WebView ?

WebView , как мы уже говорили, это WebView — представление, которое отображает веб-страницы.

Оно представлено классом WebView . Этот класс гораздо мощнее, чем вы можете подумать. При этом он очень прост и понятен в использовании и предоставляет вам абстракции, на которые вы можете опираться.

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

1. перемещаться вперед и назад по истории
2. увеличивать и уменьшать масштаб.
3. выполнять текстовый поиск и многое другое.

WebView является очень мощным средством, поскольку он предоставляет вам возможность писать приложения на таких языках, как Javascript и разметка HTML. Существует множество фреймворков, которые используют эту возможность, позволяя вам писать приложения на технологиях HTML5. Вы даже можете превратить свой сайт, например, сайт wordpress, в приложение для android.

WebView Определение API

WebView — это конкретный класс, находящийся в пакете android.webkit . Он происходит от класса android.widget.AbsoluteLayout и реализует несколько интерфейсов, как показано ниже:

Вот иерархия наследования:

Почему Webview?

WebView — это, вероятно, один из самых практичных, простых в использовании, но недостаточно используемых классов в android. Это потому, что он позволяет создавать приложения для android с помощью HTML, CSS и Javascript. Я бы понял, если бы его не использовали так часто, если бы он не мог выполнять Javascript или рендерить CSS. Однако он делает все это.

Это дает мощные возможности, поскольку HTML, CSS и Javascript — простые в использовании, популярные технологии, используемые в пользовательских интерфейсах почти каждого веб-приложения или веб-сайта, который вы когда-либо посещали. Более того, существуют сотни фреймворков/библиотек для этих технологий, которые предоставляют мощные виджеты и абстракции. К ним относятся jQuery, Vue.js, Angular, React.js, Bootstrap, materializecss, UIKit и др.

Вы можете легко создать простое веб-приложение на стороне клиента, которое может взаимодействовать с технологиями на стороне сервера, такими как Node.js и PHP, и поместить его в папку assets . Затем используйте WebView для его загрузки. Однако вы должны убедиться, что Javascript включен. Я понимаю, что это не так мощно, как иметь полноценное Java-приложение, написанное на Java, Kotlin или C#, однако для начинающих вы быстро создадите свое первое приложение, которое сможете показать друзьям, продолжая свое образование.

Использование WebView

В большинстве случаев вы захотите отображать онлайн-контент в веб-вью. Чтобы ваша Activity могла получить доступ к Интернету и загружать веб-страницы в WebView , вы должны добавить разрешение INTERNET в файл Android Manifest :

Затем в своем макете добавьте или установите все окно Activity как WebView во время onCreate():

После этого вы можете загрузить веб-страницу с помощью метода loadUrl() :

Метод loadurl() загрузит наш сайт с указанного нами url. Это наиболее часто используемый способ.

Вы также можете загружать из HTML строки :

Это означает, что вы пишете HTML-код внутри строки . Затем загружаете его с помощью метода loadData() . Это подходит для загрузки веб-сайтов с простой структурой DOM (Document Object Model).

Быстрые примеры WebView и HowTo’s

Давайте рассмотрим быстрые примеры для нашего класса webview. Позже мы рассмотрим, как написать полноценное приложение.

1. Часто используемые параметры `WebView

Вот некоторые часто используемые настройки WebView . Давайте инкапсулируем их в простой статический метод, который затем можно легко использовать повторно.

Этот метод принимает объект WebView . Сначала мы получаем настройки webview с помощью метода getSettings класса WebView . Затем мы включаем javascript с помощью метода setJavaScriptEnabled() . Большинство этих методов настроек принимают булево значение для включения или отключения различных настроек.

2. Как создать пользовательский WebView

Мы хотим создать пользовательский веб-вид, который можно использовать в NestedScrollView.

1. Android WebView — загрузка из URL, строк и папки активов

Android WebView — загрузка из URL, строк и папки активов.

WebView — это один из тех классов, которые существуют в android с самого начала.

Добавлен в API уровня 1, находится в пакете android.webkit. Он используется для отображения веб-контента прямо внутри активности . Это делает его очень мощным и может быть использовано для создания даже базового работающего браузера. Это все еще представление, поэтому мы можем просто перетащить его из палитры в наш макет. Он рендерит веб-страницы, используя движок рендеринга webkit. В этом примере мы используем веб-вид для рендеринга веб-содержимого из :

• URL online.
• Локальная папка Assets .
• String в java-коде.

Для загрузки из url необходимо разрешение android internet в androidmanifest.xml. Более подробно о WebView вы можете узнать [здесь] (https://developer.android.com/reference/android/webkit/WebView.html).

Скриншот

Общие вопросы по этому примеру.

• Что такое WebView ?
• Как загрузить сайт из url в webview.
• Как загрузить html из assets frolder в webview.
• Как загрузить html строку в webview.
• Как использовать webview в android activity .

Использованные инструменты

Этот пример был написан с использованием следующих инструментов:

• Windows 8
• IDE AndroidStudio
• Genymotion Emulator
• Язык: Java

В этом проекте не использовались сторонние библиотеки.

Перейдем непосредственно к исходному коду.

AndroidManifest.xml

• Файл Android Manifest .
• Добавьте разрешение на интернет, так как мы будем получать веб-страницу также по url.

Build.Gradle

• Обычно в проектах android есть два файла build.gradle . Один из них — это build.gradle уровня приложения, а другой — build.gradle уровня проекта. Уровень app принадлежит папке app, и именно там мы обычно добавляем наши зависимости и указываем компилируемые и целевые sdks.
• Также добавляем зависимости для библиотек AppCompat и Design support.
• Наша MainActivity будет происходить от AppCompatActivity, а также мы будем использовать плавающую кнопку действия из библиотек поддержки дизайна.

MainActivity .java

• Launcher activity .
• ActivityMain.xml раздувается как contentview для этой активности .
• Мы инициализируем представления и виджеты внутри этой активности .
• Мы переключаемся между пунктами меню на нашей панели инструментов, выбирая загрузку из url, активов или строки .

ActivityMain.xml

• Шаблон макета.
• Содержит наш ContentMain.xml .
• Также определяет appbarlayout , toolbar , а также floatingaction buttton .

ContentMain.xml

• Макет контента.
• Определяет представления и виджеты, которые будут отображаться внутри MainActivity .
• В данном случае это простое веб-представление.

menu_main.xml

• Мы будем переключаться между пунктами меню на нашей панели инструментов.
• Давайте определим это в menu_main.xml внутри каталога меню.

Загрузка

• Скачайте проект ниже:

No.	Расположение	Ссылка
1.	GitHub	Прямая загрузка
2.	GitHub	Browse

Заключение.

Мы рассмотрели простой пример android webview. Как загружать веб-страницы из сети по url, из папки assets и из данных string .

Как внедрить CSS в WebView .

Вы можете захотеть манипулировать чужой страницей с помощью CSS. Например, загрузится веб-страница, а затем вы примените свой собственный стиль в CSS.

Это возможно в android webview. Вот шаги:

Шаг 1: Импорт Base64

Добавьте следующий импорт:

Шаг 2: Создайте функцию для инъекции css

Эта функция будет внедрять css через Javascript:

Шаг 3: Переопределите onPageFinished .

Следующим шагом будет переопределение события onpage finished , которое вызывается, когда webview завершает загрузку содержимого.

report this ad

Источник