Jak używać UIScrollView w Storyboard

Mam widok przewijania z zawartością o wysokości 1000 pikseli i chciałbym móc go rozłożyć, aby ułatwić projektowanie w scenorysie.
Wiem, że można to zrobić programowo, ale naprawdę chcę móc to zobaczyć wizualnie. Za każdym razem, gdy umieszczam widok przewijania na kontrolerze widoku, nie przewija się. Czy można sprawić, by działał tak, jak chcę, czy muszę to zrobić w kodzie?

Odpowiadam na własne pytanie, ponieważ spędziłem 2 godziny na znalezieniu rozwiązania, a StackOverflow pozwala na taki styl kontroli jakości.

Zacznij kończyć tutaj, jak sprawić, by działało w scenorysie.

1: przejdź do widoku kontrolera i kliknij Attribute Inspector.

2: zmień rozmiar na Freeformzamiast wywnioskować.

3: Przejdź do głównego widoku tego scenorysu, a nie widoku przewijania, ale raczej widoku najwyższego poziomu.

4: Kliknij Size Inspectori ustaw ten widok na żądany rozmiar. Zmieniłem swój wzrost na 1000.

Teraz zobaczysz, że scenorys ma konfigurację widoku, dzięki czemu możesz zobaczyć całą wysokość swojego zwoju, aby ułatwić projektowanie.

5: Upuść na przewijany widok i rozciągnij go, aby zajął cały widok. Powinieneś teraz mieć widok przewijania o rozmiarze 320,1000 znajdujący się w widoku w kontrolerze widoku.

Teraz musimy sprawić, by przewijał się i poprawnie wyświetlał zawartość.

6: Kliknij swój widok przewijania i kliknij Identity Inspector.

7: Dodaj User Defined runtime attributez KeyPath, contentSizea następnie typ SIZE i wpisz rozmiar zawartości. Dla mnie to (320, 1000).

Ponieważ chcemy zobaczyć cały nasz widok przewijania na storyboardzie, rozciągnęliśmy go i ma on ramkę 320,1000, ale aby to zadziałało w naszej aplikacji, musimy zmienić ramkę w dół do tego, jaki będzie widoczny widok przewijania.

8: Dodaj runtime attributez KeyPath framez Type RECT i 0,0,320,416.

Teraz, kiedy uruchomimy naszą aplikację, będziemy mieli widoczny widok przewijania z ramką 0,0,320, 416 i możemy przewinąć w dół do 1000. Jesteśmy w stanie rozmieścić nasze podglądy i obrazy oraz inne elementy w Storyboard tak, jak chcemy, aby wyglądały. Następnie nasze atrybuty środowiska uruchomieniowego zapewniają prawidłowe wyświetlanie. Wszystko to bez 1 linii kodu.

Oto kroki, Auto Layoutktóre zadziałały dla mnie w XCode 8.2.1.

1. Wybierz Size Inspectorz View Controller, i zmienić Simulated Sizesię Freeformz wysokości 1000 zamiastFixed .
2. Zmień nazwę widoku View Controllerna RootView .
3. Przeciągnij plik Scroll View podwidok as RootView i zmień jego nazwę na ScrollView .
4. Dodaj ograniczenia dla ScrollView :
   • ScrollView [Top, Bottom, Leading, Trailing] = RootView [Top, Bottom, Leading, Trailing]
5. Przeciągnij plik Vertical Stack View jako widok podrzędny ScrollView i zmień jego nazwę na ContentView .
6. Dodaj ograniczenia dla ContentView :
   • ContentView .height = 1000
   • ContentView [Top, Bottom, Leading, Trailing, Width] = ScrollView [Top, Bottom, Leading, Trailing, Width]
7. Wybierz Attributes Inspectorz contentView , a zmianaDistribution się Fill Equallyzamiast Fill.
8. Przeciągnij Viewjako widok podrzędny ContentView i zmień jego nazwę na RedView .
9. Zestaw Red jako tło RedView .
10. Przeciągnij Viewjako widok podrzędny ContentView i zmień jego nazwę na BlueView .
11. Zestaw Blue jako tło BlueView .
12. Wybierz RootView i kliknijUpdate Frames przycisk.
    • Update Framesto nowy przycisk w Xcode8 zamiast Resolve Auto Layout Issuesprzycisku. Wygląda jak przycisk odświeżania, znajdujący się na pasku sterowania pod scenorysem:

Wyświetl hierarchię:

• RootView
  • ScrollView
    • ContentView
      • RedView
      • BlueView

Wyświetl scenę kontrolera (wysokość: 1000):

Uruchom na iPhonie7 (wysokość: 1334/2):

Oto kroki, które działały dla mnie na iOS 7 i XCode 5.

1. Przeciągnij ViewController (jest dostarczany z UIView „View”).

   1.1 Wybierz „Wyświetl kontroler”, wybierz „Inspektor plików” i odznacz „Układ automatyczny”.

2. Przeciągnij ScrollView (jako element podrzędny elementu ViewController UIView „View”)
3. Wybierz ScrollView i otwórz „Inspektor tożsamości”.

4. Wprowadź „contentSize” w parametrze keyPath. Wybierz „Rozmiar” w polu Typ. I wprowadź {320, 1000} jako wartość.

   Uwaga: Krok 4 mówi po prostu, że rolka przewijająca zawiera zawartość o rozmiarze 320 x 1000 jednostek. Ustawienie contentSize sprawi, że scroller będzie działał.

5. Wybierz kontroler widoku, wybierz „Inspektor atrybutów”, a następnie wybierz opcję Dowolny z rozmiaru.

   Uwaga: krok 5 pozwoli nam zmienić rozmiar „Widoku”, który jest dostarczany z kontrolerem widoku.

6. Wybierz „Widok”, a następnie „Inspektor rozmiaru”.

7. Ustaw szerokość na 320 i wysokość na 1000.

Uwaga: 5, 6 i 7 są wyłącznie dla nas do zobaczenia rozciągnięty lub cały rozszerzony widok w StoryBoard. Uwaga: pamiętaj, aby usunąć zaznaczenie opcji „Układ automatyczny” w Kontrolerze widoku.

Twoja hierarchia widoku powinna wyglądać następująco:

Po wielu godzinach prób i błędów znalazłem bardzo łatwy sposób umieszczania treści w widokach przewijania, które są „poza ekranem”. Testowane z XCode 5 i iOS 7. Możesz to zrobić prawie w całości w Storyboard, używając 2 małych sztuczek / obejść:

1. Przeciągnij kontroler widoku na scenorys.
2. Przeciągnij scrollView na ten viewController, dla demonstracji możesz pozostawić domyślny rozmiar, obejmujący cały ekran.
3. Teraz jest sztuczka 1 : przed dodaniem dowolnego elementu do scrollView przeciągnij zwykły „widok” (ten widok będzie większy niż ekran i będzie zawierał wszystkie elementy podrzędne, takie jak przyciski, etykiety, ... nazwijmy to „ widok obejmujący ”).
4. Niech ten otaczający widok ma rozmiar Y w inspektorze rozmiaru wynosi na przykład 800.
5. Upuść etykietę na otaczający widok, gdzieś na pozycji Y 200, nazwij ją „etykieta 1”.
6. Sztuczka 2 : upewnij się, że wybrany jest otaczający widok ( nie scrollView! ) I ustaw jego pozycję Y na przykład -250, abyś mógł dodać element znajdujący się `` poza '' ekranem
7. Upuść etykietę gdzieś u dołu ekranu, nazwij ją „etykieta 2”. Ta etykieta jest faktycznie „poza ekranem”.
8. Zresetuj pozycję Y otaczającego widoku do 0, nie będziesz już widzieć etykiety 2, ponieważ znajdowała się poza ekranem.

Do tej pory w przypadku tworzenia scenorysu musisz teraz dodać pojedynczą linię kodu do metody viewControllera „viewDidLoad”, aby ustawić zawartość scrollViews tak, aby zawierała cały „widok otaczający”. Nie znalazłem sposobu, aby to zrobić w Storyboard:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

Możesz spróbować to zrobić, dodając contentSizekeyPath jako pliksize do w Inspektorze tożsamości i ustawiając go na (320, 1000).

Myślę, że Apple powinno ułatwić to w scenorysie, w TableViewController możesz po prostu przewinąć poza ekran w Storyboard (po prostu dodaj 20 komórek, a zobaczysz, że możesz po prostu przewinąć), powinno to być również możliwe dzięki ScrollViewController.

Uruchomienie przewijania do pracy w iOS7 i Auto-layout w iOS 7 i XCode 5.

Oprócz tego: https://stackoverflow.com/a/22489795/1553014

Najwyraźniej wszystko, co musimy zrobić, to:

1. Ustaw wszystkie ograniczenia na Widok przewijania (tj. Najpierw napraw widok przewijania)

2. Następnie ustaw ograniczenie odległości od scrollView na najniższy element do przewijania widoku (który jest superwidokiem).

