Hoe u UIScrollView in Storyboard gebruikt

Ik heb een scroll-weergave met inhoud die 1000 px hoog is en wil deze graag zo kunnen opmaken dat het gemakkelijk kan worden ontworpen op het storyboard.
Ik weet dat het programmatisch kan worden gedaan, maar ik wil het echt visueel kunnen zien. Elke keer dat ik een scrollweergave op een weergavecontroller plaats, zal deze niet scrollen. Is het mogelijk om het te laten werken zoals ik wil of moet ik het in de code doen?

Antwoord 1, autoriteit 100%

Ik beantwoord mijn eigen vraag omdat ik net 2 uur heb besteed aan het vinden van de oplossing en StackOverflow staat deze QA-stijl toe.

Van begin tot eind leest u hoe u het kunt laten werken in storyboard.

1: ga naar je view controller en klik op Attribute Inspector.

2: verander Grootte in Freeformin plaats van Inferred.

3: Ga naar de hoofdweergave op dat storyboard, niet naar uw scrollweergave, maar naar de weergave op het hoogste niveau.

4: Klik op Size Inspectoren stel deze weergave in op de gewenste maat. Ik heb mijn lengte veranderd in 1000.

Nu zul je zien dat je storyboard je weergave-instellingen heeft, zodat je de volledige hoogte van je scroll kunt zien voor eenvoudig ontwerp.

5: Zet een schuifweergave neer en rek deze uit zodat deze de hele weergave in beslag neemt. Je zou nu een scrollview moeten hebben met een grootte van 320.1000 die op een view in je viewcontroller zit.

Nu moeten we het laten scrollen en de inhoud correct laten weergeven.

6: Klik op je scrollview en klik op Identity Inspector.

7: Voeg een User Defined runtime attributetoe met KeyPath van contentSize, typ vervolgens SIZE en voer uw inhoudsgrootte in. Voor mij is het (320, 1000).

Omdat we onze hele scrollweergave op het storyboard willen zien, hebben we deze uitgerekt en het heeft een frame van 320.1000, maar om dit in onze app te laten werken, moeten we het frame wijzigen in wat de zichtbare scrollview zal doen zijn.

8: Voeg een runtime attributetoe met KeyPath framemet Type RECT en 0,0,320.416.

Als we nu onze app gebruiken, hebben we een zichtbare scrollview met een frame van 0,0,320, 416 en kunnen we naar beneden scrollen tot 1000. We kunnen onze subviews en afbeeldingen en zo in Storyboard precies zo indelen als we willen. verschijnen. Dan zorgen onze runtime-attributen ervoor dat het correct wordt weergegeven. Dit alles zonder 1 regel code.

Antwoord 2, autoriteit 34%

Hier zijn de stappen met Auto Layoutdie voor mij hebben gewerkt op XCode 8.2.1.

1. Selecteer Size Inspectorof View Controlleren verander Simulated Sizein Freeformmet een hoogte van 1000 in plaats van Fixed.
2. Hernoem de weergave van View Controllerals RootView.
3. Sleep een Scroll Viewals subview van RootViewen hernoem het als ScrollView.
4. Beperkingen toevoegen voor ScrollView:
   • ScrollView[Top, Bottom, Leading, Trailing] = RootView[Top, Bottom, Leading, Trailing]
5. Sleep een Vertical Stack Viewals subview van ScrollViewen hernoem het als ContentView.
6. Beperkingen toevoegen voor ContentView:
   • ContentView.height = 1000
   • ContentView[Top, Bottom, Leading, Trailing, Width] = ScrollView[Top, Bottom, Leading, Trailing, Width]
7. Selecteer Attributes Inspectorvan ContentViewen verander Distributionin Fill Equallyin plaats van Fill.
8. Sleep een Viewals subview van ContentViewen hernoem het als RedView.
9. Stel Redin als achtergrond van RedView.
10. Sleep een Viewals subview van ContentViewen hernoem het als BlueView.
11. Stel Bluein als achtergrond van BlueView.
12. Selecteer RootViewen klik op de knop Update Frames.
    • Update Framesis een nieuwe knop in Xcode8, in plaats van Resolve Auto Layout Issuesknop. Het ziet eruit als een refresh knop, gelegen in de controle balk onder het Storyboard:
      

Bekijk hiërarchie:

• RootView
  • ScrollView
    • inhoudAlle
      • Redview
      • BlueView

Bekijk Scene Controller (Lengte: 1000):

Uitvoeren op iPhone7 (Lengte: 1334/2):

Antwoord 3, Autoriteit 29%

