Základy iOS Designeru
Tato příručka představuje Xamarin Designer pro iOS. Ukazuje, jak pomocí iOS Designeru vizuálně rozložit ovládací prvky, jak získat přístup k těmto ovládacím prvkům v kódu a jak upravit vlastnosti.
Upozorňující
Návrhář pro iOS byl v sadě Visual Studio 2019 verze 16.8 a Visual Studio 2019 pro Mac verze 8.8 zastaralý a odebrán v sadě Visual Studio 2019 verze 16.9 a Visual Studio pro Mac verze 8.9. Doporučený způsob, jak vytvářet uživatelská rozhraní pro iOS, je přímo na Macu se systémem Xcode. Další informace naleznete v tématu Navrhování uživatelských rozhraní pomocí Xcode.
Xamarin Designer pro iOS je vizuální návrhář rozhraní podobný Tvůrci rozhraní Xcode a Android Designeru. Některé z jejích mnoha funkcí zahrnují bezproblémovou integraci se sadou Visual Studio pro Windows a Mac, úpravy přetažením myší, rozhraní pro nastavení obslužných rutin událostí a schopnost vykreslovat vlastní ovládací prvky.
Požadavky
IOS Designer je k dispozici v Visual Studio pro Mac a sadě Visual Studio 2017 a novějších ve Windows. V sadě Visual Studio pro Windows vyžaduje iOS Designer připojení k správně nakonfigurovanému hostiteli sestavení Mac, i když Xcode nemusí být spuštěný.
Tato příručka předpokládá znalost obsahu popsaného v příručkách Začínáme.
Jak funguje iOS Designer
Tato část popisuje, jak iOS Designer usnadňuje vytvoření uživatelského rozhraní a jeho připojení k kódu.
IOS Designer umožňuje vývojářům vizuálně navrhovat uživatelské rozhraní aplikace. Jak je popsáno v průvodci Úvodem do scénářů , scénář popisuje obrazovky (kontrolery zobrazení), které tvoří aplikaci, prvky rozhraní (zobrazení) umístěné na těchto řadičích zobrazení a celkový navigační tok aplikace.
Kontroler zobrazení má dvě části: vizuální reprezentaci v iOS Designeru a přidruženou třídu jazyka C#:
Ve výchozím stavu kontroler zobrazení neposkytuje žádné funkce; musí být naplněn ovládacími prvky. Tyto ovládací prvky jsou umístěny v zobrazení kontroleru zobrazení, obdélníková oblast, která obsahuje veškerý obsah obrazovky. Většina kontrolerů zobrazení obsahuje běžné ovládací prvky, jako jsou tlačítka, popisky a textová pole, jak je znázorněno na následujícím snímku obrazovky, který zobrazuje kontroler zobrazení obsahující tlačítko:
Některé ovládací prvky, jako jsou popisky obsahující statický text, je možné přidat do kontroleru zobrazení a nechat je samostatně. Ovládací prvky se ale musí přizpůsobit prostřednictvím kódu programu. Například tlačítko přidané výše by mělo při klepnutí něco udělat, takže obslužná rutina události musí být přidána do kódu.
Aby bylo možné získat přístup k tlačítku v kódu a manipulovat s ním, musí mít jedinečný identifikátor. Zadejte jedinečný identifikátor tak, že vyberete tlačítko, otevřete Panel vlastností a nastavíte jeho pole Název na hodnotu, například SubmitButton:
Teď, když má tlačítko název, je možné k němu přistupovat v kódu. Jak to ale funguje?
V oblasti řešení přejděte na ViewController.cs a kliknutím na indikátor zpřístupnění zjistíte, že definice třídy kontroleru ViewController zobrazení zahrnuje dva soubory, z nichž každá obsahuje částečnou definici třídy:
ViewController.cs by měly být vyplněny vlastním kódem souvisejícím s
ViewControllertřídou. V tomto souboru může třída reagovat na různé metody životního cyklu kontroleru zobrazení iOS, přizpůsobit uživatelské rozhraní a reagovat na vstup uživatele,ViewControllerjako jsou klepnutí na tlačítko.ViewController.designer.cs je vygenerovaný soubor vytvořený návrhářem pro iOS, který mapuje vizuálně vytvořené rozhraní na kód. Vzhledem k tomu, že změny v tomto souboru budou přepsány, nemělo by být změněno. Deklarace vlastností v tomto souboru umožňují kódu ve
ViewControllertřídě přistupovat podle názvu ovládací prvky nastavené v iOS Designeru. Otevření ViewController.designer.cs odhalí následující kód:
namespace Designer
{
[Register ("ViewController")]
partial class ViewController
{
[Outlet]
[GeneratedCode ("iOS Designer", "1.0")]
UIKit.UIButton SubmitButton { get; set; }
void ReleaseDesignerOutlets ()
{
if (SubmitButton != null) {
SubmitButton.Dispose ();
SubmitButton = null;
}
}
}
}
Deklarace SubmitButton vlastnosti spojuje celou ViewController třídu – nejen soubor ViewController.designer.cs – s tlačítkem definovaným ve scénáři. Vzhledem k tomu , ViewController.cs definuje část ViewController třídy, má přístup k SubmitButton.
Následující snímek obrazovky ukazuje, že IntelliSense teď rozpozná SubmitButton odkaz v ViewController.cs:
Tato část ukazuje, jak vytvořit tlačítko v iOS Designeru a získat přístup k tomuto tlačítku v kódu.
Zbývající část tohoto dokumentu poskytuje další přehled o iOS Designeru.
Základy iOS Designeru
Tato část představuje části iOS Designeru a poskytuje prohlídku jejích funkcí.
Spuštění iOS Designeru
Projekty Xamarin.iOS vytvořené pomocí Visual Studio pro Mac obsahují scénář. Pokud chcete zobrazit obsah scénáře, poklikejte na soubor .storyboard v oblasti řešení:
Funkce iOS Designeru
IOS Designer má šest primárních částí:
- Návrh zařízení Surface – primární pracovní prostor iOS Designeru. Zobrazuje se v oblasti dokumentu, umožňuje vizuální konstrukci uživatelských rozhraní.
- Panel nástrojů Omezení – Umožňuje přepínání mezi režimem úprav rámce a režimem úprav omezení, dvěma různými způsoby umístění prvků v uživatelském rozhraní.
- Sada nástrojů – Zobrazí seznam kontrolerů, objektů, ovládacích prvků, zobrazení dat, rozpoznávání gest, oken a pruhů, které lze přetáhnout na návrhovou plochu a přidat do uživatelského rozhraní.
- Panel vlastností – zobrazuje vlastnosti vybraného ovládacího prvku, včetně identity, vizuálních stylů, přístupnosti, rozložení a chování.
- Osnova dokumentu – zobrazuje strom ovládacích prvků, které tvoří rozložení pro upravované rozhraní. Kliknutím na položku ve stromu ji vyberete v iOS Designeru a zobrazí se její vlastnosti v oblasti Vlastnosti. To je užitečné pro výběr určitého ovládacího prvku v hluboko vnořeném uživatelském rozhraní.
- Dolní panel nástrojů – obsahuje možnosti pro změnu způsobu zobrazení souboru .storyboard nebo .xib, včetně zařízení, orientace a přiblížení.
Návrh pracovního postupu
Přidání ovládacího prvku do rozhraní
Pokud chcete přidat ovládací prvek do rozhraní, přetáhněte ho ze sady nástrojů a umístěte ho na návrhovou plochu. Při přidávání nebo umístění ovládacího prvku, svislých a vodorovných pokynů se zvýrazňují běžně používané pozice rozložení, jako jsou svislé středy, vodorovné středy a okraje:
Modrá tečkovaná čára v příkladu výše poskytuje vodítko vodorovného zarovnání ve středu, které vám pomůže s umístěním tlačítka.
Příkazy místní nabídky
Na návrhové ploše i v osnově dokumentu je k dispozici místní nabídka. Tato nabídka poskytuje příkazy pro vybraný ovládací prvek a jeho nadřazený prvek, což je užitečné při práci se zobrazeními v vnořené hierarchii:
Panel nástrojů Omezení
Panel nástrojů omezení byl aktualizován a nyní se skládá ze dvou ovládacích prvků: režim úprav rámečku / přepínač režimu úprav omezení a aktualizační omezení / tlačítko aktualizovat rámce.
Režim úprav rámce / přepínač režimu úprav omezení
V předchozích verzích iOS Designeru klikněte na již vybrané zobrazení na návrhové ploše přepnuto mezi režimem úprav rámečku a režimem úprav omezení. Ovládací prvek přepínače na panelu nástrojů omezení teď přepíná mezi těmito režimy úprav.
- Režim úprav rámce:
- Režim úprav omezení:
Tlačítko Aktualizovat omezení / aktualizovat rámce
Tlačítko pro omezení aktualizace nebo aktualizace snímků se nachází napravo od přepínače režimu úprav snímků nebo režimu úprav omezení.
- V režimu úprav snímků upravíte kliknutím na toto tlačítko rámečky všech vybraných prvků tak, aby odpovídaly jejich omezením.
- V režimu úprav omezení upravíte kliknutím na toto tlačítko omezení všech vybraných prvků tak, aby odpovídaly jejich snímkům.
Dolní panel nástrojů
Dolní panel nástrojů nabízí způsob, jak vybrat zařízení, orientaci a přiblížení použité k zobrazení scénáře nebo souboru .xib v iOS Designeru:
Zařízení a orientace
Po rozbalení se na dolním panelu nástrojů zobrazí všechna zařízení, orientace a úpravy platné pro aktuální dokument. Kliknutím na ně změníte zobrazení zobrazené na návrhové ploše.
Všimněte si, že výběrem zařízení a orientace se změní jenom způsob zobrazení náhledu návrhu v iOS Designeru. Bez ohledu na aktuální výběr se nově přidaná omezení použijí ve všech zařízeních a orientacích, pokud se k zadání jiného nastavení nepoužije tlačítko Upravit vlastnosti .
Pokud jsou třídy velikostí povolené, zobrazí se na rozbaleném dolním panelu nástrojů tlačítko Upravit vlastnosti. Kliknutím na tlačítko Upravit vlastnosti se zobrazí možnosti pro vytvoření variace rozhraní na základě třídy velikosti reprezentované vybraným zařízením a orientací. Zvažte následující příklady:
- Pokud je vybrán i Telefon SE / Na výšku, automaticky otevírané okno poskytne možnosti pro vytvoření variace rozhraní pro kompaktní šířku, běžnou výšku třídy.
- Pokud je vybraný iPad Pro 9.7" / / Na šířku na celou obrazovku, automaticky otevírané okno poskytne možnosti pro vytvoření variace rozhraní pro běžnou šířku, běžnou třídu velikosti výšky.
Ovládací prvky lupy
Návrhová plocha podporuje přiblížení pomocí několika ovládacích prvků:
Mezi ovládací prvky patří:
- Zvětšení podle velikosti
- Oddálit
- Přiblížit
- Skutečná velikost (velikost 1:1 pixelů)
Tyto ovládací prvky upraví lupu na návrhové ploše. Nemají vliv na uživatelské rozhraní aplikace za běhu.
Panel vlastností
Pomocí Panelu vlastností můžete upravit identitu, vizuální styly, přístupnost a chování ovládacího prvku. Následující snímek obrazovky znázorňuje možnosti panelu vlastností tlačítka:
Oddíly Panel vlastností
Panel vlastností obsahuje tři části:
- Widget – hlavní vlastnosti ovládacího prvku, jako je název, třída, vlastnosti stylu atd. Vlastnosti pro správu obsahu ovládacího prvku jsou obvykle umístěny zde.
- Rozložení – Vlastnosti, které sledují umístění a velikost ovládacího prvku, včetně omezení a rámců, jsou zde uvedeny.
- Události – Zde jsou uvedeny události a obslužné rutiny událostí. Užitečné pro zpracování událostí, jako je dotykové ovládání, klepnutí, přetažení atd. Události lze zpracovat také přímo v kódu.
Úprava vlastností v oblasti Vlastnosti
Kromě vizuálních úprav na návrhové ploše podporuje iOS Designer úpravy vlastností v oblasti Vlastnosti. Dostupné vlastnosti se mění na základě vybraného ovládacího prvku, jak je znázorněno na následujících snímcích obrazovky:
Důležité
V části Identita na panelu Vlastností se teď zobrazuje pole Modul . Tuto část je nutné vyplnit pouze v případě, že spolupracujete s třídami Swiftu. Slouží k zadání názvu modulu pro třídy Swiftu, které jsou oborem názvů.
Výchozí hodnoty
Mnoho vlastností v oblasti Vlastností nezobrazuje žádnou hodnotu ani výchozí hodnotu. Kód aplikace však může tyto hodnoty stále upravovat. Panel Vlastností nezobrazuje hodnoty nastavené v kódu.
Obslužné rutiny událostí
Pokud chcete určit vlastní obslužné rutiny událostí pro různé události, použijte kartu Události v oblasti Vlastnosti. Například na následujícím snímku obrazovky HandleClick metoda zpracovává událost Touch Up Inside tlačítka:
Po zadání obslužné rutiny události musí být do odpovídající třídy kontroleru zobrazení přidána metoda se stejným názvem. V opačném případě dojde k výjimce unrecognized selector po klepnutí na tlačítko:
Všimněte si, že po zadání obslužné rutiny události v oblasti Properties Pad se iOS Designer okamžitě otevře odpovídající soubor kódu a nabídne vložení deklarace metody.
Příklad, který používá vlastní obslužné rutiny událostí, najdete v úvodní příručce Hello, iOS.
Zobrazení osnovy
IOS Designer může také zobrazit hierarchii rozhraní ovládacích prvků jako osnovu. Osnova je k dispozici výběrem karty Osnova dokumentu, jak je znázorněno níže:
Vybraný ovládací prvek v zobrazení osnovy zůstane synchronizovaný s vybraným ovládacím prvku na návrhové ploše. Tato funkce je užitečná pro výběr položky z hluboko vnořené hierarchie rozhraní.
Návrat k Xcode
Je možné použít iOS Designer a Xcode Interface Builder zaměnitelně. Chcete-li otevřít scénář nebo soubor .xib v Xcode Interface Builderu, klikněte pravým tlačítkem myši na soubor a vyberte Otevřít v Xcode > Interface Builder, jak je znázorněno na následujícím snímku obrazovky:
Po provedení úprav v Xcode Interface Builderu soubor uložte a vraťte se do Visual Studio pro Mac. Změny se budou synchronizovat s projektem Xamarin.iOS.
Podpora .xib
IOS Designer podporuje vytváření, úpravy a správu souborů .xib. Jedná se o soubory XML, které respresentní jedno vlastní zobrazení, které lze přidat do hierarchie zobrazení aplikace. Soubor .xib obecně představuje rozhraní pro jedno zobrazení nebo obrazovku v aplikaci, zatímco storyboard představuje mnoho obrazovek a přechody mezi nimi.
Existuje mnoho názorů na to, které řešení – soubory .xib, scénáře nebo kód – nejlépe funguje při vytváření a údržbě uživatelského rozhraní. Ve skutečnosti neexistuje žádné dokonalé řešení a vždy stojí za zvážení nejlepšího nástroje pro práci. To znamená, že soubory .xib jsou obecně nejvýkonnější, když se používají k reprezentaci vlastního zobrazení potřebného na více místech v aplikaci, jako je například vlastní buňka zobrazení tabulky.
Další dokumentaci k používání souborů .xib najdete v následujících návodech:
- Použití šablony View .xib
- Vytvoření vlastní tabulky TableViewCell pomocí objektu .xib
- Vytvoření úvodní obrazovky pomocí souboru .xib
Další informace týkající se použití scénářů najdete v tématu Úvod do scénářů.
Tato a další příručky související s iOS Designerem odkazují na použití scénářů jako standardního přístupu k vytváření uživatelských rozhraní, protože většina nových šablon projektů Xamarin.iOS ve výchozím nastavení poskytuje scénáře.
Shrnutí
Tato příručka poskytla úvod do iOS Designeru, který popisuje jeho funkce a osnovu nástrojů, které nabízí pro navrhování krásných uživatelských rozhraní.