Aracılığıyla paylaş

Merhaba, iOS Multiscreen – ayrıntılı bakış

Uyarı

iOS Tasarım Aracı, Mac için Visual Studio 2019 sürüm 16.8 ve Visual Studio 2019 sürüm 8.8'de kullanım dışı bırakıldı ve Visual Studio 2019 sürüm 16.9 ve Mac için Visual Studio sürüm 8.9'da kaldırıldı. iOS kullanıcı arabirimleri oluşturmanın önerilen yolu doğrudan Xcode'un Interface Builder'ını çalıştıran bir Mac'tedir. Daha fazla bilgi için bkz . Xcode ile kullanıcı arabirimleri tasarlama.

Hızlı Başlangıç kılavuzunda ilk çok ekranlı Xamarin.iOS uygulamamızı oluşturup çalıştırdık. Şimdi iOS gezintisi ve mimarisi hakkında daha ayrıntılı bir anlayış geliştirmenin zamanı geldi.

Bu kılavuzda Model, Görünüm, Denetleyici (MVC) desenini ve iOS mimarisi ve gezintisindeki rolünü tanıtacağız. Ardından gezinti denetleyicisini ayrıntılı bir şekilde ele alıp iOS'ta tanıdık bir gezinti deneyimi sağlamak için kullanmayı öğreniyoruz.

Model-Görünüm Denetleyicisi (MVC)

Hello, iOS öğreticisinde, iOS uygulamalarının İçerik Görünümü HiyerarşileriniPencereye yüklemeden sorumlu olan yalnızca bir Pencere olduğunu öğrendik. İkinci Telefon adım adım kılavuzda uygulamamıza ikinci bir ekran ekledik ve aşağıdaki diyagramda gösterildiği gibi iki ekran arasına bazı verileri (telefon numaraları listesi) geçirdik:

Bu diyagramda iki ekran arasında veri geçirme gösterilmektedir

Bizim örneğimizde veriler ilk ekranda toplandı, ilk görünüm denetleyicisinden ikinciye geçirildi ve ikinci ekran tarafından görüntülendi. Ekranların, görünüm denetleyicilerinin ve verilerin ayrılması Model, Görünüm, Denetleyici (MVC) desenini izler. Sonraki birkaç bölümde desenin avantajlarını, bileşenlerini ve Telefon word uygulamamızda nasıl kullandığımızı tartışacağız.

MVC deseninin avantajları

Model-Görünüm-Denetleyici, yaygın bir soruna veya kodda kullanım örneğine yeniden kullanılabilir bir mimari çözüm olan bir tasarım desenidir . MVC, Grafik Kullanıcı Arabirimi (GUI) içeren uygulamalar için bir mimaridir. Uygulamadaki nesneleri üç rolden birini atar: Model (veri veya uygulama mantığı), Görünüm (kullanıcı arabirimi) ve Denetleyici (arkadaki kod). Aşağıdaki diyagramda MVC deseninin üç parçasıyla kullanıcı arasındaki ilişkiler gösterilmektedir:

Bu diyagramda MVC deseninin üç parçasıyla kullanıcı arasındaki ilişkiler gösterilmektedir

MVC deseni, gui uygulamasının farklı bölümleri arasında mantıksal ayrım sağladığından ve kodu ve görünümleri yeniden kullanmamızı kolaylaştırdığından kullanışlıdır. Şimdi bu üç rolün her birine daha ayrıntılı bir şekilde göz atalım.

Not

MVC düzeni, ASP.NET sayfaların veya WPF uygulamalarının yapısına gevşek bir şekilde benzerdir. Bu örneklerde Görünüm, kullanıcı arabirimini tanımlamakla sorumlu olan ve bir WPF uygulamasında ASP.NET veya XAML'deki ASPX (HTML) sayfasına karşılık gelen bileşendir. Denetleyici, ASP.NET veya WPF'de arka planda koda karşılık gelen Görünümü yönetmekle sorumlu bileşendir.

Model

Model nesnesi genellikle görüntülenecek veya Görünüm'e girilecek verilerin uygulamaya özgü bir gösterimidir. Model genellikle gevşek bir şekilde tanımlanır. Örneğin, Telefon word_iOS uygulamamızda telefon numaraları listesi (dize listesi olarak gösterilir) Model'dir. Platformlar arası bir uygulama oluşturuyor olsaydık Telefon word Çeviri kodunu iOS ve Android uygulamalarımız arasında paylaşmayı seçebilirdik. Bu paylaşılan kodu Model olarak da düşünebiliriz.

