Xamarin.iOS'ta kodda iOS kullanıcı arabirimleri oluşturma
Bir iOS uygulamasının kullanıcı arabirimi vitrin gibidir; uygulama genellikle bir Pencere alır, ancak Pencere'yi gerektiği kadar nesneyle doldurabilir ve nesnelerin ve düzenlemelerin, uygulamanın görüntülemek istediklerine bağlı olarak değiştirilebilir. Bu senaryodaki nesneler (kullanıcının gördüğü öğeler) Görünümler olarak adlandırılır. Uygulamada tek bir ekran oluşturmak için, Görünümler bir İçerik Görünümü Hiyerarşisi'nde üst üste yığılır ve hiyerarşi tek bir Görünüm Denetleyicisi tarafından yönetilir. Birden çok ekranı olan uygulamaların her biri kendi Görünüm Denetleyicisi olan birden çok İçerik Görünümü Hiyerarşisi vardır ve uygulama, kullanıcının üzerinde olduğu ekrana göre farklı bir İçerik Görünümü Hiyerarşisi oluşturmak için Görünümler'i Pencereye yerleştirir.
Aşağıdaki diyagramda, kullanıcı arabirimini cihaz ekranına getiren Pencere, Görünümler, Alt Görünümler ve Görünüm Denetleyicisi arasındaki ilişkiler gösterilmektedir:
Bu görünüm hiyerarşileri Xcode'un Arabirim Oluşturucusu kullanılarak oluşturulabilir, ancak kodda tamamen nasıl çalışılacağı konusunda temel bir anlayışa sahip olmak iyidir. Bu makalede, yalnızca kod kullanan kullanıcı arabirimi geliştirme ile çalışmaya başlamaya yönelik bazı temel noktalara yol gösterilir.
Yalnızca kod projesi oluşturma
iOS boş proje şablonu
İlk olarak, Visual Studio'da aşağıda gösterilen Dosya > Yeni Projesi > Visual C# > i Telefon & iPad > iOS Uygulaması (Xamarin) projesini kullanarak bir iOS projesi oluşturun:
Ardından Boş Uygulama proje şablonunu seçin:
Boş Proje şablonu projeye 4 dosya ekler:
- AppDelegate.cs - iOS'tan gelen uygulama olaylarını işlemek için kullanılan bir
UIApplicationDelegatealt sınıfıAppDelegateiçerir. Uygulama penceresi ' ninFinishedLaunchingyöntemindeAppDelegateoluşturulur. - Main.cs - Uygulamasının giriş noktasını içerir ve sınıfını
AppDelegatebelirtir. - Info.plist - Uygulama yapılandırma bilgilerini içeren özellik listesi dosyası.
- Entitlements.plist – Uygulamanın özellikleri ve izinleri hakkında bilgi içeren özellik listesi dosyası.
iOS uygulamaları MVC deseni kullanılarak oluşturulur. Bir uygulamanın görüntülediği ilk ekran, pencerenin kök görünüm denetleyicisinden oluşturulur. MVC deseninin kendisi hakkında daha fazla ayrıntı için Hello, iOS Multiscreen kılavuzuna bakın.
Şablon tarafından eklenen uygulaması AppDelegate , her iOS uygulaması için yalnızca bir tane bulunan uygulama penceresini oluşturur ve aşağıdaki kodla görünür hale getirir:
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ırırsanız, büyük olasılıkla bunu Application windows are expected to have a root view controller at the end of application launchbelirten bir özel durumla karşılaşırsınız. Şimdi bir Denetleyici ekleyelim ve bunu uygulamanın Kök Görünüm Denetleyicisi yapalım.
Denetleyici ekleme
Uygulamanız birçok Görünüm Denetleyicisi içerebilir, ancak tüm Görünüm Denetleyicilerini denetlemek için bir Kök Görünüm Denetleyicisine sahip olması gerekir. Bir örnek oluşturup bunu özelliğine ayarlayarak pencereye Window.RootViewController bir UIViewController denetleyici 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 denetleyici, özelliğinden erişilebilen ilişkili bir görünüme View sahiptir. Yukarıdaki kod, aşağıda gösterildiği gibi görünür olması için UIColor.LightGray görünümün BackgroundColor özelliğini olarak değiştirir:
UiKit'teki denetleyiciler ve kendimizi yazdıklarımız dahil olmak üzere herhangi bir UIViewController alt sınıfı RootViewController bu şekilde olarak ayarlayabiliriz. Örneğin, aşağıdaki kod olarak RootViewControllerbir UINavigationController 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 gezinti denetleyicisi içinde iç içe yerleştirilmiş denetleyiciyi üretir:
Görünüm denetleyicisi oluşturma
Artık pencere olarak RootViewController bir denetleyici eklemeyi gördüğümüze göre kodda özel bir görünüm denetleyicisi oluşturmayı görelim.
Aşağıda gösterildiği gibi adlı CustomViewController yeni bir sınıf ekleyin:
sınıfı, gösterildiği gibi ad alanında UIKit bulunan öğesinden UIViewControllerdevralmalıdır:
using System;
using UIKit;
namespace CodeOnlyDemo
{
class CustomViewController : UIViewController
{
}
}
Görünümü başlatma
UIViewController , Görünüm denetleyicisi belleğe ilk kez yüklendiğinde çağrılan bir yöntem ViewDidLoad içerir. Bu, görünümün özelliklerini ayarlamak gibi başlatma yapmak 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 göndermek 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 CustomViewControlleroluşturun. Yeni bir gezinti denetleyicisi oluşturun, görünüm denetleyicisi örneğinizi geçirin ve yeni gezinti denetleyicisini önceki gibi penceresinin RootViewController penceresine AppDelegate ayarlayın:
var cvc = new CustomViewController ();
var navController = new UINavigationController (cvc);
Window.RootViewController = navController;
Artık uygulama yüklendiğinde, CustomViewController bir gezinti denetleyicisi içine yüklenir:
Düğmeye tıkladığınızda gezinti yığınına yeni bir Görünüm Denetleyicisi gönderilir :
Görünüm hiyerarşisini oluşturma
Yukarıdaki örnekte, Görünüm Denetleyicisi'ne bir düğme ekleyerek kodda bir kullanıcı arabirimi oluşturmaya başladık.
iOS kullanıcı arabirimleri bir görünüm hiyerarşilerinden oluşur. Etiketler, düğmeler, kaydırıcılar vb. gibi ek görünümler, bazı üst görünümün alt görünümleri olarak eklenir.
Örneğin, kullanıcının kullanıcı adı ve parola girebileceği bir oturum açma ekranı oluşturmak için öğesini düzenleyelim CustomViewController . 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üne eklenen düğmeyi ve olay işleyicisini kaldırın.
Aşağıda gösterildiği gibi bir oluşturup başlatıp görünüm hiyerarşisine ekleyerek kullanıcı adı için bir UITextField denetim 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);
}
}
oluşturduğunuzda UITextField, özelliğini konumunu ve boyutunu tanımlayacak şekilde ayarlarız Frame . iOS'ta 0,0 koordinatı sol üst köşede +x ve +y aşağı olur. öğesini diğer birkaç özellikle birlikte ayarladıktan Frame sonra öğesini görünüm hiyerarşisine eklemeye UITextField çağırırızView.AddSubview. Bu, özelliğin usernameFieldUIView başvurduğunu View örneğin alt görünümü yapar. Alt görünüm, üst görünümünden daha yüksek bir z düzeniyle eklenir, bu nedenle ekrandaki üst görünümün önünde görünür.
dahil edilen UITextField uygulama aşağıda gösterilmiştir:
Parola için benzer şekilde bir UITextField ekleyebiliriz, ancak bu kez aşağıda gösterildiği gibi özelliğini true olarak ayarlayacağız SecureTextEntry :
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 , kullanıcı tarafından girilen UITextField metni aşağıda gösterildiği gibi gizler:
Düğmeyi ekleme
Ardından, kullanıcının kullanıcı adı ve parolayı gönderebilmesi için bir düğme ekleyeceğiz. Düğme, diğer denetimler gibi görünüm hiyerarşisine eklenir ve üst görünümün AddSubview yöntemine bağımsız değişken olarak geçirilir.
Aşağıdaki kod düğmeyi ekler ve olay için bir olay işleyicisi TouchUpInside kaydeder:
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 durumda oturum açma ekranı aşağıda gösterildiği gibi görünür:
iOS'un önceki sürümlerinden farklı olarak varsayılan düğme arka planı saydamdır. Düğmenin BackgroundColor özelliğini değiştirmek şunu değiştirir:
submitButton.BackgroundColor = UIColor.White;
Bu, tipik yuvarlatılmış kenarlı düğme yerine kare bir düğmeyle sonuçlanır. 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 AddSubviewsgörünüm hiyerarşisine birden çok görünüm eklemek için bir özellik sağlar.
View.AddSubviews(new UIView[] { usernameField, passwordField, submitButton });
Düğme işlevselliği ekleme
Bir düğmeye tıklandığında kullanıcılarınız bir şey olmasını bekler. Örneğin, bir uyarı gösterilir veya başka bir ekrana gezinti gerçekleştirilir.
Şimdi gezinti yığınına ikinci bir görünüm denetleyicisi göndermek için kod 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, işlevi TouchUpInside olaya ekleyin:
submitButton.TouchUpInside += (sender, e) => {
this.NavigationController.PushViewController (loginVC, true);
};
Gezinti aşağıda gösterilmiştir:
Varsayılan olarak, gezinti denetleyicisi kullandığınızda iOS'un uygulamaya yığında geri dönmenizi sağlayan bir gezinti çubuğu ve geri düğmesi verdiğine dikkat edin.
Görünüm hiyerarşisinde yineleme
Alt görünüm hiyerarşisinde yineleme yapmak ve belirli bir görünümü seçmek mümkündür. Örneğin, her UIButton birini bulmak ve bu düğmeye farklı BackgroundColorbir vermek için 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, yinelenmekte olan görünüm bir UIView ise, tüm görünümler üst görünüme eklenen nesneler devraldıkça UIViewbir UIView olarak geri döner.
Döndürmeyi işleme
Kullanıcı cihazı yatay olarak döndürürse, aşağıdaki ekran görüntüsünde gösterildiği gibi denetimler uygun şekilde yeniden boyutlandırılmaz:
Bunu düzeltmenin bir yolu, her görünümde AutoresizingMask özelliğini ayarlamaktır. Bu durumda denetimlerin yatay olarak esnetilmesini istediğimiz için her AutoresizingMaskbirini ayarlayacağız. Aşağıdaki örnek içindir usernameField, ancak görünüm hiyerarşisindeki her ara çubuğun aynı şekilde uygulanması gerekir.
usernameField.AutoresizingMask = UIViewAutoresizing.FlexibleWidth;
Cihazı veya simülatörü döndürdüğünüzde, aşağıda gösterildiği gibi her şey ek alanı dolduracak şekilde esnetilir:
Özel görünümler oluşturma
UIKit'in parçası olan denetimleri kullanmaya ek olarak, özel görünümler de kullanılabilir. öğesinden UIView devralma ve geçersiz kılma yoluyla Drawözel bir görünüm oluşturulabilir. Şimdi ö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
yapmamız gereken ilk şey, özel görünüm için bir sınıf oluşturmaktır. Bu işlemi Visual Studio'daki Sınıf şablonunu kullanarak gerçekleştirerek adlı CircleViewboş bir sınıf ekleyeceğiz. Temel sınıfı, ad alanında UIKit olduğunu hatırladığımız olarak ayarlanmalıdırUIView. Ad alanına System.Drawing da ihtiyacımız olacak. Diğer çeşitli System.* ad alanları bu örnekte kullanılmayacaktır, bu nedenle bunları kaldırmaktan çekinmeyin.
sınıfı şu şekilde görünmelidir:
using System;
namespace CodeOnlyDemo
{
class CircleView : UIView
{
}
}
UIView'da çizim
Her UIView , sistem tarafından çizilmesi gerektiğinde çağrılan bir Draw yönteme sahiptir. Draw hiçbir zaman 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ırma döngüsünde ilk kez yöntemi çağrılır Draw . Sonraki çağrılar Draw , görünüm veya görünümde çağrılarak SetNeedsDisplaySetNeedsDisplayInRect çizilmesi gerekiyor olarak işaretlendiğinde gerçekleşir.
Aşağıda gösterildiği gibi geçersiz kılınan Draw yöntemin içine bu kodu ekleyerek çizim kodunu görünümümüze ekleyebiliriz:
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);
}
}
bir olduğundan CircleViewUIView, özellikleri de ayarlayabiliriz UIView . Örneğin, oluşturucuda öğesini BackgroundColor ayarlayabiliriz:
public CircleView()
{
BackgroundColor = UIColor.White;
}
Yeni oluşturduğumuz öğesini CircleView kullanmak için, ve UIButton önceki sürümlerde olduğu gibi mevcut denetleyicideki görünüm hiyerarşisine UILabels alt görünüm olarak ekleyebilir veya yeni bir denetleyicinin görünümü olarak yükleyebiliriz. Şimdi ikincisini yapalım.
Görünüm Yükleme
UIViewController , görünümünü oluşturmak için denetleyici tarafından çağrılan adlı LoadView bir yönteme sahiptir. Burası, bir görünüm oluşturmak ve denetleyicinin View özelliğine atamak için uygun bir yerdir.
İlk olarak bir denetleyiciye ihtiyacımız var, bu nedenle adlı CircleControlleryeni bir boş sınıf oluşturun.
içinde CircleController öğesini ayarlamak ViewCircleView için aşağıdaki kodu ekleyin (geçersiz kılmanızda uygulamayı çağırmamalısınız base ):
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 sunmamız gerekir. Şimdi bunu daha önce eklediğimiz gönder düğmesine aşağıdaki gibi bir olay işleyicisi ekleyerek yapalım:
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ğumuz zaman daire içeren yeni görünüm görüntülenir:
Başlatma ekranı oluşturma
Uygulamanız, kullanıcılarınıza yanıt vermenin 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 belleğe yüklenmeye devam ettiğinden kodda oluşturulamaz.
Visual Studio'da bir iOS Projesi oluşturduğunuzda, projenizin içindeki Kaynaklar klasöründe bulunabilen bir .xib dosyası biçiminde bir Başlatma Ekranı sağlanır.
Bu, çift tıklayıp Xcode Arabirim Oluşturucusu'nda açılarak düzenlenebilir.
Apple, iOS 8 veya üzerini hedefleyen uygulamalar için bir .xib veya Görsel Taslak dosyası kullanılmasını önerir. Xcode Arabirim Oluşturucusu'nda herhangi bir dosyayı başlattığınızda, düzeninizi iyi görünecek şekilde uyarlamak ve tüm cihaz boyutları için doğru şekilde görüntülemek üzere Boyut Sınıfları ve Otomatik Düzen'i kullanabilirsiniz. Statik başlatma görüntüsü, önceki sürümleri hedefleyen uygulamalar için destek sağlamak üzere .xib veya Görsel Taslak'a ek olarak kullanılabilir.
Başlatma Ekranı oluşturma hakkında daha fazla bilgi için aşağıdaki belgelere bakın:
Önemli
iOS 9'dan itibaren Apple, Film Taslaklarının Başlatma Ekranı oluşturmanın birincil yöntemi olarak kullanılmasını önerir.
iOS 8 öncesi uygulamalar için başlatma görüntüsü oluşturma
Uygulama iOS 8'den önceki sürümleri hedeflerse statik görüntü ,xib veya Görsel Taslak başlatma ekranına ek olarak kullanılabilir.
Bu statik görüntü Info.plist dosyasında veya uygulamanızda Varlık Kataloğu (iOS 7 için) olarak ayarlanabilir. Uygulamanızın üzerinde çalışabileceği her 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 Ekran Görüntülerini Başlat kılavuzunu görüntüleyin.
Önemli
Uygulamanızın Başlatma Ekranı yoksa ekrana tam olarak uymadığını fark edebilirsiniz. Böyle bir durumda Info.plist dosyanıza en azından 640x1136 adlı Default-568@2x.png bir resim eklediğinizden emin olmanız gerekir.
Özet
Bu makalede, Visual Studio'da program aracılığıyla iOS uygulamalarının nasıl geliştirılacağı açıklanmıştır. Boş bir proje şablonundan proje oluşturmayı inceledik ve pencereye kök görünüm denetleyicisi oluşturma ve ekleme hakkında bilgi verdik. Ardından uygulama ekranı geliştirmek üzere bir denetleyici içinde görünüm hiyerarşisi oluşturmak için UIKit'ten denetimlerin nasıl kullanılacağını gösterdik. Daha sonra görünümlerin farklı yönlerde düzgün bir şekilde nasıl düzenlenip düzenlenmediğini inceledik ve öğesini alt sınıflayarak UIViewözel bir görünüm oluşturmayı ve görünümün bir denetleyiciye nasıl yükleyebileceğinizi gördük. Son olarak bir uygulamaya başlatma ekranı eklemeyi keşfettik.