Xamarin.iOS'ta Programlı Düzen Kısıtlamaları

Bu kılavuzda, iOS Tasarımcısı'nda oluşturmak yerine C# kodunda iOS Otomatik Düzen kısıtlamalarıyla çalışma özelliği yer almaktadır.

Otomatik Düzen ("uyarlamalı düzen" olarak da adlandırılır) duyarlı bir tasarım yaklaşımıdır. Her öğenin konumunun ekran üzerinde bir noktaya sabit kodlu olduğu geçiş düzeni sisteminden farklı olarak, Otomatik Düzen ilişkilerle ilgilidir. Bu, öğelerin tasarım yüzeyindeki diğer öğelere göre konumlarıdır. Otomatik Düzen'in merkezinde, bir öğenin veya öğe kümesinin ekrandaki diğer öğeler bağlamında yerleştirilmesini tanımlayan kısıtlamalar veya kurallar fikri yer almaktadır. Öğeler ekranda belirli bir konuma bağlı değildir, kısıtlamalar farklı ekran boyutları ve cihaz yönlendirmeleri için iyi görünen uyarlamalı bir düzen oluşturmanıza yardımcı olur.

Genellikle iOS'ta Otomatik Düzen ile çalışırken kullanıcı arabirimi öğelerinize Grafik Interface Builder için Xcode'un Interface Builder'lerini kullanırsanız. Ancak, C# kodunda kısıtlamalar oluşturmanız ve uygulamanızı gereken zamanlar olabilir. Örneğin, dinamik olarak oluşturulan kullanıcı arabirimi öğeleri kullanılırken bir 'ye UIView eklenir.

Bu kılavuzda, bunları Xcode'un belgesinde grafik olarak oluşturmak yerine C# kodu kullanarak kısıtlama oluşturma ve kısıtlamalarla Interface Builder.

Program Aracılığıyla Kısıtlama Oluşturma

Yukarıda belirtildiği gibi, genellikle iOS Tasarımcısı'nda Otomatik Düzen Kısıtlamaları ile çalışıyor oluruz. Kısıtlamalarınızı program aracılığıyla oluşturmanız gereken zamanlar için, şunlardan birini seçmeniz gereken üç seçenek vardır:

• Düzen Yer Noktaları - Bu API kısıtlanmış kullanıcı arabirimi öğelerinin yer noktası özelliklerine (veya BottomAnchorHeightAnchor gibi) erişim sağlar.
• Düzen Kısıtlamaları - Kısıtlama oluşturmak için sınıfını kullanabilirsiniz.
• Görsel Biçimlendirme Dili - Kısıtlamalarınızı tanımlamak için bir ASCII yöntemi gibi bir resim sağlar.

Aşağıdaki bölümlerde her bir seçeneğin ayrıntılarına yer velanmıştır.

Düzen Yer Noktaları

sınıfını kullanarak kısıtlanmış kullanıcı arabirimi öğelerinin yer noktası özelliklerine göre kısıtlamalar oluşturmak için akıcı NSLayoutAnchor bir arabirimine sahip oluruz. Örneğin, görünüm denetleyicisinin üst ve alt düzen kılavuzları , ve sabit nokta özelliklerini gösterirken Görünüm kenar, orta, boyut ve TopAnchorBottomAnchor temel özellikleri HeightAnchor gösterir.

Layout Anchors, okuması kolay ve sıkıştırılmış bir biçimde kısıtlama oluşturmak için çeşitli yöntemler sağlar:

• ConstraintEqualTo : İsteğe bağlı olarak sağlanan uzaklık değerine sahip bir constant ilişki tanımlar.
• ConstraintGreaterThanOrEqualTo : İsteğe bağlı olarak sağlanan bir uzaklık değeriyle bir constant ilişki tanımlar.
• ConstraintLessThanOrEqualTo : İsteğe bağlı olarak sağlanan bir uzaklık değeri ile bir ilişki constant tanımlar.

