iOS
UIScrollView

Maak een UIScrollView

Maak een exemplaar van UIScrollView met een CGRect als frame.

Snel

let scrollview = UIScrollView.init(frame: CGRect(x: 0, y: 0, width: 320, height: 400))

Doelstelling C

UIScrollView *scrollview = [[UIScrollView alloc] initWithFrame:CGRectMake(0, 0, 320, 400)];

Scroll View Content Grootte

De eigenschap contentSize moet worden ingesteld op de grootte van de schuifbare inhoud. Dit geeft de grootte van het schuifbare gebied aan. Scrollen is zichtbaar wanneer het schuifbare gebied is, dwz contentSize is groter dan de framegrootte van UIScrollView .

Met Autolayout:

Wanneer de inhoud van de schuifweergave is ingesteld met behulp van autolayout, moet deze zowel verticaal als horizontaal expliciet zijn en moeten alle vier randen zijn vastgemaakt aan de bijbehorende schuifweergave. Op die manier wordt de contentSize automatisch berekend op basis van de inhoud van de contentSize en wordt deze ook bijgewerkt wanneer de lay-out van de content wordt gewijzigd.

handmatig:

Snel

scrollview.contentSize = CGSize(width: 640, height: 800)

Doelstelling C

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView met AutoLayout

Eenvoudige stappen om scrollview met autolayout te gebruiken.

• Maak een nieuw project met een enkele view-applicatie
• Selecteer de standaard viewcontroller en wijzig de schermgrootte naar iPhone-4inch vanuit attributen inspector.
• Voeg als volgt een scrollweergave toe aan de weergave van uw viewcontroller en zet de achtergrondkleur op blauw

• Voeg beperkingen toe zoals getoond in onderstaande afbeelding

Wat dit zal doen, is gewoon elke rand van scrollview aan viewviewcontroller's plakken

Scenario 1:

Laten we nu zeggen dat onze inhoud enorm is en dat we zowel horizontaal als verticaal willen scrollen.

Voor deze,

• Voeg een UIView toe aan de scrollweergave van het frame (0,0.700.700). Geef het een oranje achtergrondkleur om het anders te identificeren.

Vervolgens komt het belangrijke deel, we hebben het nodig om horizontaal en verticaal te scrollen.

• Selecteer de oranje weergave en voeg de volgende beperkingen toe

  

Laat me uitleggen wat we in bovenstaande stap hebben gedaan.

• We hebben de hoogte en breedte vastgesteld op 700.
• We stellen de volgruimte in op scrollview = 0, wat de scrollview vertelt dat de inhoud horizontaal schuifbaar is.
• We hebben de onderste ruimte ingesteld op scrollview = 0, wat de scrollview vertelt dat de inhoud verticaal schuifbaar is.

Voer nu het project uit en controleer.

Scenario 2: Laten we een scenario overwegen waarbij we weten dat de breedte van de inhoud hetzelfde zal zijn als de breedte van de schuifbreedte, maar de hoogte is groter dan de schuifweergave.

Volg de stappen om inhoud verticaal te scrollen.

• Verwijder de breedtebeperking in het bovenstaande geval.
• Wijzig de breedte van de oranje weergave zodat deze overeenkomt met de breedte van de scrollweergave.
• Ctrl-slepen vanuit oranje weergave om te scrollen en beperking van gelijke breedte toe te voegen.

• En klaar!!! Ren gewoon en controleer of het verticaal schuift

Scenario 3:

Nu willen we alleen horizontaal scrollen en niet verticaal.

Volg de stappen om horizontaal door de inhoud te bladeren.

• Maak alle wijzigingen ongedaan om beperkingen te bereiken zoals hieronder (dwz herstel originele beperkingen die verticale en horizontale scroll bereikten )

