iOS için Xamarin Tasarım Aracı ile Otomatik Düzen

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 çalıştıran bir Mac üzerindedir. Daha fazla bilgi için bkz . Xcode ile kullanıcı arabirimleri tasarlama.

Otomatik Düzen ("uyarlamalı düzen" olarak da adlandırılır), duyarlı bir tasarım yaklaşımıdır. Her öğenin konumunun ekrandaki bir noktaya sabit kodlandığı geçiş düzeni sisteminden farklı olarak Otomatik Düzen, tasarım yüzeyindeki diğer öğelere göre öğelerin konumları olan ilişkilerle ilgilidir. Otomatik Düzen'in merkezinde, ekrandaki diğer öğeler bağlamında bir öğenin veya öğe kümesinin yerleşimini tanımlayan kısıtlamalar veya kurallar fikri yer alır. Öğeler ekrandaki belirli bir konuma bağlı olmadığından kısıtlamalar, farklı ekran boyutlarında ve cihaz yönlendirmelerinde iyi görünen uyarlamalı bir düzen oluşturmaya yardımcı olur.

Bu kılavuzda Xamarin iOS Tasarım Aracı kısıtlamaları ve bunlarla nasıl çalışacağımızı tanıtacağız. Bu kılavuz, kısıtlamalarla program aracılığıyla çalışmayı kapsamaz. Otomatik Düzeni program aracılığıyla kullanma hakkında bilgi için Apple belgelerine bakın.

Gereksinimler

iOS için Xamarin Tasarım Aracı, Windows'da Visual Studio 2017 ve sonraki sürümlerde Mac için Visual Studio kullanılabilir.

Bu kılavuzda, iOS'a giriş Tasarım Aracı kılavuzunda Tasarım Aracı bileşenleriyle ilgili bilgiler yer alır.

Kısıtlamalara Giriş

Kısıtlama, ekrandaki iki öğe arasındaki ilişkinin matematiksel bir gösterimidir. Ui öğesinin konumunu matematiksel bir ilişki olarak göstermek, bir UI öğesinin konumunu sabit kodlamayla ilişkili çeşitli sorunları çözer. Örneğin, ekranın alt kısmından dikey modda 20 piksellik bir düğme yerleştirseydik, düğmenin konumu yatay modda ekranın dışında olurdu. Bunu önlemek için düğmenin alt kenarını görünümün alt kısmından 20 piksel olacak şekilde bir kısıtlama ayarlayabiliriz. Düğme kenarının konumu daha sonra button.bottom = view.bottom - 20px olarak hesaplanır ve bu da düğmeyi görünümün en altından hem dikey hem de yatay modda 20px konumuna yerleştirir. Kısıtlamaları kullanıcı arabirimi tasarımında bu kadar kullanışlı hale getiren, matematik ilişkisine dayalı yerleştirmeyi hesaplama özelliğidir.

Kısıtlama belirlediğimizde, kısıtlanacak nesneleri ve kısıtlamanın üzerinde işlem yapacağı özellikleri veya öznitelikleri bağımsız değişken olarak alan bir NSLayoutConstraint nesne oluştururuz. iOS tasarımcısında öznitelikler öğenin solu, sağı, üstü ve altı gibi kenarları içerir. Ayrıca yükseklik ve genişlik gibi boyut öznitelikleri ile merkez noktası konumu, centerX ve centerY gibi öznitelikleri de içerir. Örneğin, iki düğmenin sol sınırının konumuna bir kısıtlama eklediğimizde, Tasarım Aracı kapaklar altında aşağıdaki kodu oluşturur:

View.AddConstraint (NSLayoutConstraint.Create (Button1, NSLayoutAttribute.Left, NSLayoutRelation.Equal, Button2, NSLayoutAttribute.Left, 1, 10));

Sonraki bölümde, Otomatik Düzeni etkinleştirme ve devre dışı bırakma ve Kısıtlamalar Araç Çubuğu'nu kullanma dahil olmak üzere iOS Tasarım Aracı kullanarak kısıtlamalarla çalışma konuları yer alır.

Otomatik Düzeni Etkinleştir

Varsayılan iOS Tasarım Aracı yapılandırmasında kısıtlama modu etkindir. Ancak, el ile etkinleştirmeniz veya devre dışı bırakmanız gerekirse, bunu iki adımda yapabilirsiniz:

1. Tasarım yüzeyinde boş bir alana tıklayın. Bu işlem tüm öğelerin seçimini kaldırır ve Görsel Taslak belgesinin özelliklerini getirir.

2. Özellik panelinde Otomatik Katmanı Kullan onay kutusunu işaretleyin veya işaretini kaldırın:

   

Varsayılan olarak, yüzeyde hiçbir kısıtlama oluşturulmaz veya görünmez. Bunun yerine, derleme zamanında çerçeve bilgilerinden otomatik olarak çıkarılırlar. Kısıtlamalar eklemek için tasarım yüzeyinde bir öğe seçmemiz ve bu öğeye kısıtlamalar eklememiz gerekir. Bunu Kısıtlama Araç Çubuğu'nu kullanarak yapabiliriz.

Kısıtlamalar Araç Çubuğu

Kısıtlamalar araç çubuğu güncelleştirildi ve şimdi iki ana bölümden oluşuyor:

• Kısıtlama modu düğmesi iki durumlu düğmesi: Daha önce, tasarım yüzeyinde seçili bir görünüme yeniden tıklayarak kısıtlama moduna girmiştiniz. Şimdi kısıtlamalar çubuğunda bu iki durumlu düğmeyi kullanmalısınız:

  

• "Kısıtlamaları Güncelleştir" düğmesi: Kısıtlamaları düzenleme modunda olup olmadığınız bağlı olarak değişikliklerin dikkate alınmış olması önemlidir.

  • Kısıtlama düzenleme modunda bu düğme, kısıtlamaları öğe çerçevesiyle eşleşecek şekilde ayarlar.
  • Çerçeve düzenleme modunda bu düğme, öğe çerçevesini kısıtlamaların tanımlıyor olduğu konumla eşleşecek şekilde ayarlar.

Açılır menü düzenleme kısıtlamaları

Kısıtlamalar düzenleyicisi açılır penceresi, belirli bir görünüm için birden çok kısıtlamayı aynı anda eklememize ve güncelleştirmemize olanak tanır. Görünümü iki görünümün sol kenarlarına hizalama gibi birden çok aralık, en boy oranı ve hizalama kısıtlaması oluşturabiliriz.

Seçili görünümde kısıtlamaları düzenlemek için üç noktaya tıklayarak açılır menüye tıklayın:

Kısıtlamalar açılır penceresini açarken, görünümde önceden ayarlanmış kısıtlamaları görüntüler. Sağ üst köşedeki birleşik giriş kutusundan Tüm Kenarlar'ı seçerek tüm aralık kısıtlamalarını ayarlayabilir ve bunları kaldırmak için Tümünü Temizle'yi seçebiliriz.

W genişliği, H ise yükseklik kısıtlamasını ayarlar. En Boy Oranı'nı denetlediğinizde, görünümlerin yüksekliği ve genişliği farklı ekran boyutlarında denetlenir, görünümün genişliği rasyon için payda ve yükseklik payda olarak kullanılır.

Aralık kısıtlamaları için dört birleşik giriş kutusu, kısıtlamayı tutturmak için komşu görünümleri listeler

Surface Tabanlı Kısıtlama Düzenleme

Daha hassas ayarlı kısıtlama düzenlemesi için kısıtlamalarla doğrudan tasarım yüzeyinde etkileşim kurabiliriz. Bu bölümde, sabitleme aralığı denetimleri, bırakma alanları ve farklı kısıtlama türleriyle çalışma dahil olmak üzere yüzey tabanlı kısıtlama düzenlemenin temelleri açıklanmıştır.

Kısıtlama Oluşturma

iOS Tasarım Aracı aracı, tasarım yüzeyindeki öğeleri işlemek için iki tür denetim sunar. Aşağıdaki görüntüde gösterildiği gibi denetimleri ve sabitleme aralığı denetimlerini sürükleme:

Bunlar, kısıtlama çubuğundaki kısıtlama modu düğmesi seçilerek değiştirilir.

Öğenin her tarafındaki 4 T şeklindeki tutamaçlar, bir kısıtlama için öğenin üst, sağ, alt ve sol kenarlarını tanımlar. Öğesinin sağ ve alt kısmındaki I şeklindeki iki tutamaç sırasıyla yükseklik ve genişlik kısıtlamasını tanımlar. Orta kare hem centerX hem de centerY kısıtlamalarını işler.

Kısıtlama oluşturmak için bir tutamaç seçin ve bunu tasarım yüzeyinde bir yere sürükleyin. Sürüklemeye başladığınızda, yüzeyde neleri kısıtlayabileceğinizi söyleyen bir dizi yeşil çizgi/kutu görünür. Örneğin, aşağıdaki ekran görüntüsünde ortadaki düğmenin üst tarafını kısıtlıyoruz:

Diğer iki düğmedeki üç kesikli yeşil çizgiye dikkat edin. Yeşil çizgiler bırakma alanlarını veya kısıtlayabileceğiniz diğer öğelerin özniteliklerini gösterir. Yukarıdaki ekran görüntüsünde, diğer iki düğme düğmemizi kısıtlamak için 3 dikey bırakma alanı ( alt, orta, üst) sunar. Görünümün en üstündeki kesikli yeşil çizgi, görünüm denetleyicisinin görünümün en üstünde bir kısıtlama sunduğu, düz yeşil kutu ise görünüm denetleyicisinin üst düzen kılavuzunun altında bir kısıtlama sunduğu anlamına gelir.

Önemli

Düzen kılavuzları, durum çubukları veya araç çubukları gibi sistem çubuklarının varlığını dikkate alan üst ve alt kısıtlamalar oluşturmamıza olanak sağlayan özel kısıtlama hedefleri türleridir. En yeni sürüm durum çubuğunun altında uzanan kapsayıcı görünümüne sahip olduğundan, ana kullanımlardan biri iOS 6 ile iOS 7 arasında uyumlu bir uygulamaya sahip olmaktır. Üst düzen kılavuzu hakkında daha fazla bilgi için Apple belgelerine bakın.

Sonraki üç bölümde farklı kısıtlama türleriyle çalışma gösterilir.

Boyut Kısıtlamaları

Boyut kısıtlamalarıyla ( yükseklik ve genişlik ) iki seçeneğiniz vardır. İlk seçenek, yukarıdaki örnekte gösterildiği gibi tutamacı bir komşu öğesi boyutuna kısıtlamak için sürüklemektir. Diğer seçenek, kendi kendine kısıtlama oluşturmak için tanıtıcıya çift tıklamaktır. Bu, aşağıdaki ekran görüntüsünde gösterildiği gibi sabit bir boyut değeri belirtmemizi sağlar:

Center Kısıtlamaları

Kare tutamacı bağlama bağlı olarak bir centerX veya centerY kısıtlaması oluşturur. Kare tutamacını sürüklemek, aşağıdaki ekran görüntüsünde gösterildiği gibi hem dikey hem de yatay bırakma alanları sunmak için diğer öğeleri aydınlatacaktır:

Dikey bir bırakma alanı seçerseniz centerY kısıtlaması oluşturulur. Yatay bir bırakma alanı seçerseniz kısıtlama centerX'i temel alır.

Birleşim Kısıtlamaları

İki öğe arasında hem hizalama hem de boyut eşitliği kısıtlamaları oluşturmak için, aşağıdaki ekran görüntüsünde gösterildiği gibi, sırasıyla yatay hizalama, dikey hizalama ve boyut eşitliklerini belirtmek üzere üst araç çubuğundan öğeleri seçebilirsiniz:

Kısıtlamaları Görselleştirme ve Düzenleme

Kısıtlama eklediğinizde, bir öğeyi seçtiğinizde bu kısıtlama tasarım yüzeyinde mavi çizgi olarak görüntülenir:

Mavi bir çizgiye tıklayıp kısıtlama değerlerini doğrudan özellik panelinde düzenleyerek kısıtlama seçebilirsiniz. Alternatif olarak, mavi bir çizgiye çift tıklanması, değerleri doğrudan tasarım yüzeyinde düzenlemenizi sağlayan bir açılır pencere açar:

Kısıtlama Sorunları

Kısıtlamalar kullanılırken çeşitli sorun türleri ortaya çıkabilir:

• Çakışan kısıtlamalar — Bu durum, birden çok kısıtlama öğeyi bir öznitelik için çakışan değerlere sahip yapmaya zorladığında ve kısıtlama altyapısı bunları mutabık kılamadığında gerçekleşir.
• Yetersiz sınırlanmış öğeler — Bir öğenin özellikleri (konum + boyut), kısıtlamaların geçerli olması için tüm kısıtlamaların ve iç boyutların kapsamına alınmalıdır. Bu değerler belirsizse, öğenin az kısıtlandığı söylenir.
• Çerçeve yanlış yer değiştirme — Bu, bir öğenin çerçevesi ve kısıtlama kümesi iki farklı sonuç dikdörtgen tanımladığında oluşur.

Bu bölümde, yukarıda listelenen üç sorun ayrıntılı olarak ele alınır ve bunların nasıl işleneceğinin ayrıntıları sağlanır.

Çakışan Kısıtlamalar

Çakışan kısıtlamalar kırmızıyla işaretlenir ve bir uyarı simgesine sahiptir. Uyarı simgelerinin üzerine gelindiğinde çakışma hakkında bilgi içeren bir açılır pencere açılır:

Kısıtlı Öğeler

Kısıtlı öğeler turuncu renkte görünür ve görünüm denetleyicisi nesne çubuğunda turuncu işaretçi simgesinin görünümünü tetikler:

Bu işaretçi simgesine tıklarsanız, aşağıdaki ekran görüntüsünde gösterildiği gibi, sahnedeki kısıtlı öğeler hakkında bilgi alabilir ve sorunları tamamen kısıtlayarak veya kısıtlamalarını kaldırarak çözebilirsiniz:

Çerçeve Yanlış Yerleştirilmiş

Çerçeve yanlış yerleştirildiğinde, az kısıtlanmış öğelerle aynı renk kodu kullanılır. Öğe her zaman yerel çerçevesi kullanılarak yüzey üzerinde işlenir, ancak çerçevenin yanlış yerleştirilmesi durumunda kırmızı bir dikdörtgen, aşağıdaki ekran görüntüsünde gösterildiği gibi uygulama çalıştırıldığında öğenin nerede sona ereceğini işaret eder:

Çerçeve yanlış yer değiştirme hatalarını çözmek için kısıtlama araç çubuğundan Çerçeveleri Kısıtlamalara Göre Güncelleştir düğmesini seçin (en sağ düğme):

Bu, öğe çerçevesini denetimler tarafından tanımlanan konumlarla eşleşecek şekilde otomatik olarak ayarlar.

Koddaki Kısıtlamaları Değiştirme

Uygulamanızın gereksinimlerine bağlı olarak, koddaki bir kısıtlamayı değiştirmeniz gereken zamanlar olabilir. Örneğin, kısıtlamanın önceliğini değiştirmek veya Kısıtlamayı tamamen devre dışı bırakmak için Kısıtlamayı Görüntüle'yi yeniden boyutlandırmak veya yeniden konumlandırmak için.

Koddaki bir Kısıtlamaya erişmek için önce aşağıdakileri yaparak bunu iOS Tasarım Aracı kullanıma sunmanız gerekir:

1. Kısıtlamayı normal şekilde oluşturun (yukarıda listelenen yöntemlerden herhangi birini kullanarak).

2. Belge Anahat Gezgini'nde istediğiniz Kısıtlamayı bulun ve seçin:

   

3. Ardından, Özellikler Gezgini'nin Pencere Öğesi sekmesinde kısıtlamaya bir Ad atayın:

   

