iOS Autolayout: dwa przyciski o równej szerokości, umieszczone obok siebie

93

Obecnie mam problemy z układem AutoLayout. Używam konstruktora interfejsu i próbuję ustawić obok siebie dwa przyciski o równej szerokości, jak pokazano na poniższym obrazku.

układ celu

Z poniższego obrazu podglądu mój titleImage został odpowiednio ograniczony i wyświetla się poprawnie, ale przyciski nie. Eksperymentowałem, wyrównując przycisk 1 z wiodącą krawędzią titleImage i przycisk2 z końcową krawędzią titleImage, jednak rozkład szerokości między dwoma przyciskami staje się w tym miejscu pochylony, jak pokazano poniżej.

scenariusz problemu

Moim celem jest zrozumienie, jakich ograniczeń brakuje i należy je zastosować do dwóch przycisków, aby zachować równą szerokość niezależnie od urządzenia. Jeśli to możliwe, chciałbym to osiągnąć za pomocą konstruktora interfejsu, a nie dodatkowego kodu.

Scratcha
źródło
1
Masonry jest zalecanym sposobem, aby to zrobić za pomocą programu. Link: github.com/Masonry/Masonry
Itachi
1
tutaj jest link ... możesz sprawdzić ... stackoverflow.com/questions/29620409/
EI Captain v2.0

Odpowiedzi:

246

Dodaj następujące ograniczenia

  1. Przypisz równą szerokość od button1 do button2.
  2. Przypisz poziome odstępy między obydwoma przyciskami.
  3. Przypisz wiodącą spację od przycisku 1 do jego superwizji.
  4. Przypisz końcową spację z button2 do jego superviewu.
  5. Przypisz górne miejsce do obu przycisków.
    Daj mi znać, jeśli to zadziała.
Abubakr Dar
źródło
7
Doskonale - to zadziałało dla mnie. W szczególności punkt 2 - dodanie odstępów poziomych.
Scratcha
WoW !!! Co masz na myśli? To naprawdę działa jak urok i zostałem zmarnowany około 3 godzin! :( W moim przypadku miałem dwa widoki o równej szerokości w super Widoku, które je dzieliły. Jednak na końcu zapytał mnie coś w stylu „Potrzebuje ograniczeń dla Y lub Wysokości”.
Randika Vishman
@Abubakr: Działa tylko dla jednego rozmiaru ekranu, ponieważ oba przyciski mają tę samą szerokość.
AG
1
Działa również dla więcej niż 2 sąsiednich elementów interfejsu użytkownika!
siege_Perilous
1
Dzięki, ale znalazłem rozwiązanie i jest lepsze w kodzie. Daj dowolnemu z nich wyśrodkowanie do rodzica i podaj stałą połowę rozmiaru zawartości, którą możesz obliczyć w kodzie lub jeśli zawartość jest statyczna, możesz po prostu zaktualizować ramki i zaktualizować stałą. wraz z tym również dodaj połowę środkowego odstępu między dwoma przyciskami, aby wyrównać środek. I po prostu daj ten początek lub koniec drugiemu przyciskowi. Naprawia to dla mnie. A jeśli zawartość jest nieodłączna i wymaga aktualizacji, po prostu wywołaj metodę aktualizacji układu i ponownie oblicz stałą wartość.
Amber K
80

Postępuj zgodnie z instrukcjami i zrzutami ekranu, aby uzyskać łatwe rozwiązanie


Krok 1)

  • Dla przycisku 1: ustaw ograniczenia: (1) wiodący, (2) górny lub dolny zgodnie z potrzebami, (3) wysokość


Krok 2)

  • Dla przycisku 2: ustaw ograniczenia: (1) końcowe, (2) górne lub dolne według potrzeb, (3) wysokość

Krok 3)

  • Naciśnij Ctrl + przeciągnij z przycisku 1 do przycisku 2

  • Wybierz Odstępy w poziomie


Krok 4)

  • Wybierz oba przyciski (za pomocą polecenia) i dodaj ograniczenia o równej szerokości


WYNIK

Mam nadzieję, że ci to pomoże :)

Vvk
źródło
1
Nie należy ustalać wysokości. Niech widok decyduje o wysokości przycisku w zależności od rozmiaru ekranu.
Kunal Kumar
@KunalKumar w tym przypadku Wysokość jest stała. czy możesz mi powiedzieć, czego chcesz?
Vvk
@Vvk ... perfect bro :)
Jaywant Khedkar
18

Układ stosu w iOS9 zrobi to naprawdę fajnie. Dodaj widok stosu do swojego widoku i skonfiguruj w następujący sposób:

wprowadź opis obrazu tutaj

Ben
źródło
0

Moje rozwiązanie to

  1. Umieść mały widok pośrodku dwóch przycisków i wyśrodkuj go (poziomo na środku w kontenerze i pionowy na środku w kontenerze jako 0).
  2. Dodaj wysokość i szerokość do małego widoku.
  3. Dodaj przyciski do ograniczeń i nadaj poziomym ograniczeniom przestrzeni dla małego widoku.
  4. Nadaj kolorowi tła małego widoku taki sam jak kolor przycisków lub koloru widoku.

Uwaga: zobacz zrzut ekranu.

wprowadź opis obrazu tutaj

AG
źródło