🙇🏾 👂🏾 🙋🏾 كيفية الاتصال PhotoSwipe معرض في webview الروبوت 💃🏿 ✌️ 🔁

لست مطورًا محترفًا ، رغم أنني درست كمبرمج. الآن أعمل كمسؤول نظام وأخطط للانتقال إلى المطورين. أكتب لنفسي تطبيقًا يوزع أحد مواقع الويب ذات الصلة بتكنولوجيا المعلومات ويعرض مقالات في تطبيق android الأصلي. أردت أن تفتح جميع الصور في المقال في المعرض ، كما هو الحال في تطبيق habr المحمول.

على الأرجح ، سيكون الدليل بسيطًا ، لكنني أريد الحصول على تعليقات ، وعلى الأرجح ، سيكون هذا الدليل مفيدًا لشخص ما.

حاولت عدة الإضافات. البعض لم يبدأ ، والبعض الآخر يحتاج إلى مسج ، وهذا يبطئ من تحميل الصفحة في التطبيق. في النهاية ، اخترت البرنامج المساعد 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 بالكامل إلى الأصول (يمكن إعادة تسمية dist إلى PhotoSwipe. يمكنك أيضًا إنشاء ملف style.css في مجلد css بحيث تشغل الصور العرض بأكمله.

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

بالنسبة للمعرض ، تحتاج إلى ربط الأنماط وملفات جافا سكريبت وملف النمط للبشرة. يمكنك إنشاء html:

هذا هو المكان الذي يسير فيه html لـ webview

 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 جاهز. لكي لا تعمل بشكل حيوي مع التصميم ، في البرنامج النصي الخاص بي أقوم بتغيير الفصل لجميع الصور (لأنه من المؤكد أنه لا توجد تجاوزات في المقال) ، قم بتعيين معالج حدث (عند النقر عليه ، يتم تمرير عنوان url - يعمل كمعرف للمعرض ، ويبدأ المكون الإضافي).

يحتاج البرنامج المساعد إلى معرفة حجم الصورة. نظرًا لأن المعرض متصل عند تحميل الصفحة بأكملها ، فمن السهل معرفة الأحجام النهائية للصور من خلال الخصائص الطبيعية للعرض وخصائص الارتفاع الطبيعية للصورة.

رمز البرنامج النصي. أولاً ، عند تحميل الصفحة ، تبدأ الدالة init () ؛ ثم ، عند النقر فوق الصورة ، openGallery ().

قانون

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

في هذه المرحلة ، يتم تحميل الصفحة ، يبدأ المكون الإضافي عند النقر فوق الصورة ، ولكن عندما تضغط على الزر "الخلف" مع فتح المعرض ، يتم إغلاق التطبيق بالكامل وليس المكون الإضافي.

لإصلاح هذا ، قمت بجسر Javascipt.

أولا تحتاج إلى جعل سينغلتون مع حالة المعرض.

قانون

 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.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 معرض في webview الروبوت

More articles: