2014-11-17 5 views
24

Próbuję zrozumieć, w jaki sposób można użyć automatycznego układu do pozycjonowania elementów względem innych widoków w procentach.Omówienie mnożnika w układzie automatycznym w celu użycia pozycjonowania względnego

Na przykład, niedawno dowiedziałem się, że można określić dolny rzutem powinien leżeć 4% wyższa niż dnie swojego Superview, korzystając w ten sposób:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Bottom, relatedBy: .Equal, toItem: self.view, attribute: .Bottom, multiplier: 0.96, constant: 0)) 

to sens do mnie, ponieważ mnożnik 1 by go wyrównać bezpośrednio na dole widoku, więc możesz zmniejszyć tę kwotę o 4 procent, zmieniając mnożnik na 0.96.

Ale jak możesz zrobić to samo w innym kierunku? Chcesz określić szczyt etykiety powinien zaczynać się o 4% od górnej części widoku. Jeśli użyjesz tej samej linii, ale zmienisz atrybuty na .Top, oznacza to, że byłaby o 4% wyższa niż górna strona widoku (ale tak naprawdę nie przesuwa go poza ekran). Nie możesz mieć ujemnego mnożnika, którego nie myślę, i nie wierzę, że wartość większa niż 1 robi cokolwiek, gdy stała wynosi 0. Jak to zrobić?

Mam takie samo pytanie dotyczące implementacji wiodącej i końcowej. Krycie jest łatwe. Jeśli chcesz to 10% od prawej:

self.view.addConstraint(NSLayoutConstraint(item: label, attribute: .Trailing, relatedBy: .Equal, toItem: self.view, attribute: .Trailing, multiplier: 0.9, constant: 0)) 

To ma sens, bo go wybrać z powrotem 0,1 lub 10% zamiast pełnego wyrównania na 1,0. Ale jak zrobić to samo dla prowadzenia? Pomyślałem, że możesz ustawić wiodącą etykietę względem trajektorii widoku, a następnie ustawić mnożnik na 0.1. W moim przekonaniu oznaczałoby to, że etykieta zaczyna się od bardzo dalekiego prawa, ale potem zostanie wykręcona z powrotem o 90%, a zatem uzyskanie pożądanego 10% od lewej. Ale tak nie jest, nie jestem pewien dlaczego.

Czy możesz wyjaśnić, jak to działa, jak właściwie użyć mnożnika, aby uzyskać te względne układy?

Aby było to łatwiejsze, załóżmy, że chcesz utworzyć etykietę, która ma górne i dolne 10% wysokości widoku, oraz ciągnąć i prowadzić 10% szerokości widoku. Na iPhonie w pionie pojawi się więcej wypełnienia nad i pod etykietą, ponieważ jest wypełnienie po jego lewej i prawej stronie, tak jak (tak, to jest narysowane na skali):
enter image description here

Ale powiedzmy na iPadzie zostanie pokazany w widoku, który jest idealnym kwadratem. W związku z tym dopełnienie będzie mieć taką samą wartość dookoła, tak jak:
enter image description here

Pytanie brzmi, jak zdefiniować takie wiązania jako dynamiczne w wartości, w przeciwieństwie do ustawiania stałej wartości dla stałej. Już wiem, jak robić dno i spływanie, ale najlepsze i czołowe sprawiają, że jestem zakłopotany. Mam nadzieję, że rozumiem, jak używać mnożnika do bardziej zaawansowanych układów, na przykład określenie wierzchołka etykiety powinno leżeć 10% pod dnem innej etykiety, w przeciwieństwie do ustawiania stałej stałej.

+0

można pokazać schemat tego, co staramy się osiągnąć? – matt

+0

Do tego bardzo starego QA .. podstawowe podejście polega na użyciu widoków "spacerów" lub "mierzenia". Po prostu oznacz je jako ukryte. Wykonują dla ciebie wszystkie obliczenia. – Fattie

Odpowiedz

22

Istnieje kilka sposobów, aby to zrobić.W najprostszym przypadku prawie już go masz: jeśli chcesz, aby granice poziome wynosiły 10% i 90%, musisz określić oba ograniczenia w odniesieniu do końcowej krawędzi widoku superwizyjnego - czyli Subview.Trailing zamki do Superview.Trailing z mnożnikiem 0.9, jak mówisz, ale potem Subview.Leading blokuje również do Superview.Trailing, tylko z mnożnikiem 0.1:

enter image description here

(i podobnie dla górnej/dolnej)

Włączone z drugiej strony, Przypadek, o którym wspominasz na końcu, jest nieco bardziej skomplikowany: "określenie górnej części etykiety powinno leżeć 10% poniżej dołu innej etykiety". Do tego prawdopodobnie nie będziesz mógł używać stałych procentowych wstawek, takich jak poprzedni przypadek. Zamiast tego możesz utworzyć niewidoczny widok odstępnika między nimi: dodaj ograniczenie za pomocą Spacer.Height = 0.1 * Superview.Height, a następnie dołącz je między dwiema etykietami. (Możesz także obsłużyć poprzedni przypadek z tymi widokami rozdzielającymi, ale w tym przypadku tak naprawdę nie jest to konieczne.)

+2

Twoja odpowiedź wyjaśniła jeden z najważniejszych problemów z automatycznym układem w mojej opinii. Dziękuję bardzo! – Darko

7

Moim zdaniem, "Nie możesz mieć ujemnego mnożnika, którego nie myślę, a ja nie wierzę, że wartość większa od 1 powoduje cokolwiek, gdy stała wynosi 0 cali, odsłania zrozumiałe odchylenie.

Zasada pod maską tylko liniowe równanie:

FirstItem.Attribute1 = (SecondItem.Attribute2 * Multiplier) + Constant 

Wszystkie mierzone w punktach. Jak widzisz, mnożnik (właściwość NSLayoutConstraint) nie jest mnożnikiem stałej. Postępuj zgodnie z równania, co nie rozumiesz będzie jasne.

Co do konkretnego przykładu, @Archaeopterasa przedstawił doskonałe rozwiązanie, kolejny znajduje się poniżej:

Opierając się na fakcie, wiesz jak to zrobić dno i spływu, przypuszczam zrobiłeś te dwa. Następnie dodać kolejne dwa ograniczenia, efekt będzie co chcesz: set label's width to 80% superview's width set label's height to 80% superview's height

W końcu, jeśli chcesz określić top kłamstwo etykietę za 10% poniżej dolnej innej wytwórni, wydaje się, że nie można realizować bez pisemnej linia kodu. Musisz użyć kodu, aby ustawić stałą obiektu NSLayoutConstraint łączącego FirstItem i SecondItem po tym, jak wysokość superview jest znana w środowisku wykonawczym.

Po pierwsze, przeciągnij kontrola z jednej etykiety do drugiej i wybierz „Pionowy rozstaw” (lub można to zrobić w inny sposób)

Po drugie, potrzebna jest wylot odsyłania.

@IBOutlet weak var tenPercentOfSuperview: NSLayoutConstraint! 

Następnie zrób to w odpowiednim miejscu (na przykład w viewDidLoad())

let heightOfSuperview = self.view.bounds.height 
tenPercentOfSuperview.constant = heightOfSuperview * 0.1 

Teraz wszystko jest OK.

Jeśli chcesz wiedzieć więcej na ten temat, dokument Apple zaleca: https://developer.apple.com/library/ios/recipes/xcode_help-IB_auto_layout/chapters/EditingConstraintAttributesintheAttributesInspector.html

4

Oto

niezwykle prosty

sposób to zrobić.

Wystarczy dodać „pomocnika” lub „„odsłony:

na «środek widoki Obliczanie pomocnik» są żółte w przykładzie

Ogólna technika jest tak proste i oczywiste - nie potrzeba żadnych. WYJAŚNIENIE, można go pobrać z obrazka.

jest to jeden z tych „słoń w pokoju” rzeczy, które „nie uczą o” w iOS. Ale jest on stosowany stale we wszystkich układach.

(Rzeczywiście, Apple powinien stworzyć specjalną podklasę UIView „Środki”, dokładnie w tym celu - i rzeczywiście, wiele dużych zespołów nie tylko, że z oczywistych cech)

enter image description here

Wskazówka ikona nr 1 skupia się na prawym końcu „Widok 1/4. "widok pomocnika.

Ikona uwagi # 3 jest wyśrodkowana na lewym końcu widoku pomocnika "Widok 3/4".

Skończyłeś, masz Chardonnay.

Dogodnie, w widokach pomocników po prostu ustaw mnożnik na dowolnie wybrany, w zależności od pożądanego uczucia. Jest to niezwykle łatwe następnie zmienić te w kodzie, należy IBInspectable, ożywione, i tak dalej i dalej ...

enter image description here