iOS: Jak wyrównać środek widoku z dnem innego widoku z AutoLayout

Question

Chcę zrobić środek obrazu głowy z dolnej części niebieskiego obrazu tytułowego, zachowaj wyrównanie.

Jak mogę to zrobić za pomocą funkcji Autolayout?

ekran 4.0inches ekran 4.7inches

Answer 1

tam Jest na to wiele sposobów. Po prostu pokażę jeden ze sposobów.

OK, Zróbmy to krok po kroku.

Etap 1

Po pierwsze, w celu dostosowania do centrum owalnego obrazu z dolnej części prostokątnej obrazu trzeba osadzić prostokątny widok w innym widoku, na którym można było wymienić w Widok kontenera.

Pogląd ten zbiornik będzie miał FF atrybuty:

• kolor przezroczyste tło
• szerokość jest równa szerokości ekranu
• wysokość będzie dwukrotnie wysokość widoku prostokątnym (potem ty
  będzie wiedział dlaczego).

Dla ograniczenia pojemnika Widok:

• Główny wynosi Super View wiodący
• top przestrzeń do Super View jest 0
• Centered poziomo w Super View.
• Ustaw współczynnik kształtu z własnym.

Po zakończeniu wiązania będą wyglądały tak.

Krok 2

teraz na prostokątnej widzenia obrazu, ograniczenia byłyby:

• Główny wynosi widoku kontenera wiodących
• Top przestrzeni do widoku kontenera to 0
• Ścieżkowanie jest równoznaczne z końcem widoku kontenera.

• regulacji współczynnika kształtu obrazu w widoku owalny

  • przez ustawienie proporcji owalną widzenia obrazu. Zmiana wielkości tego prostokątnego widoku będzie proporcjonalna do zmiany rozmiaru owalnego widoku.

to będzie wyglądać następująco:

Etap 3

Tym razem contraints w widoku owalny:

• samym poziomie, widok pojemnika
• wyśrodkowany w pionie także w celu pojemnika

• regulacji współczynnika kształtu samego materiału

  • ustawienie proporcji porcję tego samego materiału zapewnia, że ​​gdy widok prostokątnej zwiększa rozmiar, zmiana rozmiaru owalny widok nie spowoduje zniekształceń.

ten będzie wynikiem:

Krok 4

Jest jeden bardzo ważny widok dodać. Widok ten zapewni, że widok prostokątny zawsze będzie o połowę mniejszy od widoku kontenera, tak aby środek owalnego widoku zawsze był wyrównany z dnem prostokątnego widoku. Tak więc nazywamy ten widok, że będziemy dodawać, fikcyjny widok.

Manekin widok będzie mieć FF atrybuty:

• kolor przezroczyste tło
• szerokość i wartość wysokość powinna być tylko 1

manekina widok za contraints:

• wyśrodkowany w pionie w widoku pojemnika
• wyśrodkowany poziomo w widoku kontenera
• szerokość i wysokość są stałe.
• przypisać pionowy odstęp z widokiem na prostokątnej

ten sposób powinno się to odbywać:

porządku, jeśli nie powyższe czynności można osiągnąć efekt.

Będzie to przegląd ograniczeń:

Mam nadzieję, że to pomaga. :)

Dowód, że to działa!

Pobiegłem go w symulatorze ...: D

iPhone 4:

iPhone 5:

iPhone 6:

iPhone 6 Plus:

Answer 2

pierwsze chciałbym umieścić obraz tła i najpierw, gdy HODLING SHIFT ręcznie przeciągnąć go, dopóki nie jest właściwe wymiary stuknij | o | patrząc na ikonę w prawym dolnym rogu ekranu odznaczam opcję marginesów i idę w lewo 0, góra 0, prawo 0, a potem dolna powinna być większa liczba (powinna automatycznie generować dla ciebie)

teraz umieść 2. UIImage. ... umieść go i zmień jak chcesz ... teraz na tej samej ikonie | o | dotknij tego i nadaj mu wysokość i szerokość ... dodaj ograniczenia ... teraz idź do 2-tego po lewej (to jak dwa ułożone prostokąty) ... dotknij tego i wybierz "poziomo w kontenerze ... TERAZ dotknij mniejszy obraz i przytrzymaj kontrolę i przeciągnij do większego obrazu i puść ... dotknij pionowego odstępu ...

OSTATNIO .... ikona z prawej strony, która wygląda jak | o |, ale ma trójkąt ... podczas gdy wybrany jest jeden z obrazów ... dotknij dół „updtate ramek”

Answer 3

musisz zastosować Ograniczenia autolayout względem obrazu nie z widzenia. aby uzyskać więcej szczegółów https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints

Answer 4

To może pomóc. Zupełnie oparty na AutoLayout, bez dodatkowego widoku.

• Najpierw ustaw pewne ograniczenia na wysokości i szerokości oraz położenie obrazu okładki. (niebieski)

Jest to 0,4 całkowitej wysokości, równej szerokości szerokości, można zobaczyć jego ograniczenia.

• Potem ustalić wysokość i szerokość Avatar (zielony) obrazu, uczynić go poziomo centrum szerokości.

Następnie wybierz zarówno obraz okładki, jak i obraz awatara, ustaw je w linii Wyrównaj dolną krawędź.

Teraz okazuje tego.

• Ostatni etap, wybierz „Wyrównaj do dołu aby Okładka”, i sprawiają, że stała się połowa wysokości awatara obrazu. Gotowe!

Jest to najprostszy sposób Znalazłem teraz.

Answer 5

Krok 1: Utwórz widoki, jak pokazano poniżej.

Krok 2: Ustaw tło widoku ograniczenia dla wszystkich trzech krawędziach.

Krok 3: Ustaw swój własny stosunek. Odkąd wspomniałeś, że nie znasz wzrostu.

Krok 4: Wybierz widok na centrum i dodać szerokość ograniczeń & wysokość, jak chcesz.

Krok 5: Ustaw środkowy widok jako centrum poziomej w SuperView jak pokazano poniżej

Krok 6: Teraz wybierz zarówno tła widok & środkowy widok. Ustaw wiązanie wyrównania na "Centra pionowe".

Krok 7: Teraz widać ograniczenie z ostrzeżeniem o złym stałej jak poniżej. Wybierz że ograniczenie

Krok 8: W Inspektorze Połączenia wybierz "drugi element" i zmień go na "dolny"

Krok 9: To jest to. Jeśli pojawi się ostrzeżenie, zaktualizuj swoje ograniczenia. Możesz sprawdzić inny symulator w dowolnym rozmiarze ekranu.

Nie trzeba żadnych Super widoki lub nowe rodzeństwo do osiągnięcia tego celu. Łatwy sposób, aby dowolny widok był wyśrodkowany i utrzymuj go jako widok z dołu/u góry innego widoku.