Xamarin.iOS'ta kodda iOS kullanıcı arabirimleri oluşturma

Bir iOS uygulamasının kullanıcı arabirimi vitrine benzer; uygulama genellikle bir Pencere alır, ancak Pencere'ye gereken sayıda nesne doldurebilir ve uygulamanın ne görüntülemek istediğine bağlı olarak nesneler ve düzenlemeler değiştirilebilir. Bu senaryodaki nesneler (kullanıcının gördüğü nesneler) Görünümler olarak adlandırılan nesnelerdir. Bir uygulamada tek ekran oluşturmak için Görünümler bir İçerik Görünümü Hiyerarşisi'nin üzerinde yığılmış ve hiyerarşi tek bir Görünüm Denetleyicisi tarafından yönetilir. Birden çok ekranlı uygulamaların her biri kendi Görünüm Denetleyicisine sahip birden çok İçerik Görünümü Hiyerarşisi vardır ve uygulama, kullanıcının açık olduğu ekrana göre farklı bir İçerik Görünümü Hiyerarşisi oluşturmak için Görünümler'i Pencereye yer alır.

Yalnızca kod projesi oluşturma

iOS uygulamaları MVC düzeni kullanılarak kullanılmaktadır. Bir uygulamanın görüntülene ilk ekranı, pencerenin kök görünüm denetleyicisinden oluşturulur. MVC deseni hakkında daha fazla bilgi için bkz. Hello, iOS Multiscreen kılavuzu.

Şablon tarafından eklenen uygulaması, her iOS uygulaması için yalnızca bir tane olan uygulama penceresini oluşturur ve aşağıdaki kodla AppDelegate görünür hale gelir:

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

Bu uygulamayı şimdi çalıştıracak olsaydık, büyük olasılıkla şu şekilde bir özel durum Application windows are expected to have a root view controller at the end of application launch oluşturursun: . Şimdi bir Denetleyici ekser ve bunu uygulamanın Kök Görünüm Denetleyicisi olarak eksersiniz.

Denetleyici ekleme

Uygulamanız birçok Görünüm Denetleyicisi içerebilir, ancak tüm Görünüm Denetleyicilerini kontrol etmek için bir Kök Görünüm Denetleyicisine sahip olması gerekir. Bir örnek oluşturarak ve özelliğine UIViewController ayarerek pencereye bir denetleyici Window.RootViewController ekleyin:

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

Her denetleyicinin özelliğinden erişilebilen ilişkili bir görünümü View vardır. Yukarıdaki kod, aşağıda gösterildiği gibi görünümün özelliğini olarak değiştirir ve görünür BackgroundColorUIColor.LightGray olması için:

UiKit'in denetleyicileri ve kendi yazacakları denetleyiciler de dahil olmak üzere herhangi bir alt UIViewController sınıfı bu şekilde olarak da RootViewController ayarlamamız gerekir. Örneğin, aşağıdaki kod olarak UINavigationController bir RootViewController ekler:

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

Bu, aşağıda gösterildiği gibi denetleyiciyi gezinti denetleyicisi içinde iç içe geçmiş olarak üretir:

Görünüm denetleyicisi oluşturma

Artık pencere olarak denetleyici eklemeyi gördüğünüze göre, kodda özel bir görünüm RootViewController denetleyicisinin nasıl oluşturularak bir bakalım.

Aşağıda gösterildiği gibi adlı CustomViewController yeni bir sınıf ekleyin:

sınıfı, aşağıda gösterildiği gibi UIViewController ad alanı içinde bulunan UIKit sınıfından devralmalı:

using System;
using UIKit;

namespace CodeOnlyDemo
{
    class CustomViewController : UIViewController
    {
    }
}

Görünümü başlatma

UIViewController , Görünüm denetleyicisi ViewDidLoad belleğe ilk yüklendiğinde çağrılan adlı bir yöntem içerir. Bu, görünümün özelliklerini ayarlama gibi başlatma için uygun bir yerdir.

Örneğin, aşağıdaki kod, düğmeye basıldığında gezinti yığınına yeni bir Görünüm Denetleyicisi'ni itmek için bir düğme ve olay işleyicisi ekler:

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

        }
    }
}

Bu denetleyiciyi uygulamanıza yüklemek ve basit gezintiyi göstermek için yeni bir örneği CustomViewController oluşturun. Yeni bir gezinti denetleyicisi oluşturun, görünüm denetleyicisi örneğinizi iletir ve yeni gezinti denetleyicisini önceki gibi RootViewController penceresindeki AppDelegate penceresine ayarlayın:

var cvc = new CustomViewController ();

var navController = new UINavigationController (cvc);

Window.RootViewController = navController;

Artık uygulama yüklendiğinde, CustomViewController bir gezinti denetleyicisinin içine yüklenir:

Düğmeye tıklar, gezinti yığınına yeni bir Görünüm Denetleyicisi iletir:

Görünüm hiyerarşisini oluşturma

Yukarıdaki örnekte, Görünüm Denetleyicisine bir düğme ekleyerek kodda bir kullanıcı arabirimi oluşturmaya başladık.

iOS kullanıcı arabirimleri bir görünüm hiyerarşisi içerir. Etiketler, düğmeler, kaydırıcılar vb. gibi ek görünümler, bazı üst görünümlerin alt görünümleri olarak eklenir.

Örneğin, kullanıcı adı ve parola girebilirsiniz bir oturum açma ekranı CustomViewController oluşturmak için düzenleyin. Ekran iki metin alanı ve bir düğmeden oluşur.

Metin alanlarını ekleme

İlk olarak Görünüm Başlatma bölümünde eklenen düğmeyi ve olay işleyicisini kaldırın.

Aşağıda gösterildiği gibi bir oluşturarak ve başlatarak kullanıcı adı için bir denetim ekleyin ve ardından bunu görünüm UITextField hiyerarşisi'ne ekleyin:

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

2009'da 2018'in 2018'in ilk 2018'inde , özelliğini UITextFieldFrame konumunu ve boyutunu tanımlayarak ayarlayabilirsiniz. iOS'ta 0,0 koordinatı sol üst tarafta , sağ tarafta +x ve +y aşağıdadır. diğer birkaç Frame özellik ile birlikte ayardikten sonra, görünüm View.AddSubview hiyerarşisi eklemek için UITextField çağrısında bulunuruz. Bu özellik usernameField başvurulan örneğin UIView bir alt View görünümü yapar. Üst görünümünden daha yüksek bir z sırasına sahip bir alt görünüm eklendiğinden, ekranda üst görünümün önünde görünür.

dahil edilen uygulama UITextField aşağıda gösterilmiştir:

Parola için benzer bir şekilde bir ekleyebiliriz, ancak bu kez aşağıda gösterildiği gibi UITextFieldSecureTextEntry özelliğini true olarak ayarlayabilirsiniz:

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

Ayar SecureTextEntry = true , UITextField Kullanıcı tarafından girilen metni aşağıda gösterildiği gibi gizler:

Düğme ekleme

Ardından, kullanıcının Kullanıcı adını ve parolayı gönderebilmesi için bir düğme ekleyeceğiz. Düğme, üst görünümün yöntemine bir bağımsız değişken olarak geçirerek diğer denetimler gibi görünüm hiyerarşisine eklenir AddSubview .

Aşağıdaki kod, düğmeyi ekler ve olay için bir olay işleyicisi kaydeder TouchUpInside :

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

Bu şekilde, oturum açma ekranı şimdi aşağıda gösterildiği gibi görünür:

Önceki iOS sürümlerinden farklı olarak, varsayılan düğme arka planı saydamdır. Düğmenin BackgroundColor özelliğini değiştirmek bunu değiştirir:

submitButton.BackgroundColor = UIColor.White;

Bu, normal yuvarlatılmış kenarlı düğme yerine bir kare düğme oluşmasına neden olur. Yuvarlatılmış kenarı elde etmek için aşağıdaki kod parçacığını kullanın:

submitButton.Layer.CornerRadius = 5f;

Bu değişikliklerle görünüm şöyle görünür:

Görünüm hiyerarşisine birden çok görünüm ekleme

iOS, kullanarak görünüm hiyerarşisine birden çok görünüm ekleme olanağı sunar AddSubviews .

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

Düğme işlevleri ekleme

Düğmeye tıklandığında kullanıcılarınız bir şeyin gerçekleşmesini bekler. Örneğin, bir uyarı gösterilir veya gezinme başka bir ekrana yapılır.

İkinci bir görünüm denetleyicisini, gezinti yığınına göndermek için bazı kodlar ekleyelim.

İlk olarak, ikinci görünüm denetleyicisini oluşturun:

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

Ardından, olaya işlevi ekleyin TouchUpInside :

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

Gezinti aşağıda gösterilmiştir:

Varsayılan olarak, bir gezinti denetleyicisi kullandığınızda, iOS uygulamaya bir gezinti çubuğu ve bir geri düğmesi sunarak yığın aracılığıyla geri taşımanızı sağlar.

Görünüm hiyerarşisinde yineleme yapma

Alt görünüm hiyerarşisinde yinelemek ve belirli bir görünümü seçmek mümkündür. Örneğin, her birine ulaşmak UIButton ve bu düğmeye farklı bir düğme vermek için BackgroundColor Aşağıdaki kod parçacığı kullanılabilir

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

Ancak, için yineleyeceğiniz görünüm bir ise, UIViewUIView üst görünüme eklenen nesneler bir olarak geri dönecektir UIView .

Döndürme işlemi

Kullanıcı cihazı yataya döndürülerek, aşağıdaki ekran görüntüsünde gösterildiği gibi denetimler uygun şekilde yeniden boyutlandırmaz:

Bunu gidermenin bir yolu, AutoresizingMask her bir görünümde özelliği ayarlamadır. Bu durumda denetimlerin yatay olarak uzamasını istiyoruz, bu nedenle her ikisini de ayarlayacağız AutoresizingMask . Aşağıdaki örnek için geçerlidir usernameField , ancak aynı görünüm hiyerarşisindeki her bir araç için aynı olması gerekir.

usernameField.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;

Cihaz veya simülatörü döndürtiğimiz zaman, her şey aşağıda gösterildiği gibi ek alanı dolduracak şekilde uzatılır:

Özel görünümler oluşturma

Uıit 'in bir parçası olan denetimleri kullanmanın yanı sıra özel görünümler de kullanılabilir. Özel bir görünüm, devralma UIView ve geçersiz kılma ile oluşturulabilir Draw . Özel bir görünüm oluşturalım ve bunu göstermek için görünüm hiyerarşisine ekleyelim.

UIView 'dan devralma

Yapmanız gereken ilk şey, özel görünüm için bir sınıf oluşturmaktır. bunu, adlı boş bir sınıf eklemek için Visual Studio sınıf şablonunu kullanarak yapacağız . Temel sınıf olarak ayarlanmalıdır UIView , ancak geri çağırma yaptığımız UIKit ad alanında. Ayrıca ad alanı da gerekecektir System.Drawing . Diğer çeşitli System.* ad alanları bu örnekte kullanılmaz, bu nedenle onları kaldırmayı ücretsiz olarak hissetmezsiniz.

Sınıf şuna benzemelidir:

using System;

namespace CodeOnlyDemo
{
    class CircleView : UIView
    {
    }
}

UIView içinde çizim

Her öğesine, UIViewDraw çizilmesi gerektiğinde sistem tarafından çağrılan bir yöntemi vardır. Draw asla doğrudan çağrılmamalıdır. Çalıştırma döngüsü işleme sırasında sistem tarafından çağırılır. Görünüm hiyerarşisine bir görünüm eklendikten sonra Çalıştır döngüsünde ilk kez Draw yöntemi çağrılır. Sonraki çağrılar, Draw görünümün ya da görünümü çağırarak çizilmesi gereken olarak işaretlendiğinde oluşur SetNeedsDisplaySetNeedsDisplayInRect .