• Vink het kader van de oranje weergave aan, dat moet zijn (0,0.700.700)
• Hoogtebeperking van oranje weergave verwijderen.
• Wijzig de hoogte van de oranje weergave zodat deze overeenkomt met de hoogte van de scrollweergave.
• Ctrl-sleep vanuit de oranje weergave om de weergave te scrollen en gelijke hoogtebeperkingen toe te voegen.

• En klaar!!! Ren gewoon en controleer of het verticaal schuift

Inhoud scrollen met Auto Layout ingeschakeld

Dit project is een op zichzelf staand voorbeeld dat volledig in de Interface Builder is uitgevoerd. Je zou het binnen 10 minuten of minder moeten kunnen verwerken. Vervolgens kunt u de geleerde concepten toepassen op uw eigen project.

Hier gebruik ik alleen UIView s maar deze kunnen elke weergave weergeven die u wilt (bijv. Knop, label, enz.). Ik heb ook gekozen voor horizontaal scrollen omdat de screenshots van het storyboard compacter zijn voor dit formaat. De principes zijn echter hetzelfde voor verticaal scrollen.

Sleutelbegrippen

• De UIScrollView mag slechts één subview gebruiken. Dit is een 'UIView' die dient als de inhoudsweergave voor alles wat u wilt scrollen.
• Zorg ervoor dat de inhoudsweergave en de bovenliggende weergave van de schuifweergave gelijke hoogten hebben voor horizontaal scrollen. (Gelijke breedte voor verticaal scrollen)
• Zorg ervoor dat alle schuifbare inhoud een ingestelde breedte heeft en aan alle kanten is vastgezet.

Start een nieuw project

Het kan slechts een enkele view-applicatie zijn.

storyboard

In dit voorbeeld maken we een horizontale schuifweergave. Selecteer de View Controller en kies vervolgens Freeform in Size Inspector. Maak de breedte 1,000 en de hoogte 300 . Dit geeft ons gewoon de ruimte op het storyboard om inhoud toe te voegen die zal scrollen.

Voeg een scrolweergave toe

Voeg een UIScrollView en pin alle vier de zijden aan de hoofdweergave van de viewcontroller.

Voeg een inhoudsweergave toe

Voeg een UIView als een subweergave aan de schuifweergave. Dit is de sleutel. Probeer niet veel subweergaven aan de schuifweergave toe te voegen. Voeg gewoon een enkele UIView . Dit wordt uw inhoudsweergave voor de andere weergaven die u wilt scrollen. Speld de inhoudsweergave aan de vier zijden vast aan de schuifweergave.

Gelijke hoogten

Klik nu in de documentomtrek op Command en klik op zowel de inhoudsweergave als de bovenaanzicht van de schuifweergave om ze allebei te selecteren. Stel vervolgens de hoogten gelijk in (Control </ kbd drag van de Content View naar de Scroll View>). Dit is ook de sleutel. Omdat we horizontaal scrollen, weet de inhoudsweergave van de schuifweergave niet hoe hoog deze moet zijn, tenzij we deze op deze manier instellen.

Notitie:

• Als we de inhoud verticaal laten scrollen, zouden we de breedte van de inhoudsweergave gelijk maken aan de breedte van de bovenliggende weergave.

Content toevoegen

Voeg drie UIView 's toe en geef ze alle beperkingen. Ik heb voor alles 8 puntmarges gebruikt.

beperkingen:

• Groene weergave: speld de boven-, linker- en onderrand. Maak de breedte 400.
• Rode weergave: speld de boven-, linker- en onderrand. Maak de breedte 300.
• Paars beeld: speld alle vier de randen. Maak de breedte, ongeacht de resterende ruimte (268 in dit geval).

Het instellen van de breedtebeperkingen is ook belangrijk, zodat de schuifweergave weet hoe breed de inhoudsweergave zal zijn.

Afgewerkt

Dat is alles. U kunt nu uw project uitvoeren. Het zou zich moeten gedragen als de schuivende afbeelding bovenaan dit antwoord.

Verdere studie

