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. [необязательно] Настройка элементов управления материалом. Дополнительные сведения см. в разделе "Настройка элементов управления материалом".

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

• ActivityIndicator
• Button
• CheckBox
• DatePicker
• Editor
• Entry
• Frame
• Picker
• ProgressBar
• Slider
• Stepper
• TimePicker

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

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

После установки 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 — указывает, что представление должно отображаться с помощью отрисовщика материалов.

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

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

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

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

Пакет 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 , зарегистрированным в качестве третьего аргумента.

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

Дополнительные ссылки

• Создание визуального Xamarin.Forms отрисовщика
• Xamarin.Forms Эффекты
• Пользовательские отрисовщики