👩🏼‍⚕️ 👇 👩‍👩‍👧‍👧 Como conectar a galeria PhotoSwipe no android webview ☎️ 🤰 🏑

Não sou desenvolvedor profissional, embora tenha estudado como programador. Agora, trabalho como administrador do sistema e planejo mudar para os desenvolvedores. Estou escrevendo para mim um aplicativo que analisa um dos sites populares relacionados à TI e exibe artigos no aplicativo Android nativo. Eu queria que todas as fotos do artigo fossem abertas na galeria, como no aplicativo móvel habr.

Muito provavelmente, o manual será simples, mas quero obter feedback e, muito provavelmente, este manual será útil para alguém.

Eu tentei vários plugins. Alguns não foram iniciados, outros requerem jQuery, e isso atrasa o carregamento da página no aplicativo. No final, eu escolhi o plugin PhotoSwipe. o plugin não requer jQuery, funciona rapidamente e pesa quase nada.

Primeiro, você precisa pensar em qual local do aplicativo é melhor colocar os arquivos de origem do plug-in. Primeiro, por inexperiência, coloquei os arquivos na pasta bruta, mas é melhor colocá-los na pasta de ativos. Clique com o botão direito do mouse no aplicativo → novo → pasta → Pasta de ativos

A marcação será um WebView simples:

Código

<?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <WebView android:id="@+id/webView" android:layout_width="match_parent" android:layout_height="match_parent"></WebView> </android.support.constraint.ConstraintLayout>

