Xamarin.iOS'ta sekme çubukları ve sekme çubuğu denetleyicileri

Sekmeli uygulamalar, belirli bir sırada birden çok ekrana erişilebildiği kullanıcı arabirimlerini desteklemek için iOS'ta kullanılır. UITabBarController sınıfı aracılığıyla, uygulamalar bu tür çok ekranlı senaryolar için kolayca destek içerebilir. UITabBarController çok ekranlı yönetimi üstlenir ve uygulama geliştiricisinin her ekranın ayrıntılarına odaklanmasını sağlar.

Genellikle, sekmeli uygulamalar ana pencerenin olmasıyla UITabBarController RootViewController oluşturulur. Ancak, biraz ek kodla, sekmeli uygulamalar, bir uygulamanın ilk kez oturum açma ekranı sunduğu senaryo ve ardından sekmeli arabirim gibi başka bir başlangıç ekranına sırasıyla kullanılabilir.

Bu sayfada her iki senaryo da ele alınmaktadır: sekmeler uygulama görünümü hiyerarşisinin kökünde ve ayrıca senaryo dışıRootViewController olduğunda.

UITabBarController tanıtımı

aşağıdakiler UITabBarController tarafından sekmeli uygulama geliştirmeyi destekler:

Birden çok denetleyicinin eklenmesine izin verme.
Kullanıcının denetleyiciler ve görünümleri arasında geçiş yapmalarına izin vermek için sınıfı aracılığıyla UITabBar sekmeli bir kullanıcı arabirimi sağlama.

Denetleyiciler, bir UIViewController dizi olan özelliği aracılığıyla ViewControllers öğesine eklenirUITabBarController. Kendisi UITabBarController , uygun denetleyicinin yüklenmesini ve seçilen sekmeye göre görünümünün sunulmasını yönetir.

Sekmeler, bir UITabBar örneğin içerdiği sınıfın örnekleridirUITabBarItem. Her UITabBar örneğe, her sekmedeki TabBarItem denetleyicinin özelliği aracılığıyla erişilebilir.

ile UITabBarControllernasıl çalışıldığını anlamak için, kullanan basit bir uygulama oluşturma adımlarını inceleyelim.

Sekmeli uygulama kılavuzu

Bu izlenecek yol için aşağıdaki uygulamayı oluşturacağız:

Mac için Visual Studio'de zaten sekmeli bir uygulama şablonu olsa da, bu örnekte bu yönergeler boş bir projeden çalışarak uygulamanın nasıl yapıldığını daha iyi anlamayı sağlayabilir.

Uygulamayı oluşturma

Yeni bir uygulama oluşturarak başlayın.

Mac için Visual Studio'da Dosya > Yeni > Çözümü menü öğesini seçin ve aşağıda gösterildiği gibi bir iOS > Uygulaması > Boş Proje şablonu (Projeyi TabbedApplicationadlandır) seçin:

UITabBarController Ekleme

Ardından, Dosya Yeni Dosya'yı seçip Genel: Boş Sınıf şablonunu seçerek boş bir sınıf ekleyin.> Dosyayı TabController aşağıda gösterildiği gibi adlandırın:

sınıfı, TabController bir dizisini UITabBarController UIViewControllersyönetecek olan uygulamasını içerir. Kullanıcı bir sekme seçtiğinde UITabBarController , görünümü uygun görünüm denetleyicisi için sunmayla ilgilenir.

uygulamasını uygulamak UITabBarController için aşağıdakileri yapmamız gerekir:

temel sınıfını TabController olarak UITabBarController ayarlayın.
öğesine eklenecek TabController örnekler oluşturunUIViewController.
örneklerini özelliğine UIViewController TabController atanmış bir diziye ViewControllers ekleyin.

Bu adımları gerçekleştirmek için sınıfına TabController aşağıdaki kodu ekleyin:

using System;
using UIKit;

namespace TabbedApplication {
    public class TabController : UITabBarController {

        UIViewController tab1, tab2, tab3;

        public TabController ()
        {
            tab1 = new UIViewController();
            tab1.Title = "Green";
            tab1.View.BackgroundColor = UIColor.Green;

            tab2 = new UIViewController();
            tab2.Title = "Orange";
            tab2.View.BackgroundColor = UIColor.Orange;

            tab3 = new UIViewController();
            tab3.Title = "Red";
            tab3.View.BackgroundColor = UIColor.Red;

            var tabs = new UIViewController[] {
                tab1, tab2, tab3
            };

            ViewControllers = tabs;
        }
    }
}

Her UIViewController örnek için özelliğini ayarladığımıza Title UIViewControllerdikkat edin. denetleyiciler öğesine UITabBarControllerUITabBarController eklendiğinde, her denetleyici için öğesini okur Title ve aşağıda gösterildiği gibi ilişkili sekmenin etiketinde görüntüler:

TabController'ı RootViewController olarak ayarlama

Denetleyicilerin sekmelere yerleştirildikleri sıra, diziye eklendikleri ViewControllers sıraya karşılık gelir.

UITabController öğesini ilk ekran olarak yüklemek için aşağıdaki kodda gösterildiği gibi penceresinin RootViewControllerAppDelegateolması gerekir:

[Register ("AppDelegate")]
public partial class AppDelegate : UIApplicationDelegate
{
    UIWindow window;
    TabController tabController;

    public override bool FinishedLaunching (UIApplication app, NSDictionary options)
    {
        window = new UIWindow (UIScreen.MainScreen.Bounds);

        tabController = new TabController ();
        window.RootViewController = tabController;

        window.MakeKeyAndVisible ();

        return true;
    }
}

Uygulamayı şimdi çalıştırırsak, UITabBarController varsayılan olarak ilk sekme seçili olarak yüklenir. Diğer sekmelerden herhangi birinin seçilmesi, ilişkili denetleyicinin görünümünün, son kullanıcının ikinci sekmeyi UITabBarController, seçtiği aşağıda gösterildiği gibi gösterilmesine neden olur:

Gösterilen ikinci sekme

TabBarItems'i Değiştirme

Artık çalışan bir sekme uygulamamız olduğuna göre, görüntülenen görüntüyü ve metni değiştirmek ve sekmelerden birine rozet eklemek için öğesini değiştirelim TabBarItem .

Sistem öğesini ayarlama

İlk olarak, ilk sekmeyi sistem öğesini kullanacak şekilde ayarlayalım. oluşturucusundaTabController, örneğin denetleyicilerini Title ayarlayan satırı kaldırın ve denetleyicinin özelliğini ayarlamak TabBarItem için tab1 aşağıdaki kodla değiştirin:

tab1.TabBarItem = new UITabBarItem (UITabBarSystemItem.Favorites, 0);

kullanılarak UITabBarSystemItemoluşturulurkenUITabBarItem, başlık ve resim, ilk sekmedeki Sık Kullanılanlar simgesini ve başlığını gösteren aşağıdaki ekran görüntüsünde görüldüğü gibi iOS tarafından otomatik olarak sağlanır:

Yıldız simgesi içeren ilk sekme

Görüntüyü ayarlama

Sistem öğesi kullanmanın yanı sıra, öğesinin UITabBarItem başlığı ve görüntüsü özel değerlere ayarlanabilir. Örneğin, denetleyicinin TabBarItem tab2 özelliğini ayarlayan kodu aşağıdaki gibi değiştirin:

tab2 = new UIViewController ();
tab2.TabBarItem = new UITabBarItem ();
tab2.TabBarItem.Image = UIImage.FromFile ("second.png");
tab2.TabBarItem.Title = "Second";
tab2.View.BackgroundColor = UIColor.Orange;

Yukarıdaki kod, adlı second.png görüntünün projenin köküne (veya Resources dizinine) eklendiğini varsayar. Tüm ekran yoğunluklarını desteklemek için aşağıda gösterildiği gibi üç görüntüye ihtiyacınız vardır:

Projeye eklenen görüntüler

Önerilen boyut, resmin stiline (dairesel, kare, geniş veya uzun) göre değişir.

Özelliğin Image yalnızca second.png dosya adına ayarlanması gerekir; iOS gerektiğinde yüksek çözünürlüklü dosyaları otomatik olarak yükler. Resimlerle Çalışma kılavuzlarında bu konuda daha fazla bilgi edinebilirsiniz. Varsayılan olarak, seçildiğinde mavi renk tonuyla sekme çubuğu öğeleri gridir.

Başlığı geçersiz kılma

Title özelliği doğrudan üzerinde TabBarItemayarlandığında, denetleyicinin kendisinde için Title ayarlanan tüm değerleri geçersiz kılar.

Bu ekran görüntüsündeki ikinci (orta) sekmede özel bir başlık ve görüntü gösterilir:

Kare simgesi içeren ikinci sekme

Rozet değerini ayarlama

Sekmede rozet de görüntülenebilir. Örneğin, üçüncü sekmede rozet ayarlamak için aşağıdaki kod satırını ekleyin:

tab3.TabBarItem.BadgeValue = "Hi";

Bunun çalıştırılması, aşağıda gösterildiği gibi sekmenin sol üst köşesinde "Merhaba" dizesi bulunan kırmızı bir etiketle sonuçlanıyor:

Rozet genellikle okunmamış bir sayı göstergesini, yeni öğeleri görüntülemek için kullanılır. Rozeti kaldırmak için aşağıda gösterildiği gibi null olarak ayarlayın BadgeValue :

tab3.TabBarItem.BadgeValue = null;

RootViewController olmayan senaryolarda sekmeler

Yukarıdaki örnekte, pencere olduğunda RootViewController ile UITabBarController nasıl çalışılır gösterildi. Bu örnekte, değilken'in UITabBarController nasıl kullanılacağını inceleyeceğiz ve bunun nasıl oluşturulduğunu RootViewController görsel taslakları kullanarak göstereceğiz.

İlk ekran örneği

Bu senaryo için ilk ekran, olmayan UITabBarControllerbir denetleyiciden yüklenir. Kullanıcı bir düğmeye dokunarak ekranla etkileşime geçtiğinde, aynı Görünüm Denetleyicisi bir UITabBarControlleriçine yüklenir ve ardından kullanıcıya sunulur. Aşağıdaki ekran görüntüsünde uygulama akışı gösterilmektedir:

Şimdi bu örnek için yeni bir uygulama başlatalım. Yine iPhone > Uygulaması > Boş Proje (C#) şablonunu kullanacağız ve bu kez projeyi InitialScreenDemoadlandıracağız.

Bu örnekte, görünüm denetleyicilerini ayarlamak için görsel taslak kullanılır. Görsel taslak eklemek için:

Proje adına sağ tıklayın ve Yeni Dosya Ekle'yi > seçin.
Yeni Dosya iletişim kutusu görüntülendiğinde iOS > Boş iPhone Görsel Taslak'a gidin.

Şimdi bu yeni Görsel Taslak MainStoryboard'u aşağıda gösterildiği gibi çağıralım:

Görsel Taslaklara Giriş kılavuzunda ele alınan, daha önce görsel taslak olmayan bir dosyaya Görsel Taslak eklerken dikkat edilmesi gereken birkaç önemli adım vardır . Bu ifadeler şunlardır:

Görsel Taslak adınızı öğesinin Ana Arabirim bölümüne Info.plistekleyin:
içinde App DelegateWindow yöntemini aşağıdaki kodla geçersiz kılın:
```
public override UIWindow Window {
    get;
    set;
}
```

Bu örnek için üç Görünüm Denetleyicisine ihtiyacımız olacak. adlı ViewController1bir, İlk Görünüm Denetleyicimiz olarak ve ilk sekmede kullanılacaktır. İkinci ve üçüncü sekmelerde sırasıyla kullanılacak olan ve ViewController3adlı ViewController2 diğer ikisi.

MainStoryboard.storyboard dosyasına çift tıklayarak Tasarımcı'yı açın ve tasarım yüzeyine üç Görünüm Denetleyicisi sürükleyin. Bu Görünüm Denetleyicilerinin her birinin yukarıdaki ada karşılık gelen kendi sınıfı olmasını istiyoruz. Bu nedenle, aşağıdaki ekran görüntüsünde gösterildiği gibi Kimlik > Sınıfı'nın altına adını yazın:

Mac için Visual Studio gerekli sınıfları ve tasarımcı dosyalarını otomatik olarak oluşturur; bu, aşağıda gösterildiği gibi Çözüm Bölmesi'nde görülebilir:

Kullanıcı arabirimi oluşturma

Ardından, Xamarin iOS Designer'ı kullanarak ViewController görünümlerinin her biri için basit bir kullanıcı arabirimi oluşturacağız.

Sağ taraftaki ToolBox'tan ViewController1'e ve Button bir öğesini sürüklemek Label istiyoruz. Ardından, denetimlerin adını ve metnini aşağıdaki şekilde düzenlemek için Özellikler Bölmesi'ni kullanacağız:

Etiket : Text = Bir
Düğme : Title = Kullanıcı bazı başlangıç eylemlerini uygular

Bir TouchUpInside olayda düğmemizin görünürlüğünü denetleyeceğiz ve buna arkadaki kodda başvurmamız gerekir. Şimdi bunu, aşağıdaki ekran görüntüsünde gösterildiği gibi Özellikler Bölmesi'ndeki Ad aButton ile tanımlayalım:

Tasarım Yüzeyiniz artık aşağıdaki ekran görüntüsüne benzer görünmelidir:

Her birine etiket ekleyip metni sırasıyla 'İki' ve 'Üç' olarak değiştirerek ve ViewController3öğesine biraz daha ayrıntı ViewController2 ekleyelim. Bu, hangi sekmeye/Görünüme baktığımızı kullanıcıya vurgular.

Düğmeyi kablolama

Uygulama ilk başlatıldığında yükleyeceğiz ViewController1 . Kullanıcı düğmeye dokunduğunda, düğmeyi gizler ve ilk sekmede örneğiyle birlikte ViewController1 bir UITabBarController yükleriz.

Kullanıcı serbest bıraktığında aButtonbir TouchUpInside olayının tetiklenmesini istiyoruz. Şimdi düğmeyi seçelim ve Özellikler panelinin Olaylar Sekmesinde , kodda başvurulabilmesi için olay işleyicisini InitialActionCompleted bildirelim. Bu, aşağıdaki ekran görüntüsünde gösterilmiştir:

Şimdi Olay tetiklendiğinde InitialActionCompletedGörünüm Denetleyicisi'ne düğmeyi gizlemesini söylememiz gerekiyor. içine ViewController1aşağıdaki kısmi yöntemi ekleyin:

partial void InitialActionCompleted (UIButton sender)
{
    aButton.Hidden = true;  
}

Dosyayı kaydedin ve uygulamayı çalıştırın. Birinci ekranın göründüğünü ve Touch Up'ta düğmenin kaybolduğunu görmemiz gerekir.

Sekme çubuğu denetleyicisini ekleme

Artık İlk görünümümüz beklendiği gibi çalışıyor. Ardından, görünüm 2 ve 3 ile birlikte öğesine UITabBarControllereklemek istiyoruz. Görsel Taslak'a Tasarımcı'da açalım.

Araç Kutusu'nda, Denetleyiciler ve Nesneler'in altında Sekme Çubuğu Denetleyicisi'ni arayın ve bunu Tasarım Yüzeyine sürükleyin. Aşağıdaki ekran görüntüsünde görebileceğiniz gibi, Sekme Çubuğu Denetleyicisi kullanıcı arabirimizdir ve bu nedenle varsayılan olarak iki Görünüm Denetleyicisi getirir:

Alttaki siyah çubuğu seçip delete tuşuna basarak bu yeni Görünüm denetleyicilerini silin.

Görsel Taslak'ta, TabBarController ile Görünüm Denetleyicilerimiz arasındaki geçişleri işlemek için Segues'i kullanabiliriz. İlk Görünüm ile etkileşime geçtikten sonra kullanıcıya sunulan TabBarController'a yüklemek istiyoruz. Şimdi bunu tasarımcıda ayarlayalım.

Düğmeden SekmeBarController'a Ctrl tuşunu basılı tutarak tıklayın ve sürükleyin . Fareyle yukarı doğru bir bağlam menüsü görüntülenir. Kalıcı bir segue kullanmak istiyoruz.

Sekmelerimizin her birini ayarlamak için, TabBarController'dan Görünüm Denetleyicilerimizin her birine bir ila üç sırasıyla Ctrl tuşunu basılı tutarak tıklayın ve aşağıda gösterildiği gibi bağlam menüsünden İlişki Sekmesini seçin:

Görsel Taslak aşağıdaki ekran görüntüsüne benzemelidir:

Sekme çubuğu öğelerinden birine tıklar ve özellikler panelini incelersek, aşağıda gösterildiği gibi birkaç farklı seçenek görebilirsiniz:

Rozet, başlık ve iOS tanımlayıcısı gibi bazı öznitelikleri düzenlemek için bunu kullanabiliriz.

Uygulamayı şimdi kaydedip çalıştırırsak, ViewController1 örneği TabBarController'a yüklendiğinde düğmenin yeniden görüntülendiğini göreceğiz. Geçerli Görünümün üst Görünüm Denetleyicisi olup olmadığını denetleyerek bunu düzeltelim. Varsa, TabBarController içinde olduğumuzu biliyoruz ve bu nedenle düğme gizli olmalıdır. Aşağıdaki kodu ViewController1 sınıfına ekleyelim:

public override void ViewDidLoad ()
{
    if (ParentViewController != null){
        aButton.Hidden = true;
    }
}

Uygulama çalıştırıldığında ve kullanıcı ilk ekrandaki düğmeye dokunduğunda, UITabBarController yüklenir ve ilk ekrandaki görünüm aşağıda gösterildiği gibi ilk sekmeye yerleştirilir:

Özet

Bu makalede uygulamada nasıl kullanılacağı UITabBarController ele alınmıştır. Her sekmeye denetleyici yüklemenin yanı sıra başlık, resim ve rozet gibi sekmelerdeki özellikleri ayarlama adımlarını gözden geçirdik. Ardından görsel taslakları kullanarak çalışma zamanında pencerenin değilken RootViewController nasıl yükleneceklerini UITabBarController inceledik.

Last updated on 2017-03-21

Aracılığıyla paylaş