Vytváření uživatelských rozhraní iOS v kódu v Xamarin. iOS

Uživatelské rozhraní aplikace pro iOS je jako prezentace – aplikace obvykle získá jedno okno, ale může okno vyplnit až tolik objektů, kolik je potřeba, a objekty a uspořádání lze změnit v závislosti na tom, co aplikace chce zobrazit. Objekty v tomto scénáři – to, co uživatel uvidí – se nazývají zobrazení. Aby bylo možné v aplikaci vytvořit jednu obrazovku, zobrazení jsou v hierarchii zobrazení obsahu navzájemně navrstvená v hierarchii zobrazení obsahu a tato hierarchie se spravuje pomocí jediného kontroleru zobrazení. Aplikace s více obrazovkami mají v různých hierarchiích zobrazení obsahu, z nichž každý má vlastní kontroler zobrazení, a v okně zobrazení umístění aplikací k vytvoření jiné hierarchie zobrazení obsahu na základě obrazovky, na které je uživatel zapnutý.

Vytvoření projektu pouze s kódem

aplikace pro iOS jsou sestavené pomocí vzoru MVC. První obrazovka, kterou aplikace zobrazuje, je vytvořena z kořenového kontroleru zobrazení okna. Další podrobnosti o samotném vzoru MVC najdete v příručce Hello, iOS na více obrazovkách .

Implementace pro AppDelegate Přidání šablonou vytvoří okno aplikace, pro které je k dispozici pouze jedna z nich pro každou aplikaci iOS, a umožňuje ji zobrazit pomocí následujícího kódu:

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 jste chtěli spustit tuto aplikaci nyní, pravděpodobně dojde k výjimce oznamující, že Application windows are expected to have a root view controller at the end of application launch . Pojďme přidat kontroler a dát mu kořenový kontroler zobrazení aplikace.

Přidání kontroleru

Vaše aplikace může obsahovat mnoho řadičů zobrazení, ale k řízení všech řadičů zobrazení musí mít jeden kořenový kontroler zobrazení. Přidejte do okna kontroler tak, že vytvoříte UIViewController instanci a nanastavíte ji 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 zobrazení na tak, aby se zobrazila BackgroundColorUIColor.LightGray , jak je vidět níže:

V takovém případě můžeme nastavit jakoukoli UIViewController podtřídu stejně RootViewController , včetně řadičů z UIKit, a také zápisů dodržovali. 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ý v rámci řídicího panelu, jak je znázorněno níže:

Vytvoření kontroleru zobrazení

Teď, když jsme viděli, jak jako okno Přidat kontroler RootViewController , se podívejme, 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 , což je v UIKit oboru názvů, jak je znázorněno níže:

using System;
using UIKit;

namespace CodeOnlyDemo
{
    class CustomViewController : UIViewController
    {
    }
}

Inicializace zobrazení

UIViewController obsahuje metodu nazvanou ViewDidLoad , která je volána při prvním načtení kontroleru zobrazení do paměti. Toto je vhodné místo pro inicializaci zobrazení, jako je například nastavení vlastností.

Například následující kód přidá tlačítko a obslužnou rutinu události pro vložení nového kontroleru zobrazení do navigačního zásobníku při stisknutí tlačítka:

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

        }
    }
}

Chcete-li načíst tento kontroler do aplikace a předvést jednoduchou navigaci, vytvořte novou instanci CustomViewController . Vytvořte nový navigační kontroler, předejte svou instanci kontroleru zobrazení a nastavte nový navigační kontroler na okno RootViewControllerAppDelegate jako dříve:

var cvc = new CustomViewController ();

var navController = new UINavigationController (cvc);

Window.RootViewController = navController;

Teď, když se aplikace načte, se CustomViewController načte do navigačního kontroleru:

Kliknutím na tlačítko se přidá nový kontroler zobrazení do navigačního zásobníku:

Sestavování 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 podzobrazení některých nadřazených zobrazení.

Pojďme například upravit a CustomViewController vytvořit přihlašovací obrazovku, kde může uživatel zadat uživatelské jméno a heslo. Obrazovka se skládá ze dvou textových polí a tlačítka.

Přidávání textových polí

