Многие все еще думают, что Xamarin.Forms не подходят для сознания продуманных масштабных приложений, которым предстоит стать популярными. И что они не могут сравниться с нативной реализацией. Проекты Xamarin.Forms — это нативные приложения, и они обладают всеми возможностями последних, за исключением того, что иногда может возникать необходимость в создании CustomRenderers или специального кода под конкретную платформу для реализации тех вещей, которые еще не поддерживаются Xamarin.Forms или не могут быть внедрены на кроссплатформенном уровне.
Чтобы наглядно это продемонстрировать, я воссоздам часть пользовательского интерфейса приложения Instagram, которое изначально разрабатывалось нативно для Android и iOS. Но я понимаю, что оно в скором времени будет портировано на React Native. И это, как я полагаю, само по себе является доказательством того, что кроссплатформенные приложения вполне соответствуют нативным.
В этой статье будет продемонстрировано, что некоторые из самых популярных приложений мира можно дублировать в Xamarin.Forms. Я не стану воссоздавать весь пользовательский интерфейс Instagram, и не буду заниматься такими нюансами, как поворот экрана устройства, а также его размерами. Приложение, которое получится в результате, нельзя будет по-настоящему использовать, поскольку API Инстаграм является закрытым. Однако, если вы считаете, что в Xamarin.Forms не удастся реализовать какую-то часть нативного пользовательского, дайте мне знать, и я с радостью добавлю ее.
К сведению: Я осознаю, что в следующем примере не все идеально, но причина этого в нехватке времени, а вовсе не в недостатке возможностей.
Экран приветствия
Слева находится настоящие приложение Instagram под Android, а справа — дубликат, созданный мной в Xamarin Forms. На этих экранах нет ничего необычного.
Экран входа
Создавать экран входа было немного сложнее, поскольку по умолчанию TextView у Android выглядит не так. Так что я добавил ресурс rounded_corners.xml.
1 2 3 4 5 6 7 | <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" > <stroke android:width="1dp" android:color="#e7e7e7" /> <solid android:color="#fafafa" /> <padding android:left="1dp" android:right="1dp" android:top="1dp" /> <corners android:radius="5dp" /> </shape> |
Затем в пользовательском средстве визуализации применил его к элементу управления вместе с соответствующей гравитацией.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | [assembly: ExportRenderer(typeof(Entry), typeof(TextViewCustomRenderer))] namespace Instagram.Droid.Renderers { public class TextViewCustomRenderer: EntryRenderer { protected override void OnElementChanged(ElementChangedEventArgs<Entry> e) { base.OnElementChanged(e); if (Control != null) { Control.Background = Android.App.Application.Context.GetDrawable(Resource.Drawable.rounded_corners); Control.Gravity = GravityFlags.CenterVertical; Control.SetPadding(10, 0, 0, 0); } } } } } |
Слева находится настоящие приложение Android Instagram, справа — дубликат, созданный мной в Xamarin Forms.
Некоторые цвета на этих примерах не совпадают, но, как я уже говорил, это легко решается — просто нужно потратить чуть больше времени. Кроме того, я сделал кнопку стандартной. У нее такой цвет, который реальное приложение включит при вводе электронной почты и пароля. Иногда мы используем триггер в Xamarin Forms.
Основной экран
Основной экран здесь на удивление постой. Здесь также показана нативная версия для iOS. Единственное различие между этими двумя версиями заключается в некоторых значках, которые можно легко переключить с помощью OnPlatform.
Тут имеются ListView, некоторые Grids, плагин округления изображения от Джеймса Монтемагно, определенные изображения, а также несколько StackLayouts. Для реализации некоторых анимаций, на которые мне времени не хватило, можно использовать Xamarin.Forms Animation Framework или Lottie. Если что-то можно сделать в нативном коде, это также можно сделать и в Xamarin.Forms.
Управление различиями между платформами
С теми различиями между Android и iOS, которые мне известны, в Xamarin.Forms можно разобраться четырьмя способами.
- Пользовательские визуализации для изменения любого элемента управления на нативном уровне. Можно также использовать эффекты.
- Нативные представления/встраивания
- Использование кода, специфичного для платформы, а затем внедрение зависимостей.
- OnPlatform
С помощью этого можно изменить любое нативное свойство платформы, а также получить доступ к любому нативному API платформы, и все это с относительной легкостью.
Резюме
Нет ничего такого, чего я не смог бы создать в Xamarin.Forms по части пользовательского интерфейса Instagram. И это было вполне ожидаемо. Я полагаю, кто-то может попытаться поддеть меня, спросив что-то вроде «а как же производительность?», на этот случай я могу сказать, что хотя на этапе запуска приложение не будет таким же быстрым, и сейчас команда Xamarin.Forms работает над этим, зато в самом приложении пользовательский интерфейс будет столь же быстрым, как и в нативном, поскольку здесь используются аналогичные элементы. Производительность на этапе запуска может быть также улучшена с помощью различных методов. Прочитайте об увлечении скорости запуска приложений Xamarin.Forms, чтобы узнать, как улучшить производительность в этой части.
Будучи некоторое время в команде разработчиков Native Xamarin и являясь тестером автоматизации пользовательского интерфейса, я теперь еще более убежден, что Xamarin.Forms позволяют полностью перейти на кроссплатформенную разработку. Нативная разработка осложняется необходимостью множества повторяющихся действий в пользовательском интерфейсе, дублирования исправлений ошибок, и даже тогда, когда я четко произношу имена, которые будут использоваться для каждого элемента управления по-прежнему всплывают различные способы компоновки пользовательского интерфейса, неправильное написание и упущения правильного именования элементов.
Если пользовательский интерфейс на каждой платформе значительно отличается, то да, в этом случае лучше подходит нативная разработка. Однако, просто желая получить более «отполированное приложение», использовать нативную разработку неправильно. Instagram не сильно отличается на разных платформах, равно как и большинство других приложений, да и с чего вдруг бы они это делили? Можно сделать приложение Xamarin.Forms таким, что оно будет практически как нативное, и, кроме того, окажется интуитивно понятным на любой платформе.
Если вы хотите взглянуть на мой XAML-код, перейдите к GitHub Repo Instagram.
Источник: XamarinHelp.com
Написать ответ