SORU
10 EYLÜL 2014, ÇARŞAMBA


Boy-fit taklit davranışları Güncellemelerinden 6 Otomatik girilmesi

Boyutuna Otomatik kullanım ve görünüm düzeni UİİmageView-uygun boy içerik modu andırır bir şekilde istiyorum.

Interface Builder içinde kapsayıcı bir görünüm içinde bir küme var. Bu küme saygı keşke bazı doğal En Boy oranı vardır. Konteyner görünüm boyutu bilinmeyen çalışma zamanı kadar.

Eğer konteyner görünümün En Boy oranı alt görünümünü daha geniş ise, o zaman küme yüksekliği üst görünüm yüksekliği eşit olmasını istiyorum.

Eğer konteyner görünümün En Boy oranı alt görünümünü daha uzun ise, o zaman küme genişliği üst görünüm genişliği eşit olmasını istiyorum.

Her iki durumda da alt görünümünü yatay ve dikey olarak konteyner görünümü içinde ortalanmış olmasını diliyorum.

Bir şekilde bu böyle büyük mükafat 6 Otomatik kısıtlamaları kullanarak veya önceki sürümünde ulaşmak için var mı? İdeal Interface Builder kullanarak, belki değil ama eğer böyle kısıtlamaları tanımlamak mümkün programlı.

CEVAP
10 EYLÜL 2014, ÇARŞAMBA


Sığdırmak için tarif ediyorsun; boy-fit tarif ediyorsun. (Bu konuda soru düzenlenmekte.) Bu küme, en boy oranını ve tamamen üst uydurma içinde koruyarak mümkün olduğu kadar büyük olur.

Her neyse, otomatik düzen ile bunu yapabilirsiniz. Bu İB tamamen böyle büyük mükafat 5.1 olarak yapabilirsiniz. Hadi biraz manzaralı

some views

Açık yeşil görünümü 4:1 görüntü oranına sahip. Koyu yeşil görünüm 1:4 En-Boy oranı vardır. Gidiyorum kurmak kısıtlamaları, böylece mavi görünüm doldurur üst yarısı, ekran, pembe görünümünü doldurur alt yarısı, ekran, ve her yeşil görünümü genişletir mümkün olduğunca koruyarak onun en boy oranı ve uydurma kabı.

İlk olarak, mavi görünümü dört tarafı kısıtlamaları yaratacağım. 0 bir mesafe ile her kenarında en yakın komşusu iğnesi olacağım. Emin boşluklarını kapatmak için yapıyorum:

blue constraints

Unutmayınyokçerçeve henüz güncelleme. Daha kolay kısıtlamaları ayarlama, ve sadece 0 sabitleri (ya da her neyse) elle ayarlandığında görüşleri arasında odadan buluyorum.

Sonraki, en yakın komşusu pembe görünümün sol, alt ve sağ kenarları pin. Üst kenarı zaten mavi görünümü alt kenarına kısıtlı olduğu için üst kenarı bir kısıtlama ayarlamak gerek yok.

pink constraints

Ben de pembe ve mavi görünümler arasında eşit heights bir kısıtlama gerekiyor. Bu paranın yarısını ekranı kaplayacak her olun

enter image description here

Eğer tüm kareleri güncellemek için Güncellemelerinden şimdi söylersem, ben bu olsun:

containers laid out

Ben kısıtlamaları şimdiye kadar doğru. Ben bunu geri al ve açık yeşil görünümü üzerinde çalışmaya başlamak.

Boy-montaj açık yeşil görünümü beş kısıtlamaları gerektirir:

  • Gerekli öncelikli En Boy oranı açık yeşil görünüm kısıtlaması. Böyle büyük mükafat ile xib ya da bir film şeridi bu kısıtlama 5.1 veya daha sonra oluşturabilirsiniz.
  • Ya da kabı genişliği eşit veya daha az olması gereken öncelikli bir kısıtlama açık yeşil görünüm genişliği sınırlayıcı.
  • Yüksek öncelikli bir kısıtlama kabını genişliğine eşit olacak şekilde açık yeşil görünüm genişliği ayarı.
  • Ya da kabı yüksekliği eşit veya daha az olması gereken öncelikli bir kısıtlama açık yeşil görünüm yüksekliği sınırlayıcı.
  • Yüksek öncelikli bir kısıtlama kabı yüksekliği eşit olması için açık yeşil görünüm yüksekliği ayarı.

Hadi iki genişliği kısıtlamaları göz önünde bulundurun. Daha az-daha-veya-eşittir kısıtlama, kendisi tarafından, açık yeşil görünüm genişliğini belirlemek için yeterli değildir; birçok genişlikleri kısıtlaması uygun olur. Belirsizlik var bu yana, otomatik düzen (yüksek öncelik) gerekli diğer kısıtlaması hatayı en aza indiren bir çözüm seçmek için çalışacağız. Hatayı en aza indirme, daha az-daha-veya-eşittir gerekli kısıtlamayı ihlal değil iken genişliği mümkün olduğunca yakın bir kabın genişliğine yapma, demektir.

Aynı şey yükseklik kısıtlaması ile olur. Ve-en-boy oranı kısıtlaması da gerekli olduğundan, tek bir eksen konteyner küme aynı en-boy oranına sahip olur sürece) birlikte küme boyutunu en üst düzeye çıkarmak.

Bu yüzden ilk boy oranı kısıtlaması oluşturun:

top aspect

Daha sonra kap ile eşit genişlik ve yükseklik kısıtlamaları oluşturun:

top equal size

Bu kısıtlamaları daha az-daha-veya-eşittir kısıtlamaları için düzenlemek istiyorum:

top less than or equal size

Sonraki konteyner ile eşit genişlik ve yükseklik kısıtlamaları başka bir set oluşturmak istiyorum:

top equal size again

Ve bu yeni kısıtlamaları gerekli öncelik daha yapmak istiyorum:

top equal not required

Son olarak, küme için bu kısıtlamaları ayarlarım yani kabında bencil olmak istedi:

top centered

Şimdi, test etmek için, Görünüm denetleyicisi seçin ve " Güncellemelerinden tüm kareleri güncellemek için soruyorum. Bu da nedir:

incorrect top layout

Oops! Bu alt görünümünü tamamen kabını doldurmak için genişletti. Eğer bunu seçerseniz, aslında en boy oranı korunur, ama işin bu yönü . bir görebiliyorum ^strong>doldurunbir boy- . yerine ^strong>uygun.

Sorunu daha az-daha-veya-eşit bir sınırlama, kısıtlama her sonunda bir önemi olduğunu ve böyle büyük mükafat benim beklentim gelen kısıtlama ters kurdu. İki kısıtlamaları seçin ve birinci ve ikinci maddeleri ters olabilir. Bunun yerine, sadece alt görünümünü seçin ve kısıtlamaları daha büyük-daha-veya-eşit olacak şekilde değiştireceğim:

fix top constraints

Böyle büyük mükafat düzeni güncellemeleri:

correct top layout

Şimdi altta koyu yeşil görünüm için aynı şeyleri yapıyorum. En Boy oranı 1:4 kısıtlamaları yoktu beri garip bir şekilde yeniden boyutlandırılabilir böyle büyük mükafat () olduğundan emin olmak istiyorum. Aynı oldukları adımları tekrar göstermem. İşte sonuç:

correct top and bottom layout

Şimdi İB kullanılan farklı ekran boyutuna sahip olan iPhone 4S simülatörü ve test rotasyon çalıştırabilirsiniz:

iphone 4s test

Ve iPhone 6 simülatörde test edebilirsiniz:

iphone 6 test

Size kolaylık sağlamak için this gist son film şeridi yükledim.

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Austin Evans

    Austin Evans

    5 AĞUSTOS 2007
  • natescamp

    natescamp

    30 NİSAN 2009
  • YAN TV

    YAN TV

    20 EKİM 2011