Nejprve odeberte tlačítko a obslužnou rutinu události, která byla přidána do čá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);
    }
}

Když vytvoříme UITextField , nastavíme Frame vlastnost tak, aby definovala její polohu a velikost. V iOS je souřadnice 0, 0 v levém horním rohu s + x vpravo a + a dolů. Po nastavení Frame spolu s několika dalšími vlastnostmi zavoláme View.AddSubview k přidání do UITextField hierarchie zobrazení. Tím se usernameField vytvoří podzobrazení UIView instance, na kterou View odkazuje vlastnost. Dílčí zobrazení je přidáno s pořadím z, které je vyšší než jeho nadřazené zobrazení, takže se zobrazí před nadřazeným zobrazením na obrazovce.

Níže uvedená aplikace obsahuje následující UITextField :

UITextFieldK heslu můžeme přidat podobným způsobem, ale v tuto chvíli nastavíme SecureTextEntry vlastnost na hodnotu 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 tím, že ho znovu předá jako argument metodě nadřazeného AddSubview zobrazení.

Následující kód přidá tlačítko a zaregistruje obslužnou rutinu události pro TouchUpInside 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);

Teď se 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 transparentní. Při změně vlastnosti tlačítka BackgroundColor se změní toto:

submitButton.BackgroundColor = UIColor.White;

Výsledkem bude čtvercové tlačítko, nikoli typické zaoblené tlačítko s okraji. 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 možnost přidat do hierarchie zobrazení více zobrazení pomocí AddSubviews .

View.AddSubviews(new UIView[] { usernameField, passwordField, submitButton });

Přidání funkce tlačítka

Po kliknutí na tlačítko budou uživatelé očekávat, že se něco stane. Například se zobrazí upozornění nebo se provede navigace na jinou obrazovku.

Přidejme kód pro nahánění druhého kontroleru zobrazení do zásobníku navigace.

Nejprve vytvořte druhý kontroler zobrazení:

var loginVC = new UIViewController () { Title = "Login Success!"};
loginVC.View.BackgroundColor = UIColor.Purple;

Potom do události přidejte TouchUpInside funkce:

submitButton.TouchUpInside += (sender, e) => {
                this.NavigationController.PushViewController (loginVC, true);
            };

Navigace je znázorněna níže:

Všimněte si, že když použijete 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í se vrátit do zásobníku.

Iterace v hierarchii zobrazení

Je možné iterovat v hierarchii dílčího zobrazení a vybrat jakékoli konkrétní zobrazení. Pokud například chcete najít jednotlivá tlačítka a dát jim jiné, můžete použít UIButton následující fragment BackgroundColor kódu.

foreach(var subview in View.Subviews)
{
    if (subview is UIButton)
    {
         var btn = subview as UIButton;
         btn.BackgroundColor = UIColor.Green;
    }
}

To ale nebude fungovat, pokud iterované zobrazení je , protože všechna zobrazení se vrátí jako , protože objekty přidané do nadřazeného zobrazení samotné UIViewUIView dědí UIView .

Zpracování rotace

Pokud uživatel otočí zařízení do orientace na šířku, ovládací prvky nebudou měnit velikost odpovídajícím způsobem, jak je znázorněno na následujícím snímku obrazovky:

Jedním ze způsob, jak to vyřešit, je AutoresizingMask nastavit vlastnost pro každé zobrazení. V tomto případě chceme, aby se ovládací prvky roztáhly vodorovně, takže bychom nastavili každý AutoresizingMask . Následující příklad je pro , ale totéž by bylo potřeba použít pro usernameField každou pomůcku v hierarchii zobrazení.

usernameField.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;

Když teď otočíme zařízení nebo simulátor, vše 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í UIKitu, je možné použít také vlastní zobrazení. Vlastní zobrazení lze vytvořit tak, že zdědíte z a UIView přepíšete Draw . Pojďme vytvořit vlastní zobrazení a přidat ho do hierarchie zobrazení, aby bylo možné si ho předvést.

Dědění z UIView

