Geekly articles weekly

Bagaimana menghubungkan galeri PhotoSwipe di tampilan web android

Saya bukan pengembang profesional, meskipun saya belajar sebagai programmer. Sekarang saya bekerja sebagai administrator sistem dan berencana untuk pindah ke pengembang. Saya menulis sendiri aplikasi yang mem-parsing salah satu situs web populer yang berhubungan dengan IT dan menampilkan artikel di aplikasi Android asli. Saya ingin semua gambar di artikel terbuka di galeri, seperti di aplikasi seluler habr.

Kemungkinan besar, manual ini akan menjadi sederhana, tetapi saya ingin mendapatkan umpan balik dan, kemungkinan besar, manual ini akan bermanfaat bagi seseorang.

Saya mencoba beberapa plugin. Beberapa tidak mulai, yang lain memerlukan jQuery, dan ini memperlambat pemuatan halaman dalam aplikasi. Pada akhirnya, saya memilih plugin PhotoSwipe. plugin tidak memerlukan jQuery, itu bekerja dengan cepat dan hampir tidak ada beratnya.

Pertama, Anda perlu memikirkan di mana dalam aplikasi itu lebih baik untuk menempatkan file sumber plugin. Pertama, dengan pengalaman, saya menempatkan file di folder mentah, tetapi lebih baik untuk menempatkannya di folder aset. Klik kanan pada aplikasi → baru → folder → Folder Aset

Markup akan menjadi satu WebView sederhana:

Kode
<?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>


Selanjutnya, Anda perlu mengunduh atau mengkloning repositori dari PhotoSwipe (tautan di situs plugin) dan menyalin seluruh isi folder dist ke aset (dist dapat diubah namanya menjadi PhotoSwipe. Anda juga dapat membuat file style.css di folder css sehingga gambar menempati seluruh lebar.

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

Untuk galeri Anda perlu menghubungkan gaya, file javascipt dan file gaya untuk kulit. Anda dapat menghasilkan html:

Di sinilah html untuk tampilan web pergi
 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();
.

Agar plugin berfungsi, Anda juga perlu memasukkan wadah untuk galeri ke sumber halaman. Dokumentasi mengatakan bahwa ini bukan plugin sederhana dan Anda perlu melakukan beberapa pekerjaan sendiri.

Dianjurkan untuk memasukkan kode sebelum tag penutup

Wadah Galeri
 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>"; }


Dokumentasi memberikan contoh cara mengaktifkan plugin dengan mengklik gambar, tetapi perlu dicatat bahwa PhotoSwipe tidak peduli bagaimana tepatnya memulainya. Akibatnya, saya menulis naskah saya. Saya menunjukkan artikel dari situs orang lain di aplikasi, jadi saya mendapatkan html siap pakai. Agar tidak bekerja secara dinamis dengan tata letak, dalam skrip saya, saya mengubah kelas untuk semua gambar (karena pasti tidak ada yang berlebihan dalam artikel), menetapkan event handler (ketika diklik, url dilewatkan - berfungsi sebagai pengidentifikasi untuk galeri, dan plugin mulai).

Plugin perlu mengetahui ukuran gambar. Karena galeri terhubung saat seluruh halaman dimuat, mudah untuk mengetahui ukuran akhir gambar melalui properti NaturalWidth dan naturalHeight dari gambar.

Kode skrip Pertama, ketika halaman dimuat, fungsi init () dimulai; Lalu, ketika Anda mengklik gambar openGallery ().

Kode
 //         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(); }


Selanjutnya, Anda perlu mengkonfigurasi WebView dan memuat halaman.

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

Pada tahap ini, halaman dimuat, plugin dimulai ketika Anda mengklik gambar, tetapi ketika Anda menekan tombol kembali dengan galeri terbuka, seluruh aplikasi ditutup, bukan plugin.

Untuk mengatasinya, saya membuat jembatan Javascipt.

Pertama, Anda perlu membuat singleton dengan keadaan galeri.

Kode
 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; } }


Antarmuka lebih lanjut untuk panggilan dari WebView

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


Anda perlu menghubungkan antarmuka ini ke WebView

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

Dalam skrip untuk membuka galeri yang perlu Anda tambahkan
 callAndroid.setGallery(true);


Galeri menutup skrip dalam file photoswipe.js

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


Sekarang ketika Anda membuka galeri, negara diatur ke true, ketika ditutup, false. Yang tersisa adalah menambahkan clicker tombol tampilan web.

Kode
 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; } });


Sekarang galeri bisa dibuka lalu ditutup dengan tombol kembali.

Kode aplikasi github lengkap.

Kritik terhadap kode ini disambut baik. Jika saya melakukan sesuatu yang salah, silakan tulis di komentar.

Source: https://habr.com/ru/post/id454578/

More articles:


All Articles