Урок на Kotlin в Android Studio: встраиваем WebView

Иногда требуется показать веб-сайт прямо внутри приложения, минуя браузер. В Android для этого предусмотрен компонент WebView. Он интегрирует полноценный браузерный движок в ваше приложение, позволяя загружать любые веб-страницы. Сегодня в Android Studio мы создадим простое браузерное приложение: поле для ввода адреса, кнопку «Перейти» и область для просмотра. Вся логика будет реализована на Kotlin, а урок разбит на небольшие шаги, чтобы его мог освоить даже новичок.


Что понадобится

Создайте новый проект с пустым Activity. В файле AndroidManifest.xml добавьте разрешение на доступ к интернету — без него WebView не сможет загружать сайты.

<uses-permission android:name="android.permission.INTERNET" />

Также разрешите использовать незащищённый трафик, если вы будете тестировать на локальном сервере с HTTP. Для этого в тег <application> добавьте android:usesCleartextTraffic="true".


Добавляем WebView в разметку

Откройте activity_main.xml и разместите на экране три элемента: поле ввода EditText для URL, кнопку Button для перехода и сам WebView, занимающий всё оставшееся пространство.

<EditText
    android:id="@+id/urlInput"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Введите адрес" />

<Button
    android:id="@+id/goButton"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Перейти" />

<WebView
    android:id="@+id/webView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1" />

Настраиваем WebView в коде

В MainActivity.kt найдём элементы и пропишем логику. Сначала получим ссылку на WebView и включим поддержку JavaScript — многие современные сайты без него не работают. Затем разрешим открывать ссылки внутри WebView, а не в стороннем браузере.

val webView = findViewById<WebView>(R.id.webView)
webView.settings.javaScriptEnabled = true
webView.webViewClient = WebViewClient()

Класс WebViewClient перехватывает нажатия на ссылки внутри страницы и загружает их в том же WebView, а не передаёт в системный браузер. Без этого любая ссылка будет открываться снаружи приложения.


Обрабатываем нажатие кнопки

Теперь свяжем кнопку с полем ввода. При нажатии берём введённый текст, добавляем https://, если пользователь его не указал, и передаём URL в WebView.

val urlInput = findViewById<EditText>(R.id.urlInput)
val goButton = findViewById<Button>(R.id.goButton)

goButton.setOnClickListener {
    var url = urlInput.text.toString().trim()
    if (!url.startsWith("http://") && !url.startsWith("https://")) {
        url = "https://$url"
    }
    webView.loadUrl(url)
}

Навигация назад внутри WebView

По умолчанию кнопка «Назад» на устройстве закрывает приложение, даже если внутри WebView пользователь перешёл по нескольким страницам. Чтобы вернуться на предыдущую страницу, а не выходить из программы, переопределим метод onBackPressed.

override fun onBackPressed() {
    if (webView.canGoBack()) {
        webView.goBack()
    } else {
        super.onBackPressed()
    }
}

Загрузка локального HTML

WebView умеет показывать не только удалённые сайты, но и HTML-код, хранящийся прямо в приложении. Например, можно отобразить страницу справки, вшитую в APK. Для этого используется метод loadDataWithBaseURL.

val htmlContent = """
    <html>
    <body>
        <h1>Привет из Kotlin!</h1>
        <p>Эта страница загружена из строки.</p>
    </body>
    </html>
""".trimIndent()
webView.loadDataWithBaseURL(null, htmlContent, "text/html", "UTF-8", null)

Полезные советы для начинающих

  • Не забывайте про безопасность. Если вы загружаете произвольные URL, убедитесь, что WebView не выполняет опасный JavaScript с ненадёжных источников. Для этого можно настроить WebViewClient.shouldOverrideUrlLoading.
  • Оптимизируйте загрузку. Включите кэширование: webView.settings.cacheMode = WebSettings.LOAD_DEFAULT. Это ускорит повторные заходы на сайт.
  • Проверяйте соединение. Если интернета нет, WebView покажет стандартную ошибку. Можно переопределить onReceivedError в WebViewClient, чтобы показать своё сообщение.

Что мы освоили

Сегодняшний урок в Android Studio на языке Kotlin научил вас встраивать полноценный браузер в своё приложение. Вы создали поле ввода адреса, загрузили веб-страницу, настроили навигацию назад и даже показали локальный HTML. WebView — это мощный инструмент, который используется в банковских приложениях, справочниках и программах для чтения новостей. Теперь вы можете добавить его в свой проект и открывать любые сайты, не покидая приложения. Попробуйте загрузить страницу со сложным дизайном — убедитесь, что всё выглядит как в обычном браузере.

Добавлен: