iOS Otomatik Düzen: eşit genişlikte iki düğme, yan yana

93

Şu anda AutoLayout ile zorluk yaşıyorum. Arabirim oluşturucu kullanıyorum ve aşağıdaki resimde gösterildiği gibi, eşit genişlikte iki düğmeyi yan yana konumlandırmaya çalışıyorum.

nesnel düzen

Aşağıdaki Önizleme resminden, titleImage düzgün şekilde kısıtlandı ve doğru şekilde görüntüleniyor, ancak düğmeler değil. Düğme 1'i titleImage'ın ön kenarıyla ve düğme2'yi titleImage'ın arka kenarıyla hizalayarak deneyler yaptım, ancak bu noktada iki düğme arasındaki genişlik dağılımı aşağıda gösterildiği gibi çarpık hale geliyor.

problem senaryosu

Amacım, hangi kısıtlamaların eksik olduğunu anlamak ve cihazdan bağımsız olarak eşit genişlikleri korumak için iki düğmeye uygulanması gerektiğidir. Mümkünse, bunu ek kod yerine arayüz oluşturucu aracılığıyla elde etmek isterim.

— Scratcha
kaynak

1

Duvarcılık bunu programlı olarak yapmanın önerilen bir yoludur. Bağlantı: github.com/Masonry/Masonry

— Itachi

1

işte bağlantı ... kontrol edebilirsiniz ... stackoverflow.com/questions/29620409/…

— EI Captain v2.0

246

Aşağıdaki kısıtlamaları ekleyin

Düğme1'den düğme2'ye eşit genişlik atayın.
Her iki düğme arasına yatay boşluk atayın.
Baştaki boşluğu düğme1'den gözetim görünümüne atayın.
Düğme2'den gözetim görünümüne sondaki boşluk atayın.
Her iki düğmeye de üst boşluk atayın.
Sizin için işe yarayıp yaramadığını bana bildirin.

— Abubakr Dar
kaynak

7

Mükemmel - bu benim için çalıştı. Özellikle 2. nokta - yatay bir boşluk eklemek.

— Scratcha

WoW !!! Ne demek istiyorsun? Gerçekten bir cazibe gibi çalışıyor ve 3 saat civarında boşa harcandım! :( Benim durumumda, süper Görünümde onu bölen eşit genişlikte iki Görünüme sahiptim. Ancak sonunda bana "Y veya Yükseklik için kısıtlamalar gerekiyor" gibi bir şey sordu "Eksik kısıtlamaları ekle" seçeneğini seçtim ve çözüldü.

— Randika Vishman

@Abubakr: Her iki düğme aynı genişliğe sahip olduğundan sadece bir ekran boyutu için çalışır.

— AG

1

2'den fazla bitişik UI öğesi için de çalışır!

— siege_Perilous

1

Teşekkürler ama çözümü buldum ve kodda daha iyi. Bunlardan herhangi birini ana öğeye ortalayarak hizalayın ve kodda hesaplayabileceğiniz içerik boyutunun sabit yarısını verin veya içerik statikse, çerçeveleri güncelleyebilir ve sabiti güncelleyebilirsiniz. bununla birlikte, bu merkez hizasına iki düğme arasındaki merkez boşluğunun yarısını ekleyin. Ve sadece diğer düğmeye öncüyü veya sonunu verin. Bunu benim için düzeltir. İçeriğiniz içselse ve güncellenmesi gerekiyorsa, sadece düzen güncellemeleri yöntemini çağırın ve sabit değeri tekrar hesaplayın.

— Amber K

80

Kolay çözüm için Adımları ve Ekran Görüntülerini Takip Edin

Aşama 1)

Düğme 1 için: Kısıtlamaları Ayarlayın: (1) Önde, (2) İhtiyacınıza göre Üst veya Alt, (3) Yükseklik

Adım 2)

Düğme 2 için: Kısıtlamaları Ayarlayın: (1) İhtiyaçlarınıza göre Firar, (2) Üst veya Alt, (3) Yükseklik

Aşama 3)

Ctrl + Düğme 1'den Düğme 2'ye Sürükleyin

Yatay Aralığı Seçin

Adım 4)

Her İki Düğmeyi de seçin (Komutu kullanarak) ve Sınırları Eşit Genişliğe Ekle

ÇIKTI

Umarım size yardımcı olur :)

— Vvk
kaynak

1

Yükseklik sabitlenmemelidir. Ekran boyutuna göre düğmenin yüksekliğine görünüm karar versin.

— Kunal Kumar

@KunalKumar bu durumda Yükseklik Düzeltildi. lütfen bana ne istediğini söyler misin?

— Vvk

@Vvk ... perfect bro :)

— Jaywant Khedkar

18

İOS9'daki yığın düzeni, işi gerçekten güzel yapacak. Görünümünüze yığın görünümü ekleyin ve aşağıdaki gibi yapılandırın:

— Ben
kaynak

2

Örneğimi kontrol edebilirsiniz - orantılı kısıtlama kullanarak bunu kolayca hedefleyebilirsiniz. Ayrıca orantılı çoklu UIV Görünümlerini kolayca hedefleyebilirsiniz. Lütfen ekteki örneğe bakın

https://dl.dropboxusercontent.com/u/48223929/TestViewController.xib

— Vitaliy Gozhenko
kaynak

0

Benim çözümüm

İki düğmenin ortasına küçük bir görünüm koyun ve ortalayın (Konteynerde yatay merkez ve kontenerde dikey merkez 0 olarak).
Küçük görünüme yükseklik ve genişlik ekleyin.
Sınırları düğmeler ekleyin ve küçük görünüme yatay alan sınırlamaları verin.
Küçük görünüm arka plan rengini düğmeler veya Görünüm'ün rengiyle aynı şekilde verin.

Not: Ekran görüntüsüne bakın.

— AG
kaynak