UIStackView-równomierne rozprowadzanie widoków od środka

Question

UIStackView-równomierne rozprowadzanie widoków od środka

Mam UIStackView, wewnątrz UIScrollView, aby pokazać dynamicznie dodawane podviewy ułożone poziomo. Obecne rozwiązanie rozpocznie wyświetlanie elementów od lewej strony, chciałbym rozpocząć dystrybucję elementów od środka bez zmiany szerokości i wysokości podwidywań. Jak mam to zrobić? Jestem również otwarty na rozwiązania, które również nie używają UIStackView. W ten sposób mogłem obsługiwać urządzenia

(Current )

(oczekiwane )

20

ios autolayout uiscrollview ios9 uistackview

Author: Hamza Ghazouani, 2016-02-16

Source

1 answers

score 21 · Accepted Answer

Krótka odpowiedź:

ScrollView

Leading >= 0, Trailing >= 0, Top >= 0, Bottom >= 0
Center X  and Center Y

Ograniczenia StackView

Leading = 0, Trailing = 0, Top = 0, Bottom = 0
StackView width = ScrollView width (priority low :250)
StackView height = ScrollView height

Długa odpowiedź

Po pierwsze, twoja struktura jest dobra, mamy :]}

UIScrollView
     UIStackView (horizontal)
         Subviews

Tak więc, aby osiągnąć cel powinniśmy :]}

Center the UIScrollView
Ustaw wielkość zawartości UIScrollView równą zawartości wewnętrznej rozmiar UIStackView

Oto Jak to zrobić:

Krok 1: Wyśrodkuj ramkę UIScrollView

CenterY i CenterX ograniczenia używane do wyśrodkowania ramki UIScrollView

Leading Space >= 0, Trailling Space >= 0, Top Space >= 0, Bottom Space > = 0 są używane, aby zapobiec przekroczeniu ramki widoku nadrzędnego uiscrollview]}

Użyłem placeholder intrinsic size, aby nie pokazywać błędów związanych z contentSize UIScrollView (ponieważ nie mamy jeszcze podwidów, więc contentSize).

Teraz, rama naszego UIScrollView jest Ok, przejdź do następnego kroku:)

Krok 2: Dodaj poziomy UIStackView

ograniczenia Top, Bottom, Leading, Trailing są używane do naprawiania UIStackView frame
równa wysokość i równa szerokość używane do obliczania zawartość pliku uiscrollview

PS. Każda zmiana w ramce UIStackView, Zmień rozmiar zawartości UIScrollView

Krok 3: Dodaj podglądy

Ponieważ używamy Fill Distribution w UIStackView Wszystkie subviews muszą mieć wewnętrzny rozmiar zawartości (lub ograniczenia wysokości i szerokości (nie są preferowane)). Na przykład, jeśli użyjemy Fill Equally, tylko jednego {[19] } z wewnętrznymi rozmiarami zawartości (lub ograniczeniami wysokości i szerokości (nie jest to preferowane)) wystarczającymi, rozmiar pozostałych podwijów będzie równy temu.

Na przykład: dodam 3 etykiety (proszę usunąć symbol zastępczy z UIScrollView)

To działa !! Nie, Nie, jeszcze nie próbuj aby dodać 4 i 5 etykiet:)

Dlaczego ?

Aby zrozumieć, obliczymy ramkę każdego elementu widoku z dwoma przykładami:

Rozmiar widoku nadrzędnego: 200, 200 Wielkość pierwszej etykiety: 120, 50 rozmiar drugiej etykiety: 150, 50

Pierwszy przykład (tylko pierwsza etykieta w UIStackView)

UIStackView Rozmiar zawartości wewnętrznej = 120, 50
UIScrollView contentSize = 120, 50
UIScrollView frame = 40, 75, 120, 50

wszystkie ramki są OK

Drugi przykład (z dwoma etykietami)

UIScrollView frame = 0, 0, 200, 50
UIScrollView contentSize = 200, 50
UIStackView Rozmiar zawartości wewnętrznej = 200, 50

Więc UIStackView nie może poprawnie pokazać dwóch etykiet (ponieważ szerokość UIStackView jest niższa niż szerokość dwóch etykiet), a my nie mamy przewijania, ponieważ ograniczenie UIStackView szerokość jest równa szerokości uiscrollview. Działa, gdy rozmiar wewnętrznej zawartości UIStackView jest mniejszy niż maksymalna ramka UIScrollView.

Aby to naprawić, zmieniamy priorytet ograniczenia szerokości na wartość niższą niż wartość priorytetu wewnętrznego rozmiaru zawartości UIStackView i wszystko działa dobrze:)

Mam nadzieję, że to pomoże.

Źródło kodu