Отображение RichText статей в Android приложении

Кастомизируем WebView с блекджеком и горячими девчонками

WAP-сайт — это определённый сайт с отдельным адресом (доменом) источник информации в сети Интернет, специально созданный для отображения на мобильном (сотовом) телефоне или ином мобильном устройстве или компьютере при наличии установленных браузеров, поддерживающих эту технологию.
Википедия

Всегда актуальной считается тема отображения web контента в приложении Android. Есть разные, скажем так, подходы для реализации. Кто-то разбивает текст на блоки и запихивает их в списки, кто-то пишет кастомные TextView, в которые получается пробрасывать изображения из интернета, но в вопросах отображения видео с YouTube или OOM при загрузке больших изображений — у меня лапки.

Я проходил все стадии принятия WebView в проектах и вот я наконец смирился (хотя казалось бы — да что такого?) — и, вооруженный некоторыми знаниями я подошел к проблеме. Итак, что необходимо

1. Внедрить свою библиотеку стилей css. Если принять тот факт, что современные сайты более-менее следуют каким-то шаблонным кирпичикам, то с помощью этого инструмента можно хотя бы попробовать привести WebView и контент к общей стилизации
2. Слайдшоу изображений — чтобы при нажатии на изображение оно не просто показывалось, но была бы возможность пролистывания… а еще было бы круто дополнительную информацию с изображений подтягивать, например, описание (alt text).
3. Стандартные примочки типа “Отображать контент когда он уже загружен в виджет”

Пока хватит. Приступим.

Кастомные вьюшки

Первое и самое главное — это то, что мы будем модифицировать системный WebView в виде его подклассов. Не будем мудрствовать, назовем его просто CustomWebView

• useCustomCss — флаг, определяющий попытку подмены css на кастомные
• onClick — callback функция, которая будет вызываться при нажатии на тег img

Почему кастомная вьюшка — намек один из многих.

Так как лучше заложить в основу нашего инструмента его переиспользование, то логично предположить, что настройки у него должны быть плюс-минус одинаковыми. Это работа с javascript, encoding, user-agent и проч. Этот момент абсолютно на ваше усмотрение, конечно, но если есть возможность сократить копипасту кода, то лучше это сделать.

Итак, следующий этап — инициализация (хотя правильней сказать “создание”) настроек нашей вьюшки. Запускать сей процесс мы будем в методе init

Внимательный читатель спросит — что за CustomClient?
А это, друг мой, класс, который и отвечает за проброску css в момент onPageFinished. Перейдем к этой магии, пожалуй

Css Magic for Dummies

Понятное дело, что если вы укажете какой-нибудь свой WebViewClient, то эта магия работать не будет. Поэтому наш класс объявлен как open с модификатором @CallSuper для метода onPageFinished

И самое главное здесь, пожалуй, это инъекция css:

В двух словах, что происходит выше.

В момент полной загрузки страницы, мы вызываем javascript функцию, которая чистит подгруженные в страницу стили (body > style), и загружает свой css, который мы храним в папке assets.

Слайдшоу рисунков

Не стоит переизобретать велосипед — если кто-то уже заморочился и решил вашу проблему, вполне возможно, он сделал это лучше чем вы. Поэтому я использую готовую библиотеку для показа изображений на полный экран. Да, не спорю, можно сделать это самостоятельно в виде Activity / Fragment / FragmentDialog, но я пошел более простым путем.

В помощь я призвал библиотеку StfalconImageViewer, с ее помощью я

1. Показываю картинку на полном экране
2. Слайдшоу изображений
3. Перехватываю момент показа картинки для обновления информации на экране

Во-первых, нужно сделать свой layout, в котором я буду отображать Toolbar и TextView, в который буду пробрасывать описание фотографии

В своем проекте я заливаю в WebView уже готовый html код, поэтому для поиска картинок я переопределяю два метода: loadData и loadDataWithBaseURL, в которых вызываю поиск картинок

Все найденные картинки я храню в List<Img>

Для того, чтобы перехватывать тап на рисунки, я в нашей кастомной вьюшке наследую интерфейсы View.OnClickListener, View.OnTouchListener и переопределяю их методы:

Вся суть которых сводится к тому, что по клику на элемент определяется его тип, и если это

private const val IMAGE_TYPE = 5

то вызываем метод showImage. Обещаю, это последнее

Напоследок полностью кастомная вьюшка для меньшего геморроя по сведению все воедино. Выше я описал алгоритм с кусочками кода для понимания, а вишенка — в конце