Hier zijn de stappen die werkte voor mij op iOS 7 en XCode 5.

1. Sleep een ViewController (het komt met UIView “View”).

   1.1 Selecteer “View Controller” en selecteer “File Inspector” en verwijder het vinkje “Auto layout”.

2. Sleep een ScrollView (als kind van ViewController’s UIView “View”)
3. Selecteer ScrollView open “Identity Inspector”.

4. Enter “contentSize” voor sleutelpad. Kies “Size” voor Type. En Enter {320, 1000} voor de waarde.

   Opmerking: Stap 4 is gewoon te zeggen dat de scroller bevat bepaalde inhoud waarvan de grootte 320×1000 eenheden. Dus het instellen van contentSize zal scroller werk te maken.

5. Selecteer View Controller, Select “Eigenschappen Inspector” en selecteer Freeform vanaf maat.

   Opmerking: stap 5 zal ons toelaten om de grootte van de “View” te wijzigen dat de opvatting controller wordt geleverd met

.

6. Selecteer “View” en selecteer vervolgens “Size Inspector”.

7. Stel breedte 320 en hoogte tot 1000.

Opmerking: 5, 6 & amp; 7 is puur voor ons om zie uitgerekt of hele uitgebreide weergave binnen StoryBoard.
. Let op: Zorg ervoor dat de selectie van “Auto Lay-out” op View Controller

Uw weergave hiërarchie eruit zou moeten zien:

Antwoord 4, Autoriteit 9%

Na uren van trial and error, ik heb een zeer eenvoudige manier om inhoud in scrollviews die ‘offscreen’ put gevonden. Getest met XCode 5 & amp; iOS 7. U kunt deze bijna geheel te doen in Storyboard, met behulp van 2 kleine trucs / Oplossingen:

1. Sleep een ViewController op je storyboard.
2. Sleep een ScrollView op deze ViewController, want de demo kun je de grootte standaard te verlaten,
   die het gehele scherm.
3. Nu komt truc 1 : voor het toevoegen van elk element aan de ScrollView, sleept u in een reguliere ‘view’ (Deze visie zal groter zijn dan het scherm worden gemaakt, en zal alle sub-elementen zoals knoppen bevatten , etiketten, … laten we noemen het de ‘omsluiten uitzicht ‘).
4. Laat this omsluiten standpunt van Y-waarde in de grootte inspecteur bijvoorbeeld 800.
5. Daling een etiket op het omsluitende weergave, ergens aan Y-positie 200, noemt het label 1 ‘.

(niet de ScrollView ):

6. Trick 2 Zorg ervoor dat de omsluiten uitzicht is geselecteerd, en stel de Y-positie naar bijvoorbeeld – 250, zodat u een item dat is ‘buiten’ het scherm

kunt toevoegen

7. Drop in een label, ergens aan de onderkant van het scherm, noemt het ‘label 2’. Dit label is eigenlijk ‘off screen’.
8. Stel de Y-positie van de omsluitende om 0, dan ziet geen label 2, zoals is gepositioneerd buiten het scherm.

Tot zover het storyboard werk, nu moet je een enkele regel code toe te voegen aan de methode van de ViewController’s ‘viewDidLoad’ om de scrollViews inhoud set zodat dit het gehele ‘omsluiten view’ bevat. Ik heb een manier om dit te doen in Storyboard niet vinden:

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.scrollView.contentSize = CGSizeMake(320, 800);
}

U kunt proberen om dit te doen door het toevoegen van een contentSizesleutelpad als een sizeom de ScrollView in de Identity Inspector en in te stellen op (320, 1000).

Ik denk dat Apple dit makkelijker zou moeten maken in storyboard, in een TableViewController kun je gewoon offscreen scrollen in Storyboard (voeg gewoon 20 cellen toe en je zult zien dat je gewoon kunt scrollen), dit zou ook mogelijk moeten zijn met een ScrollViewController.

Antwoord 5, autoriteit 5%

Scrollen aan het werk in iOS7 en automatische lay-out in iOS 7 en XCode 5.

Daarnaast: https://stackoverflow.com/a/22489795/1553014

Blijkbaar hoeven we alleen maar:

1. Stel alle beperkingen in op Scroll View (d.w.z. fix eerst scroll view)

2. Stel vervolgens de afstand-van-scrollView-beperking in op het onderste item om de weergave te scrollen (dit is de superweergave).

Opmerking: stap 2 vertelt het storyboard waar het laatste stukje inhoud zich in de schuifweergave bevindt.

Antwoord 6, autoriteit 5%

