Поделиться через

Xamarin.Forms Визуальный элемент "Материал"

  • Статья

Материальный дизайн — это система разработки, созданная Google, которая предписывает размер, цвет, интервал и другие аспекты того, как представления и макеты должны выглядеть и вести себя.

Xamarin.Forms Визуальный элемент материалов можно использовать для применения правил конструктора материалов к Xamarin.Forms приложениям, создавая приложения, которые выглядят в значительной степени идентичными в iOS и Android. Если визуальный элемент "Материал" включен, поддерживаемые представления принимают одинаковые кроссплатформенные представления, создавая унифицированный внешний вид и ощущение.

Снимок экрана с визуальными элементами

Процесс включения Xamarin.Forms визуального элемента Material в приложении:

  1. Xamarin.FormsДобавьте . Пакет NuGet Visual.Material для проектов платформы iOS и Android. Этот пакет NuGet предоставляет оптимизированные отрисовщики материалов в iOS и Android. В iOS пакет предоставляет транзитивную зависимость от Xamarin.iOS.MaterialComponents, которая является привязкой C# к компонентам материалов Google для iOS. В Android пакет предоставляет целевые объекты сборки, чтобы обеспечить правильную настройку TargetFramework.
  2. Инициализировать визуальный элемент Материал в каждом проекте платформы. Дополнительные сведения см. в разделе "Инициализация визуального элемента материала".
  3. Создайте визуальные элементы управления материалом Visual , задав свойство Material на любой странице, которая должна принимать правила конструктора материалов. Дополнительные сведения см. в разделе "Использование отрисовщиков материалов".
  4. [необязательно] Настройка элементов управления материалом. Дополнительные сведения см. в разделе "Настройка элементов управления материалом".

Внимание

В Android для Visual Material требуется минимальная версия 5.0 (API 21) или более поздней, а targetFramework версии 9.0 (API 28). Кроме того, для проекта платформы требуются библиотеки поддержки Android 28.0.0 или более поздней версии, а ее тема должна наследоваться от темы "Материалы" или продолжать наследоваться от темы AppCompat. Дополнительные сведения см. в статье "Начало работы с компонентами материалов для Android".

Материальный визуальный элемент в настоящее время поддерживает следующие элементы управления:

Элементы управления материалом реализуются отрисовщиками материалов, которые применяют правила конструктора материалов. Функционально отрисовщики материалов не отличаются от отрисовщиков по умолчанию. Дополнительные сведения см. в разделе "Настройка визуального элемента материала".

Инициализация визуального элемента "Материал"

После установки Xamarin.Forms. Пакет NuGet Visual.Material необходимо инициализировать отрисовщики материалов в каждом проекте платформы.

В iOS это должно происходить в AppDelegate.cs путем вызова Xamarin.Forms.FormsMaterial.Init метода после Xamarin.Forms.Forms.Init метода:

global::Xamarin.Forms.Forms.Init();
global::Xamarin.Forms.FormsMaterial.Init();

В Android это должно произойти в MainActivity.cs путем вызова Xamarin.Forms.FormsMaterial.Init метода после Xamarin.Forms.Forms.Init метода:

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

Применение визуального элемента "Материал"

Приложения могут включить визуальный элемент Material, задав VisualElement.Visual свойство на странице, макете или представлении следующим Materialобразом:

<ContentPage Visual="Material"
             ...>
    ...
</ContentPage>

Эквивалентный код на C# выглядит так:

ContentPage contentPage = new ContentPage();
contentPage.Visual = VisualMarker.Material;

VisualElement.Visual Задание свойства для Material перенаправления приложения на использование визуальных отрисовщиков материалов вместо отрисовщиков по умолчанию. Для Visual свойства можно задать любой тип, реализующий IVisualкласс, VisualMarker предоставляющий следующие IVisual свойства:

  • Default — указывает, что представление должно отображаться с помощью отрисовщика по умолчанию.
  • MatchParent — указывает, что представление должно использовать тот же отрисовщик, что и его прямой родительский элемент.
  • Material — указывает, что представление должно отображаться с помощью отрисовщика материалов.

Внимание

Свойство Visual определяется в VisualElement классе с представлениями, наследующими Visual значение свойства от родителей. Таким образом, установка Visual свойства на ContentPage странице гарантирует, что все поддерживаемые представления на странице будут использовать этот визуальный элемент. Кроме того, Visual свойство можно переопределить в представлении.

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

Снимок экрана: отрисовщики по умолчанию в iOS и Android

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

Снимок экрана: отрисовщики материалов в iOS и Android

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

Примечание.

Компоненты оформления материалов тесно соответствуют рекомендациям Google. В результате отрисовщики материалного дизайна предвзяты к размеру и поведению. Если требуется более широкий контроль над стилями или поведением, вы можете создать собственный эффект, поведение или настраиваемый отрисовщик для достижения требуемой детали.

Настройка визуального элемента "Материал"

Пакет Visual NuGet материал — это коллекция отрисовщиков, которые реализуют Xamarin.Forms элементы управления. Настройка визуальных элементов управления материалом идентична настройке элементов управления по умолчанию.

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

Пользовательские отрисовщики — это рекомендуемый метод, если отрисовщик материалов не существует. Следующие классы отрисовщика включаются в визуальный элемент "Материал".

  • MaterialButtonRenderer
  • MaterialCheckBoxRenderer
  • MaterialEntryRenderer
  • MaterialFrameRenderer
  • MaterialProgressBarRenderer
  • MaterialDatePickerRenderer
  • MaterialTimePickerRenderer
  • MaterialPickerRenderer
  • MaterialActivityIndicatorRenderer
  • MaterialEditorRenderer
  • MaterialSliderRenderer
  • MaterialStepperRenderer

Подклассы отрисовщика материалов почти идентичны нематериальным отрисовщикам. Однако при экспорте отрисовщика, который подклассирует отрисовщик материалов, необходимо указать третий аргумент ExportRenderer атрибуту, который задает VisualMarker.MaterialVisual тип:

using Xamarin.Forms.Material.Android;

[assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomMaterialProgressBarRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace MyApp.Android
{
    public class CustomMaterialProgressBarRenderer : MaterialProgressBarRenderer
    {
        //...
    }
}

В этом примере указывается, ExportRendererAttribute что CustomMaterialProgressBarRenderer класс будет использоваться для отрисовки ProgressBar представления с типом IVisual , зарегистрированным в качестве третьего аргумента.

Примечание.

Отрисовщик, указывающий IVisual тип, как часть его ExportRendererAttribute, будет использоваться для отрисовки в представлениях, а не отрисовщика по умолчанию. Во время Visual выбора отрисовщика свойство представления проверяется и включается в процесс выбора отрисовщика.

Дополнительные сведения о пользовательских отрисовщиках см. в разделе "Пользовательские отрисовщики".