MVC, veri kalıcılığı ve Modelin erişiminden tamamen bağımsızdır. Başka bir deyişle MVC, verilerimizin nasıl göründüğü veya nasıl depolandığıyla ilgilenmez, yalnızca verilerin nasıl temsil edilir? Örneğin, verilerimizi bir SQL veritabanında depolamayı veya bir bulut depolama mekanizmasında kalıcı hale getirmek ya da yalnızca bir List<string>kullanmayı seçebiliriz. MVC amaçları doğrultusunda, desene yalnızca veri gösteriminin kendisi dahil edilir.

Bazı durumlarda MVC'nin Model bölümü boş olabilir. Örneğin uygulamamıza telefon çeviricisinin nasıl çalıştığını, neden oluşturduğumuzu ve hataları bildirmek için bizimle nasıl iletişim kuracağımızı açıklayan bazı statik sayfalar eklemeyi seçebiliriz. Bu uygulama ekranları Görünümler ve Denetleyiciler kullanılarak oluşturulmaya devam eder, ancak gerçek Model verilerine sahip olmazlar.

Not

Bazı literatürlerde, MVC deseninin Model bölümü yalnızca kullanıcı arabiriminde görüntülenen verilere değil tüm uygulama arka ucuna başvurabilir. Bu kılavuzda Modelin modern bir yorumunu kullanacağız, ancak fark özellikle önemli değildir.

Görünüm

Görünüm, kullanıcı arabirimini işlemeden sorumlu bileşendir. MVC desenini kullanan neredeyse tüm platformlarda, kullanıcı arabirimi bir görünüm hiyerarşisi oluşur. MVC'de görünüm hiyerarşisini, hiyerarşinin en üstünde ve altındaki herhangi bir sayıda alt görünümde (veya alt görünüm olarak bilinir) kök görünüm olarak bilinen tek bir görünüme sahip bir görünüm hiyerarşisi olarak düşünebiliriz. iOS'ta, ekranın İçerik Görünümü hiyerarşisi MVC'deki Görünüm bileşenine karşılık gelir.

Oyun kumandası

Controller nesnesi, her şeyi birbirine bağlayan ve tarafından iOS'ta UIViewControllertemsil edilen bileşendir. Denetleyiciyi bir ekran veya görünüm kümesi için yedekleme kodu olarak düşünebiliriz. Denetleyici, kullanıcıdan gelen istekleri dinlemekten ve uygun görünüm hiyerarşisini döndürmekten sorumludur. Görünüm'den gelen istekleri (düğme tıklamaları, metin girişi vb.) dinler ve Görünümün uygun işlemesini, Görünüm değişikliğini ve yeniden yüklemesini gerçekleştirir. Denetleyici ayrıca, uygulamada hangi yedekleme veri deposunda varsa Modeli oluşturmaktan veya almaktan ve Görünüm'ü verileriyle doldurmaktan da sorumludur.

Denetleyiciler diğer Denetleyicileri de yönetebilir. Örneğin, bir Denetleyici farklı bir ekran görüntülemesi gerekiyorsa başka bir Denetleyici yükleyebilir veya bunların sırasını ve aralarındaki geçişleri izlemek için bir Denetleyici yığınını yönetebilir. Sonraki bölümde, gezinti denetleyicisi olarak adlandırılan özel bir iOS görünüm denetleyicisi türü sunarken diğer Denetleyicileri yöneten bir Denetleyici örneği göreceğiz.

Telefon word uygulamasında, birden çok ekran arasında gezinmeyi yönetmeye yardımcı olmak için bir gezinti denetleyicisi kullandık. Gezinti denetleyicisi, sınıfı tarafından temsil edilen özelleştirilmiş UIViewController bir denetleyicidir UINavigationController . Gezinti denetleyicisi, tek bir İçerik Görünümü hiyerarşisini yönetmek yerine diğer görünüm denetleyicilerini ve başlık, geri düğmesi ve diğer isteğe bağlı özellikleri içeren bir gezinti araç çubuğu biçiminde kendi özel İçerik Görünümü hiyerarşisini yönetir.

Gezinti denetleyicisi iOS uygulamalarında yaygındır ve aşağıdaki ekran görüntüsünde gösterildiği gibi Ayarlar uygulaması gibi eski iOS uygulamaları için gezinti sağlar:

Gezinti denetleyicisi, burada gösterilen Ayarlar uygulaması gibi iOS uygulamaları için gezinti sağlar

Gezinti denetleyicisi üç birincil işleve sahiptir:

  • İleriye Doğru Gezinti için Kancalar sağlar – Gezinti denetleyicisi, İçerik Görünümü Hiyerarşilerinin bir gezinti yığınına gönderildiği hiyerarşik bir gezinti metaforu kullanır. Aşağıdaki diyagramda gösterildiği gibi, gezinti yığınını yalnızca en üstteki kartın görünür olduğu bir oyun kartları yığını olarak düşünebilirsiniz:

    Bu diyagramda kart yığını olarak gezinti gösterilmektedir

  • İsteğe Bağlı Olarak Geri Düğmesi Sağlar - Gezinti yığınına yeni bir öğe ittiğimizde, başlık çubuğu otomatik olarak kullanıcının geriye doğru gezinmesini sağlayan bir geri düğmesi görüntüleyebilir. Geri düğmesine basıldığında geçerli görünüm denetleyicisi gezinti yığınından açılır ve önceki İçerik Görünümü hiyerarşisi Pencereye yüklenir:

    Bu diyagramda bir kartın yığından çıkarılma işlemi gösterilmektedir

  • Başlık Çubuğu sağlar– Gezinti denetleyicisinin üst kısmı Başlık Çubuğu olarak adlandırılır. Aşağıdaki diyagramda gösterildiği gibi, görünüm denetleyicisi başlığının görüntülenmesinden sorumludur:

    Başlık Çubuğu, görünüm denetleyicisi başlığını görüntülemekle sorumludur

Kök görünüm denetleyicisi

Gezinti denetleyicisi bir İçerik Görünümü hiyerarşisini yönetmez, bu nedenle kendi başına görüntülenecek bir şeyi yoktur. Bunun yerine, bir gezinti denetleyicisi Kök görünüm denetleyicisiyle eşleştirilir:

Gezinti denetleyicisi Kök görünüm denetleyicisiyle eşleştirilir

Kök görünüm denetleyicisi, gezinti denetleyicisinin yığınındaki ilk görünüm denetleyicisini temsil eder ve Kök görünüm denetleyicisinin İçerik Görünümü hiyerarşisi pencereye yüklenecek ilk İçerik Görünümü hiyerarşisidir. Tüm uygulamamızı gezinti denetleyicisinin yığınına yerleştirmek istiyorsak, Sourceless Segue'yi gezinti denetleyicisine taşıyabilir ve Telefon word uygulamasında yaptığımız gibi ilk ekranımızın görünüm denetleyicisini Kök görünüm denetleyicisi olarak ayarlayabiliriz:

Kaynaksız Segue, ilk ekranlar görünüm denetleyicisini Kök görünüm denetleyicisi olarak ayarlar

Ek gezinti seçenekleri

Gezinti denetleyicisi, iOS'ta gezintiyi işlemenin yaygın bir yoludur, ancak tek seçenek bu değildir. Örneğin, Sekme Çubuğu Denetleyicisi bir uygulamayı farklı işlevsel alanlara bölebilir ve ana/ayrıntı görünümleri oluşturmak için Bölünmüş görünüm denetleyicisi kullanılabilir. Gezinti denetleyicilerini bu diğer gezinti paradigmalarıyla birleştirmek, iOS'ta içerik sunmak ve içerikte gezinmek için birçok esnek yol sağlar.

Geçişleri işleme

Telefon word kılavuzunda, iki görünüm denetleyicisi arasındaki geçişi iki farklı yolla işledik: önce Görsel Taslak Segue ve ardından program aracılığıyla. Şimdi bu seçenekleri daha ayrıntılı bir şekilde inceleyelim.

PrepareForSegue

Görsel Taslak'a Göster eylemine sahip bir Segue eklediğimizde, iOS'a ikinci görünüm denetleyicisini gezinti denetleyicisinin yığınına göndermesini emrediyoruz:

Açılan listeden segue türünü ayarlama

Görsel Taslak'a Segue eklemek, ekranlar arasında basit bir geçiş oluşturmak için yeterlidir. Görünüm denetleyicileri arasında veri geçirmek istiyorsak yöntemini geçersiz kılmamız PrepareForSegue ve verileri kendimiz işlememiz gerekir:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);
    ...
}

iOS, geçiş gerçekleşmeden hemen önce çağrılar PrepareForSegue ve Görsel Taslak'ta oluşturduğumuz Segue'yi yöntemine geçirir. Bu noktada Segue'in hedef görünüm denetleyicisini el ile ayarlamamız gerekir. Aşağıdaki kod Hedef görünüm denetleyicisi için bir tanıtıcı alır ve doğru sınıfına yayınlar - CallHistoryController, bu durumda:

CallHistoryController callHistoryController = segue.DestinationViewController as CallHistoryController;

Son olarak, özelliğini arayarak bağlanılan telefon numaraları listesine ayarlayarak CallHistoryControllerPhoneHistory telefon numaraları listesini (Model) 'den ViewControllerCallHistoryController 'a geçiririz:

callHistoryController.PhoneNumbers = PhoneNumbers;

Segue kullanarak veri geçirmenin tam kodu aşağıdaki gibidir:

public override void PrepareForSegue (UIStoryboardSegue segue, NSObject sender)
{
    base.PrepareForSegue (segue, sender);

    var callHistoryController = segue.DestinationViewController as CallHistoryController;

    if (callHistoryController != null) {
         callHistoryController.PhoneNumbers = PhoneNumbers;
    }
 }

Kodda ilk görünüm denetleyicisinden ikinciye geçiş, Segue ile aynı işlemdir, ancak birkaç adımın el ile yapılması gerekir. İlk olarak, yığını şu anda üzerinde olduğumuz gezinti denetleyicisine bir başvuru almak için kullanırız this.NavigationController . Ardından, sonraki görünüm denetleyicisini yığına el ile göndermek, görünüm denetleyicisini geçirmek ve geçişe animasyon uygulamak için bir seçenek (bunu trueolarak ayarladık) için Gezinti Denetleyicisi'nin PushViewController yöntemini kullanırız.

Aşağıdaki kod, Telefon word ekranından Arama Geçmişi ekranına geçişi işler:

this.NavigationController.PushViewController (callHistory, true);

Sonraki görünüm denetleyicisine geçebilmek için önce öğesinin Görsel Taslak Kimliğini CallHistoryControllerçağırarak this.Storyboard.InstantiateViewController ve geçirerek görsel taslaktan el ile örneği oluşturmamız gerekir:

CallHistoryController callHistory =
this.Storyboard.InstantiateViewController
("CallHistoryController") as CallHistoryController;

Son olarak, bir Segue ile geçişi ele aldığımızda yaptığımız gibi, öğesinin özelliğini CallHistoryController çevrilmiş telefon numaraları listesine ayarlayarak PhoneHistory telefon numaraları listesini (Model) ViewControllerCallHistoryController öğesine geçiririz:

callHistory.PhoneNumbers = PhoneNumbers;

Programlı geçişin tam kodu aşağıdaki gibidir:

CallHistoryButton.TouchUpInside += (object sender, EventArgs e) => {
    // Launches a new instance of CallHistoryController
    CallHistoryController callHistory = this.Storyboard.InstantiateViewController ("CallHistoryController") as CallHistoryController;
    if (callHistory != null) {
     callHistory.PhoneNumbers = PhoneNumbers;
     this.NavigationController.PushViewController (callHistory, true);
    }
};

Telefon word'da sunulan ek kavramlar

Telefon word uygulaması bu kılavuzda ele alınmayan çeşitli kavramlar kullanıma sunulmuştur. Bu kavramlar şunlardır:

  • Görünüm denetleyicilerinin Otomatik Olarak Oluşturulması – Özellikler Bölmesi'nde görünüm denetleyicisi için bir sınıf adı girdiğimizde, iOS tasarımcısı bu sınıfın mevcut olup olmadığını denetler ve ardından bizim için görünüm denetleyicisi yedekleme sınıfını oluşturur. Bu ve diğer iOS tasarımcı özellikleri hakkında daha fazla bilgi için iOS Tasarım Aracı giriş kılavuzuna bakın.
  • Tablo görünümü denetleyicisi – CallHistoryController Bir Tablo görünümü denetleyicisidir. Tablo görünümü denetleyicisi, iOS'taki en yaygın düzen ve veri görüntüleme aracı olan Tablo Görünümü'nü içerir. Tablolar bu kılavuzun kapsamının dışındadır. Tablo görünümü denetleyicileri hakkında daha fazla bilgi için lütfen Tablolar ve Hücrelerle Çalışma kılavuzuna bakın.
  • Görsel Taslak Kimliği – Görsel Taslak Kimliğinin ayarlanması, görsel taslaktaki Objective-C görünüm denetleyicisi için arka planda kod içeren bir görünüm denetleyicisi sınıfı oluşturur. Sınıfı bulmak Objective-C ve Görsel Taslak'ta görünüm denetleyicisini örneklemek için Görsel Taslak Kimliğini kullanırız. Görsel Taslak kimlikleri hakkında daha fazla bilgi için lütfen Görsel Taslaklara Giriş kılavuzuna bakın.

Özet

Tebrikler, ilk çok ekranlı iOS uygulamanızı tamamladınız!

Bu kılavuzda MVC desenini tanıttık ve çok ekranlı bir uygulama oluşturmak için kullandık. Ayrıca gezinti denetleyicilerini ve iOS gezintisini açma rollerini inceledik. Artık kendi Xamarin.iOS uygulamalarınızı geliştirmeye başlamak için ihtiyacınız olan sağlam temele sahipsiniz.

Şimdi, Mobil Geliştirmeye Giriş ve Platformlar Arası Uygulamalar Oluşturma kılavuzları ile Xamarin ile platformlar arası uygulamalar oluşturmayı öğrenelim.

  • Last updated on