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?
ios
xcode
uiscrollview
uistoryboard
Alex Reynolds
źródło
źródło
Odpowiedzi:
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
Freeform
zamiast wywnioskować.3: Przejdź do głównego widoku tego scenorysu, a nie widoku przewijania, ale raczej widoku najwyższego poziomu.
4: Kliknij
Size Inspector
i 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 attribute
z KeyPath,contentSize
a 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 attribute
z KeyPathframe
z 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.
źródło
frame
atrybutu. Rzeczywiście, nie wszystkie urządzenia mają dokładnie ten sam rozmiar (iPhone 5).Oto kroki,
Auto Layout
które zadziałały dla mnie w XCode 8.2.1.Size Inspector
zView Controller
, i zmienićSimulated Size
sięFreeform
z wysokości 1000 zamiastFixed
.View Controller
na RootView .Scroll View
podwidok as RootView i zmień jego nazwę na ScrollView .Vertical Stack View
jako widok podrzędny ScrollView i zmień jego nazwę na ContentView .Attributes Inspector
z contentView , a zmianaDistribution
sięFill Equally
zamiastFill
.View
jako widok podrzędny ContentView i zmień jego nazwę na RedView .Red
jako tło RedView .View
jako widok podrzędny ContentView i zmień jego nazwę na BlueView .Blue
jako tło BlueView .Update Frames
przycisk.Update Frames
to nowy przycisk w Xcode8 zamiastResolve Auto Layout Issues
przycisku. Wygląda jak przycisk odświeżania, znajdujący się na pasku sterowania pod scenorysem:Wyświetl hierarchię:
Wyświetl scenę kontrolera (wysokość: 1000):
Uruchom na iPhonie7 (wysokość: 1334/2):
źródło
BlueView
góry doRedView
dołu dla początkujących, takich jak ja (Xcode 8.2): 1) PrzeciągnijBlueView
poniższeRedView
(tzn. Nie powinny się nakładać lub krok 4) nie zadziała). 2) Otwórz menu pinezki na dole. 3) Kliknij małą strzałkę po prawej stronie ograniczenia górnego marginesu. 4) WybierzRedView
z tego menu i ustaw wartość na 0. Różni się to od poprzednich wersji Xcode, w których można było wykonywać takie czynności jakEditor
->Pin
-> ...UIStackView
aby uniknąć problemu z ustawieniem ograniczeń.Oto kroki, które działały dla mnie na iOS 7 i XCode 5.
Przeciągnij ViewController (jest dostarczany z UIView „View”).
1.1 Wybierz „Wyświetl kontroler”, wybierz „Inspektor plików” i odznacz „Układ automatyczny”.
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ł.
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.
Wybierz „Widok”, a następnie „Inspektor rozmiaru”.
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:
źródło
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ść:
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:
Możesz spróbować to zrobić, dodając
contentSize
keyPath 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.
źródło
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:
Ustaw wszystkie ograniczenia na Widok przewijania (tj. Najpierw napraw widok przewijania)
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.
źródło
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.
źródło
Zwróć uwagę, że w
UITableView
rzeczywistoś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.źródło
Właściwość contentSize należy ustawić tylko w właściwości viewDidAppear, jak w tym przykładzie:
Rozwiązuje problemy z automatycznym układem i działa dobrze na iOS7.
źródło
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: -
źródło
spacing
aby wstawić trochę odstępu między podglądami (dziećmi). Jeśli potrzebujesz więcej miejsca między tylko dwoma podglądami podrzędnymi, dodaj element potomny „spacer”: przezroczysty widok UIView o stałym rozmiarze.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:
Wstaw UIScrollView do głównego widoku ViewController
Ustaw odpowiednio ograniczenia Autolayout w ScrollView. U mnie użyłem od 0 do Top Layout Guide i od 0 do Bottom layout Guide
Wewnątrz ScrollView umieść widok kontenera. Ustaw wysokość na dowolną (np. 1000)
Dodaj ograniczenie wysokości (1000) do kontenera, aby nie zmieniać jego rozmiaru. Dół będzie poza końcem formularza.
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.
źródło
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
źródło
Oto proste rozwiązanie.
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.
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.
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.
źródło
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.
źródło
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!
źródło
Kluczem jest contentSize.
Często tego brakuje i nie jest wskazywany podczas dodawania UIScrollView.
Wybierz UIScrollView i wybierz Inspektor tożsamości.
Dodaj
contentSize
keyPath jako asize
do scrollView w Inspektorze tożsamości i ustaw go na (320, 1000).Przewiń.
źródło
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.
źródło
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
źródło