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.


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.

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 :)


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



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

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.