Vytváření uživatelských rozhraní pro iOS v kódu v Xamarin.iOS
Uživatelské rozhraní aplikace pro iOS je jako výkladní skříň – aplikace obvykle získá jedno okno, ale může okno vyplnit tolik objektů, kolik potřebuje, a objekty a uspořádání se dají změnit v závislosti na tom, co chce aplikace zobrazit. Objekty v tomto scénáři – věci, které uživatel vidí – se nazývají Zobrazení. Pokud chcete vytvořit jednu obrazovku v aplikaci, zobrazení se vzájemně skládají v hierarchii zobrazení obsahu a hierarchie se spravuje jedním kontrolerem zobrazení. Aplikace s více obrazovkami mají více hierarchií zobrazení obsahu, z nichž každá má vlastní kontroler zobrazení a aplikace umístí zobrazení do okna a vytvoří jinou hierarchii zobrazení obsahu na základě obrazovky, na které je uživatel.
Následující diagram znázorňuje vztahy mezi oknem, zobrazeními, dílčími zobrazeními a kontrolerem zobrazení, které přenesou uživatelské rozhraní na obrazovku zařízení:
Tyto hierarchie zobrazení lze vytvořit pomocí Tvůrce rozhraní Xcode, ale je dobré mít základní znalosti o tom, jak pracovat zcela v kódu. Tento článek vás provede některými základními body, které vám pomůžou začít s vývojem uživatelského rozhraní jen pro kód.
Vytvoření projektu jen pro kód
Prázdná šablona projektu pro iOS
Nejprve vytvořte projekt pro iOS v sadě Visual Studio pomocí > projektu Nový projekt > Visual C# > i Telefon a iPad > aplikace pro iOS (Xamarin), jak je znázorněno níže:
Pak vyberte šablonu projektu Prázdná aplikace :
Šablona Prázdného projektu přidá do projektu 4 soubory:
- AppDelegate.cs – obsahuje podtřídu
UIApplicationDelegate,AppDelegatekterá se používá ke zpracování událostí aplikace z iOSu. Okno aplikace se vytvoří vAppDelegatemetodě 'sFinishedLaunching. - Main.cs – obsahuje vstupní bod pro aplikaci, který určuje třídu pro .
AppDelegate - Info.plist – soubor seznamu vlastností, který obsahuje informace o konfiguraci aplikace.
- Entitlements.plist – soubor seznamu vlastností, který obsahuje informace o možnostech a oprávněních aplikace.
Aplikace pro iOS se vytvářejí pomocí vzoru MVC. První obrazovka, kterou aplikace zobrazí, se vytvoří z řadiče kořenového zobrazení okna. Další podrobnosti o samotném vzoru MVC najdete v příručce Hello, iOS MultiScreen .
Implementace přidané AppDelegate šablonou vytvoří okno aplikace, z něhož existuje pouze jedna pro každou aplikaci pro iOS, a zpřístupní ji následujícím kódem:
public class AppDelegate : UIApplicationDelegate
{
public override UIWindow Window
{
get;
set;
}
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
{
// create a new window instance based on the screen size
Window = new UIWindow(UIScreen.MainScreen.Bounds);
// make the window visible
Window.MakeKeyAndVisible();
return true;
}
}
Pokud byste teď tuto aplikaci spustili, pravděpodobně se zobrazí výjimka, která hlásí, že Application windows are expected to have a root view controller at the end of application launch. Pojďme přidat kontroler a nastavit ho jako kořenový kontroler zobrazení aplikace.
Přidání kontroleru
Aplikace může obsahovat mnoho kontrolerů zobrazení, ale musí mít jeden řadič kořenového zobrazení pro řízení všech kontrolerů zobrazení. Přidejte do okna kontroler vytvořením UIViewController instance a jeho nastavením na Window.RootViewController vlastnost:
public class AppDelegate : UIApplicationDelegate
{
// class-level declarations
public override UIWindow Window
{
get;
set;
}
public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{
// create a new window instance based on the screen size
Window = new UIWindow(UIScreen.MainScreen.Bounds);
var controller = new UIViewController();
controller.View.BackgroundColor = UIColor.LightGray;
Window.RootViewController = controller;
// make the window visible
Window.MakeKeyAndVisible();
return true;
}
}
Každý kontroler má přidružené zobrazení, které je přístupné z View vlastnosti. Výše uvedený kód změní vlastnost UIColor.LightGray zobrazení BackgroundColor tak, aby byla viditelná, jak je znázorněno níže:
Tímto způsobem bychom mohli nastavit jakoukoli UIViewController podtřídu RootViewController , včetně kontrolerů z UIKitu i těch, které píšeme sami. Například následující kód přidá UINavigationController jako RootViewController:
public class AppDelegate : UIApplicationDelegate
{
// class-level declarations
public override UIWindow Window
{
get;
set;
}
public override bool FinishedLaunching(UIApplication application, NSDictionary launchOptions)
{
// create a new window instance based on the screen size
Window = new UIWindow(UIScreen.MainScreen.Bounds);
var controller = new UIViewController();
controller.View.BackgroundColor = UIColor.LightGray;
controller.Title = "My Controller";
var navController = new UINavigationController(controller);
Window.RootViewController = navController;
// make the window visible
Window.MakeKeyAndVisible();
return true;
}
}
Tím se vytvoří kontroler vnořený do navigačního kontroleru, jak je znázorněno níže:
Vytvoření kontroleru zobrazení
Teď, když jsme viděli, jak přidat kontroler jako RootViewController okno, pojďme se podívat, jak vytvořit vlastní kontroler zobrazení v kódu.
Přidejte novou třídu s názvem CustomViewController , jak je znázorněno níže:
Třída by měla dědit z UIViewController, která je v UIKit oboru názvů, jak je znázorněno:
using System;
using UIKit;
namespace CodeOnlyDemo
{
class CustomViewController : UIViewController
{
}
}
Inicializace zobrazení
UIViewController obsahuje metodu, ViewDidLoad která je volána při prvním načtení kontroleru View do paměti. Toto je vhodné místo pro inicializaci zobrazení, například nastavení vlastností.
Následující kód například přidá tlačítko a obslužnou rutinu události, která při stisknutí tlačítka nasdílí nový kontroler zobrazení do navigačního zásobníku:
using System;
using CoreGraphics;
using UIKit;
namespace CodyOnlyDemo
{
public class CustomViewController : UIViewController
{
public CustomViewController ()
{
}
public override void ViewDidLoad ()
{
base.ViewDidLoad ();
View.BackgroundColor = UIColor.White;
Title = "My Custom View Controller";
var btn = UIButton.FromType (UIButtonType.System);
btn.Frame = new CGRect (20, 200, 280, 44);
btn.SetTitle ("Click Me", UIControlState.Normal);
var user = new UIViewController ();
user.View.BackgroundColor = UIColor.Magenta;
btn.TouchUpInside += (sender, e) => {
this.NavigationController.PushViewController (user, true);
};
View.AddSubview (btn);
}
}
}
Pokud chcete tento kontroler načíst do aplikace a předvést jednoduchou navigaci, vytvořte novou instanci CustomViewController. Vytvořte nový navigační kontroler, předejte instanci kontroleru zobrazení a nastavte nový navigační kontroler na okno RootViewController v následujícím příkladu AppDelegate :
var cvc = new CustomViewController ();
var navController = new UINavigationController (cvc);
Window.RootViewController = navController;
Když se aplikace načte, načte se CustomViewController uvnitř navigačního kontroleru:
Kliknutím na toto tlačítko nasdílíte nový kontroler zobrazení do navigačního zásobníku:
Sestavení hierarchie zobrazení
V předchozím příkladu jsme začali vytvářet uživatelské rozhraní v kódu přidáním tlačítka do kontroleru zobrazení.
Uživatelská rozhraní iOS se skládají z hierarchie zobrazení. Další zobrazení, jako jsou popisky, tlačítka, posuvníky atd., se přidají jako dílčí zobrazení některých nadřazených zobrazení.
Pojďme například upravit CustomViewController přihlašovací obrazovku, kde uživatel může zadat uživatelské jméno a heslo. Obrazovka se skládá ze dvou textových polí a tlačítka.
Přidání textových polí
Nejprve odeberte tlačítko a obslužnou rutinu události, která byla přidána v části Inicializace zobrazení .
Přidejte ovládací prvek pro uživatelské jméno tak, že vytvoříte a inicializujete UITextField a pak ho přidáte do hierarchie zobrazení, jak je znázorněno níže:
class CustomViewController : UIViewController
{
UITextField usernameField;
public override void ViewDidLoad()
{
base.ViewDidLoad();
View.BackgroundColor = UIColor.Gray;
nfloat h = 31.0f;
nfloat w = View.Bounds.Width;
usernameField = new UITextField
{
Placeholder = "Enter your username",
BorderStyle = UITextBorderStyle.RoundedRect,
Frame = new CGRect(10, 82, w - 20, h)
};
View.AddSubview(usernameField);
}
}
Při vytváření objektu UITextFieldnastavíme Frame vlastnost tak, aby definovala její umístění a velikost. V iOSu je souřadnice 0,0 v levém horním rohu s +x vpravo a +y dolů. Po nastavení Frame spolu s několika dalšími vlastnostmi voláme View.AddSubview přidání do UITextField hierarchie zobrazení. Tím se vytvoří usernameField dílčí zobrazení UIView instance, na kterou View vlastnost odkazuje. Podview se přidá s pořadím vykreslování, které je vyšší než jeho nadřazené zobrazení, takže se zobrazí před nadřazeným zobrazením na obrazovce.
Aplikace se zahrnutými UITextField položkami je zobrazená níže:
Heslo můžeme přidat UITextField podobným způsobem, pouze tentokrát nastavíme SecureTextEntry vlastnost na true, jak je znázorněno níže:
public class CustomViewController : UIViewController
{
UITextField usernameField, passwordField;
public override void ViewDidLoad()
{
// keep the code the username UITextField
passwordField = new UITextField
{
Placeholder = "Enter your password",
BorderStyle = UITextBorderStyle.RoundedRect,
Frame = new CGRect(10, 114, w - 20, h),
SecureTextEntry = true
};
View.AddSubview(usernameField);
View.AddSubview(passwordField);
}
}
Nastavení SecureTextEntry = true skryje text zadaný UITextField uživatelem, jak je znázorněno níže:
Přidání tlačítka
Dále přidáme tlačítko, aby uživatel mohl odeslat uživatelské jméno a heslo. Tlačítko se přidá do hierarchie zobrazení stejně jako jakýkoli jiný ovládací prvek tak, že ho znovu předáte jako argument metodě nadřazeného zobrazení AddSubview .
Následující kód přidá tlačítko a zaregistruje obslužnou rutinu TouchUpInside události pro událost:
var submitButton = UIButton.FromType (UIButtonType.RoundedRect);
submitButton.Frame = new CGRect (10, 170, w - 20, 44);
submitButton.SetTitle ("Submit", UIControlState.Normal);
submitButton.TouchUpInside += (sender, e) => {
Console.WriteLine ("Submit button pressed");
};
View.AddSubview(submitButton);
Na tomto místě se teď zobrazí přihlašovací obrazovka, jak je znázorněno níže:
Na rozdíl od předchozích verzí iOSu je výchozí pozadí tlačítka průhledné. Změna vlastnosti tlačítka BackgroundColor se změní takto:
submitButton.BackgroundColor = UIColor.White;
Výsledkem bude čtvercové tlačítko místo typického zaobleného okraje. K získání zaoblené hrany použijte následující fragment kódu:
submitButton.Layer.CornerRadius = 5f;
Při těchto změnách bude zobrazení vypadat takto:
Přidání více zobrazení do hierarchie zobrazení
iOS poskytuje zařízení pro přidání více zobrazení do hierarchie zobrazení pomocí AddSubviews.
View.AddSubviews(new UIView[] { usernameField, passwordField, submitButton });
Přidání funkcí tlačítka
Když kliknete na tlačítko, uživatelé budou očekávat, že se něco stane. Například se zobrazí upozornění nebo navigace se provede na jinou obrazovku.
Pojďme do navigačního zásobníku přidat nějaký kód, který nasdílí druhý kontroler zobrazení.
Nejprve vytvořte druhý kontroler zobrazení:
var loginVC = new UIViewController () { Title = "Login Success!"};
loginVC.View.BackgroundColor = UIColor.Purple;
Pak do události přidejte funkci TouchUpInside :
submitButton.TouchUpInside += (sender, e) => {
this.NavigationController.PushViewController (loginVC, true);
};
Navigace je znázorněná níže:
Všimněte si, že když používáte navigační kontroler, iOS ve výchozím nastavení dává aplikaci navigační panel a tlačítko zpět, které vám umožní procházet zásobníkem.
Iterace prostřednictvím hierarchie zobrazení
Je možné iterovat hierarchii dílčího zobrazení a vybrat jakékoli konkrétní zobrazení. Pokud například chcete najít každý z nich UIButton a dát tomuto tlačítku jiný BackgroundColor, můžete použít následující fragment kódu.
foreach(var subview in View.Subviews)
{
if (subview is UIButton)
{
var btn = subview as UIButton;
btn.BackgroundColor = UIColor.Green;
}
}
To však nebude fungovat, pokud je zobrazení iterated pro jako UIView všechna zobrazení se vrátí jako UIView objekty přidané do nadřazeného zobrazení samy dědí UIView.
Manipulace s obměnou
Pokud uživatel otočí zařízení na šířku, ovládací prvky se odpovídajícím způsobem nedají změnit, jak ukazuje následující snímek obrazovky:
Jedním ze způsobů, jak to opravit, je nastavení AutoresizingMask vlastnosti v každém zobrazení. V tomto případě chceme, aby ovládací prvky byly roztaženy vodorovně, takže bychom nastavili každý z nich AutoresizingMask. Následující příklad je určený pro usernameField, ale totéž by bylo nutné použít pro každou miniaplikaci v hierarchii zobrazení.
usernameField.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
Když teď otočíme zařízení nebo simulátor, všechno se roztáhne, aby vyplnilo další místo, jak je znázorněno níže:
Vytváření vlastních zobrazení
Kromě použití ovládacích prvků, které jsou součástí sady UIKit, lze také použít vlastní zobrazení. Vlastní zobrazení lze vytvořit děděním a přepsáním UIView Draw. Vytvoříme vlastní zobrazení a přidáme ho do hierarchie zobrazení, abychom si to ukázali.
Dědění z uiView
První věcí, kterou musíme udělat, je vytvoření třídy pro vlastní zobrazení. Provedeme to pomocí šablony Třídy v sadě Visual Studio a přidáme prázdnou třídu s názvem CircleView. Základní třída by měla být nastavena na UIView, kterou si vzpomeneme je v UIKit oboru názvů. Budeme také potřebovat System.Drawing obor názvů. Ostatní různé System.* obory názvů se v tomto příkladu nepoužijí, takže je můžete odebrat.
Třída by měla vypadat takto:
using System;
namespace CodeOnlyDemo
{
class CircleView : UIView
{
}
}
Kreslení v uživatelském zobrazení
Každá UIView má metodu Draw , která je volána systémem, když je třeba nakreslit. Draw by nikdy neměl být volána přímo. Systém ho volá během zpracování smyčky spuštění. Při prvním procházení smyčky spuštění po přidání zobrazení do hierarchie zobrazení je volána jeho Draw metoda. Následná volání, ke kterým dojde Draw , když je zobrazení označeno jako nutné kreslit voláním buď SetNeedsDisplay nebo SetNeedsDisplayInRect v zobrazení.
Do našeho zobrazení můžeme přidat kreslicí kód přidáním takového kódu do přepsáné Draw metody, jak je znázorněno níže:
public override void Draw(CGRect rect)
{
base.Draw(rect);
//get graphics context
using (var g = UIGraphics.GetCurrentContext())
{
// set up drawing attributes
g.SetLineWidth(10.0f);
UIColor.Green.SetFill();
UIColor.Blue.SetStroke();
// create geometry
var path = new CGPath();
path.AddArc(Bounds.GetMidX(), Bounds.GetMidY(), 50f, 0, 2.0f * (float)Math.PI, true);
// add geometry to graphics context and draw
g.AddPath(path);
g.DrawPath(CGPathDrawingMode.FillStroke);
}
}
Vzhledem k tomu CircleView , že je , UIViewmůžeme také nastavit UIView vlastnosti. Můžeme například nastavit v konstruktoru BackgroundColor :
public CircleView()
{
BackgroundColor = UIColor.White;
}
Abychom mohli použít právě vytvořenou CircleView , můžeme ho buď přidat jako dílčí zobrazení do hierarchie zobrazení v existujícím kontroleru, jak jsme to udělali s předchozími UILabels daty UIButton , nebo ho můžeme načíst jako zobrazení nového kontroleru. Pojďme to udělat.
Načtení zobrazení
UIViewController má metodu, LoadView která je volána kontrolerem pro vytvoření jeho zobrazení. Toto je vhodné místo pro vytvoření zobrazení a jeho přiřazení k vlastnosti kontroleru View .
Nejprve potřebujeme kontroler, takže vytvořte novou prázdnou třídu s názvem CircleController.
Přidejte CircleController následující kód, který nastaví View na hodnotu CircleView (neměli byste volat implementaci base v přepsání):
using UIKit;
namespace CodeOnlyDemo
{
class CircleController : UIViewController
{
CircleView view;
public override void LoadView()
{
view = new CircleView();
View = view;
}
}
}
Nakonec musíme řadič prezentovat za běhu. Pojďme to udělat přidáním obslužné rutiny události na tlačítko odeslat, které jsme přidali dříve, následujícím způsobem:
submitButton.TouchUpInside += delegate
{
Console.WriteLine("Submit button clicked");
//circleController is declared as class variable
circleController = new CircleController();
PresentViewController(circleController, true, null);
};
Když teď spustíme aplikaci a klepneme na tlačítko Odeslat, zobrazí se nové zobrazení s kruhem:
Vytvoření úvodní obrazovky
Úvodní obrazovka se zobrazí, když se vaše aplikace spustí jako způsob, jak zobrazit uživatelům, že reaguje. Protože se při načítání aplikace zobrazí úvodní obrazovka, nedá se vytvořit v kódu, protože aplikace se stále načítá do paměti.
Když v sadě Visual Studio vytvoříte projekt pro iOS, zobrazí se vám spouštěcí obrazovka ve formě souboru .xib, který najdete ve složce Zdroje v projektu.
Můžete ho upravit tak, že na něj dvakrát kliknete a otevřete ho v Tvůrci rozhraní Xcode.
Apple doporučuje, aby se soubor .xib nebo Storyboard používal pro aplikace, které cílí na iOS 8 nebo novější, když spustíte některý soubor v tvůrci rozhraní Xcode, můžete použít třídy velikostí a automatické rozložení k přizpůsobení rozložení tak, aby vypadalo dobře a zobrazovalo se správně pro všechny velikosti zařízení. Statickou spouštěcí image lze použít kromě obrázku .xib nebo Storyboard, který umožňuje podporu pro aplikace, které cílí na starší verze.
Další informace o vytvoření úvodní obrazovky najdete v následujících dokumentech:
Důležité
Od iOSu 9 společnost Apple doporučuje, aby se scénáře používaly jako primární metoda vytvoření úvodní obrazovky.
Vytvoření spouštěcí image pro aplikace před iOSem 8
Statický obrázek lze použít kromě spouštěcí obrazovky .xib nebo Storyboard, pokud aplikace cílí na verze starší než iOS 8.
Tento statický obrázek můžete nastavit v souboru Info.plist nebo jako katalog assetů (pro iOS 7) ve vaší aplikaci. Pro každou velikost zařízení (320x480, 640x960, 640x1136) budete muset zadat samostatné image, na kterých může vaše aplikace běžet. Další informace o velikostech obrazovky Pro spuštění najdete v průvodci spuštěním obrázků obrazovky.
Důležité
Pokud vaše aplikace nemá žádnou úvodní obrazovku, můžete si všimnout, že se plně nevejde na obrazovku. Pokud se jedná o tento případ, nezapomeňte zahrnout alespoň obrázek 640x1136 s názvem Default-568@2x.png Info.plist.
Shrnutí
Tento článek popisuje, jak vyvíjet aplikace pro iOS programově v sadě Visual Studio. Podívali jsme se na to, jak vytvořit projekt z prázdné šablony projektu, diskutovat o tom, jak vytvořit a přidat řadič kořenového zobrazení do okna. Pak jsme ukázali, jak pomocí ovládacích prvků z UIKit vytvořit hierarchii zobrazení v rámci kontroleru pro vývoj obrazovky aplikace. Dále jsme prozkoumali, jak vytvořit rozložení zobrazení odpovídajícím způsobem v různých orientacích a viděli jsme, jak vytvořit vlastní zobrazení podtřídami UIViewa jak načíst zobrazení v rámci kontroleru. Nakonec jsme prozkoumali, jak do aplikace přidat úvodní obrazovku.