Em seguida, é necessário fazer o download ou clonar o repositório do PhotoSwipe (link no site do plug-in) e copiar todo o conteúdo da pasta dist para os ativos (dist pode ser renomeado para PhotoSwipe. Você também pode criar um arquivo style.css na pasta css para que as imagens ocupem toda a largura.

 img { width: 100%; height: auto; }

Para a galeria, você precisa conectar estilos, arquivos javascipt e um arquivo de estilo para a capa. Você pode gerar html:

É aqui que o html para visualização na web está indo

 public String getHTML() { String header = "<!DOCTYPE HTML><HTML><head><title>test</title>"; //  ,      //     . String headerEnd = "</head><body onload=\"init();\">"; String footer = "</body></HTML>"; String charset = "<meta charset=\"utf-8\">"; String style = "<link href=\"css/style.css\" type=\"text/css\" rel=\"stylesheet\" />"; String pscss = "<link rel=\"stylesheet\" href=\"PhotoSwipe/photoswipe.css\">"; String psdscss = "<link rel=\"stylesheet\" href=\"PhotoSwipe/default-skin/default-skin.css\">"; // ,        String script = "<script type=\"text/javascript\" src=\"js/script.js\"></script>"; String psjs = "<script src=\"PhotoSwipe/photoswipe.js\"></script> "; String psuijs = "<script src=\"PhotoSwipe/photoswipe-ui-default.min.js\"></script>"; StringBuilder stringBuilder = new StringBuilder(); //  head stringBuilder.append(header); stringBuilder.append(charset); stringBuilder.append(style); stringBuilder.append(pscss); stringBuilder.append(psdscss); stringBuilder.append(script); stringBuilder.append(psjs); stringBuilder.append(psuijs); stringBuilder.append(headerEnd); stringBuilder.append("<img src=\"https://ps.denko.me/images/linux1.jpg\" />"); stringBuilder.append("<img src=\"https://ps.denko.me/images/linux2.jpg\" />"); stringBuilder.append("<img src=\"https://ps.denko.me/images/linux3.jpeg\" />"); stringBuilder.append(getPhotoSwipeHTML()); stringBuilder.append(footer); return stringBuilder.toString();

Para que o plug-in funcione, você também precisa inserir o contêiner da galeria na origem da página. A documentação diz que este não é um plugin simples e você precisa fazer parte do trabalho.

É aconselhável inserir o código antes da tag de fechamento

Gallery Container

 public String getPhotoSwipeHTML() { return "<!-- Root element of PhotoSwipe. Must have class pswp. -->\n" + "<div class=\"pswp\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n" + "\n" + " <!-- Background of PhotoSwipe. \n" + " It's a separate element as animating opacity is faster than rgba(). -->\n" + " <div class=\"pswp__bg\"></div>\n" + "\n" + " <!-- Slides wrapper with overflow:hidden. -->\n" + " <div class=\"pswp__scroll-wrap\">\n" + "\n" + " <!-- Container that holds slides. \n" + " PhotoSwipe keeps only 3 of them in the DOM to save memory.\n" + " Don't modify these 3 pswp__item elements, data is added later on. -->\n" + " <div class=\"pswp__container\">\n" + " <div class=\"pswp__item\"></div>\n" + " <div class=\"pswp__item\"></div>\n" + " <div class=\"pswp__item\"></div>\n" + " </div>\n" + "\n" + " <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->\n" + " <div class=\"pswp__ui pswp__ui--hidden\">\n" + "\n" + " <div class=\"pswp__top-bar\">\n" + "\n" + " <!-- Controls are self-explanatory. Order can be changed. -->\n" + "\n" + " <div class=\"pswp__counter\"></div>\n" + "\n" + " <button class=\"pswp__button pswp__button--close\" title=\"Close (Esc)\"></button>\n" + "\n" + " <button class=\"pswp__button pswp__button--share\" title=\"Share\"></button>\n" + "\n" + " <button class=\"pswp__button pswp__button--fs\" title=\"Toggle fullscreen\"></button>\n" + "\n" + " <button class=\"pswp__button pswp__button--zoom\" title=\"Zoom in/out\"></button>\n" + "\n" + " <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->\n" + " <!-- element will get class pswp__preloader--active when preloader is running -->\n" + " <div class=\"pswp__preloader\">\n" + " <div class=\"pswp__preloader__icn\">\n" + " <div class=\"pswp__preloader__cut\">\n" + " <div class=\"pswp__preloader__donut\"></div>\n" + " </div>\n" + " </div>\n" + " </div>\n" + " </div>\n" + "\n" + " <div class=\"pswp__share-modal pswp__share-modal--hidden pswp__single-tap\">\n" + " <div class=\"pswp__share-tooltip\"></div> \n" + " </div>\n" + "\n" + " <button class=\"pswp__button pswp__button--arrow--left\" title=\"Previous (arrow left)\">\n" + " </button>\n" + "\n" + " <button class=\"pswp__button pswp__button--arrow--right\" title=\"Next (arrow right)\">\n" + " </button>\n" + "\n" + " <div class=\"pswp__caption\">\n" + " <div class=\"pswp__caption__center\"></div>\n" + " </div>\n" + "\n" + " </div>\n" + "\n" + " </div>\n" + "\n" + "</div>"; }

A documentação fornece um exemplo de como ativar o plug-in clicando na imagem, mas observe que o PhotoSwipe não se importa com o quão exatamente ele é iniciado. Como resultado, escrevi meu roteiro. Estou mostrando um artigo do site de outra pessoa no aplicativo, para que eu obtenha um html pronto. Para não trabalhar dinamicamente com o layout, no meu script eu altero a classe para todas as imagens (porque definitivamente não há excessos no artigo), atribuo um manipulador de eventos (quando clicado, o URL é passado - ele serve como um identificador para a galeria e o plug-in é iniciado).

O plugin precisa saber o tamanho da imagem. Como a galeria é conectada quando a página inteira é carregada, é fácil descobrir os tamanhos finais das imagens através das propriedades naturalWidth e naturalHeight da imagem.

Código de script. Primeiro, quando a página é carregada, a função init () é iniciada; Então, quando você clica na imagem, openGallery ().

Código

 //         function init() { var images = document.images; for (var i = 0; i < images.length; i++) { images[i].className = "photoSwipe"; images[i].onclick = function () { openGalery(this.attributes["src"].value); } } } //    function openGalery(url) { var images = document.getElementsByClassName("photoSwipe"); var items = new Array(); for (var i = 0; i < images.length; i++) { items.push(getAttributes(images[i])); } startPhotoSwipe(items, getIndex(images, url)); } //    function getAttributes(image) { return { src: image.attributes["src"].value, w: image.naturalWidth, h: image.naturalHeight } } //   ,    function getIndex(images, url) { for(var i = 0; i < images.length; i++) { if (url == images[i].attributes["src"].value) return i; } return false; } //   function startPhotoSwipe(items, index) { var pswpElement = document.querySelectorAll('.pswp')[0]; // define options (if needed) var options = { // optionName: 'option value' // for example: index: index, // start at index slide bgOpacity: 0.9, pinchToClose: false, fullscreenEl: false, closeEl:false, zoomEl: false, shareEl: false, indexIndicatorSep: '  ', tapToClose: true }; callAndroid.setGallery(true); //     Java  ,    // Initializes and opens PhotoSwipe var gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options); gallery.init(); }

Em seguida, você precisa configurar o WebView e carregar a página.

 webView = findViewById(R.id.webView); webView.setWebViewClient(new WebViewClient()); webView.setWebChromeClient(new WebChromeClient()); webView.getSettings().setJavaScriptEnabled(true); webView.getSettings().setDomStorageEnabled(true);

Nesse estágio, a página carrega, o plug-in é iniciado quando você clica na imagem, mas quando você pressiona o botão voltar com a galeria aberta, o aplicativo inteiro é fechado, não o plug-in.

Para consertar isso, criei uma ponte Javascipt.

Primeiro você precisa criar um singleton com o estado da galeria.

Código

 package me.denko.photoswipe; class GalleryState { private static final GalleryState ourInstance = new GalleryState(); static GalleryState getInstance() { return ourInstance; } private GalleryState() { } private boolean isGallery = false; public boolean isGallery() { return isGallery; } public void setGallery(boolean gallery) { isGallery = gallery; } }

Interface adicional para chamadas do WebView

Código

 package me.denko.photoswipe; import android.webkit.JavascriptInterface; public class JavascriptFromWebView { @JavascriptInterface public static void setGallery(boolean bool) { GalleryState.getInstance().setGallery(bool); } }

Você precisa conectar esta interface ao WebView

 webView.addJavascriptInterface(new JavascriptFromWebView(), "callAndroid");

No script para abrir a galeria, você precisa adicionar

 callAndroid.setGallery(true);

O script close da galeria no arquivo photoswipe.js

Código

 close: function() { if(!_isOpen) { return; } callAndroid.setGallery(false); //    _isOpen = false; _isDestroying = true; _shout('close'); _unbindEvents(); _showOrHide(self.currItem, null, true, self.destroy); },

Agora, quando você abre a galeria, o estado é definido como verdadeiro, quando fechado, falso. Tudo o que resta é adicionar o manipulador de botão voltar para o WebView.

Código

 webView.setOnKeyListener(new View.OnKeyListener() { @Override public boolean onKey(View v, int keyCode, KeyEvent event) { if (event.getAction() != KeyEvent.ACTION_DOWN && keyCode == KeyEvent.KEYCODE_BACK) { if (GalleryState.getInstance().isGallery()) { webView.reload(); GalleryState.getInstance().setGallery(false); } else onBackPressed(); } return true; } });

Agora a galeria pode ser aberta e fechada com o botão Voltar.

Código completo do aplicativo github .

As críticas ao código são bem-vindas. Se eu fiz algo errado, escreva sobre isso nos comentários.

Como conectar a galeria PhotoSwipe no android webview

More articles: