Xamarin.iOS'ta Yığın Görünümleri

Bu makale, yatay veya dikey olarak düzenlenmiş bir yığında bir dizi alt görünümü yönetmek için Xamarin.iOS uygulamasındaki yeni UIStackView denetimini kullanmayı kapsar.

Önemli

StackView iOS Tasarım Aracı destekleniyor olsa da Kararlı kanalı kullanırken kullanılabilirlik hatalarında karşılaşabileceğinizi lütfen unutmayın. Beta veya Alfa kanallarının değiştirilmesi bu sorunu hafifletmelidir. Gerekli düzeltmeler Kararlı kanalda uygulanana kadar bu kılavuzu Xcode kullanarak sunmaya karar verdik.

Yığın Görünümü denetimi (UIStackView), iOS cihazının yönlendirmesine ve ekran boyutuna dinamik olarak yanıt veren alt görünüm yığınını yatay veya dikey olarak yönetmek için Otomatik Düzen ve Boyut Sınıflarının gücünden yararlanıyor.

Stack View'a eklenen tüm alt görünümlerin düzeni, eksen, dağıtım, hizalama ve aralık gibi geliştirici tarafından tanımlanan özelliklere göre yönetilir:

Bir Xamarin.iOS uygulamasında kullanırken UIStackView geliştirici, alt görünümleri iOS Tasarım Aracı görsel taslak içinde tanımlayabilir veya C# kodunda alt görünümleri ekleyip kaldırarak tanımlayabilir.

Bu belge iki bölümden oluşur: ilk yığın görünümünüzü uygulamanıza yardımcı olacak hızlı başlangıç ve ardından nasıl çalıştığı hakkında daha fazla teknik ayrıntı.

UIStackView videosu

UIStackView Hızlı Başlangıcı

Denetime UIStackView hızlı bir giriş olarak, kullanıcının 1 ila 5 derecelendirme girmesini sağlayan basit bir arabirim oluşturacağız. İki Yığın Görünümü kullanacağız: biri cihazın ekranındaki arabirimi dikey olarak düzenlemek için, diğeri de ekranda yatay olarak 1-5 derecelendirme simgesini düzenlemek için.

Kullanıcı arabirimini tanımlama

Yeni bir Xamarin.iOS projesi başlatın ve Xcode'un Interface Builder'ında Main.storyboard dosyasını düzenleyin. İlk olarak, Görünüm Denetleyicisi'nde tek bir Dikey Yığın Görünümü sürükleyin:

Öznitelik Denetçisi'nde aşağıdaki seçenekleri ayarlayın:

Where:

• Eksen : Yığın Görünümü'nü alt görünümleri Yatay veya Dikey olarak düzenleyip düzenlemediğini belirler.
• Hizalama – Alt görünümlerin Yığın Görünümü içinde nasıl hizalı olduğunu denetler.
• Dağıtım : Alt görünümlerin Yığın Görünümü içinde nasıl boyutlandırılmasını denetler.
• Aralık : Yığın Görünümü'ndeki her alt görünüm arasındaki en düşük boşluğu denetler.
• Temel Göreli – İşaretlenirse, her alt görünümün dikey aralığı temelden türetilir.
• Düzen Kenar Boşlukları Göreli : Alt görünümleri standart düzen kenar boşluklarına göre yerleştirir.

Yığın Görünümü ile çalışırken Hizalama'yı alt görünümün X ve Y konumu, Dağıtım'ı ise Yükseklik ve Genişlik olarak düşünebilirsiniz.

Önemli

UIStackView , işleme olmayan bir kapsayıcı görünümü olarak tasarlanmıştır ve bu nedenle diğer alt sınıflar gibi tuvale çizilmemiştir UIView. Bu nedenle veya geçersiz kılma gibi BackgroundColor özelliklerin DrawRect ayarlanması görsel bir etkiye sahip olmayacaktır.

Aşağıdakine benzemesi için bir Etiket, ImageView, iki Düğme ve Yatay Yığın Görünümü ekleyerek uygulamanın arabirimini düzenlemeye devam edin:

Yatay Yığın Görünümü'nü aşağıdaki seçeneklerle yapılandırın:

Derecelendirmedeki her bir "noktayı" temsil eden simgenin Yatay Yığın Görünümü'ne eklendiğinde esnetilmesini istemediğimiz için, Ortala ve Dağıtım'ıEşit Doldur olarak ayarladık.

Son olarak, aşağıdaki Çıkışlar ve Eylemler'i bağla:

UiStackView'ı Koddan Doldurma

Mac için Visual Studio dönün, ViewController.cs dosyasını düzenleyin ve aşağıdaki kodu ekleyin:

public int Rating { get; set;} = 0;
...

partial void IncreaseRating (Foundation.NSObject sender) {

    // Maximum of 5 "stars"
    if (++Rating > 5 ) {
        // Abort
        Rating = 5;
        return;
    }

    // Create new rating icon and add it to stack
    var icon = new UIImageView (new UIImage("icon.png"));
    icon.ContentMode = UIViewContentMode.ScaleAspectFit;
    RatingView.AddArrangedSubview(icon);

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });

}

partial void DecreaseRating (Foundation.NSObject sender) {

    // Minimum of zero "stars"
    if (--Rating < 0) {
        // Abort
        Rating =0;
        return;
    }

    // Get the last subview added
    var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

    // Remove from stack and screen
    RatingView.RemoveArrangedSubview(icon);
    icon.RemoveFromSuperview();

    // Animate stack
    UIView.Animate(0.25, ()=>{
        // Adjust stack view
        RatingView.LayoutIfNeeded();
    });
}

Şimdi bu kodun birkaç parçasına ayrıntılı olarak göz atalım. İlk olarak, beşten fazla "yıldız" veya sıfırdan küçük olmadığını denetlemek için bir if deyim kullanırız.

Yeni bir "yıldız" eklemek için görüntüsünü yüklüyoruz ve İçerik Modu'nu Boyuta Uygun Olarak Ölçeklendirin:

var icon = new UIImageView (new UIImage("icon.png"));
icon.ContentMode = UIViewContentMode.ScaleAspectFit;

Bu, Yığın Görünümü'ne eklendiğinde "yıldız" simgesinin deforme olmasını engeller.

Ardından, Stack View'un alt görünüm koleksiyonuna yeni "yıldız" simgesini ekleyeceğiz:

RatingView.AddArrangedSubview(icon);

öğesini öğesine değil, 'nin ArrangedSubviews özelliğine eklediğimize SubViewUIImageViewUIStackViewdikkat edin. Yığın Görünümünün düzenini denetlemesini istediğiniz tüm görünümler özelliğine ArrangedSubviews eklenmelidir.

Yığın Görünümünden bir alt görünümü kaldırmak için önce kaldırılacak alt görünümü elde ederiz:

var icon = RatingView.ArrangedSubviews[RatingView.ArrangedSubviews.Length-1];

Ardından hem koleksiyondan hem de ArrangedSubviews Süper Görünüm'den kaldırmamız gerekir:

// Remove from stack and screen
RatingView.RemoveArrangedSubview(icon);
icon.RemoveFromSuperview();

Alt görünümü yalnızca ArrangedSubviews koleksiyondan kaldırmak, bunu Yığın Görünümü'nü denetiminden çıkarır, ancak ekrandan kaldırmaz.

Kullanıcı arabirimini test etme

Gerekli tüm kullanıcı arabirimi öğeleri ve kodlar kullanıma sunulurken artık arabirimi çalıştırabilir ve test edebilirsiniz. Kullanıcı arabirimi görüntülendiğinde, Dikey Yığın Görünümü'ndeki tüm öğeler yukarıdan aşağıya eşit aralıklı olur.

Kullanıcı Derecelendirmeyi Artır düğmesine dokunduğunda, ekrana başka bir "yıldız" eklenir (en fazla 5):

Yatay Yığın Görünümü'nde "yıldızlar" otomatik olarak ortalanır ve eşit olarak dağıtılır. Kullanıcı Derecelendirmeyi Azalt düğmesine dokunduğunda bir "yıldız" kaldırılır (hiçbiri kalana kadar).

Yığın Görünümü Ayrıntıları

Artık denetimin ne UIStackView olduğu ve nasıl çalıştığı hakkında genel bir fikrimiz olduğuna göre, bazı özelliklerine ve ayrıntılarına daha ayrıntılı bir göz atalım.

Otomatik Düzen ve Boyut Sınıfları

Yukarıda gördüğümüz gibi, bir alt görünüm Bir Yığın Görünümüne eklendiğinde düzeni, düzenlenmiş görünümleri konumlandırmak ve boyutlandırmak için Otomatik Düzen ve Boyut Sınıfları kullanılarak bu Yığın Görünümü tarafından tamamen denetlenmektedir.

Yığın Görünümü, koleksiyonundaki ilk ve son alt görünümü Dikey Yığın Görünümleri için Üst ve Alt kenarlara veya Yatay Yığın Görünümleri için Sol ve Sağ kenarlara sabitler. özelliğini trueolarak ayarlarsanızLayoutMarginsRelativeArrangement, görünüm alt görünümleri kenar yerine ilgili kenar boşluklarına sabitler.

Yığın Görünümü, tanımlanan Axis (hariç) boyunca alt görünümlerin boyutunu hesaplarken alt görünümün FillEqually Distributionözelliğini kullanırIntrinsicContentSize. tüm FillEqually Distribution alt görünümleri aynı boyutta olacak şekilde yeniden boyutlandırarak boyunca Yığın Görünümü'nü Axisdoldurur.

dışındaFill Alignment, Yığın Görünümü, görünümün belirtilene Axisdikey boyutunu hesaplamak için alt görünümün IntrinsicContentSize özelliğini kullanır. Fill Alignmentiçin tüm alt görünümler, verilen Axisöğesine dikey olarak Yığın Görünümü'nü dolduracak şekilde boyutlandırılır.

Yığın Görünümünü Konumlandırma ve Boyutlandırma

Yığın Görünümü herhangi bir alt görünümün düzeni üzerinde (ve Distributiongibi Axis özelliklere göre) tam denetime sahip olsa da, Otomatik Düzen ve Boyut Sınıflarını kullanarak Yığın Görünümünü (UIStackView) üst görünümü içinde konumlandırmanız gerekir.

Bu genellikle, genişletmek ve daraltmak için Yığın Görünümü'nü en az iki kenarının sabitlenerek konumunun tanımlanması anlamına gelir. Ek kısıtlamalar olmadan, Yığın Görünümü aşağıdaki gibi tüm alt görünümlerine uyacak şekilde otomatik olarak yeniden boyutlandırılır:

• Boyutu, Axis tüm alt görünüm boyutlarının toplamı ve her alt görünüm arasında tanımlanmış tüm boşluklar olacaktır.
• LayoutMarginsRelativeArrangement özelliği isetrue, Yığın Görünümleri boyutu kenar boşlukları için de yer içerir.
• öğesine dik Axis boyut, koleksiyondaki en büyük alt görünüme ayarlanır.

Ayrıca, Yığın Görünümünün Yükseklik ve Genişlik kısıtlamaları belirtebilirsiniz. Bu durumda, ve özellikleri tarafından belirlenen DistributionAlignment Yığın Görünümü tarafından belirtilen alanı doldurmak için alt görünümler düzenlenir (boyutlandırılır).

BaselineRelativeArrangement özelliği isetrue, alt görünümler Top, Bottom veya Center- Y konumu yerine ilk veya son alt görünümün taban çizgisine göre düzenlenir. Bunlar Stack View'un içeriğinde aşağıdaki gibi hesaplanır:

• Dikey Yığın Görünümü, ilk taban çizgisi için ilk alt görünümü, son için de son görünümü döndürür. Bu alt görünümlerden biri kendileri Yığın Görünümleri ise, ilk veya son taban çizgileri kullanılır.
• Yatay Yığın Görünümü, hem ilk hem de son taban çizgisi için en uzun alt görünümünü kullanır. En uzun görünüm aynı zamanda Bir Yığın Görünümü ise, taban çizgisi olarak en uzun alt görünümünü kullanır.

Önemli

Taban çizgisi yanlış konuma hesaplanacağından, Temel Hizalama esnetilmiş veya sıkıştırılmış alt görünüm boyutlarında çalışmaz. Temel Hizalama için alt görünümün Yüksekliğinin İç İçerik Görünümünün Yüksekliğiyle eşleştiğinden emin olun.

Ortak Yığın Görünümü Kullanımları

Yığın Görünümü denetimleriyle iyi çalışan birkaç düzen türü vardır. Apple'a göre, daha yaygın kullanımlardan birkaçı şunlardır:

• Eksen Boyunca Boyut Tanımlama – İki kenarı da Yığın Görünümü'ne Axis sabitleyerek ve konumu ayarlamak için bitişik kenarlardan birini sabitleyerek, Yığın görünümü alt görünümlerinde tanımlanan alana sığacak şekilde eksen boyunca büyür.
• Alt Görünümün Konumunu Tanımlama – Yığın Görünümü'nü üst görünümüne bitişik kenarlarına sabitleyerek, Yığın Görünümü her iki boyutta da alt görünümlere uyacak şekilde büyür.
• Yığının Boyutunu ve Konumunu Tanımlama – Yığın Görünümü'nü dört kenarı da üst görünüme sabitleyerek, Yığın Görünümü alt görünümleri Yığın Görünümü'nde tanımlanan alana göre düzenler.
• Eksene Dikey Boyut Tanımlama – Konumu ayarlamak için her iki kenarı da Yığın Görünümü'ne Axis ve eksen boyunca kenarlardan birini sabitleyerek Yığın görünümü, alt görünümleri tarafından tanımlanan alana sığacak şekilde eksene dik olarak büyür.

Görünümü Yönetme

UIStackView, işleme olmayan bir kapsayıcı görünümü olarak tasarlanmıştır ve bu nedenle diğer alt sınıfları gibi tuvale çizilmemiştirUIView. Veya geçersiz kılma gibi BackgroundColor özellikleri ayarlamanın DrawRect görsel bir etkisi olmaz.

Stack View'un alt görünüm koleksiyonunu nasıl düzenleyeceğini denetleyecek birkaç özellik vardır:

• Eksen : Yığın Görünümü'nü alt görünümleri Yatay veya Dikey olarak düzenleyip düzenlemediğini belirler.
• Hizalama – Alt görünümlerin Yığın Görünümü içinde nasıl hizalı olduğunu denetler.
• Dağıtım : Alt görünümlerin Yığın Görünümü içinde nasıl boyutlandırılmasını denetler.
• Aralık : Yığın Görünümü'ndeki her alt görünüm arasındaki en düşük boşluğu denetler.
• Temel Göreli – ise true, her alt görünümün dikey aralığı temelden türetilir.
• Düzen Kenar Boşlukları Göreli : Alt görünümleri standart düzen kenar boşluklarına göre yerleştirir.

Genellikle az sayıda alt görünümü düzenlemek için Yığın Görünümü kullanırsınız. Daha karmaşık Kullanıcı Arabirimleri, bir veya daha fazla Stack Görünümü iç içe yerleştirilerek oluşturulabilir (yukarıdaki UIStackView Hızlı Başlangıcı'nda yaptığımız gibi).

Alt görünümlere ek kısıtlamalar ekleyerek (örneğin Yükseklik veya Genişlik'i denetlemek için) URI görünümünü daha ayrıntılı ayarlayabilirsiniz. Ancak, Stack View tarafından sunulanlarla çakışan kısıtlamaların dahil edilmemesi için dikkatli olunmalıdır.

Düzenlenmiş Görünümleri ve Alt Görünümlerin Tutarlılığını Koruma

Stack Görünümü, aşağıdaki kuralları kullanarak özelliğinin ArrangedSubviews her zaman özelliğinin Subviews bir alt kümesi olmasını sağlar:

• Koleksiyona ArrangedSubviews bir alt görünüm eklenirse, otomatik olarak koleksiyona Subviews eklenir (zaten bu koleksiyonun bir parçası değilse).
• Bir alt görünüm koleksiyondan Subviews kaldırılırsa (görüntüden kaldırılır), koleksiyondan ArrangedSubviews da kaldırılır.
• Bir alt görünümün koleksiyondan ArrangedSubviews kaldırılması onu koleksiyondan Subviews kaldırmaz. Bu nedenle artık Yığın Görünümü tarafından yerleştirilmeyecek, ancak ekranda görünmeye devam edecektir.

Koleksiyon ArrangedSubviews her zaman koleksiyonun Subview bir alt kümesidir, ancak her koleksiyondaki tek tek alt görünümlerin sırası ayrıdır ve aşağıdakiler tarafından denetlenmektedir:

• Koleksiyondaki ArrangedSubviews alt görünümlerin sırası, yığın içindeki görüntüleme sırasını belirler.
• Koleksiyondaki alt görünümlerin sırası, görünümün Subview içindeki Z Sırasını (veya katmanlarını) öne geri belirler.

İçeriği Dinamik Olarak Değiştirme

Yığın Görünümü, bir alt görünüm eklendiğinde, kaldırıldığında veya gizlenildiğinde alt görünümlerin düzenini otomatik olarak ayarlar. Stack View'un herhangi bir özelliği (örneğin Axis, ) ayarlanırsa düzen de ayarlanır.

Düzen değişiklikleri animasyonlu olarak bir Animasyon Bloğuna yerleştirilebilir, örneğin:

// Animate stack
UIView.Animate(0.25, ()=>{
    // Adjust stack view
    RatingView.LayoutIfNeeded();
});

Stack View özelliklerinin çoğu görsel taslak içindeki Boyut Sınıfları kullanılarak belirtilebilir. Bu özellikler, boyut veya yönlendirme değişikliklerine yanıt olarak otomatik olarak animasyonlanır.

Özet

Bu makalede, Xamarin.iOS uygulamasında yatay veya dikey olarak düzenlenmiş bir yığında bir alt görünüm kümesini yönetmeye yönelik yeni UIStackView denetim (iOS 9 için) ele alınmıştır. Kullanıcı arabirimi oluşturmak için Stack Görünümleri'ni kullanmanın basit bir örneğiyle başladı ve Stack Görünümlerine ve bunların özelliklerine ve özelliklerine daha ayrıntılı bir bakışla tamamlandı.

İlişkili Bağlantılar

• iOS 9.0'daki Yenilikler
• UIStackView Başvurusu
• UIStackView tanıtımı (video)