• iOS: AutoLayout laten werken op een ScrollView
• Hoe een UIScrollView met Auto Layout in Interface Builder te configureren
• YouTube-videozelfstudie: UIScrollView - Hoe u uw weergaven op het scherm kunt houden

Scrollen in- / uitschakelen

Eigenschap scrollEnabled slaat een Boolean waarde op die bepaalt of scrollen is ingeschakeld of niet.
Als de waarde van deze eigenschap true / YES is, is scrollen ingeschakeld, anders niet. De standaardwaarde is true

Snel

scrollview.isScrollEnabled = true

Doelstelling C

scrollview.scrollEnabled = YES;

In- / uitzoomen UIImageView

Maak een UIScrollView-instantie

let scrollview = UIScrollView.init(frame: self.view.bounds)

En stel vervolgens deze eigenschappen in:

scrollView.minimumZoomScale = 0.1
scrollView.maximumZoomScale = 4.0
scrollView.zoomScale = 1.0
scrollview.delegate = self as? UIScrollViewDelegate 

Om in en uit te zoomen op de afbeelding moeten we de hoeveelheid opgeven die de gebruiker kan in- en uitzoomen. We doen dit door waarden in te stellen van de eigenschappen minimumZoomScale en maximumZoomScale . Beide zijn standaard ingesteld op 1.0.

En zoomScale tot 1.0 die de zoomfactor specificeren voor de minimale en maximale zoomfactor.

Om zoomen te ondersteunen, moeten we een gemachtigde instellen voor uw schuifweergave. Het gemachtigde object moet voldoen aan het UIScrollViewDelegate protocol. Die gedelegeerde klasse moet de methode viewForZoomingInScrollView() implementeren en de weergave terugbrengen om in te zoomen.

Wijzig uw ViewController zoals getoond

class ViewController: UIViewController, UIScrollViewDelegate

Voeg vervolgens de volgende gemachtigdefunctie toe aan de klasse.

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imageView
}

Maak nu een UIImageView-instantie

Maak deze variabele als klassenvariabele

var imageView:UIImageView = UIImageView.init(image: UIImage.init(named: "someImage.jpg"))

En voeg het dan toe aan scrolweergave

scrollView?.addSubview(imageView)

Referentie

• Scroll View-programmeerhandleiding voor iOS
• UIScrollView-zelfstudie

Detecteren wanneer UIScrollView klaar is met scrollen met gedelegeerde methoden

scrollViewDidEndDecelerating: dit vertelt de gedelegeerde dat de scrollweergave is gestopt met het vertragen van de scrollbeweging.

Doelstelling C:

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self stoppedScrolling];
}

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self stoppedScrolling];
    }
}

- (void)stoppedScrolling {
    // done, do whatever
}

Snel:

func scrollViewDidEndDragging(scrollView: UIScrollView, willDecelerate decelerate: Bool) {
    if !decelerate {
        stoppedScrolling()
    }
}

func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
    stoppedScrolling()
}

func stoppedScrolling() {
    // done, do whatever
}

Beperk de schuifrichting

U kunt de aanwijzingen waarnaar de gebruiker kan scrollen beperken met behulp van de volgende code:

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    if scrollView.contentOffset.x != 0 {
        scrollView.contentOffset.x = 0
    }
}

Telkens wanneer de gebruiker op de x-as schuift, wordt de inhoudsverschuiving van de scrollView teruggezet op 0.
U kunt uiteraard veranderen x s tot y s en daarvoor vergrendeling richting alleen horizontale zijn.

U moet er ook voor zorgen dat u deze code in de gedelegeerde methode scrollViewDidScroll(_ scrollView: UIScrollView) . Anders krijg je het niet aan het werk.

Zorg er ook voor dat u de UIScrollViewDelegate in uw klassenaangifte heeft geïmporteerd:

class ViewController: UIViewController, UIScrollViewDelegate

... en stel de gemachtigde van de scrollView in op een methode zoals viewDidLoad(_:)

scrollView.delegate = self