První věc, kterou musíme udělat, je vytvoření třídy pro vlastní zobrazení. Uděláme to pomocí šablony třídy v Visual Studio přidáme prázdnou třídu s názvem . Základní třída by měla být nastavená na UIView , což si připomínáme, je v oboru UIKit názvů . Budeme také potřebovat obor System.Drawing názvů . Ostatní různé obory názvů se v tomto příkladu System.* nebudou používat, takže je můžete odebrat.

Třída by měla vypadat takhle:

using System;

namespace CodeOnlyDemo
{
    class CircleView : UIView
    {
    }
}

Kreslení v objektu UIView

Každý UIView má Draw metodu, kterou volá systém, když je potřeba ji vykreslit. Draw by nikdy neměly být volány přímo. Systém ho volá během zpracování smyčky spuštění. Při prvním spuštění smyčky po přidání zobrazení do hierarchie zobrazení se volá Draw jeho metoda. Další volání, ke kterým dojde, když je zobrazení označeno jako nutné vykreslit voláním Draw nebo SetNeedsDisplay v SetNeedsDisplayInRect zobrazení.

Do našeho zobrazení můžeme přidat kód pro kreslení přidáním takového kódu do přepsané 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 CircleView k UIView tomu, že je , můžeme také nastavit UIView vlastnosti. Můžeme například nastavit v BackgroundColor konstruktoru :

public CircleView()
{
    BackgroundColor = UIColor.White;
}

Pokud chceme použít právě vytvořený kontroler, můžeme ho buď přidat jako dílčí zobrazení do hierarchie zobrazení v existujícím kontroleru, jako jsme to udělali s a dříve, nebo ho můžeme načíst jako zobrazení nového CircleViewUILabelsUIButton kontroleru. Pojďme se do toho pustit.

Načtení zobrazení

UIViewController má metodu s LoadView názvem , kterou kontroler volá k vytvoření jeho zobrazení. Toto je vhodné místo pro vytvoření zobrazení a jeho přiřazení k vlastnosti View kontroleru.

Nejprve potřebujeme kontroler, takže vytvořte novou prázdnou třídu s názvem CircleController .

V CircleController souboru přidejte následující kód, který nastaví na hodnotu (v přepsání byste ViewCircleView neměli volat implementaci base ):

using UIKit;

namespace CodeOnlyDemo
{
    class CircleController : UIViewController
    {
        CircleView view;

        public override void LoadView()
        {
            view = new CircleView();
            View = view;
        }
    }
}

Nakonec musíme kontroler prezentovat za běhu. Pojďme to udělat přidáním obslužné rutiny události na tlačítko odeslání, 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í spouštěcí obrazovky

Když se aplikace spustí jako způsob, jak uživatelům zobrazit, že reaguje, zobrazí se spouštěcí obrazovka. Protože se při načítání aplikace zobrazí spouštěcí obrazovka, není možné ji vytvořit v kódu, protože aplikace se stále načítá do paměti.

Můžete ho upravit tak, že na něj poklikáte a otevřete ho v Interface Builder 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 soubor v Xcode Interface Builder, můžete pomocí tříd velikostí a automatického rozložení přizpůsobit rozložení tak, aby vypadalo dobře a správně se zobrazuje pro všechny velikosti zařízení. Kromě souboru .xib nebo Storyboard je možné použít statickou spouštěcí image, která umožňuje podporu pro aplikace cílené na starší verze.

Další informace o vytvoření spouštěcí obrazovky najdete v následujících dokumentech:

• Vytvoření spouštěcí obrazovky pomocí souboru .xib
• Správa spouštěcích obrazovek pomocí scénářů

Vytvoření spouštěcí image pro aplikace před iOSem 8

Pokud aplikace cílí na verze starší než iOS 8, můžete kromě spouštěcí obrazovky .xib nebo Storyboard použít i statickou image.

Tento statický obrázek je možné nastavit v souboru Info.plist nebo jako katalog assetů (pro iOS 7) ve vaší aplikaci. Pro každou velikost zařízení (320 × 480, 640 × 960, 640 × 1136), na které může vaše aplikace běžet, budete muset zadat samostatné image. Další informace o velikostech spouštěcích obrazovek najdete v průvodci Obrázky spouštěcích obrazovek.

Souhrn

Související odkazy

• SimpleLogin (ukázka)