Aşağıda gösterildiği gibi, geçersiz kılınan metodun içine bu kodu ekleyerek, görünümümüzde çizim kodu ekleyebiliriz Draw :

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

CircleViewBir olduğundan UIView de özellikleri de ayarlayabiliriz UIView . Örneğin, BackgroundColor Oluşturucu içinde ayarlayabiliriz:

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

Yeni CircleView oluşturduğumuz için, mevcut bir denetleyicideki görünüm hiyerarşisine bir alt görünüm olarak ekleyebilir veya daha önceki bir sürümü ile yaptığımız gibi, UILabelsUIButton Yeni bir denetleyicinin görünümü olarak yükleyebilirsiniz. İkincisini yapalim.

Görünüm yükleme

UIViewController , LoadView görünümünü oluşturmak için denetleyici tarafından çağrılan adlı bir yöntemi vardır. Bu, bir görünüm oluşturmak ve denetleyicinin özelliğine atamak için uygun bir yerdir View .

İlk olarak bir denetleyiciye ihtiyacımız var, bu nedenle adlı yeni bir boş sınıf oluşturun CircleController .

İçinde CircleController , ' a ayarlamak için aşağıdaki kodu ekleyin ViewCircleView ( base uygulamanızı geçersiz kılmanızda çağırmamalıdır):

using UIKit;

namespace CodeOnlyDemo
{
    class CircleController : UIViewController
    {
        CircleView view;

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

Son olarak, denetleyiciyi çalışma zamanında sunduğumuz için gerekir. Bunu, daha önce eklediğimiz Gönder düğmesine aşağıdaki gibi bir olay işleyicisi ekleyerek yapabiliriz:

submitButton.TouchUpInside += delegate
{
    Console.WriteLine("Submit button clicked");

    //circleController is declared as class variable
    circleController = new CircleController();
    PresentViewController(circleController, true, null);
};

Şimdi uygulamayı çalıştırıp Gönder düğmesine dokunduğunuzda, bir daireyle birlikte yeni görünüm görüntülenir:

Başlatma ekranı oluşturma

Uygulamanız yanıt verdiğini kullanıcılara görüntülemenin bir yolu olarak başlatıldığında bir başlatma ekranı görüntülenir. Uygulamanız yüklenirken bir başlatma ekranı görüntülendiğinden, uygulama hala belleğe yüklenmekte olduğundan kodda oluşturulamaz.

Bu, üzerine çift tıklayıp Xcode Interface Builder açarak düzenlenebilir.

Apple, iOS 8 veya sonraki sürümlerini hedefleyen uygulamalar için bir. XIB veya görsel taslak dosyası kullanılmasını önerir. Xcode Interface Builder her iki dosyayı da başlattığınızda, düzeninizi uygun olacak şekilde uyarlamak için boyut sınıflarını ve Otomatik düzeni kullanabilir ve tüm cihaz boyutları için doğru şekilde görünür. Statik başlatma görüntüsü, önceki sürümleri hedefleyen uygulamalar için desteğe izin veren bir. xib veya görsel taslağa ek olarak kullanılabilir.

Başlatma ekranı oluşturma hakkında daha fazla bilgi için aşağıdaki belgelere bakın:

• . XIB kullanarak başlatma ekranı oluşturma
• Film şeritleri ile başlatma ekranlarını yönetme

Ön iOS 8 uygulamaları için bir başlatma görüntüsü oluşturma

Uygulama iOS 8 ' den önceki sürümleri hedeflerse, bir. xib veya görsel taslak başlatma ekranına ek olarak statik bir görüntü kullanılabilir.

Bu statik görüntü, uygulamanızdaki Info. plist dosyasında veya bir varlık kataloğu (iOS 7 için) olarak ayarlanabilir. Uygulamanızın üzerinde çalışacağı her bir cihaz boyutu (320x480, 640x960, 640x1136) için ayrı görüntüler sağlamanız gerekir. Başlatma ekranı boyutları hakkında daha fazla bilgi için başlatma ekranı görüntüleri kılavuzunu görüntüleyin.

Özet

İlişkili Bağlantılar

• SimpleLogin (örnek)