Voor dit voorbeeld heb ik de Autolayout-functie van de Interface-builder uitgeschakeld. En ik gebruik nog steeds (zonder enige reden) de relatief oude 4.6.1-versie van Xcode.

Begin met een weergavecontroller met een scrollweergave erover (de hoofdweergave).

1: voeg een containerweergave toe vanuit de objectbibliotheek aan de schuifweergave. Merk op dat er een nieuwe weergavecontroller is toegevoegd aan het storyboard en dat deze is gekoppeld aan de weergavecontroller met de scrollweergave.

2: Selecteer de containerweergave en veranker deze in de Grootte-inspector bovenaan en links zonder automatisch formaat te wijzigen.

3: verander de hoogte in 1000. (1000 wordt gebruikt voor dit voorbeeld. U moet de gewenste waarde toepassen.)

4: Selecteer de nieuwe weergavecontroller en wijzig Grootte in Vrije vorm in de Attributeninspecteur.

5: Selecteer de weergave van de nieuwe weergavecontroller en wijzig de hoogte in het infovenster voor grootte in 1000 (wat gelijk is aan de hoogte van de containerweergave).

6: Voeg voor uw test later, terwijl u nog in de weergave van de nieuwe weergavecontroller bent, een label toe aan de boven- en onderkant van de weergave.

7: Selecteer de scroll-weergave van de originele view-controller. Voeg in de identiteitscontrole een kenmerk toe met keyPath ingesteld op contentSize, typ ingesteld op Grootte en waarde ingesteld op {320, 1000} (of de grootte van uw containerweergave).

8: Uitvoeren op de 4-inch iPhone Simulator. Je zou van het bovenste label naar het onderste label moeten kunnen scrollen.

9: Uitvoeren op de 3,5-inch iPhone-simulator. Je zou van het bovenste label naar het onderste label moeten kunnen scrollen.

Onthoud dat Xcode 4.6.1 alleen kan worden gebouwd voor iOS6 en lager. Met deze aanpak en het bouwen voor iOS6 kan ik nog steeds dezelfde resultaten bereiken als de app op iOS7 draait.

Antwoord 7, autoriteit 3%

Merk op dat je binnen een UITableViewdaadwerkelijk door de tabelweergave kunt scrollen door een cel of een element erin te selecteren en omhoog of omlaag te scrollen met je trackpad.

Voor een UIScrollViewben ik blij met de suggestie van Alex, maar ik zou aanraden om tijdelijkde weergavecontroller te wijzigen in vrije vorm, de hoogte van de rootweergave te vergroten, uw gebruikersinterface te bouwen (stap 1 -5) en verander het vervolgens terug naar de standaard afgeleide grootte wanneer u klaar bent, zodat u de inhoudsgrootten niet hard hoeft te coderen als runtime-attributen. Als u dat doet, stelt u zich bloot aan veel onderhoudsproblemen bij het ondersteunen van zowel 3,5″- als 4″-apparaten, evenals de mogelijkheid van hogere schermresoluties in de toekomst.

Antwoord 8, autoriteit 3%

Je moet alleen de eigenschap contentSize op de viewDidAppear instellen, zoals dit voorbeeld:

- (void)viewDidAppear:(BOOL)animated{
     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);
}

Het lost de problemen met de automatische lay-out op en werkt prima op iOS7.

Antwoord 9, autoriteit 3%

Disclaimer:- Alleen voor ios 9 en hoger (Stack View).

Als je je app implementeert op iOS 9-apparaten, gebruik dan een stapelweergave.
Dit zijn de stappen:-

1. Voeg een schuifweergave met beperkingen toe – vastzetten naar links, rechts, onder, boven (zonder marges) naar superweergave (weergave)
2. Voeg een stapelweergave met dezelfde beperkingen toe aan de schuifweergave.
3. Stapelweergave Andere beperkingen: – stackView.bottom = view.bottom en stackView.width = scrollView.width
4. Begin met het toevoegen van uw weergaven. De schuifweergave beslist om te scrollen op basis van de grootte van de stapelweergave (wat in wezen uw inhoudsweergave is)

Antwoord 10, autoriteit 3%

In iOS7 ontdekte ik dat als ik een View in een UIScrollView op een FreeForm-sized ViewController had, het niet zou scrollen in de app, wat ik ook deed. Ik speelde wat rond en ontdekte dat het volgende leek te werken, dat geen FreeForms gebruikt:

1. Voeg een UIScrollView in in de hoofdweergave van een ViewController