Örnek:

// Get the parent view's layout
var margins = View.LayoutMarginsGuide;

// Pin the leading edge of the view to the margin
OrangeView.LeadingAnchor.ConstraintEqualTo (margins.LeadingAnchor).Active = true;

// Pin the trailing edge of the view to the margin
OrangeView.TrailingAnchor.ConstraintEqualTo (margins.TrailingAnchor).Active = true;

// Give the view a 1:2 aspect ratio
OrangeView.HeightAnchor.ConstraintEqualTo (OrangeView.WidthAnchor, 2.0f);

Tipik bir Düzen Kısıtlaması yalnızca doğrusal bir ifade olarak ifade olabilir. Aşağıdaki örneğe göz atın:

Bu, Layout Anchors kullanılarak aşağıdaki C# kodu satırına dönüştürülür:

PurpleView.LeadingAnchor.ConstraintEqualTo (OrangeView.TrailingAnchor, 10).Active = true; 

C# kodunun bölümleri denklemin verilen bölümlerine aşağıdaki gibi karşılık gelir:

Yalnızca belirli bir düzen kısıtlaması denklemini çözmek için gereken parametreleri sağlamanın yanı sıra, Layout Anchor yöntemlerinin her biri, bunlara geçirilen parametrelerin tür güvenliğini zorlar. Bu nedenle veya gibi yatay kısıtlama sabit noktaları yalnızca diğer yatay sabit noktası türleriyle kullanılabilir ve LeadingAnchorTrailingAnchor çarpanlar yalnızca boyut kısıtlamaları için sağlanır.

Düzen Kısıtlamaları

C# kodunda doğrudan bir kullanarak Otomatik Düzen kısıtlamalarını NSLayoutConstraint el ile ekleyebilirsiniz. Layout Anchors kullanmanın aksine, tanımlanan kısıtlama üzerinde hiçbir etkisi olmaz olsa bile her parametre için bir değer belirtmeniz gerekir. Sonuç olarak, okuması zor ve ortak bir kod elde etmek oldukça zor olur. Örnek:

//// Pin the leading edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Leading, NSLayoutRelation.Equal, View, NSLayoutAttribute.LeadingMargin, 1.0f, 0.0f).Active = true;

//// Pin the trailing edge of the view to the margin
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Trailing, NSLayoutRelation.Equal, View, NSLayoutAttribute.TrailingMargin, 1.0f, 0.0f).Active = true;

//// Give the view a 1:2 aspect ratio
NSLayoutConstraint.Create (OrangeView, NSLayoutAttribute.Height, NSLayoutRelation.Equal, OrangeView, NSLayoutAttribute.Width, 2.0f, 0.0f).Active = true;

Burada, enum görünümün kenar boşluklarının değerini tanımlar ve , ve gibi özelliklere karşılık gelen ve NSLayoutAttributeLayoutMarginsGuideLeftRightTopBottomNSLayoutRelation enum, EqualLessThanOrEqual verilen GreaterThanOrEqual öznitelikler arasında oluşturulacak ilişkiyi veya olarak tanımlar.

Layout Anchor API'den farklı olarak, oluşturma yöntemleri belirli bir kısıtlamanın önemli yönlerini vurgulamaz ve kısıtlama üzerinde NSLayoutConstraint derleme zamanı denetimleri gerçekleştirlanmaz. Sonuç olarak, çalışma zamanında özel durum oluşturması için geçersiz bir kısıtlama oluşturmak kolaydır.

Görsel Biçim Dili

Görsel Biçim Dili, oluşturulan kısıtlamanın görsel gösterimini sağlayan dizeler gibi ASCII resimlerini kullanarak kısıtlamalar tanımlamaya olanak sağlar. Bunun aşağıdaki avantajları ve dezavantajları vardır:

