🍮 ⏩ 🤜🏻 एंड्रॉइड वेबव्यू में PhotoSwipe गैलरी कैसे कनेक्ट करें 🌗 🛀🏻 👩‍👩‍👧‍👦

मैं एक पेशेवर डेवलपर नहीं हूं, हालांकि मैंने एक प्रोग्रामर के रूप में अध्ययन किया है। अब मैं एक सिस्टम एडमिनिस्ट्रेटर के रूप में काम करता हूं और डेवलपर्स के पास जाने की योजना बना रहा हूं। मैं खुद के लिए एक एप्लिकेशन लिख रहा हूं जो कि लोकप्रिय आईटी से संबंधित वेबसाइटों में से एक को पार्स करता है और मूल एंड्रॉइड एप्लिकेशन में लेख प्रदर्शित करता है। मैं चाहता था कि लेख में सभी चित्र गैलरी में खुलें, जैसे कि हब्र मोबाइल एप्लिकेशन में।

सबसे अधिक संभावना है, मैनुअल सरल हो जाएगा, लेकिन मैं प्रतिक्रिया प्राप्त करना चाहता हूं और, सबसे अधिक संभावना है, यह मैनुअल किसी के लिए उपयोगी होगा।

मैंने कई प्लगइन्स आज़माए। कुछ ने शुरू नहीं किया, दूसरों को jQuery की आवश्यकता होती है, और यह एप्लिकेशन में पेज लोडिंग को धीमा कर देता है। अंत में, मैंने PhotoSwipe प्लगइन चुना। प्लगइन को jQuery की आवश्यकता नहीं है, यह जल्दी से काम करता है और इसका वजन लगभग कुछ भी नहीं है।

सबसे पहले आपको यह सोचने की ज़रूरत है कि एप्लिकेशन में प्लगइन के स्रोत फ़ाइलों को रखना बेहतर है। पहले, अनुभवहीनता से, मैंने फ़ाइलों को कच्चे फ़ोल्डर में रखा, लेकिन उन्हें संपत्ति फ़ोल्डर में रखना बेहतर है। ऐप → नया → फ़ोल्डर → एसेट्स फ़ोल्डर पर राइट क्लिक करें

मार्कअप एक सरल वेब व्यू होगा:

कोड

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

इसके बाद, आपको PhotoSwipe (प्लगइन वेबसाइट पर लिंक) से रिपॉजिटरी को डाउनलोड या क्लोन करना होगा और डिस्ट फ़ोल्डर के सम्पूर्ण कंटेंट को सम्पत्तियों पर कॉपी करना होगा (Dist को नाम बदलकर PhotoSwipe किया जा सकता है। आप css फोल्डर में एक style.csf फ़ाइल भी बना सकते हैं ताकि चित्र पूरी चौड़ाई पर कब्जा कर लें।

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

गैलरी के लिए आपको शैलियों, जावास्लिप्ट फ़ाइलों और त्वचा के लिए एक शैली फ़ाइल कनेक्ट करने की आवश्यकता है। आप HTML उत्पन्न कर सकते हैं:

यह वह जगह है जहाँ webview के लिए html जा रहा है

 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();

।

काम करने के लिए प्लगइन के लिए, आपको गैलरी के लिए कंटेनर को पेज के स्रोत में सम्मिलित करना होगा। प्रलेखन का कहना है कि यह एक सरल प्लगइन नहीं है और आपको स्वयं कुछ काम करने की आवश्यकता है।

समापन टैग से पहले कोड डालना उचित है

गैलरी कंटेनर

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

प्रलेखन छवि पर क्लिक करके प्लगइन को सक्षम करने का एक उदाहरण प्रदान करता है, लेकिन यह ध्यान दिया जाता है कि PhotoSwipe परवाह नहीं करता है कि वास्तव में यह कैसे शुरू होता है। परिणामस्वरूप, मैंने अपनी स्क्रिप्ट लिखी। मैं आवेदन में किसी और की साइट से एक लेख दिखा रहा हूं, इसलिए मुझे तैयार HTML प्राप्त है। लेआउट के साथ गतिशील रूप से काम न करने के लिए, मेरी स्क्रिप्ट में मैं सभी छवियों के लिए कक्षा को बदलता हूं (क्योंकि लेख में निश्चित रूप से कोई अतिरिक्तता नहीं है), एक ईवेंट हैंडलर असाइन करें (जब क्लिक किया जाता है, तो यूआरएल पारित हो जाता है - यह गैलरी के लिए एक पहचानकर्ता के रूप में कार्य करता है, और प्लग-इन शुरू होता है)।

प्लगइन को छवि का आकार जानने की आवश्यकता है। चूंकि गैलरी जुड़ा हुआ है, जब पूरे पृष्ठ को लोड किया गया है, तो छवि के प्राकृतिक आकार और प्राकृतिक ऊंचाई गुणों के माध्यम से छवियों के अंतिम आकारों का पता लगाना आसान है।

स्क्रिप्ट कोड। पहले, जब पृष्ठ लोड होता है, init () फ़ंक्शन शुरू होता है; फिर, जब आप छवि ओपनगैलरी () पर क्लिक करते हैं।

कोड

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

अगला, आपको WebView को कॉन्फ़िगर करने और पृष्ठ को लोड करने की आवश्यकता है।

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

इस स्तर पर, पृष्ठ लोड होता है, जब आप छवि पर क्लिक करते हैं, तो प्लगइन शुरू होता है, लेकिन जब आप गैलरी के खुले बटन को दबाते हैं, तो संपूर्ण अनुप्रयोग बंद हो जाता है, न कि प्लगइन।

इसे ठीक करने के लिए, मैंने एक जविस्पिल्ट पुल बनाया।

सबसे पहले आपको गैलरी की स्थिति के साथ सिंगलटन बनाने की आवश्यकता है।

कोड

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

WebView से कॉल करने के लिए आगे का इंटरफ़ेस

कोड

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

आपको इस इंटरफ़ेस को WebView से कनेक्ट करना होगा

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

गैलरी को खोलने के लिए स्क्रिप्ट में आपको जोड़ना होगा

 callAndroid.setGallery(true);

Photoswipe.js फ़ाइल में गैलरी बंद स्क्रिप्ट

कोड

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

अब जब आप गैलरी खोलते हैं, तो स्थिति सही पर सेट होती है, बंद होने पर, झूठी। बैक बटन हैंडलर WebView को जोड़ना सभी छोड़ दिया है।

कोड

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

अब गैलरी को खोला जा सकता है और फिर बैक बटन के साथ बंद किया जा सकता है।

पूर्ण github एप्लिकेशन कोड।

संहिता की आलोचना का स्वागत है। अगर मैंने कुछ गलत किया है, तो कृपया टिप्पणियों में इसके बारे में लिखें।

एंड्रॉइड वेबव्यू में PhotoSwipe गैलरी कैसे कनेक्ट करें

More articles: