Webview in android xamarin

Настройка WebView

Xamarin.Forms WebView — это представление, позволяющее отображать веб-содержимое и содержимое HTML в приложении. В этой статье рассказывается, как создать пользовательский отрисовщик, расширяющий возможности WebView и позволяющий вызывать код C# из JavaScript.

Каждое представление Xamarin.Forms имеет сопутствующий отрисовщик для каждой платформы, который создает экземпляр собственного элемента управления. Когда WebView отображается в приложении Xamarin.Forms, на платформе iOS создается класс WkWebViewRenderer , который, в свою очередь, создает собственный элемент управления WkWebView . На платформе Android класс WebViewRenderer создает собственный элемент управления WebView . На универсальной платформе Windows (UWP) класс WebViewRenderer создает экземпляр собственного элемента управления WebView . Дополнительные сведения о классах модуля подготовки отчетов и собственного элемента управления, которые Xamarin.Forms управляют сопоставленными, см. в разделе Xamarin.Forms.

На следующей схеме показана связь между классом View и соответствующими собственными элементами управления, которые его реализуют:

Процесс отрисовки можно использовать для реализации настроек для конкретных платформ путем создания пользовательского отрисовщика для WebView на каждой платформе. Этот процесс выглядит следующим образом:

1. Создайте Пользовательский элемент управления.
2. Использовать из Xamarin.Forms .
3. Создайте пользовательский модуль подготовки отчетов для на каждой платформе.

Мы рассмотрим каждый элемент по очереди, чтобы реализовать отрисовщик HybridWebView , который расширяет возможности элемента Xamarin.Forms WebView для вызова кода C# из JavaScript. Экземпляр HybridWebView будет использоваться для отображения HTML-страницы, которая предлагает пользователю ввести свое имя. Затем, когда пользователь нажимает кнопку HTML, функция JavaScript вызывает C# Action , который отображает всплывающее окно, содержащее имя пользователя.

Дополнительные сведения о процессе вызова C# из JavaScript см. в разделе Вызов C# из JavaScript. Дополнительные сведения о странице HTML см. в разделе Создание веб-страницы.

WebView может вызывать функцию JavaScript из C# и возвращать любой результат в вызывающий код C#. Дополнительные сведения см. в разделе Вызов JavaScript.

Создание HybridWebView

Пользовательский элемент управления HybridWebView можно создать путем создания подкласса класса WebView :

Пользовательский элемент управления HybridWebView создается в проекте библиотеки .NET Standard и определяет следующий API для элемента управления:

• Свойство Uri , которое указывает адрес веб-страницы для загрузки.
• Метод RegisterAction , который регистрирует Action с элементом управления. Зарегистрированное действие будет вызываться из JavaScript, содержащегося в файле HTML, на который можно сослаться через свойство Uri .
• Метод CleanUp , который удаляет ссылку на зарегистрированный объект Action .
• Метод InvokeAction , который вызывает зарегистрированный объект Action . Этот метод будет вызываться из пользовательского отрисовщика в проекте для каждой платформы.

Использование HybridWebView

На пользовательский элемент управления HybridWebView можно ссылаться в XAML в проекте библиотеки .NET Standard, объявив пространство имен для его расположения и используя префикс пространства имен в пользовательском элементе управления. В следующем примере кода показано, как пользовательский элемент управления HybridWebView может использоваться страницей XAML.

Префикс пространства имен local может иметь любое имя. Тем не менее значения clr-namespace и assembly должны соответствовать данным пользовательского элемента управления. После объявления пространства имен префикс используется для ссылки на пользовательский элемент управления.

В следующем примере кода показано, как пользовательский элемент управления HybridWebView может использоваться страницей C#.

Экземпляр HybridWebView будет использоваться для отображения собственного веб-элемента управления на каждой платформе. Для его свойства Uri задан HTML-файл, который хранится в проекте для каждой платформы и будет отображаться собственным веб-элементом управления. Отрисованный HTML просит пользователя ввести свое имя с помощью JavaScript, вызывая C# Action в ответ на нажатие кнопки HTML.

HybridWebViewPage регистрирует действие, которое необходимо вызывать из JavaScript, как показано в следующем примере кода:

Это действие вызывает метод >Xamarin_Forms _Page_DisplayAlert_System_String_System_String_System_String_ «Data-Up =» абсолютного пути » DisplayAlert для отображения модального всплывающего окна, которое представляет имя, указанное в HTML-странице, отображаемой HybridWebView экземпляром.

Настраиваемый отрисовщик теперь можно добавить в каждый проект приложения для улучшения зависящих от платформы веб-элементов управления благодаря возможности вызова кода C# из JavaScript.

Создание пользовательского отрисовщика на каждой платформе

Процесс создания класса пользовательского отрисовщика выглядит следующим образом:

1. Создайте подкласс класса WkWebViewRenderer в iOS и класса WebViewRenderer в Android и UWP, который отрисовывает пользовательский элемент управления.
2. Переопределите метод OnElementChanged , который отрисовывает WebView , и напишите логику для его настройки. Этот метод вызывается при создании объекта HybridWebView .
3. Добавьте ExportRenderer атрибут к пользовательскому классу модуля подготовки отчетов или ExportRenderer , чтобы указать, что он будет использоваться для отрисовки Xamarin.Forms пользовательского элемента управления. Этот атрибут используется для регистрации пользовательского отрисовщика в Xamarin.Forms.

Для большинства элементов Xamarin.Forms предоставлять пользовательский отрисовщик в проекте для каждой платформы необязательно. Если пользовательский отрисовщик не зарегистрирован, будет использоваться отрисовщик по умолчанию для базового класса элемента управления. Однако настраиваемые отрисовщики необходимы в каждом зависящем от платформы проекте при отрисовке элемента View.

На следующей схеме показаны обязанности каждого проекта в примере приложения, а также связи между ними:

Пользовательский элемент управления HybridWebView отрисовывается с помощью зависящих от платформы классов отрисовщика, которые являются производными от класса WkWebViewRenderer в iOS и класса WebViewRenderer в Android и UWP. Это приводит к тому, что каждый пользовательский элемент управления HybridWebView отрисовывается с помощью собственных веб-элементов управления, как показано на следующих снимках экрана:

Классы WkWebViewRenderer и WebViewRenderer предоставляют метод OnElementChanged , который вызывается при создании пользовательского элемента управления Xamarin.Forms для отрисовки соответствующего собственного веб-элемента управления. Этот метод принимает параметр VisualElementChangedEventArgs , содержащий свойства OldElement и NewElement . Эти свойства представляют Xamarin.Forms элемент, к которому Xamarin.Forms присоединен модуль подготовки отчетов, и Xamarin.Forms элемент, к которому присоединен модуль Xamarin.Forms подготовки отчетов соответственно. В примере приложения свойство OldElement будет иметь значение null , а свойство NewElement будет содержать ссылку на экземпляр HybridWebView .

Настройка собственного веб-элемента управления выполняется в переопределенной версии метода OnElementChanged в классе отрисовщика для каждой платформы. Ссылку на отрисовываемый элемент управления Xamarin.Forms можно получить с помощью свойства Element .

Каждый класс пользовательского отрисовщика дополняется атрибутом ExportRenderer , который регистрирует отрисовщик в Xamarin.Forms. Атрибут принимает два параметра — имя типа отрисовываемого пользовательского элемента управления Xamarin.Forms и имя типа пользовательского отрисовщика. Префикс assembly в атрибуте указывает, что атрибут применяется ко всей сборке.

В следующих разделах рассматриваются структура веб-страницы, загружаемой каждым собственным веб-элементом управления, процесс вызова C# из JavaScript и реализация этого в классах пользовательского отрисовщика для каждой платформы.

Создание веб-страницы

В следующем примере кода показана веб-страница, которая будет отображаться пользовательским элементом управления HybridWebView :

Веб-страница позволяет пользователю ввести свое имя в элементе input и предоставляет элемент button , который будет вызывать код C# при нажатии. Этот процесс выглядит следующим образом:

• Когда пользователь нажимает на элемент button , вызывается функция JavaScript invokeCSCode , и значение элемента input передается в функцию.
• Функция invokeCSCode вызывает функцию log для отображения данных, которые она отправляет в C# Action . Затем она вызывает метод invokeCSharpAction , чтобы вызывать C# Action , передавая параметр, полученный от элемента input .

Функция JavaScript invokeCSharpAction не определена на веб-странице и внедряется в нее каждым настраиваемым отрисовщиком.

На iOS этот HTML-файл находится в папке Content проекта платформы с действием сборки BundleResource. На Android этот HTML-файл находится в папке Assets/Content проекта платформы с действием сборки AndroidAsset.

Вызов C# из JavaScript

Процесс вызова C# из JavaScript идентичен на каждой платформе:

• Настраиваемый отрисовщик создает собственный веб-элемент управления и загружает файл HTML, заданный свойством HybridWebView.Uri .
• После загрузки веб-страницы настраиваемый отрисовщик внедряет функцию JavaScript invokeCSharpAction в веб-страницу.
• Когда пользователь вводит свое имя и нажимает на элемент HTML button , вызывается функция invokeCSCode , которая, в свою очередь, вызывает функцию invokeCSharpAction .
• Функция invokeCSharpAction вызывает метод в настраиваемом отрисовщике, который, свою очередь, вызывает метод HybridWebView.InvokeAction .
• Метод HybridWebView.InvokeAction вызывает зарегистрированный Action .

В следующих разделах мы рассмотрим, как этот процесс реализуется на каждой платформе.

Создание пользовательского отрисовщика в iOS

В следующем примере кода показан пользовательский отрисовщик для платформы iOS:

