Lol Witaj w klubie głupoty. Jestem jednym z założycieli. : D

Do przewijania pionowego: jedynym sposobem, w jaki mogłem go uruchomić (iOS 8, Xcode 6 i czysty autolayout) było dodanie następujących ograniczeń do mojego widoku przewijania (wszystkie związane z superview):

• Równe SzerokoÅ›ci
• Równe WysokoÅ›ci
• Center Y Alignment
• Center X Alignment

Moja struktura:

  UIView
   - ScrollView
    - Subview
    - Subview
    - Subview
    - Subview
    - ...

Oto ostateczny wynik:

To jest konfiguracja:

Pełny ekran

A oto projekt .

Prosty Samowystarczalny Przykład

Sądząc po dużej liczbie głosów na pytanie i małej liczbie głosów na odpowiedzi, ludzie nie znajdują tu zrozumiałego i szybkiego rozwiązania. Spróbuję coś dodać. Ten projekt jest samodzielnym przykładem wykonanym całkowicie w Kreatorze interfejsów. Powinieneś być w stanie przejść przez to w 10 minut lub mniej. Następnie możesz zastosować poznane pojęcia do własnego projektu.

The oryginalne pytanie pyta o przewijanie przycisków. Tutaj po prostu używam UIView s, ale mogÄ… reprezentować dowolny widok. WybraÅ‚em również przewijanie poziome, ponieważ zrzuty ekranu storyboard sÄ… bardziej kompaktowe dla tego formatu. Zasady sÄ… jednak takie same dla przewijania pionowego.

Kluczowe pojęcia

• UIScrollView powinien używać tylko jednego podglÄ…du. Jest to "UIView", który sÅ‚uży jako Widok zawartoÅ›ci, aby pomieÅ›cić wszystko, co chcesz przewijać.
• spraw, aby zawartość byÅ‚a wyÅ›wietlana i przewijana wyÅ›wietlacz rodzic ma jednakowÄ… wysokość dla przewijania poziomego. (Równe szerokoÅ›ci dla przewijania w pionie)
• upewnij siÄ™, że caÅ‚a przewijana zawartość ma ustawionÄ… szerokość i jest przypiÄ™ta ze wszystkich stron.

Rozpocznij nowy projekt

Może to być tylko jeden widok aplikacji.

Storyboard

W tym przykÅ‚adzie zrobimy poziomy widok przewijania. Wybierz kontroler widoku, a nastÄ™pnie wybierz dowolne formowanie w Inspektorze rozmiaru. Make the width 1,000 and the wysokość 300. To daje nam tylko miejsce na storyboardzie, aby dodać treść, która bÄ™dzie przewijać.

Dodaj widok przewijania

Dodaj UIScrollView i przypnij wszystkie cztery strony do głównego widoku kontrolera widoku.

Add a Content View

Dodaj UIView jako podglÄ…d podrzÄ™dny do widoku przewijania. To jest klucz. nie próbuj dodawać wielu podglÄ…dów do widoku przewijania. Wystarczy dodać pojedynczy UIView. To bÄ™dzie to Widok zawartoÅ›ci dla innych widoków, które chcesz przewijać. Przypnij Widok zawartoÅ›ci do widoku przewijania ze wszystkich czterech stron.

Równe Wysokości

Teraz w zarysie dokumentu, polecenie Kliknij zarówno Widok zawartości, jak i widok nadrzędny widoku przewijania , aby wybrać oba. Następnie Ustaw wysokość na równą (Control przeciągnij z widoku zawartości do widoku przewijania). To też jest kluczowe. Ponieważ przewijamy poziomo, Widok zawartości widoku przewijania nie będzie wiedział, jak wysoko powinien być, chyba że ustawimy go w ten sposób.

Uwaga:

• gdybyÅ›my przewijali zawartość w pionie, wtedy ustawilibyÅ›my szerokość widoku zawartoÅ›ci na równÄ… szerokoÅ›ci nadrzÄ™dnej widoku przewijania.

Dodaj treść

Dodaj trzy UIView s i podaj wszystkie ograniczenia. UżyÅ‚em 8-punktowych marginesów dla wszystko.

Ograniczenia:

• Zielony widok: przypnij górnÄ…, lewÄ… i dolnÄ… krawÄ™dź. Szerokość 400.
• czerwony widok: przypnij górnÄ…, lewÄ… i dolnÄ… krawÄ™dź. Szerokość 300.
• Fioletowy widok: przypnij wszystkie cztery krawÄ™dzie krawÄ™dzi. Ustaw szerokość bez wzglÄ™du na pozostaÅ‚Ä… przestrzeÅ„ (w tym przypadku 268).

ustawienie ograniczeń szerokości jest również kluczowe, Aby widok przewijania wiedział, jak szeroki będzie jego widok zawartości be.

Zakończone

W przypadku przewijania w pionie, po prostu zamień wszystkie kierunki szerokości i wysokości w tym przykładzie(przetestowane i działające).

Dalsze Badania

• iOS: jak sprawić, by AutoLayout dziaÅ‚aÅ‚ na widoku przewijania
• jak skonfigurować UIScrollView z Auto Layout w Interface Builder
• YouTube video tutorial: UIScrollView - jak zachować widoki na ekranie

Rozmiar zawartości jest domyślnie ustawiany przez zastosowanie ograniczeń wewnątrz widoku UIScrollView.

Na przykład, jeśli masz UIScrollView wewnątrz UIView, będzie to wyglądać tak (jak jestem pewien, że jesteś świadomy):

    UIView *containerView               = [[UIView alloc] init];
    UIScrollView *scrollView            = [[UIScrollView alloc] init];
    [containerView addSubview:scrollView];
    containerView.translatesAutoresizingMaskIntoConstraints = NO;
    scrollView.translatesAutoresizingMaskIntoConstraints    = NO;
    NSDictionary *viewsDictionary       = NSDictionaryOfVariableBindings(containerView, scrollView);

    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil
                                                                            views:viewsDictionary]];
    [containerView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|[scrollView]|"
                                                                          options:kNilOptions
                                                                          metrics:nil

To ustawi scrollView tak, aby wypełniał rozmiar widoku zawartości (tak więc widok zawartości musi mieć określony rozmiar).

Możesz następnie dostosować rozmiar zawartości UIScrollView, domyślnie ustawiając go na wystarczająco duży, aby trzymać przyciski takie jak to:

    UIButton *buttonA                   = [[UIButton alloc] init];
    UIButton *buttonB                   = [[UIButton alloc] init];
    UIButton *buttonC                   = [[UIButton alloc] init];
    [scrollView addSubview:buttonA];
    [scrollView addSubview:buttonB];
    [scrollView addSubview:buttonC];
    buttonA.translatesAutoresizingMaskIntoConstraints       = NO;
    buttonB.translatesAutoresizingMaskIntoConstraints       = NO;
    buttonC.translatesAutoresizingMaskIntoConstraints       = NO;

    viewsDictionary                     = NSDictionaryOfVariableBindings(scrollView, buttonA, buttonB, buttonC);

    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|-[buttonA]-|"
                                                                       options:kNilOptions
                                                                       metrics:nil
                                                                         views:viewsDictionary]];
    [scrollView addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"H:|-[buttonA]-[buttonB]-[buttonC]-|"
                                                                       options:NSLayoutFormatAlignAllBaseline
                                                                       metrics:nil
                                                                         views:viewsDictionary]];

Jest tak wiele pytań dotyczących używania AutoLayout z UIScrollView, kluczowym punktem, który ignorujemy, jest to, że wewnętrzne widoki UIScrollView powodują ograniczenia wobec Content View , ale nie samego Uiscrollview. Zapoznaj się z uwagą techniczną TN2154 , można znaleźć:

Klasa uiscrollview przewija swoją zawartość zmieniając pochodzenie jej granic. Aby to działało z układem automatycznym, teraz górna, lewa, dolna i prawa krawędź w widoku przewijania oznacza krawędzie widoku zawartości.

Poniższy rysunek przedstawi, że:

Możesz znaleźć przestrzeń końcową 500 punktów, jeśli ograniczenie zostanie wprowadzone do UIScrollView, Widok zostanie pominięty i powinien zostać zaktualizowany jego ramka. Jednak żadnych ostrzeżeń i błędów. Ponieważ wszystkie ograniczenia są sprzeczne z widokiem treści.

UIScrollView obliczy rozmiar widoku zawartości zgodnie z ograniczeniami widoków wewnętrznych. (Dla przykładu, Rozmiar zawartości: Szerokość = 100 (początek) + 200 (Szerokość widoku) + 500( koniec), wysokość = 131(górny odstęp) + 200(wysokość) + 269 (dolny odstęp)

Jak dodać ograniczenia dla widoków w widoku UIScrollView:

1. obrazowanie pozycji widoków w widoku treści.
2. Dodaj górny, prawy, dolny, lewy odstęp do krawędzi widoku zawartości, a także szerokość i wysokość tych widoków.

I wszystko jest zrobione.

An easy way aby poradzić sobie z AutoLayout za pomocą scrollview, należy dodać Widok kontenera zawierający wszystkie podglądy w widoku przewijania.

wniosek: kluczowym punktem, aby zrozumieć AutoLayout z UIScrollView jest wewnętrzne widoki, które ograniczają Widok zawartości, ale nie sam UIScrollView.

Dołączony przykładowy kod

Poniższe rozwiązanie zadziałało dla scrollView z autolayout i bez contentSize :

1. przeciągnij n upuść widok przewijania do kontrolera viewController i zastosuj dowolne ograniczenia, aby pokryć żądaną przestrzeń.
2. przeciągnij n upuść UIView wewnątrz widoku przewijania i upewnij się, że obejmuje całą przestrzeń scrollView i zastosuj ograniczenia , aby były górną, lewą, prawą, dolną spacją z widoku przewijania.
3. Ustaw Wysokość (i szerokość, jeśli przewijanie w poziomie jest wymagane) wewnętrznego widoku zgodnie z potrzebą przewijania. Ta część może być również wykonana z kodu, jeśli jest to wymagane.
4. krytyczne . Po ustawieniu wysokości na dużą wartość w punkcie (3), wróć do punktu (2) i upewnij się, że ustawisz górne, lewe, prawe, dolne wartości z powrotem na zero, ponieważ Xcode mógł je zmienić za ciebie, gdy wymusisz zmianę wysokości w punkcie (3).

I gotowe. Teraz możesz dodać dowolną liczbę kontrolek w tym widoku i zastosować ograniczenia istotne dla siebie (które nie wydają się działać bez tego widoku). Jeśli nie chcesz używać tego widoku, musisz zastosować ograniczenia dla każdej kontrolki związanej z przewijaniem (niezwiązanej ze sobą).

Przytłaczająca końcówka..............

Krytyczne . Załóżmy dla jasności, że UIScrollView jest 1000 szeroki i 100 wysoki. (Faktycznie to normalnie wartości te byłyby dynamiczne, oczywiście, w zależności od szerokości urządzenia itp. Ale na razie wystarczy powiedzieć 1000 szerokości i 100 wysokości.) Załóżmy, że robisz poziome przewijanie. Więc umieść UIView wewnątrz UIScrollView. (To jest "widok zawartości".) Ustaw wszystkie cztery ograniczenia widoku zawartości góra, dół, początek, koniec, do widoku przewijania. Niech wszystkie będą zerowe, nawet jeśli wydaje się to złe. Ustaw wysokość zawartości UIView na 100 i zapomnij o tym. Teraz: chcesz przewijać w poziomie, więc ustaw szerokość widoku zawartości na powiedzmy 1225.

Zauważ, że szerokość Widok zawartości jest teraz o 225 większy niż szerokość nadrzędnego widoku przewijania. W porządku: w rzeczywistości musisz to zrobić. Zauważ, że

...robisz nie ustawiasz szerokość końcową na ujemną 225...

Wydaje ci się, że musisz "dopasować" szerokości tak, jak zwykle. Ale jeśli to zrobisz, to w ogóle nie zadziała.

Musisz ustawić liczbę początkową i końcową na ZERO, nigdy ujemną (nawet jeśli szerokość jest "bigger")

Co ciekawe, możesz ustawić liczbę początkową / końcową na dowolną wartość dodatnią (spróbuj powiedzieć "50") i daje to pewien margines odbicia. (Często wygląda świetnie: spróbuj.) Każda wartość ujemna na obu końcach "po cichu pęknie".

Zauważ, że często Xcode (od 7.3.1 tak czy inaczej),

'pomoże' ustawić te wartości dla Ciebie na liczby ujemne!

Ponieważ próbuje automatycznie przeliczyć je za Ciebie. Jeśli tak to będzie po cichu złamać. Ustaw wszystkie cztery wartości na zero w pierwszej instancji. I ustawia szerokość widoku zawartości znacznie szerszą niż "1000" W przykładzie.

Edytowano: Skończyłem z używaniem UITableView zamiast UIScrollView dla większości moich wymagań. Ponieważ tableView wydaje mi się znacznie bardziej elastyczny i dynamiczny.

ZakÅ‚adam, że masz problemy z contentSize. Sprawdź ten post na blogu o tym, jak poradzić sobie z contentSize przy użyciu "czystego" podejÅ›cia AutoLayout. IstotÄ… tego jest to, że Twoje ograniczenia poÅ›rednio definiujÄ… Rozmiar zawartoÅ›ci. Nigdy nie ustawia siÄ™ go jawnie podczas korzystania z AutoLayout. ZaÅ‚Ä…czyÅ‚em przykÅ‚adowy projekt na koÅ„cu posta na blogu, aby zademonstrować, jak to dziaÅ‚a

W notatkach technicznych jest kawałek, który mogłeś przejrzeć. Domyślnie można ustawić rozmiar zawartości widoku przewijania za pomocą ograniczeń ustalonych na krawędziach widoku przewijania.

Oto prosty przykład. Utwórz storyboard z jednym widokiem, który ma jeden widok przewijania. Ustaw ograniczenia widoków przewijania, aby pasowały do rozmiaru widoku, w którym go umieszczasz.

Wewnątrz widoku przewijania dodaj pojedynczy widok. Jawnie Ustaw rozmiar tego widoku za pomocą ograniczeń (i upewnij się, że rozmiar jest większy niż widok przewijania).

Teraz dodaj cztery dodatkowe ograniczenia do tego wewnętrznego widoku blokującego cztery krawędzie wewnętrznego widoku do nadrzędnego widoku przewijania. Te cztery ograniczenia spowodują rozszerzenie rozmiaru zawartości, aby pomieścić widok wewnętrzny.

Jeśli masz kilka widoków, które chcesz dodać do widoku przewijanego, na przykład ułożonego poziomo, Zablokuj lewą stronę pierwszego podglądu po lewej stronie widoku przewijanego, Zablokuj podview względem siebie poziomo, a prawa strona ostatniego widoku podrzędnego po prawej stronie widoku przewijania. Ograniczenia te wymusiłyby rozszerzenie rozmiaru zawartości widoku przewijania w celu uwzględnienia wszystkich podwizów i ich ograniczeń.

Jeśli twoje pytanie brzmi "jak umieścić kilka pól UITextFields w pionowo przewijanym widoku UIScrollView tak, że przesuwają się z drogi klawiatury, gdy mają fokus", najlepsza odpowiedź brzmi:

Nie.

Zamiast tego użyj kontrolera UITableViewController ze statycznymi komórkami.

Otrzymujesz to zachowanie przewijania za darmo, a wszystkie wstawki zawartości działają tylko wtedy, gdy kontroler widoku jest wyświetlany wewnątrz kontrolera UINavigationController.

Powinieneś uporządkować swój układ w ten sposób
ViewControllerView zawiera ScrollView, ScrollView zawiera ContainerView, ContainerView zawiera 2 Labels

Następnie wykonaj 3 kroki aby sprawić, że twoje {[1] } może przewijać

1. Ustawienie ScrollView pin (Góra/Prawo/Dół/Lewo) na ViewControllerView
2. • Ustawienie ContainerView pin (Góra/Prawo/Dół/Lewo) na ScrollView
   • Zestaw Horizontally in Container (don't set Vertically in Container)
3. • Label1 pin (top / right / left) to ContainerView
   • Label1 pin (right/left / bottom) to ContainerView and top to Label1

Oto projekt demo

Hope this help

Czyste podejście autolayout działa pięknie, ale trudno jest skonfigurować, jeśli migrujesz z nieautolayout. Robiłam to już kilka razy i mam kilka ogólnych porad:

• Zacznij od maÅ‚ego: nawet jeÅ›li oznacza to odtworzenie widoków storyboardu, zacznij od kilku elementów i powoli buduj widoki, upewniajÄ…c siÄ™, że przewijanie dziaÅ‚a po dodaniu kilku elementów.
• WyÅ‚Ä…cz translatesAutoresizingMaskIntoConstraints na wszystkim: to byÅ‚o zawsze przyczynÄ… konfliktów ograniczeÅ„ dla mnie.
• Ustaw ograniczenia uiscrollview poprawnie: upewnij siÄ™, że widok przewijania jest podÅ‚Ä…czony ze wszystkich stron do widoku nadrzÄ™dnego, w przeciwnym razie po prostu nie rozszerzy siÄ™.

Po pewnym czasie zajmowania się tym problemem, w końcu znalazłem rozwiązanie. Pracuję z storyboardami o rozmiarach uniwersalnych (600x600). Utworzyłem UIView (contentView) o rozmiarze widoku przewijania i utworzyłem ograniczenia do góry, dołu, wiodącej i końcowej do widoku przewijania. Następnie przyciąłem rozmiar contentView ręcznie do 600x600. Storyboard przestał próbować zmienić rozmiar wszystkiego i mogłem pracować, ale widok wyglądał okropnie na prawdziwym urządzeniu lub symulatorze. Zrobiłem 2 gniazdka tego obciętego rozmiaru.

@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewWidthConstraint; 
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *contentViewHeightConstraint;

Następnie w viewDidLoad

CGSize viewSize = self.view.frame.size;
self.contentViewWidthConstraint.constant = viewSize.width;
self.contentViewHeightConstraint.constant = viewSize.height;

Spędziłem dni próbując znaleźć rozwiązanie, JAK UŻYWAĆ AutoLayout view wbudowanego widoku przewijania, aby wyśrodkować widok przewijania w widocznym ekranie, który działa we wszystkich urządzeniach / wymiarach ekranu, a także z obracaniem ekranu.

Spędziłem dni próbując to zrobić tylko z Autolayout, i zbliżyłem się, ale nigdy wystarczająco blisko. Tak więc w końcu musiałem dodać 3 linie kodu na ekran, jak również, w viewDidLoad.

Patrz rozwiązanie poniżej:

1. Utwórz widok przewijania i wypełnij go whatever objects you want
2. Włącz automatyczny układ
3. Następnie Wyśrodkuj Przewijanie w pionie i poziomie
4. Wybierz widok a następnie 'dodaj brakujące ograniczenia' - to robi swoje
5. w rezultacie powstaje wiele ograniczeń. Istnieją 2 nowe utworzone dla widoku: "Horiz space scrollview to View" i "Vert space scrollview to view" lub odwrotnie.
6. Usuń 'Horiz space scrollview to View' tak teraz zostały ci 3 Ograniczenia widoku. 2 do wprowadzania widoku przewijania w widoku i jeden do ustawiania pionowego odstępu między widokiem przewijania a widokiem
7. teraz połącz ograniczenie Vert z kodem, klikając i Ctrl przeciągając je do pliku nagłówkowego i tworząc IBOutlet NSLayoutConstraint (nazwałem moje ograniczenievertvtosv)

8. Teraz idź do.plik m i dodaj te linie kodu do viewDidLoad (graj z ilością wypełnienia, aby uzyskać poprawny vert centrowanie)

   if (IPAD)
   

   { siebie.constraintVertVtoSV.stała = 150,0; }

9. Powinno to teraz działać na wszystkich urządzeniach i być odpowiednio wyśrodkowane i nadal prawidłowo przewijać.

Jeśli tak jak ja po prostu używasz statycznej zawartości bez liczników wewnątrz subview, możesz zrobić tak:

override func viewDidLayoutSubviews() {
    scrollView.contentSize = CGSizeMake(320, 800)
}

Podobny problem mam dzisiaj z iOS 8.4, Xcode 6.4

Istnieje widok zawierajÄ…cy widok przewijania, zawierajÄ…cy widok contentView (UIView) zawierajÄ…cy podview.

Wszystko jest Układ auto wszędzie. Krawędzie widoku przewijania są przypięte do krawędzi widoków nadrzędnych z ograniczeniami. Krawędzie widoku zawartości są przypięte do krawędzi widoku przewijania z ograniczeniami.

Pierwotnie Widok zawartości odmawiał rozmiaru jako pełnej szerokości widoku przewijania. Musiałem dodać dodatkowe ograniczenie widoku zawartości, aby jego szerokość była zgodna z nadrzędnym widokiem przewijania. Albo mogę ustawić widok treści.centerX = = scrollView./ align= "left" / Jeden z nich, oprócz przypinania krawędzi, nagle sprawił, że widok treści był odpowiednio rozmiar.

// Either one of these additional constraints are required to get autolayout to correctly layout the contentView. Otherwise contentView size is its minimum required size
scrollView.addConstraint(NSLayoutConstraint(item: contentView, attribute: .CenterX, relatedBy: .Equal, toItem: scrollView, attribute: .CenterX, multiplier: 1.0, constant: 0))
scrollView.addConstraint(NSLayoutConstraint(item: contentView, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: scrollView, attribute: .Width, multiplier: 1.0, constant: 0.0))

Przypinanie krawędzi widoku zawartości do widoku przewijania za pomocą wizualnych ograniczeń formularza,

let cvConstraints = ["H:|[contentView]|", "V:|[contentView]|"]

Używam procedury do iteracji tablicy i dodawania jej do widoku przewijania.

Miałem podobny problem. Ustawiłem wszystkie ograniczenia i zawsze zastanawiałem się, dlaczego nadal zmienia rozmiar niektórych podwidywań. Moim rozwiązaniem było ustawienie clipsToBounds na tak.

W swift możesz użyć tego rozwiązania roboczego.

Kontrasty

ScrollView: Leading, Trailing, Top, Bottom = Superview

ContentView: PoczÄ…tek, Koniec, Góra, Dół = ScrollView. Wysokość staÅ‚a / wzglÄ™dem treÅ›ci.

Możesz ustawić ograniczenie szerokości (contentView) na równe ScrollView superview, ale wybierz Usuń Usuń w czasie kompilacji, ponieważ będziesz dodawać to ograniczenie programowo. To jest po to, aby IB nie narzekał ostrzeżeniami.

extension UIView {

    func setupContentViewForViewWithScroll(contentView vwContent : UIView) {
        //Set constraint for scrollview content
        let constraint = NSLayoutConstraint(item: vwContent, attribute: NSLayoutAttribute.Width, relatedBy: .Equal, toItem: nil, attribute: NSLayoutAttribute.NotAnAttribute, multiplier: 1, constant: self.bounds.size.width)
        vwContent.addConstraint(constraint)
        self.layoutSubviews()
    }

}

I w kontrolerze widoku viewDidLayoutSubviews wywoÅ‚ujÄ™ tÄ™ metodÄ™:

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    self.view.setupContentViewForViewWithScroll(contentView: vwContent)
}

Wiem, że to rozwiązanie dla laika, a nie to, co sugeruje Apple w docu, ale u mnie działało dwa razy, z inną treścią i można je bardzo szybko skonfigurować: W kontrolerze widoku storyboard włóż UIView. W UIView wstawić Widok tabeli, dynamiczne, 0 prototypowe komórki, Styl Zwykły lub zgrupowane. W widoku tabeli Wstaw Widok przewijania, w widoku przewijania Wstaw zawartość. To wszystko, brak ustawień w niestandardowym kontrolerze widoku.