jak używać UIScrollView w Interface Builder?

Odpowiedź Boby_Wan dała mi do myślenia i znalazłem następujące rozwiązanie, aby skonfigurować zawartość uiscrollview z Interface Builder:

1. Wybierz UIScrollView w scenie Storyboard
2. przejdź do inspektora tożsamości , utwórz nowy atrybut Runtime zdefiniowany przez Użytkownika (kliknij przycisk+)
3. zmień atrybut Key Path na contentSize
4. zmień atrybut Type na Size
5. Ustaw teraz wartość na {pożądana szerokość zawartości, pożądana wysokość zawartości }

Np ustawienie wartości na {320, 920} pozwoli użytkownikowi przewijać w dół cały dodatkowy ekran na iPhonie.

(używam xcode 4.3.3, projekt iOS Deployment Target jest 5.1)

kiedy po raz pierwszy to zrobiłem, otrzymałem następujący błąd:

Nielegalna Konfiguracja:
     Typ rozmiaru atrybuty środowiska wykonawczego zdefiniowane przez użytkownika z wersjami Xcode przed 4.3
     MainStoryboard.storyboard

Jeśli również pojawi się ten błąd, można go łatwo naprawić: wybierz Storyboard w Nawigatorze projektu i otwórz Inspektor plików . Znajdź / rozwiń sekcję Interface Builder Document , a następnie rozwiń sekcję Development. Upewnij się, że jest ustawiona na Xcode 4.3

Z Autolayout( iOS6+), można uniknąć ustawienia contentSize. Zamiast tego ustaw następujące ograniczenia:

1. Przypnij górną część widoku przewijania do górnej części najbardziej potomnego.
2. i przypiąć spód do spodu-najbardziej dziecko.

Możesz to zrobić używając tylko Kreatora interfejsu, przejdź do Inspektora tożsamości (trzecia zakładka inspektora) i dodaj nowy atrybut Runtime zdefiniowany przez użytkownika z

• kluczowa ścieżka: contentSize
• Typ: Rozmiar
• Wartość: {szerokość, wysokość}

Teraz jest sposób na zrobienie UIScrollView zwoju bez opuszczania Storyboard :

1. Wybierz UIScrollView W Storyboardzie, przejdź do rozmiaru Inspektor i zmień wartość Bottom (lub jakąkolwiek inną wartość należy zmienić) w sekcji Wstawki zawartości na wysokość obszaru zawartości.
2. przejdź teraz do inspektora tożsamości i utwórz nowy atrybut Runtime zdefiniowany przez Użytkownika (klikając przycisk+) i nadaj mu nazwę contentSize. Informatyka nie ma znaczenia, jaki typ lub wartość wypełniasz (możesz nawet zostawić ich wartość domyślną).

