Sdílet prostřednictvím

Omezení programového rozložení v Xamarin.iOS

  • Článek

Tato příručka představuje práci s omezeními automatického rozložení pro iOS v kódu jazyka C# místo jejich vytváření v iOS Designeru.

Automatické rozložení (označované také jako adaptivní rozložení) je responzivní přístup k návrhu. Na rozdíl od přechodného systému rozložení, kde je umístění jednotlivých prvků pevně zakódované na bod na obrazovce, je automatické rozložení o relacích – pozicích prvků vzhledem k ostatním prvkům na návrhové ploše. Jádrem automatického rozložení je myšlenka omezení nebo pravidel, která definují umístění prvku nebo sady prvků v kontextu jiných prvků na obrazovce. Vzhledem k tomu, že prvky nejsou vázány na konkrétní pozici na obrazovce, omezení pomáhají vytvořit adaptivní rozložení, které vypadá dobře na různých velikostech obrazovky a orientaci zařízení.

Při práci s automatickým rozložením v iOSu obvykle použijete Tvůrce rozhraní Xcode k grafickému umístění omezení rozložení u položek uživatelského rozhraní. Někdy ale může docházet k tomu, že potřebujete vytvořit a použít omezení v kódu jazyka C#. Například při použití dynamicky vytvořených prvků uživatelského rozhraní přidaných do .UIView

V této příručce se dozvíte, jak vytvořit omezení a pracovat s nimi pomocí kódu jazyka C# místo jejich grafického vytváření v Tvůrci rozhraní Xcode.

Programové vytváření omezení

Jak je uvedeno výše, obvykle budete pracovat s omezeními automatického rozložení v iOS Designeru. V takových případech, kdy potřebujete vytvořit omezení prostřednictvím kódu programu, máte tři možnosti, ze kterých si můžete vybrat:

  • Ukotvení rozložení – Toto rozhraní API poskytuje přístup k vlastnostem ukotvení (například BottomAnchor TopAnchorHeightAnchor) omezených položek uživatelského rozhraní.
  • Omezení rozložení – Omezení můžete vytvořit přímo pomocí NSLayoutConstraint třídy.
  • Jazyk vizuálního formátování – poskytuje metodu ASCII art, která definuje vaše omezení.

Jednotlivé možnosti podrobně projdeme v následujících částech.

Ukotvení rozložení

NSLayoutAnchor Pomocí třídy máte fluent rozhraní pro vytváření omezení na základě vlastností ukotvení položek uživatelského rozhraní, které jsou omezeny. Například vodítka horního a dolního rozložení kontroleru zobrazení zpřístupňují TopAnchorBottomAnchor vlastnosti a HeightAnchor ukotvení, zatímco zobrazení zveřejňuje hranu, střed, velikost a vlastnosti směrného plánu.

Důležité

Kromě standardní sady vlastností ukotvení zahrnují zobrazení iOS také vlastnosti LayoutMarginsGuides a ReadableContentGuide vlastnosti. Tyto vlastnosti zpřístupňují UILayoutGuide objekty pro práci s okraji zobrazení a vodítky čitelného obsahu.

Ukotvení rozložení poskytuje několik metod pro vytváření omezení v snadno čitelným a kompaktním formátu:

  • ConstraintEqualTo – definuje relaci, kde first attribute = second attribute + [constant] se volitelně zadanou constant hodnotou posunu.
  • ConstraintGreaterThanOrEqualTo – definuje relaci, kde first attribute >= second attribute + [constant] se volitelně zadanou constant hodnotou posunu.
  • ConstraintLessThanOrEqualTo – definuje relaci, kde first attribute <= second attribute + [constant] se volitelně zadanou constant hodnotou posunu.

Příklad:

// 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);

Typické omezení rozložení lze vyjádřit jednoduše jako lineární výraz. Podívejte se na následující příklad:

Omezení rozložení vyjádřené lineárním výrazem

Který by byl převeden na následující řádek kódu jazyka C#pomocí ukotvení rozložení:

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

Kde části kódu jazyka C# odpovídají zadaným částem rovnice následujícím způsobem:

Rovnice Kód
Položka 1 PurpleView
Atribut 1 LeadingAnchor
Vztah ConstraintEqualTo
Násobitel Výchozí hodnota je 1.0, takže není zadána.
Položka 2 OrangeView
Atribut 2 Koncovýanchor
Konstanta 10.0

