Итак, вы решили создать приложение-галерею для Android, но нативная система макетов Android доставляет вам головные боли? Теперь у вас есть альтернатива.
Почему я решил написать эту статью? Я хотел создать приложение для Android, которое работало бы как Google Photo в частном облаке. Это означает, что мне нужно приложение для Android, которое синхронизирует все фотографии и видео с моих устройств и отправляет их по каким-то запросам (http, tcp…) на удаленный сервер. Кроме того, я хотел иметь возможность видеть эти изображения и видео в стиле галереи в моем приложении.
Сначала я попытался собрать его на чистом Android, потому что мне нужно было читать все внутреннее и внешнее хранилище, искать медиа и отправлять их. Моя основная проблема заключалась не в чтении всех медиафайлов с устройства, а в простом и элегантном рендеринге. Встроенная функциональность Android была настоящей головной болью, поэтому я искал альтернативу.
Поиск в Интернете не очень помог, потому что я почти не нашел ничего полезного. Я нашел там кусок, здесь кусок, а полной версии нигде нет.
Итак, я постараюсь показать, как читать все изображения с устройства и обрабатывать их с помощью JavaScript. Это все. Я не буду вдаваться в причудливую логику по поводу синхронизации или чего-то еще, может быть, в тематической статье. Сегодня я просто хочу представить основы.
Прежде всего, было бы здорово прочитать мою предыдущую статью о вызове функций Android Native из JavaScript отсюда https://beniaminpantiru.medium.com/how-to-call-android-functions -from-javascript-3f7628340374 . Это облегчит вам чтение этой статьи.
Для начала вам следует создать проект Android с помощью Android Studio. После этого добавьте в манифест разрешения на чтение внешнего хранилища. Ваш манифест должен быть похож на этот:
После этого вы должны объявить Android WebView в своем MainActivity и создать JavascriptInterface, чтобы сопоставить его с WebView. Кроме того, создайте файл main.html в папке assets вашего проекта. Давайте посмотрим, как он выглядит:
Большой! Теперь у нас есть связующий код для связи между JavaScript и Android. Теперь нам нужно создать функцию для получения всех изображений с устройства. Мы сделаем это, используя собственный API Android, потому что он дает нам максимальную производительность. Также мы создаем класс данных Image для хранения информации об изображении.
Наша функция будет выглядеть примерно так:
Здесь мы сначала определяем список изображений в строке 2. Затем мы определяем imageProjection, который содержит в основном необходимую нам информацию о каждом изображении. Мы выполняем запрос с помощью contentResolver на MediaStore.Images.Media.EXTERNAL_CONTENT_URI, что означает, что мы хотим читать все изображения из внешнего хранилища (если вы хотите читать все видео, просто используйте MediaStore.Video.Media.EXTERNAL_CONTENT_URI). Наконец, мы перебираем итератор курсора, получаем всю необходимую информацию, создаем новый объект Image и добавляем его в окончательный список.
Хорошо, и теперь все, что нам нужно сделать, это отправить этот список Image в JavaScript. Нет ничего проще. Для этого в методе getAllImages () я возьму список, возвращаемый методом queryImageStorage, и конвертирую его в JsonArray с помощью библиотеки google gson.
Моя функция должна выглядеть примерно так:
Теперь все, что мне нужно сделать, это вызвать функцию getAllImages () из JavaScript и отобразить мои изображения в html. Для визуализации изображений я буду использовать библиотеку jQuery только для простоты и классов стилей начальной загрузки.
Мой main.html теперь должен выглядеть так:
Как видите, я создал пустой div и при нажатии кнопки вызываю JSON.parse (androidApp.getAllImages ()), который дает мне все изображения с устройства и анализирует их как объекты. После этого я просто добавил тег ‹img /› к пустому div.
Наконец, последняя версия MainActivity.kt будет выглядеть примерно так:
Конечно, как вы можете видеть, это очень минималистичный пример, много работы можно было бы сделать больше, например, ленивую загрузку изображений при прокрутке.
В этой статье я просто хотел показать очень простой пример рендеринга всех изображений с устройства Android через JavaScript и Html, так как мне было довольно сложно найти рабочий пример.