To sprawi, że UIScrollView będzie działać poprawnie, chociaż Nie wiem, dlaczego drugi krok jest konieczny (dowiedziałem się przez przypadek). :(

Jedną z metod, których używałem w przeszłości, jest przeciągnięcie widoku przewijania z widoku zawierającego widok w kreatorze interfejsów i ustawienie jego rzeczywistego rozmiaru na jaki ma być contentSize.

To, co nie jest oczywiste w kreatorze interfejsów, to to, że możesz mieć niezwiązane widoki, które są przechowywane w stalówce, ale nie są częścią głównego widoku, do którego jest głównie stalówka.

W widoku, w którym chcesz, aby przewijał się widok, umieść prosty UIView, którego używasz jako uchwytu miejsca. (to jest po prostu tak, aby można było wizualnie zaprojektować jego lokalizację. jeśli używasz tylko całego widoku, możesz pominąć ten krok i użyć drugiego fragmentu kodu, który podaję na końcu tej odpowiedzi).

Możesz następnie wypełnić widok przewijania kontrolkami, wizualnie układając go tak,jak chcesz. daj zarówno właściwości zastępcze, jak i scrollview wewnątrz kontrolera widoku, aby uzyskać do nich dostęp w czasie wykonywania.

At runtime, in - (void) viewDidLoad

scrollView.contentSize = scrollView.frame.size;
scrollView.frame = placeholder.frame;
[placeholder.superview addSubView:scrollView];
[placeholder removeFromSuperview];

Alternatywnie (jeśli nie użyłem placeholdera):

CGRect f = self.view.frame;
scrollView.contentSize = f.size;
f.origin.x = 0;
f.origin.y = 0;
scrollView.frame = f;
[self.view addSubView:scrollView];

Wreszcie, jeśli "stracisz" widok przewijania w interface builder (możliwe jest jego zamknięcie, aby zniknął z siatki projektowej), nie panikuj. po prostu kliknij go na liście obiektów po lewej stronie siatki projektu.

W Xcode 4.5 używając Autolayout nie mam sekcji wstawek zawartości w Inspektorze rozmiaru. Musiałem więc dodać go do atrybutów Runtime zdefiniowanych przez Użytkownika i wtedy działało dobrze.

To, co dodajesz w "atrybutach Runtime zdefiniowanych przez użytkownika" to keyPath = = contentInset, który jest typu "Rect" (UIEdgeInsets, który ma takie samo wejście jak Rect) i jest zdefiniowany jako {top, left},{bottom, right}. Rozmiar zawartości określa tylko region okna przewijania. contentInset definiuje obszar przewijania.

Mam nadzieję, że to pomoże komuś w tej samej sytuacji.

Wiele z powyższych odpowiedzi jest mylących lub nieaktualnych. Od 2017 roku (prawdopodobnie znacznie wcześniej) interface builder obsługuje przewijanie z zawartością o automatycznym rozmiarze. Sztuczka polega na tym, że XCode daje specjalne, niestandardowe znaczenie ograniczeń między przewijania i treści wewnątrz niego. Te" wewnętrzne " ograniczenia będą nie w rzeczywistości wpływać na rozmiar zawartości, jak można się inaczej spodziewać.

Oznacza to, że możesz np. mieć swój scrollview przypięte do dołu widoku głównego z zerowym marginesem, a także mieć zawartość widoku przewijania przypiętą do dołu widoku przewijania z zerowym marginesem, ale zawartość nie zostanie faktycznie rozciągnięta przez to. Zamiast tego zawartość otrzyma swój własny rozmiar (więcej poniżej) i będzie to również rozmiar przewijanego obszaru w widoku przewijania.

Pomyśl o tym w ten sposób - istnieje asymetria w powiązaniu ograniczeń z widoku przewijania: ograniczenia z widoku przewijania do "zewnętrzny" (nadrzędny) świat określa rozmiar i pozycję przewijania jak zwykle. Ale ograniczenia "wewnątrz" widoku przewijania naprawdę ustawiają rozmiar i pozycję przewijalnego obszaru widoku przewijania, wiążąc go z zawartością.

Jest to całkowicie nieoczywiste, ponieważ po przejściu do ustawienia ograniczeń XCode zawsze zasugeruje bieżące odstępy i nigdy nie przyjdzie ci do głowy, aby celowo zmienić ograniczenia skierowane do wewnątrz i na zewnątrz w sposób, który jest sprzeczny. Ale ty mogą i mają znaczenie opisane powyżej: jeden kontroluje układ scrollview, a drugi kontroluje rozmiar przewijanego obszaru zawartości.

Natknąłem się na to przez przypadek, a następnie widząc, jak wygląda, że działa, zaprowadziłem mnie do tego artykułu, który wyjaśnia to całkowicie i cytuje źródło Apple docs:

Https://spin.atomicobject.com/2014/03/05/uiscrollview-autolayout-ios/

Ostatnia krytyczna informacja o samokontroli zawartości: Możesz czuć, że jesteś w catch-22 tutaj, ponieważ normalnie Rozmiar zawartości do np. szerokość widoku nadrzędnego, ale w tym przypadku rodzicem jest scrollview i jak opisano powyżej-ograniczenie nie będzie miało wpływu na rozmiar zawartości. Odpowiedź tutaj jest, aby pamiętać, że można ograniczyć elementy do elementów, które nie są bezpośrednio sąsiadujące w hierarchii widoku: na przykład można ustawić szerokość widoku zawartości na szerokość głównego widoku zamiast próbować na próżno, aby ScrollView zrobić to dla ty.

Jeśli klikniesz ikonę Właściwości dowolnego kontrolera widoku w Kreatorze interfejsu, możesz ustawić go na" dowolny " rozmiar w symulowanych metrykach I zmienić rozmiar głównego widoku na pożądany rozmiar zawartości.

W ten sposób możesz utworzyć zawartość widoku przewijania tak, jakby był to jeden duży widok. Ponieważ jest to tylko symulowana metryka, kontroler widoku zostanie zmieniony do granic okna po załadowaniu.

Konfiguracja UIScrollView za pomocą narzędzia Interface Builder nie jest intuicyjna. Oto moja lista kontrolna konfiguracji:

1. Wybierz plik XIB UIViewController. W "Inspektorze tożsamości" kreatora interfejsów Zmień UIView na typ klasy uiscrollview

2. W obszarze "Inspektor plików" odznacz opcję Autolayout

3. W sekcji" Inspektor atrybutów " Zmień rozmiar na dowolny. Można następnie rozciągnąć widok przewijania ręcznie lub można określić niestandardową szerokość i Wysokość pod "Inspektorem rozmiaru".

4. W "Identity Inspector" Dodaj nowy atrybut Runtime zdefiniowany przez Użytkownika o nazwie " contentSize "typu" Size " i zmień go na wartość {320, 1000}. Nie można już ustawić tego programowo i dlatego potrzebujesz tego kroku, aby widok przewijania wiedział, że zawartość widoku przewijania jest większa niż okno.

Po prostu usuń autoLayout w widoku przewijania. wtedy kod jest tak prosty jak ten:

scrollviewName.contentSize = CGSizeMake(0, 650);

Wystarczy utworzyć właściwość iboulet na .plik h następnie zsyntetyzować na .plik M. Upewnij się, że przewijanie jest włączone.

Tak, st3fan ma rację, należy ustawić właściwość contentSize UIScrollView. Ale nie należy wyłączać autolayout w tym celu. Możesz łatwo skonfigurować contentSize UIScrollView z autolayout tylko w IB, bez żadnego kodu.

Ważne jest, aby zrozumieć, że podczas korzystania z autolayout contentSize UIScrollView nie jest ustawiany bezpośrednio, jest obliczany na podstawie ograniczeń wszystkich podwidań UIScrollView. I wszystko, czego potrzebujesz, to zapewnić odpowiednie ograniczenia dla podwidywań dla w obu kierunkach.

Np. jeśli masz tylko jeden subview, możesz ustawić jego wysokość i spację od góry i dołu do superview (tzn. scrollView w naszym przypadku) contentSize.wysokość jest obliczana jako suma

Vertical Space (aSubview.top to Superview.top) + aSubview.height + Vertical Space (aSubview.top to Superview.top)

ContentSize.szerokość jest obliczana podobnie z ograniczeń poziomych.

Jeśli jest zbyt mało ograniczeń, aby prawidłowo obliczyć contentSize, mały czerwony przycisk jest wyświetlany w pobliżu elementu sceny kontrolera widoku, aby poinformować o niejednoznaczności układu.

Jeśli istnieje wiele podwidywań, to może to być "łańcuch" ograniczeń: od góry do góry subview, wysokości i odstępy między podviewami i od dołu do dołu subview jak w Danyal Aytekin odpowiedz.

Ale w praktyce w większości przypadków wygodniej jest dodać pusty widok o wymaganym rozmiarze i ustawić spacje na górę, Lewo, Dół, prawo widoku przewijania do 0. Możesz użyć tego widoku jako "widoku zawartości", tzn. umieścić na nim wszystkie inne podwidywy lub jeśli masz już wiele podwidywów i nie chcesz ich przenosić i konfigurować układ ponownie możesz dodać ten pomocniczy widok do istniejących podwizów i uczynić go ukrytym.

Aby scrollView można było przewijać obliczony rozmiar contentSize musi być większy niż rozmiar scrollView.

Możesz mieć UIScrollView w Storyboardzie z Autolayouts. Zasadniczo czego potrzebujesz to:

1. Dodaj UIScrollView
2. Dodaj do niego wszystkie ograniczenia (jak wstawki od górnej, lewej, prawej, dolnej krawędzi)
3. Dodaj' kontener ' UIView do UIScrollView
4. Jeśli chcesz tylko przewijać w jednym kierunku (powiedzmy, pionowo): ustawia jawnie wysokość (dla instancji, 600) i łączy szerokość z szerokością UIScrollView.
5. Jeśli chcesz przewijać dwukierunkowo Ustaw oba szerokość i wysokość.

Oto rozwiązanie do projektowania widoku przewijania z treścią większą niż Ekran w całości w Storyboardzie (cóż, prawie całkowicie, musisz dodać 1 pojedynczą linię kodu)

Https://stackoverflow.com/a/19476991/1869369

Znajduję wygodniejszy sposób.

1: Skaluj rozmiar widoku przewijania, aby zawierał cały interfejs użytkownika.

2: Dodaj iboutlet widoku przewijania.

3: w viewDidLoad Zapisz ramkę.rozmiar widoku przewijania.
(np. _scrollSize = _scrollview.rama.Rozmiar;)

4: w viewWillAppear Ustaw contentSize przez cgsize, który wcześniej zapisałeś.
(np. _scrollView.contentSize = _scrollsize;)

5: Done ~

1. Dodaj UIViewController
2. w UIViewController 'Attribute Inspector - > Simulated Metrics' Ustaw rozmiar Freeform
3. w UIViewController' Size Inspector -> View Controller ' Ustaw wysokość 800
4. Dodaj UIScrollView w UIViewController
5. Dodaj wszystkie ograniczenia do UIScrollView (Góra, Lewo, Prawo, Dół) i dodaj alignment X = center
6. Dodaj UIView w UIScrollView
7. Dodaj wszystkie ograniczenia do UIView (Góra, Lewo, Prawo, Dół) i dodaj wyrównanie X = center. Tak., to samo co dla UIScrollView w #3, ale dla UIView
8. Dodaj ograniczenie wysokości do UIView. Na przykład 780
9. Run

Utwórz nowy projekt Xcode

Przejdź do głównej.storyboard file

Wybierz ScrollView z biblioteki obiektów.

Ustaw ramkę dla widoku przewijania.

Dodaj inny widok do widoku przewijania i zachowaj ramkę taką samą jak w widoku przewijania.

Teraz, aby dynamicznie ustawić jego wysokość i szerokość, możesz to skonfigurować UIScrollView za pomocą automatycznego układu w XIB