Kromě poskytnutí pouze parametrů potřebných k vyřešení dané rovnice omezení rozložení vynucuje každá metoda ukotvení rozložení bezpečnost parametrů předaných jim. Vodorovné ukotvení omezení, jako LeadingAnchor je nebo TrailingAnchor lze použít pouze s jinými typy vodorovných ukotvení a násobiteli, jsou k dispozici pouze pro omezení velikosti.

Omezení rozložení

Omezení automatického rozložení můžete přidat ručně tak, že přímo sestavíte NSLayoutConstraint kód v jazyce C#. Na rozdíl od použití ukotvení rozložení je nutné zadat hodnotu pro každý parametr, i když nebude mít žádný vliv na definované omezení. Výsledkem je, že nakonec vytvoříte značné množství obtížně čitelného, často používaného kódu. Příklad:

//// 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;

NSLayoutAttribute Kde výčt definuje hodnotu okrajů zobrazení a odpovídá LayoutMarginsGuide vlastnostem, jako Leftje , Top Righta Bottom výčet NSLayoutRelation definuje vztah, který se vytvoří mezi danými atributy jako Equal, LessThanOrEqual nebo GreaterThanOrEqual.

Na rozdíl od rozhraní API NSLayoutConstraint pro ukotvení rozložení metody vytváření nezvýrazňují důležité aspekty konkrétního omezení a neexistují žádné kontroly času kompilace prováděné s omezením. V důsledku toho je snadné vytvořit neplatné omezení, které vyvolá výjimku za běhu.

Jazyk vizuálního formátu

Jazyk vizuálního formátu umožňuje definovat omezení pomocí obrázků ASCII, jako jsou řetězce, které poskytují vizuální znázornění vytvářeného omezení. To má následující výhody a nevýhody:

  • Jazyk vizuálního formátu vynucuje pouze vytváření platných omezení.
  • Automatické rozložení vypíše omezení konzoly pomocí jazyka Vizuálního formátu, takže ladicí zprávy budou vypadat podobně jako kód použitý k vytvoření omezení.
  • Jazyk vizuálního formátu umožňuje vytvořit více omezení současně s velmi kompaktním výrazem.
  • Vzhledem k tomu, že neexistuje žádné ověřování řetězců jazyka Visual Format Language na straně kompilace, lze problémy zjistit pouze za běhu.
  • Vzhledem k tomu, že jazyk vizuálního formátu zvýrazňuje vizualizaci nad úplností, některé typy omezení se s ním nedají vytvořit (například poměry).

Při použití jazyka Visual Format Language provedete následující kroky k vytvoření omezení:

  1. Vytvořte NSDictionary objekty Zobrazení a vodítka rozložení a řetězcový klíč, který se použije při definování formátů.
  2. Volitelně můžete vytvořit, NSDictionary která definuje sadu klíčů a hodnot (NSNumber), které se používají jako konstantní hodnota pro omezení.
  3. Vytvořte formátovací řetězec pro rozložení jednoho sloupce nebo řádku položek.
  4. FromVisualFormat Volání metody NSLayoutConstraint třídy pro vygenerování omezení.
  5. ActivateConstraints Volání metody NSLayoutConstraint třídy k aktivaci a použití omezení.

Pokud například chcete vytvořit úvodní i koncové omezení v jazyce Visual Format Language, můžete použít následující:

// 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);

Vzhledem k tomu, že jazyk vizuálního formátu vždy vytváří omezení nulového bodu připojená k okrajům nadřazeného zobrazení při použití výchozího mezery, tento kód vytvoří stejné výsledky jako výše uvedené příklady.

V případě složitějších návrhů uživatelského rozhraní, například více podřízených zobrazení na jednom řádku, určuje jazyk vizuálního formátu vodorovné mezery i svislé zarovnání. Stejně jako v příkladu výše, kde určuje AlignAllTop NSLayoutFormatOptions zarovnání všech zobrazení v řádku nebo sloupci na jejich vrcholech.

Některé příklady určení běžných omezení a gramatiky řetězců ve formátu vizuálu najdete v dodatku Jazyk vizuálního formátu společnosti Apple.

Shrnutí

Tato příručka představila vytváření a práci s omezeními automatického rozložení v jazyce C# na rozdíl od jejich grafického vytváření v iOS Designeru. Nejprve se podívala na použití ukotvení rozložení (NSLayoutAnchor) ke zpracování automatického rozložení. Dále ukázala, jak pracovat s omezeními rozložení (NSLayoutConstraint). Nakonec se zobrazí pomocí jazyka vizuálního formátu pro automatické rozložení.