Webview

Сегодня я хотел бы поделиться с Вами, как быстро и просто можно создать приложение для Android с базовыми знаниями HTML CSS и JS. По данному примеру код на Java для Android будет минимальным. Благодаря платформе XAMARIN приложения для мобильных телефонов можно делать в Visual Studio.

Шаг 1 - Переходим на сайт и Скачиваем бесплатную версию Community.



Шаг 2 - Запускаем установку и выбираем параметры. Нас интересует XAMARIN. Но Вы также можете выбрать другие параметры.



После успешной установки мы можем создать свой первый проект.

Шаг 3 - Запускаем Visual Studio. Создать проект. В фильтре пишем xamarin, платформа Android, язык c# (Если желаете другой язык можете его выбрать)


Шаг 4 - Далее. Указываете имя для своего приложения, выбираете каталог где его сохранить. Создать.


Шаг 5 - Указываем пустое приложение и выбираем минимальную версию андроида для запуска этого приложения.


Шаг 6 - Жмем ок. Visual Studio автоматически создает код для приложения



Мы можем его запустить в эмуляторе, который идет комплекте с Visual Studio нажав клавишу F5.



Шаг 7 - Теперь немного модифицируем код. В данном случае мы вообще не будем использовать Java. Так как мы будем кодить на C#.



Приводим код к такому виду. Здесь мы создаем WebView контейнер который будет грузить локальный HTML файл, который находится в проекте в папке Assets.

public class MainActivity : AppCompatActivity    {        WebView mWebview; //это контейнер для просмотра HTML        protected override void OnCreate(Bundle savedInstanceState)        {            base.OnCreate(savedInstanceState);            Xamarin.Essentials.Platform.Init(this, savedInstanceState);                       mWebview = new WebView(this);            mWebview.Settings.JavaScriptEnabled = true; //это разрешение работа JS скриптов            mWebview.Settings.DomStorageEnabled = true; //это разрешение на запись в память браузера            mWebview.Settings.BuiltInZoomControls = true; //это разрешение на масштабирование пальцами щипком            mWebview.Settings.DisplayZoomControls = false; //это запрет вывода кнопок масштаба            mWebview.Settings.CacheMode = CacheModes.NoCache; //это отключает либо включает кэширование данных             mWebview.LoadUrl($"file:///android_asset/Content/login.html"); //это загрузка локального файла из папки Asset/Content            SetContentView(mWebview);         }        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)        {            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);        }    }

Шаг 8 - Создадим там папку Content.



Шаг 9 - Добавим в папку Content файл login.html



Шаг 10 - Далее уже пишем на привычном нам HTML CSS JS. Можем нажать на F5 и увидеть результат нашей работы.



По такому принципу можно создать приложение быстро и просто. Файлы html будут выглядеть одинаково на всех устройствах. То есть, Вы можете сделать приложения для Android и iOS с одинаковым интерфейсом. Не надо изучать сложные языки разметки, не надо изучать сложные макеты (сториборды) на iOS. Все можно сделать на HTML.

В идеале, вместо локальных файлов можно сделать загрузку со стороннего сайта. В этом случае Вы можете менять контент приложения без его обновления в AppStore и Google Play.

Q: Но как быть с функциями самой платформы? Пуш сообщения? Как взаимодействовать с самой платформой?

Все очень просто! JavaScript можно использовать для вызова функций Android:

Шаг 1 - Немного модифицируем наш файл MainActivity

//добавляем интерфейс для javascript            mWebview.AddJavascriptInterface(new JavaScriptInterface(), "interface");              //

Шаг 2 - Далее создаем класс JavaScriptInterface на который будет ругаться Visual Studio

  public class JavaScriptInterface : Java.Lang.Object    {        [JavascriptInterface]        [Export("alert")]  //здесь мы указываем название функции вызываемой из html файла interface.alert('сообщение пользователю');        public void alert(string data)        {            Toast.MakeText(Application.Context, data, ToastLength.Short).Show();//здесь Андроид выведет сообщение посредством Toast        }    }

Мы видим, что теперь программа ругается на Export так как не знает что это такое.

Шаг 3 - Добавим нужную библиотеку



Шаг 4 - В фильтре напишем mono



Шаг 5 - Найдем Export и поставим галочку



Шаг 6 - Жмем ок и видим что ошибка пропала.

Так вы можете подключать библиотеки если вдруг Visual Studio ругается на что то.

Toast.MakeText(Application.Context, data, ToastLength.Short).Show();

Данная функция это показ всплывающей информации на экране. Она выполняется именно на платформе Андроида. То есть мы можем написать в HTML файле вызов функции Андроида. Получается полное дружелюбие двух платформ по JavaScript интерфейсу. Данные можно передавать туда сюда. Вызывать переход от одной активити в другую. Все через HTML + JavaScript.

Немного модифицируем файл login.htm:

<html><head>    <style>        h1 {            color: yellowgreen;        }    </style></head><body>    <h1>Привет мир</h1>    <button onclick="sendToAndroid();">Нажми меня</button>    <script>        function sendToAndroid() {            //здесь мы запускаем функцию андроида из HTML файла по javacsript интерфейсу            interface.alert("текст сообщения");        }    </script></body></html>

жмем F5



Теперь при нажатии на кнопку HTML вызывается функция Toast андроида и выводиться сообщение пользователю.

Спасибо за внимание.

P.s. Полный листинг MainActivity

using Android.App;using Android.OS;using Android.Runtime;using Android.Webkit;using Android.Widget;using AndroidX.AppCompat.App;using Java.Interop;namespace MyFirstApp{    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]    public class MainActivity : AppCompatActivity    {        WebView mWebview; //это контейнер для просмотра HTML        protected override void OnCreate(Bundle savedInstanceState)        {            base.OnCreate(savedInstanceState);            Xamarin.Essentials.Platform.Init(this, savedInstanceState);            mWebview = new WebView(this);            mWebview.Settings.JavaScriptEnabled = true; //это разрешение работа JS скриптов            mWebview.Settings.DomStorageEnabled = true; //это разрешение на запись в память браузера            mWebview.Settings.BuiltInZoomControls = true; //это разрешение на масштабирование пальцами щипком            mWebview.Settings.DisplayZoomControls = false; //это запрет вывода кнопок масштаба            mWebview.Settings.CacheMode = CacheModes.NoCache; //это отключает либо включает кэширование данных            //добавляем интерфейс для javascript            mWebview.AddJavascriptInterface(new JavaScriptInterface(), "interface");                         //            mWebview.LoadUrl($"file:///android_asset/Content/login.html"); //это загрузка локального файла из папки Asset/Content            SetContentView(mWebview);        }        public override void OnRequestPermissionsResult(int requestCode, string[] permissions, [GeneratedEnum] Android.Content.PM.Permission[] grantResults)        {            Xamarin.Essentials.Platform.OnRequestPermissionsResult(requestCode, permissions, grantResults);            base.OnRequestPermissionsResult(requestCode, permissions, grantResults);        }    }    public class JavaScriptInterface : Java.Lang.Object    {        [JavascriptInterface]        [Export("alert")]        public void alert(string data)        {            Toast.MakeText(Application.Context, data, ToastLength.Short).Show();        }    }}