Класс HybridWebViewRenderer загружает веб-страницу, указанную в свойстве HybridWebView.Uri , в собственный элемент управления WKWebView , а функция JavaScript invokeCSharpAction внедряется в веб-страницы. Когда пользователь вводит свое имя и нажимает элемент HTML button , выполняется функция JavaScript invokeCSharpAction , и метод DidReceiveScriptMessage вызывается после получения сообщения от веб-страницы. В свою очередь, этот метод вызывает метод HybridWebView.InvokeAction , который будет вызывать зарегистрированное действие для отображения всплывающего окна.

Это достигается следующим образом:

• Конструктор отрисовщика создает объект WkWebViewConfiguration и получает его объект WKUserContentController . Объект WkUserContentController позволяет размещать сообщения и внедрять скрипты пользователя в веб-страницу.
• Конструктор отрисовщика создает объект WKUserScript , который внедряет функцию JavaScript invokeCSharpAction в веб-страницу после загрузки веб-страницы.
• Конструктор отрисовщика вызывает метод WKUserContentController.AddUserScript для добавления объекта WKUserScript в контроллер содержимого.
• Конструктор отрисовщика вызывает метод WKUserContentController.AddScriptMessageHandler для добавления обработчика сообщений скрипта с именем invokeAction в объект WKUserContentController , который приводит к определению функции JavaScript window.webkit.messageHandlers.invokeAction.postMessage(data) во всех фреймах в экземплярах WebView , которые используют объект WKUserContentController .
• Если настраиваемый отрисовщик подключен к новому элементу Xamarin.Forms:
  • Метод WKWebView.LoadRequest загружает HTML-файл, указанный свойством HybridWebView.Uri . Код указывает, что файл сохранен в папке Content проекта. Когда веб-страница отображается, функция JavaScript invokeCSharpAction внедряется в веб-страницу.
• Ресурсы освобождаются, когда элемент, к которому присоединен отрисовщик, меняется.
• При удалении отрисовщика элемент Xamarin.Forms очищается.

Класс WKWebView поддерживается только в iOS 8 и более поздних версий.

Кроме того, необходимо изменить файл Info.plist, включив в него следующие значения:

Создание пользовательского отрисовщика в Android

В следующем примере кода показан пользовательский отрисовщик для платформы Android:

Класс HybridWebViewRenderer загружает веб-страницу, указанную в свойстве HybridWebView.Uri , в собственный элемент управления WebView , а функция JavaScript invokeCSharpAction внедряется в веб-страницы после окончания загрузки веб-страницы с переопределением OnPageFinished в классе JavascriptWebViewClient :

Когда пользователь вводит свое имя и нажимает элемент HTML button , выполняется функция JavaScript invokeCSharpAction . Это достигается следующим образом:

• Если настраиваемый отрисовщик подключен к новому элементу Xamarin.Forms:
  • Метод SetWebViewClient задает новый объект JavascriptWebViewClient в качестве реализации WebViewClient .
  • Метод WebView.AddJavascriptInterface вставляет новый экземпляр JSBridge в главный фрейм контекста JavaScript веб-преставления, называя его jsBridge . Это открывает доступ к методам в классе JSBridge из JavaScript.
  • Метод WebView.LoadUrl загружает HTML-файл, указанный свойством HybridWebView.Uri . Код указывает, что файл сохранен в папке Content проекта.
  • В классе JavascriptWebViewClient функция JavaScript invokeCSharpAction внедряется в веб-страницу после завершения загрузки страницы.
• Ресурсы освобождаются, когда элемент, к которому присоединен отрисовщик, меняется.
• При удалении отрисовщика элемент Xamarin.Forms очищается.

Когда выполняется функция JavaScript invokeCSharpAction , она, в свою очередь, вызывает метод JSBridge.InvokeAction , который показан в следующем примере кода:

Класс должен быть производным от Java.Lang.Object , и методы, предоставляемые для JavaScript, должны быть снабжены атрибутами [JavascriptInterface] и [Export] . Таким образом, когда функция JavaScript invokeCSharpAction внедряется в веб-страницу и выполняется, она вызывает метод JSBridge.InvokeAction , поскольку имеет атрибуты [JavascriptInterface] и [Export(«invokeAction»)] . В свою очередь, метод InvokeAction вызывает метод HybridWebView.InvokeAction , который будет вызывать зарегистрированное действие для отображения всплывающего окна.

Проекты Android, в которых используется атрибут [Export] , должны содержать ссылку на Mono.Android.Export , иначе возникнет ошибка компилятора.

Обратите внимание, что класс JSBridge поддерживает WeakReference для класса HybridWebViewRenderer . Это позволяет избежать создания циклической ссылки между двумя классами. Дополнительные сведения см. в разделе Слабые ссылки.

Создание пользовательского отрисовщика в UWP

В следующем примере кода показан пользовательский отрисовщик для платформы UWP:

Источник