Uwaga: Krok 2 pokaże scenorys, gdzie ostatnia treść znajduje się w widoku przewijania.

W tym przykładzie odznaczyłem funkcję Autolayout w narzędziu do tworzenia interfejsów. I nadal używam (bez żadnego powodu) stosunkowo starej wersji 4.6.1 Xcode.

Zacznij od kontrolera widoku, który ma nad nim przewijany widok (widok główny).

1: Dodaj widok kontenera z biblioteki obiektów do widoku przewijania. Zauważ, że nowy kontroler widoku jest dodawany do scenorysu i jest połączony z kontrolerem widoku z widokiem przewijania.

2: Wybierz widok kontenera i w Inspektorze rozmiaru ustaw go jako zakotwiczenie do góry i do lewej bez automatycznej zmiany rozmiaru.

3: Zmień jego wysokość na 1000. (w tym przykładzie użyto 1000. Należy zastosować wymaganą wartość).

4: Wybierz nowy kontroler widoku i, w Inspektorze atrybutów, zmień Rozmiar na Dowolny.

5: Wybierz widok nowego kontrolera widoku i, w Inspektorze rozmiaru, zmień wysokość na 1000 (co jest równe wysokości widoku kontenera).

6: Do późniejszego testu, nadal w widoku nowego kontrolera widoku, dodaj etykietę u góry iu dołu widoku.

7: Wybierz widok przewijania z oryginalnego kontrolera widoku. W Inspektorze tożsamości dodaj atrybut z parametrem keyPath ustawionym na contentSize, wpisz rozmiar i wartość {320, 1000} (lub rozmiar widoku kontenera).

8: Uruchom na 4-calowym symulatorze iPhone'a. Powinieneś być w stanie przewijać od górnej do dolnej etykiety.

9: Uruchom na 3,5-calowym symulatorze iPhone'a. Powinieneś być w stanie przewijać od górnej do dolnej etykiety.

Pamiętaj, że Xcode 4.6.1 może budować tylko dla iOS6 i starszych. Korzystając z tego podejścia i budując dla iOS6, nadal jestem w stanie osiągnąć te same wyniki, gdy aplikacja jest uruchomiona na iOS7.

Zwróć uwagę, że w UITableViewrzeczywistości możesz przewijać widok tabeli, wybierając komórkę lub element w niej i przewijając w górę lub w dół za pomocą gładzika.

Na przykład UIScrollView, podoba mi się sugestia Alexa, ale zalecałbym tymczasową zmianę kontrolera widoku na dowolny, zwiększenie wysokości widoku głównego, zbudowanie interfejsu użytkownika (kroki 1-5), a następnie przywrócenie standardowego rozmiaru wywnioskowanego po zakończeniu dzięki czemu nie musisz na stałe kodować rozmiarów zawartości jako atrybutów środowiska wykonawczego. Jeśli to zrobisz, narażasz się na wiele problemów z konserwacją, próbując obsługiwać zarówno urządzenia 3,5 ", jak i 4", a także możliwość zwiększenia rozdzielczości ekranu w przyszłości.

Właściwość contentSize należy ustawić tylko w właściwości viewDidAppear, jak w tym przykładzie:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

Rozwiązuje problemy z automatycznym układem i działa dobrze na iOS7.

Zastrzeżenie: - Tylko dla ios 9 i nowszych (widok stosu).

Jeśli wdrażasz aplikację na urządzeniach z systemem iOS 9, użyj widoku stosu . Oto kroki: -

1. Dodaj widok przewijania z ograniczeniami - przypnij do lewej, prawej, dołu, góry (bez marginesów) do nadzoru (widok)
2. Dodaj widok stosu z tymi samymi ograniczeniami, aby przewijać widok.
3. Inne ograniczenia w widoku stosu: - stackView.bottom = view.bottom and stackView.width = scrollView.width
4. Zacznij dodawać swoje widoki. Widok przewijania zdecyduje o przewijaniu na podstawie rozmiaru widoku stosu (który jest zasadniczo widokiem zawartości)

W iOS7 stwierdziłem, że gdybym miał View wewnątrz UIScrollView na ViewController wielkości FreeForm, nie przewijałby się w aplikacji, bez względu na to, co zrobiłem. Bawiłem się i stwierdziłem, że wydaje się działać, który nie używa FreeForms:

1. Wstaw UIScrollView do głównego widoku ViewController