2. Stel de Autolayout-beperkingen op de ScrollView naar wens in. Voor mij gebruikte ik 0 tot Top
   Lay-outgids en 0 tot onderste lay-outgids

3. Plaats een containerweergave in de ScrollView. Stel de hoogte in op wat je maar wilt (bijv. 1000)

4. Voeg een hoogtebeperking (1000) toe aan de container zodat het formaat niet verandert. De onderkant is voorbij het einde van het formulier.

5. Voeg de regel toe [self.scrollView setContentSize:CGSizeMake(320, 1000)]; naar de ViewController die de scrollView bevat (die je hebt aangesloten als een IBOutlet)

De ViewController (automatisch toegevoegd) die aan de container is gekoppeld, heeft de gewenste hoogte (1000) in Interface Builder en zal ook goed scrollen in de originele viewcontroller. U kunt nu de ViewController van de container gebruiken om uw bedieningselementen in te delen.

Antwoord 11, autoriteit 2%

ik wil mijn 5 cent inzetten voor het geaccepteerde antwoord:
ik heb 2 dagen onderzoek gedaan naar het onderwerp en heb eindelijk een oplossing gevonden die ik vanaf nu altijd zal gebruiken

ga naar item 4 in het geaccepteerde antwoord en vergeet het toevoegen van attributen van frames en inhoudsmaten enzovoort

gebruik de oplossing van deze link

alles is duidelijk, gemakkelijk, elegant en werkt als een tierelier op ios 7. ik ben best blij met al dat lol

Antwoord 12, autoriteit 2%

Hier is een eenvoudige oplossing.

1. Stel het size-attribuut van uw viewcontroller in het storyboard in op “Freeform” en stel de gewenste grootte in. Zorg ervoor dat het groot genoeg is om in de volledige inhoud van uw scrollweergave te passen.

2. Voeg je scroll-weergave toe en stel de beperkingen in zoals je normaal zou doen. d.w.z. als u wilt dat de schuifweergave de grootte heeft van uw weergave, voeg dan uw boven-, onder-, voorloop- en volgmarges toe aan de superweergave zoals u dat normaal zou doen.

3. Zorg er nu voor dat er beperkingen zijn in de subviews van de scrollview die de boven- en onderkant van de scrollview verbinden. Hetzelfde geldt voor links en rechts als je horizontaal scrollt.

Antwoord 13

Hier is een beetje een smoezelig antwoord dat dezelfde oplossing biedt voor verticale scrollweergaven, maar (tegen het ethos van stackoverflow) de vraag niet beantwoordt. In plaats van een scrollView te gebruiken, gebruik je gewoon een UITableView, sleep je een normale UIView naar de koptekst en maak je deze zo groot als je wilt, je kunt nu door de inhoud scrollen in het storyboard.

Antwoord 14

Hier leest u hoe u een scrollview instelt met Xcode 11

1 – Voeg scrollview toe en stel top,bottom,leading en trailing beperkingen in

2 – Voeg een inhoudsweergave toe aan de schuifweergave, sleep een verbinding naar de inhoudslay-outgids en selecteer Voorlopend, Boven, Onder en Achteraan. Zorg ervoor dat u de waarden instelt op 0 of de gewenste constanten.

3 – Sleep vanuit de inhoudsweergave naar de handleiding voor framelay-out en selecteer Gelijke breedten

4 – Stel een hoogtebeperkingsconstante in voor de inhoudsweergave

Antwoord 15

Blijkbaar hoeft u de hoogte helemaal niet op te geven!Wat geweldig is als deze om de een of andere reden verandert (u wijzigt het formaat van componenten of wijzigt de lettergrootte).

Ik heb zojuist deze tutorial gevolgd en alles werkte: http://natashatherobot.com/ios-autolayout- scrollview/

(Kanttekening: het is niet nodig om viewDidLayoutSubviews te implementeren, tenzij u de weergave wilt centreren, dus de lijst met stappen is nog korter).

Hopelijk helpt dat!

Antwoord 16

De sleutel is de contentSize.

Dit ontbreekt vaak en wordt niet aangegeven bij het toevoegen van een UIScrollView.

Selecteer de UIScrollView en selecteer de Identity Inspector.

Voeg een contentSizekeyPath toe als een sizeaan de scrollView in de Identity Inspector en stel deze in op (320, 1000).

Scroll weg.

Antwoord 17

Als u automatische lay-out gebruikt, kunt u het beste UITableViewController gebruiken met statische cellen in storyboard.

Ik heb ook ooit het probleem gehad met een weergave die veel meer scrollen vereist, dus verander de UIScrollView met de bovengenoemde techniek.