Aracılığıyla paylaş


Xamarin.Forms Malzeme Görseli

Malzeme Tasarımı , Google tarafından oluşturulan, görünümlerin ve düzenlerin nasıl görünmesi ve davranması gerektiğinin boyutunu, rengini, aralığını ve diğer yönlerini belirten, fikirli bir tasarım sistemidir.

Xamarin.Forms Malzeme Görseli, iOS ve Android'de büyük ölçüde aynı görünen uygulamalar oluşturarak uygulamalara Malzeme Tasarımı kuralları Xamarin.Forms uygulamak için kullanılabilir. Malzeme Görseli etkinleştirildiğinde, desteklenen görünümler aynı tasarımı platformlar arası benimseyerek birleşik bir görünüm ve görünüm oluşturur.

Malzeme Görseli ekran görüntüleri

Uygulamanızda Malzeme Görseli'ni Xamarin.Forms etkinleştirme işlemi şu şekildedir:

  1. öğesini Xamarin.Formsekleyin. iOS ve Android platform projelerinize Visual.Material NuGet paketi. Bu NuGet paketi, iOS ve Android'de iyileştirilmiş Malzeme Tasarımı işleyicileri sunar. iOS'ta paket, Google'ın iOS için Malzeme Bileşenlerine C# bağlaması olan Xamarin.iOS.MaterialComponents'e geçişli bağımlılık sağlar. Android'de paket, TargetFramework'ünüzün doğru ayarlandığından emin olmak için derleme hedefleri sağlar.
  2. Her platform projesinde Malzeme Görseli'nin başlatılması. Daha fazla bilgi için bkz . Malzeme Görseli Başlatma.
  3. Malzeme Tasarımı kurallarını benimsemesi Visual gereken tüm sayfalarda özelliğini Material olarak ayarlayarak Malzeme Görseli denetimleri oluşturun. Daha fazla bilgi için bkz . Malzeme işleyicilerini kullanma.
  4. [isteğe bağlı] Malzeme denetimlerini özelleştirin. Daha fazla bilgi için bkz . Malzeme denetimlerini özelleştirme.

Önemli

Android'de Malzeme Görseli için en az 5.0 (API 21) veya üzeri bir sürüm ve sürüm 9.0 (API 28) TargetFramework gerekir. Buna ek olarak, platform projeniz Için Android destek kitaplıkları 28.0.0 veya üzeri gerekir ve temasının Bir Malzeme Bileşenleri temasından devralması veya AppCompat temasından devralmaya devam etmesi gerekir. Daha fazla bilgi için bkz . Android için Malzeme Bileşenlerini Kullanmaya Başlama.

Malzeme Görseli şu anda aşağıdaki denetimleri destekler:

Malzeme denetimleri, Malzeme Tasarımı kurallarını uygulayan Malzeme işleyicileri tarafından gerçekleştirilir. İşlevsel olarak, Malzeme işleyicileri varsayılan işleyicilerden farklı değildir. Daha fazla bilgi için bkz . Malzeme Görseli Özelleştirme.

Malzeme Görseli Başlat

yüklendikten Xamarin.Formssonra. Visual.Material NuGet paketi, Malzeme işleyicileri her platform projesinde başlatılmalıdır.

iOS'ta bu, AppDelegate.cs yönteminden Xamarin.Forms.FormsMaterial.Init sonraXamarin.Forms.Forms.Init yöntemini çağırarak gerçekleşmelidir:

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

Android'de bu, MainActivity.cs yönteminden Xamarin.Forms.FormsMaterial.Init sonraXamarin.Forms.Forms.Init yöntemini çağırarak gerçekleşmelidir:

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

Malzeme Görseli Uygula

Uygulamalar, bir sayfa, düzen veya görünümdeki VisualElement.VisualMaterialözelliğini olarak ayarlayarak Malzeme Görseli'ni etkinleştirebilir:

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

Eşdeğer C# kodu:

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