4. Değişikliklerinizi kaydedin.

Yukarıdaki değişiklikler gerçekleştiğinde, kodda Kısıtlama'ya erişebilir ve özelliklerini değiştirebilirsiniz. Örneğin, ekli Görünümün yüksekliğini sıfır olarak ayarlamak için aşağıdakileri kullanabilirsiniz:

ViewInfoHeight.Constant = 0;

iOS Tasarım Aracı kısıtlaması için aşağıdaki ayar göz önünde bulundurulduğunda:

Ertelenen Düzen Geçişi

Otomatik Düzen Altyapısı, Kısıtlama değişikliklerine yanıt olarak ekli Görünümü anında güncelleştirmek yerine yakın bir gelecek için Ertelenmiş Düzen Geçişi zamanlar. Bu ertelenmiş geçiş sırasında, verilen Görünümün Kısıtlaması güncelleştirilmekle kalır, hiyerarşideki her Görünüm için kısıtlamalar yeniden hesaplanır ve yeni düzen için ayarlayacak şekilde güncelleştirilir.

Herhangi bir noktada, üst Görünümün veya SetNeedsUpdateConstraints yöntemlerini çağırarak SetNeedsLayout kendi Ertelenmiş Düzen Geçişinizi zamanlayabilirsiniz.

Ertelenmiş Düzen Geçişi, görünüm hiyerarşisinden iki benzersiz geçişten oluşur:

• Güncelleştirme Geçişi - Bu geçişte, Otomatik Düzen Altyapısı görünüm hiyerarşisini geçer ve tüm Görünüm Denetleyicilerinde yöntemini ve UpdateConstraints tüm Görünümlerde yöntemini çağırırUpdateViewConstraints.
• Düzen Geçişi - Yeniden, Otomatik Düzen Altyapısı görünüm hiyerarşisini geçer, ancak bu kez tüm Görünüm Denetleyicilerinde yöntemini ve LayoutSubviews tüm Görünümlerde yöntemini çağırırViewWillLayoutSubviews. yöntemi, LayoutSubviews her alt görünümün özelliğini Otomatik Düzen Altyapısı tarafından hesaplanan dikdörtgenle güncelleştirir Frame .

Kısıtlama Değişikliklerini Animasyona Ekleme

Kısıtlama özelliklerini değiştirmenin yanı sıra, Görünüm Kısıtlamalarındaki değişikliklere animasyon eklemek için Çekirdek Animasyon'u da kullanabilirsiniz. Örneğin:

UIView.BeginAnimations("OpenInfo");
UIView.SetAnimationDuration(1.0f);
ViewInfoHeight.Constant = 237;
View.LayoutIfNeeded();

//Execute Animation
UIView.CommitAnimations();

Buradaki anahtar, animasyon bloğunun içindeki üst görünümün yöntemini çağırmaktır LayoutIfNeeded . Bu, görünüme animasyonlu konum veya boyut değişikliğinin her "çerçevesini" çizmesini söyler. Bu satır olmadan Görünüm, animasyon eklemeden son sürüme uydurulardı.

Özet

Bu kılavuzda iOS Auto (veya "uyarlamalı") Düzeni ve kısıtlamalar kavramını tasarım yüzeyindeki öğeler arasındaki ilişkilerin matematiksel gösterimleri olarak tanıtıldı. iOS tasarımcısında Otomatik Düzen'in nasıl etkinleştirileceği, Kısıtlamalar araç çubuğuyla nasıl çalışıldığı ve kısıtlamaların tasarım yüzeyinde ayrı ayrı nasıl düzenileceği açıklanmıştır. Ardından, üç yaygın kısıtlama sorununun nasıl giderilir açıklanmıştır. Son olarak koddaki kısıtlamaların nasıl değiştirileceği gösterildi.

İlişkili Bağlantılar

• Görsel Taslaklara Giriş
• iOS Tasarlanabilir Denetimler İzlenecek Yolu
• Android Tasarım Aracı Genel Bakış
• ProgramLı Kısıtlamalar