Приложению Xamarin Forms, несомненно, пригодятся маленькие доработки, связанные со спецификой устройства, поскольку тем самым можно улучшить общее восприятие проекта конечными пользователями. В отличие от Apple подобные доработки в случае с Android требуют совсем немного усилий со стороны разработчика.
В прошлый раз я рассматривал настройку приложений Xamarin Forms в тех условиях, когда функциональность остается одной и той же на разных платформах. Чтобы это стало возможным я рассматривал специальные компоненты и настройки. Кроме того, для достижения этой цели я также добавил некоторые пользовательские специфические для конкретной платформы элементы программирования. Результатом стало то, что мое фотоприложение для стартапа получило закругленную форму и, кроме того, теперь его можно использовать в районах с низкой и высокой пропускной способностью. Несколько пользователей протестировали мое приложение, и результаты были очень хорошие.
Однако, приложению все еще кое-чего недостает. В случае с iPhone реализуется хорошая интеграция с XF. Модель программирования здесь схожа с программированием под нативный iPhone API. В случае с Android обеспечивается хорошее представление Android UI. Тем не менее некоторых базовых настоек в этом интерфейсе мне не хватает.
В чем проблема?
XF обеспечивают кроссплатформенный API, который по мере необходимости преобразуется в нативный UI API платформы и другие различные API-интерфейсы. Что само по себе хорошо. Таким образом удается с легкостью вести разработку под эти платформы. Проблема заключается в том, что иногда возникает необходимость в создании единообразного и конкретного внешнего вида приложения в зависимости от целевого устройства. Пользователям хочется, чтобы это приложение во всех отношениях соответствовало другим приложениям на их устройстве.
Разработчики, как правило, в первую очередь готовят приложение под iPhone, а уже потом под Android. И часто тому, как приложение будет вести себя на Android уделяется недостаточно внимания. Пользователям вряд ли прийдётся по душе такое приложение под Android, которое с какой стороны ни посмотри напоминает проект для iPhone.
К счастью, теперь ситуация улучшилась, поскольку вызовы XF UI API переводятся в вызовы API нативной платформы.
Еще один важный вопрос здесь заключается в сохранение окраски и общей темы целевого устройства. Этот вопрос мы также здесь рассмотрим.
Примечание: в данном случае я исхожу из того, что вы используете XF версии 2.0 или более новой версии.
Версия Android
Материальный дизайн (MD) представляет собой руководство по инсталляции визуального, движущегося и интерактивного дизайна от Google. Оно доступно для Android 5.0 и более поздних версий. MD позволяют использовать новую тему, новые виджеты для сложных представлений, а также некоторые новые API-интерфейсы для пользовательских теней и анимации. (Примечание: Грег Шаклз подробно разбирает Материальный дизайн в другой статье).
Чтобы добавить поддержку MD в приложение, выполните следующие действия:
- Удостоверьтесь в том, что Вы используете Xamarin.Forms 2.0 или более позднюю версию.
- Измените Target Android Version в свойствах проекта до самой последней установленной версии. В моем случае это Android 7.0 API 24.
- Добавьте соответствующие темы и цвета в приложение. Поскольку Android-приложение в действительности используется для создания приложения XF Android, в нем будут стандартные темы, с которыми пользователи Android уже знакомы. Это следующие файлы:
1 2 3 4 5 6 7 8 9 10 11 12 | <?xml version="1.0" encoding="utf-8"?> <resources> <color name="primary">#3F51B5</color> <color name="primary_dark">#303F9F</color> <color name="primary_light">#C5CAE9</color> <color name="accent">#E040FB</color> <color name="primary_text">#212121</color> <color name="secondary_text">#757575</color> <color name="icons">#FFFFFF</color> <color name="divider">#BDBDBD</color> <color name="window_background">#F06292</color> </resources> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?xml version="1.0" encoding="utf-8" ?> <resources> <style name="MyTheme" parent="MyTheme.Base"> </style> <style name="MyTheme.Base" parent="Theme.AppCompat.Light.NoActionBar"> <item name="colorPrimary">@color/primary</item> <item name="colorPrimaryDark">@color/primary_dark</item> <item name="colorAccent">@color/accent</item> <item name="android:windowBackground">@color/window_background</item> <item name="windowActionModeOverlay">true</item> <item name="windowNoTitle">true</item> <item name="windowActionBar">false</item> </style> </resources> |
1 2 3 4 5 6 7 8 9 | <?xml version="1.0" encoding="utf-8" ?> <resources> <style name="MyTheme" parent="MyTheme.Base"> <!--If you are using MasterDetailPage you will want to set these, else you can leave them out--> <!--<item name="android:windowDrawsSystemBarBackgrounds">true</item> <item name="android:statusBarColor">@android:color/transparent</item>--> </style> </resources><strong> </strong> |
- Следующим шагом необходимо добавить тему к приложению. Это может быть сделано в AndroidManifest.xml:
1 | <application android:label="AppName" android:icon="@drawable/icon" android:theme="@style/MyTheme"> |
Другой вариант — добавить их в атрибуте класса MainActivity:
1 2 3 4 5 | [Activity(Label = "GolfGameClubApp", Icon = "@drawable/icon", Theme = "@style/MyTheme", MainLauncher = true, ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)] |
Обратите внимание, что тема может быть установлена в атрибуте класса как атрибут .NET или в файле манифеста Android в том же качестве. В любом случае все должно работать нормально.
- Добавьте файл с именем tabs.axml, как показано ниже.1234567891011<android.support.design.widget.TabLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="https://goo.gl/LWO6yT"android:id="@+id/sliding_tabs"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="?attr/colorPrimary"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"app:tabIndicatorColor="@android:color/white"app:tabGravity="fill"app:tabMode="fixed" />
- Добавить файл с именем toolbar.axml, как показано ниже.123456789101112<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbarxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="https://goo.gl/LWO6yT"android:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="?attr/actionBarSize"android:minHeight="?attr/actionBarSize"android:background="?attr/colorPrimary"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"android:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:layout_scrollFlags="scroll|enterAlways" />
- XF Activity MainActivity должен наследовать от класса FormsAppCompatActivity.
- Метод OnCreate из MainActivity должен содержать следующий код:12345678protected override void OnCreate(Bundle bundle){TabLayoutResource = Resource.Layout.tabbar;ToolbarResource = Resource.Layout.toolbar;base.OnCreate(bundle);Forms.Init(this, bundle);LoadApplication(new App());}
Ключевым элементам TabLayoutResource и ToolbarResource следует иметь установленные значения.
Теперь, когда приложение было обновлено для поддержки MD, цвета должны выглядеть так, как показано на рисунке ниже. Небольшое предупреждение: Цвета для этого примера были выбраны специально некрасивые, чтобы можно было с легкостью определить то, что они установлены должным образом, так что Вы можете выбрать более приятные цвета.
Ориентация на iPhone
Настройка общего вида пользовательского интерфейса на iPhone довольно проста. В приложении iPhone крайне легко создается дизайн. Самый простой вариант заключается в использовании Appearance API. UIKit выставляет статический класс с именем Appearance для каждого представления. Например, чтобы изменить дизайн всех UIButtons в приложении iPhone, установите цвет фона кнопок следующим образом:
1 | UIButton.Appearance.BackgroundColor = UIColor.Green; |
Готово! На рисунке ниже показана кнопка с цветом фона, установленным на зеленый.
И еще кое-что: Device.OS
XF предоставляют класс Device. Класс Device дает возможность использовать разную функциональность конкретного устройства. Одним из свойств, которое они предоставляют является свойство .OS, позволяющие проводить тестирование работающего приложения для определения платформы. После того как платформа определяется, появляется возможность применять к коду варианты, предусмотренные для конкретных платформ.
Xamarin Forms дают возможность использовать обширный кроссплатформенный API для создания нативных приложений для iPhone и Android. К счастью, у XF есть функции, позволяющие разработчикам придавать приложениям большое количество особенностей, свойственных конкретной платформе.
Автор: Wallace McClure
Источник: VisualStudio Magazine
Написать ответ