özelliğinin VisualElement.VisualMaterial ayarlanması, uygulamanızı varsayılan işleyiciler yerine Malzeme Görseli işleyicilerini kullanmaya yönlendirir. özelliği, Visual öğesini uygulayan IVisualVisualMarker herhangi bir türe ayarlanabilir ve sınıfı aşağıdaki IVisual özellikleri sağlar:

  • Default – görünümün varsayılan işleyici kullanılarak işlenmesi gerektiğini gösterir.
  • MatchParent – görünümün doğrudan üst öğesiyle aynı işleyiciyi kullanması gerektiğini belirtir.
  • Material – görünümün bir Malzeme işleyicisi kullanılarak işlenmesi gerektiğini gösterir.

Önemli

Visual özelliği sınıfında tanımlanır VisualElement ve görünümler özellik değerini ebeveynlerinden devralırVisual. Bu nedenle, özelliğinin Visual bir ContentPage üzerinde ayarlanması, sayfadaki desteklenen tüm görünümlerin bu Görseli kullanmasını sağlar. Ayrıca, Visual özellik bir görünümde geçersiz kılınabilir.

Aşağıdaki ekran görüntüleri, varsayılan işleyiciler kullanılarak işlenen bir kullanıcı arabirimini gösterir:

iOS ve Android'de varsayılan işleyicilerin ekran görüntüsü

Aşağıdaki ekran görüntüleri, Malzeme işleyicileri kullanılarak işlenen aynı kullanıcı arabirimini gösterir:

iOS ve Android'de Malzeme işleyicilerinin ekran görüntüsü

Burada gösterilen varsayılan işleyiciler ile Malzeme işleyicileri arasındaki temel görünür farklar, Malzeme işleyicilerinin metni büyük harfe çevirmeleri Button ve kenarlıkların köşelerini yuvarlamalarıdır Frame . Bununla birlikte, Malzeme işleyicileri yerel denetimleri kullanır ve bu nedenle yazı tipleri, gölgeler, renkler ve yükseltme gibi alanlar için platformlar arasında kullanıcı arabirimi farklılıkları olabilir.

Not

Malzeme Tasarımı bileşenleri Google'ın yönergelerine yakından bağlıdır. Sonuç olarak, Malzeme Tasarımı işleyicileri bu boyutlandırmaya ve davranışa karşı taraflıdır. Stiller veya davranışlar üzerinde daha fazla denetime ihtiyacınız olduğunda, yine de ihtiyacınız olan ayrıntıyı elde etmek için kendi Efektinizi, Davranışınızı veya Özel oluşturucunuzu oluşturabilirsiniz.

Malzeme Görseli Özelleştirme

Material Visual NuGet paketi, denetimleri gerçekleştiren Xamarin.Forms işleyicilerden oluşan bir koleksiyondur. Malzeme Görseli denetimlerini özelleştirme, varsayılan denetimleri özelleştirmeyle aynıdır.

Efektler, amaç mevcut bir denetimi özelleştirmek olduğunda önerilen tekniktir. Malzeme Görseli işleyicisi varsa, denetimi bir efektle özelleştirmek, işleyiciyi alt sınıfa almaktan daha az iştir. Efektler hakkında daha fazla bilgi için bkz. Xamarin.Forms efektler.

Özel işleyiciler, malzeme işleyicisi olmadığında önerilen tekniktir. Malzeme Görseli'ne aşağıdaki işleyici sınıfları dahildir:

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

Bir Malzeme işleyicinin alt sınıflanması, Malzeme olmayan işleyiciler ile neredeyse aynıdır. Ancak, bir Malzeme işleyicisini alt sınıflandıran bir işleyiciyi dışarı aktarırken, özniteliğine ExportRenderer türü belirten VisualMarker.MaterialVisual üçüncü bir bağımsız değişken sağlamanız gerekir:

using Xamarin.Forms.Material.Android;

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

Bu örnekte, ExportRendererAttribute sınıfın CustomMaterialProgressBarRenderer üçüncü bağımsız değişken olarak kaydedilmiş türüyle IVisual görünümü işlemek ProgressBar için kullanılacağını belirtir.

Not

Türünün bir parçası ExportRendererAttributeolarak türünü belirten işleyiciIVisual, varsayılan işleyici yerine görünümlerde kabul edilenleri işlemek için kullanılır. oluşturucu seçim zamanında görünümün Visual özelliği incelenir ve işleyici seçim işlemine eklenir.

Özel işleyiciler hakkında daha fazla bilgi için bkz . Özel oluşturucular.