2. Ustaw odpowiednio ograniczenia Autolayout w ScrollView. U mnie użyłem od 0 do Top Layout Guide i od 0 do Bottom layout Guide

3. Wewnątrz ScrollView umieść widok kontenera. Ustaw wysokość na dowolną (np. 1000)

4. Dodaj ograniczenie wysokości (1000) do kontenera, aby nie zmieniać jego rozmiaru. Dół będzie poza końcem formularza.

5. Dodaj wiersz [self.scrollView setContentSize: CGSizeMake (320, 1000)]; do ViewController, który zawiera scrollView (który został podłączony jako IBOutlet)

ViewController (dodawany automatycznie), który jest skojarzony z kontenerem, będzie miał żądaną wysokość (1000) w Interface Builder, a także będzie prawidłowo przewijał się w oryginalnym kontrolerze widoku. Możesz teraz użyć ViewController kontenera do rozmieszczenia kontrolek.

chcę postawić moje 5 centów na zaakceptowaną odpowiedź: badałem ten temat od 2 dni i wreszcie znalazłem rozwiązanie, którego będę używać zawsze od teraz

przejdź do pozycji 4 w zaakceptowanej odpowiedzi i zapomnij o dodawaniu atrybutów ramek, rozmiarów zawartości i tak dalej

aby wszystko było zautomatyzowane, użyj rozwiązania z tego linku

wszystko jest jasne, łatwe, eleganckie i działa jak urok na iOS 7. Jestem całkiem zadowolony z tego wszystkiego, lol

Oto proste rozwiązanie.

1. Ustaw atrybut rozmiaru kontrolera widoku w scenorysie na „Dowolny” i ustaw żądany rozmiar. Upewnij się, że jest wystarczająco duży, aby zmieścić całą zawartość widoku przewijania.

2. Dodaj widok przewijania i ustaw ograniczenia w normalny sposób. tzn. jeśli chcesz, aby widok przewijania miał rozmiar twojego widoku, wtedy dołącz górne, dolne, wiodące i końcowe marginesy do superviewu w normalny sposób.

3. Teraz po prostu upewnij się, że w podwidokach widoku przewijania istnieją ograniczenia, które łączą górę i dół widoku przewijania. To samo dotyczy lewej i prawej strony, jeśli masz przewijanie w poziomie.

Oto trochę niechlujna odpowiedź, która prowadzi do tego samego rozwiązania dla widoków przewijania w pionie, ale (wbrew etosowi przepełnienia stosu) nie odpowiada na pytanie. Zamiast używać scrollView, po prostu użyj UITableView, przeciągnij normalny UIView do nagłówka i ustaw go tak, jak chcesz, możesz teraz przewijać zawartość w scenorysie.

Najwyraźniej nie musisz w ogóle podawać wzrostu! Co jest świetne, jeśli z jakiegoś powodu ulegnie zmianie (zmieniasz rozmiar komponentów lub zmieniasz rozmiary czcionek).

Właśnie skorzystałem z tego samouczka i wszystko działało: http://natashatherobot.com/ios-autolayout-scrollview/

(Uwaga dodatkowa: nie ma potrzeby implementowania viewDidLayoutSubviews, chyba że chcesz wyśrodkować widok, więc lista kroków jest jeszcze krótsza).

Mam nadzieję, że to pomoże!

Kluczem jest contentSize.

Często tego brakuje i nie jest wskazywany podczas dodawania UIScrollView.

Wybierz UIScrollView i wybierz Inspektor tożsamości.

Dodaj contentSizekeyPath jako a sizedo scrollView w Inspektorze tożsamości i ustaw go na (320, 1000).

Przewiń.

Jeśli używasz automatycznego układu, najlepszym podejściem jest użycie UITableViewController z komórkami statycznymi w scenorysie.

Kiedyś też napotkałem problem z widokiem, który wymaga znacznie więcej przewijania, więc zmień UIScrollView za pomocą wyżej wymienionej techniki.

Oto jak skonfigurować widok przewijania za pomocą Xcode 11

1 - Dodaj widok przewijania i ustaw górne, dolne, wiodące i końcowe ograniczenia

2 - Dodaj widok zawartości do widoku przewijanego, przeciągnij połączenie do przewodnika po układzie treści i wybierz opcję Początek, Góra, Dół i Końcowy. Upewnij się, że ustawiłeś jego wartości na 0 lub żądane stałe.

3 - Przeciągnij z widoku Zawartość do Przewodnika układu ramki i wybierz opcję Równe szerokości

4 - Ustaw stałą wysokość ograniczenia w widoku zawartości