• Görsel Biçim Dili yalnızca geçerli kısıtlamaların oluşturulmasını zorlar.
• Otomatik Düzen, Visual Format Language kullanarak konsola kısıtlamalar verir, bu nedenle hata ayıklama iletileri kısıtlamayı oluşturmak için kullanılan koda benzer.
• Görsel Biçim Dili, çok küçük bir ifadeyle aynı anda birden çok kısıtlama oluşturmanıza olanak sağlar.
• Görsel Biçim Dili dizelerinin derleme tarafı doğrulaması yoktur, sorunlar yalnızca çalışma zamanında keşfedilebilirsiniz.
• Görsel Biçim Dili görselleştirmeyi bütünlük üzerinde vurgulayana kadar bazı kısıtlama türleri bu türle (oranlar gibi) oluşturulamaz.

Kısıtlama oluşturmak için Görsel Biçim Dilini kullanırken aşağıdaki adımları uygulayın:

1. Görünüm NSDictionary nesnelerini ve Düzen Kılavuzlarını ve biçimleri tanımlarken kullanılacak bir dize anahtarını içeren bir oluşturun.
2. İsteğe bağlı olarak kısıtlama için Sabit değer olarak kullanılan bir anahtar NSDictionary ve değer kümesi ( ) tanımlayan bir NSNumber oluşturun.
3. Tek bir sütun veya öğe satırı düzeni için biçim dizesini oluşturun.
4. Kısıtlamaları FromVisualFormat oluşturmak için NSLayoutConstraint sınıfının yöntemini çağırma.
5. Kısıtlamaları ActivateConstraints etkinleştirmek ve NSLayoutConstraint uygulamak için sınıfının yöntemini çağırma.

Örneğin, Görsel Biçim Dili'ne hem önden hem de sonda bir kısıtlama oluşturmak için aşağıdakini kullanabilirsiniz:

// Get views being constrained
var views = new NSMutableDictionary (); 
views.Add (new NSString ("orangeView"), OrangeView);

// Define format and assemble constraints
var format = "|-[orangeView]-|";
var constraints = NSLayoutConstraint.FromVisualFormat (format, NSLayoutFormatOptions.AlignAllTop, null, views);

// Apply constraints
NSLayoutConstraint.ActivateConstraints (constraints);

Görsel Biçim Dili varsayılan aralığı kullanırken her zaman üst Görünümün kenar boşluklarında sıfır nokta kısıtlamaları oluşturduğundan, bu kod yukarıda sunulan örneklerle aynı sonuçları üretir.

Görsel Biçim Dili, tek bir satırda birden çok alt görünüm gibi daha karmaşık ui tasarımları için hem yatay aralığı hem de dikey hizalamayı belirtir. Yukarıdaki örnekte olduğu gibi , bir AlignAllTopNSLayoutFormatOptions satırdaki veya sütundaki tüm görünümleri üstlerine hizalar.

Yaygın kısıtlamaları ve Görsel Biçim Dizesi Dil Bilgisini belirtmeye bazı örnekler için Apple'ın Görsel Biçim Dili Ek bölümüne bakın.

Özet

Bu kılavuzda, iOS Tasarımcısı'nda grafik olarak oluşturmanın aksine C# ile Otomatik Düzen kısıtlamaları oluşturma ve bu kısıtlamalarla çalışma sunulmuştur. İlk olarak, Otomatik Düzeni işlemek için Layout Anchors ( NSLayoutAnchor ) kullanmayı ele aldı. Ardından, Düzen Kısıtlamaları ( ) ile nasıl çalışıldı NSLayoutConstraint gösterildi. Son olarak, Otomatik Düzen için Görsel Biçim Dili kullanılarak sunulmuştur.

İlişkili Bağlantılar

• Görsel Taslaklara Giriş
• iOS Tasarlanabilir Denetimler için Adım Adım Kılavuz
• Otomatik Düzen ve iOS için Xamarin Designer
• Apple - Program Aracılığıyla Kısıtlama Oluşturma
• Apple - Görsel Biçim Dili Ek