В этом уроке исправим распространенную ошибку, которая случается при выполнении Урока 32 по основам разработки приложений в Android Studio https://youtu.be/2MA1ELxC7XE
Дело в том, что там при открытии ссылки андроид использует системный браузер вместо создаваемого в уроке. В этом уроке мы создадим простой браузер, который будет работать правильно. Кроме того, вы увидите, как можно выполнить домашнее задание из урока 32.

Создаем проект в Android Studio

Детально процесс создания показан в видео.

Вводим название приложения. Выбор минимальной версии оставляем по умолчанию. В окне выбора шаблона выбираем Empty Activity. Остальные настройки оставляем по умолчанию.

Скачайте такие иконки с сайта https://material.io/icons/ и добавьте в ресурсы проекта.

ic_arrow_back_black_24dp.png https://material.io/icons/#ic_arrow_back
ic_arrow_forward_black_24dp.png https://material.io/icons/#ic_arrow_forward
ic_refresh_black_24dp.png https://material.io/icons/#ic_refresh
ic_send_black_24dp.png https://material.io/icons/#ic_send

Изменяем макет главного экрана

На главном экране будет поле для ввода адреса, несколько кнопок управления, прогрессбар и WebView, в котором будет отображаться сайт. Набор кнопок — почти как в стандартном браузере — Назад, Вперед, Обновить и Отправить запрос. Полный код макета — на нашем сайте fandroid.info в текстовой версии этого урока, ссылка под видео.

В файле манифеста добавьте разрешение на доступ к интернету

В файле styles.xml установим главному экрану тему без экшнбара

Теперь создадим класс для веб-клиента.

Класс myWebClient унаследован от WebViewClient. Мы определяем собственный веб-клиент для того, чтобы ссылки открывались в нем, а не в системном WebView.
Здесь переопределяем метод shouldOverrideUrlLoading, в котором вызываем метод загрузки loadUrl(url).

Теперь рассмотрим код MainActivity.

Сначала определяем переменные для прогрессбара, поля ввода, вебвью и кнопок.
Затем в методе onCreate инициализируем все эти объекты.
Методом setWebViewClient устанавливаем наш веб-клиент для вебвью.
Затем в методе setWebChromeClient устанавливаем прогрессбар, который будет отображать процесс загрузки страницы.
Затем включаем поддержку JavaScript и загружаем url по умолчанию — это будет страница Google.

Осталось присвоить кнопкам слушатели и определить действия по нажатию каждой кнопки.

При нажатии кнопки Отправки запроса будем считывать значение текстового поля, преобразовывать его в строку и присваивать переменной url. Затем проверяем переменную url на наличие префикса http:// и добавляем его, если он отсутствует. Передаем url браузеру WebView.

После создаем экземпляр класса InputMethodManager и вызываем его метод hideSoftInputFromWindow для скрытия клавиатуры после нажатия кнопки отправки адреса.

Следующая кнопка — Вперед, которая загружает страницу, покинутую в результе возврата по кнопке Назад (имеется в виду кнопка Назад нашего приложения, а не системная). Здесь через проверку возможности перехода вперед по истории методом WebView canGoForward() вызываем метод WebView goForward() для перехода.

Далее обрабатываем кнопку Назад, где по нажатию проверяем методом WebView canGoBack() возможность возврата по истории просмотров назад и вызываем метод WebView goBack().

Кнопка Обновить по нажатию вызывает метод WebView reload() для обновления страницы.

Запускаем приложение на устройстве.

После старта должна отобразиться страница Google. В поле ввода пишем адрес любого сайта и нажимаем кнопку отправить. Открывается страница сайта. Также можно вернуться назад в истории просмотров, перейти вперед по истории, обновить загруженную страницу. Таким образом мы создали простой браузер для загрузки страниц.

Можно убрать кнопки в приложении, и вместо сайта гугла прописать любой сайт на ваше усмотрение. Получится простое приложение для сайта на основе WebView.

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

В этом курсе вы научитесь создавать и размещать на хостинге сайт с популярной CMS WordPress, а также разработаете приложение для удобного доступа к созданному сайту. Подробнее о курсе смотрите на странице подписки.

На этом мы заканчиваем урок. Исходный код по ссылке https://drive.google.com/open?id=1q-2T82ZbQ1FSV-IR9fhsCwuYi1PKXBvS
Вопросы задавайте в комментариях. До встречи на следующем уроке, всем добра)

Добавить комментарий