iOS => UIScrollView

Skapa en UIScrollView

Skapa en instans av UIScrollView med en CGRect som ram.

Snabb

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

Objective-C

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

Rulla Visa innehållsstorlek

contentSize måste ställas in på storleken på det rullningsbara innehållet. Detta anger storleken på det rullande området. Rulning är synlig när rullningsbart område, dvs contentSize är större än UIScrollView .

Med Autolayout:

När rullvyns innehåll är inställt med autolayout, måste det uttryckligen dimensioneras både vertikalt och horisontellt och ha alla fyra kanter fästade till den medföljande rullningsvyn. På så sätt contentSize automatiskt baserat på rullningsvyens innehåll och uppdateras också när innehållets layout ändras.

Manuellt:

Snabb

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

Objective-C

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView med AutoLayout

Enkla steg för att använda rullvisning med autolayout.

Skapa ett nytt projekt med singelvy-applikation
Välj standardvynkontroller och ändra skärmstorlek till iPhone-4inch från attributinspektör.
Lägg till en bläddringsvy till din bildkontrollers vy på följande sätt och ställ in bakgrundsfärgen på blått

Lägg till begränsningar för det som visas i bilden nedan

Vad det här kommer att göra är att helt enkelt klistra in varje kant av bläddringsvisningen till viewcontrollers vy

Scenario 1:

Låt oss nu säga att vårt innehåll är enormt, och vi vill att det ska bläddra såväl horisontellt som vertikalt.

För detta,

Lägg till en UIV-vy i rullevyen av ramen (0,0 700 700). Låter den orange bakgrundsfärg för att identifiera den annorlunda.

Nästa kommer den viktiga delen, vi behöver den för att bläddra horisontellt och vertikalt.

Välj den orange vyn och lägg till följande begränsningar

Låt mig förklara vad vi gjorde i steget ovan.

Vi fixade höjden och bredden till 700.
Vi ställer in spårutrymme till scrollview = 0 som berättar för scrollview att innehåll är horisontellt rullbart.
Vi ställer ned bottenutrymmet för scrollview = 0 som berättar för scrollview att innehåll är vertikalt rullningsbart.

Kör nu projektet och kontrollera.

Scenario 2: Låt oss överväga ett scenario där vi vet att innehållsbredden kommer att vara samma som rullningsbredd, men höjden är större än rullvisningen.

Följ stegen för att bläddra innehåll vertikalt.

Ta bort breddbegränsningen i ovanstående fall.
Ändra bredden på den orange vyn så att den passar till rullningsbredden.
Ctrl-dra från orange vy för att bläddra och lägga till lika breddbegränsningar .

Och gjort !!! Kör bara och kolla om den rullar vertikalt

Scenario 3:

Nu vill vi bläddra bara horisontellt och inte vertikalt.

Följ stegen för att rulla innehållet horisontellt.

Ångra alla ändringar för att uppnå begränsningar enligt nedan (dvs. återställa originalbegränsningar som uppnådde vertikal och horisontell rullning )

Kontrollera ramen med orange vy, som ska vara (0,0 700 700)
Radera höjdbegränsning för orange vy.
Ändra höjden på den orange vyn så att den matchar rullningshöjden.
Ctrl-dra från orange vy för att bläddra och lägga till lika höga begränsningar.

Och gjort !!! Kör bara och kolla om den rullar vertikalt

Rulla innehåll med Auto Layout aktiverat

Detta projekt är ett självständigt exempel som gjorts helt i Interface Builder. Du bör kunna arbeta igenom det på 10 minuter eller mindre. Då kan du tillämpa de koncept du lärde dig på ditt eget projekt.

Här använder jag bara UIView men de kan representera vilken vy du vill (dvs. knapp, etikett osv). Jag valde också horisontell rullning eftersom storyboard-skärmdumparna är mer kompakta för detta format. Principerna är dock desamma för vertikal rullning.

Nyckelbegrepp

UIScrollView ska bara använda en undervy. Detta är en 'UIView' som fungerar som innehållsvy för att hålla allt du vill rulla.
Gör att innehållsvyn och bläddringsvyens överordnade har samma höjder för horisontell rullning. (Lika bredder för vertikal rullning)
Se till att allt rullningsbart innehåll har en inställd bredd och är fäst på alla sidor.

Starta ett nytt projekt

Det kan bara vara en enda visningsprogram.

Storyboard

I det här exemplet kommer vi att skapa en horisontell rullningsvy. Välj View Controller och välj sedan Freeform i Size Inspector. Gör bredden 1 1,000 och höjden 300 . Detta ger oss bara rummet på storyboardet att lägga till innehåll som bläddrar.

Lägg till en rullningsvy

Lägg till en UIScrollView och UIScrollView alla fyra sidor i rotvyn på visningskontrollern.

Lägg till en innehållsvy

Lägg till en UIView som en undervy till rullningsvyn. Det här är nyckeln. Försök inte lägga till massor av undervyer i rullningsvyn. Lägg bara till en enda UIView . Det här är din innehållsvy för de andra vyerna du vill bläddra. Fäst innehållsvyn till rullningsvyn på alla fyra sidor.

Lika höjder

Nu i dokumentöversikten klickar du på kommandot på både innehållsvyen och bläddringsvyens överordnade vy för att välja båda. Ställ sedan in höjderna till lika (Kontroll </ kbd dra från innehållsvy till rullningsvy>). Detta är också nyckeln. Eftersom vi bläddrar horisontellt vet inte rullvyens innehållsvy hur hög den ska vara om vi inte ställer in den på detta sätt.

Notera:

Om vi låter innehållsrulla vertikalt, skulle vi ställa in innehållsvyens bredd till att vara lika med rullvyns överordnade bredd.

Lägg till innehåll

Lägg till tre UIView och ge dem alla begränsningar. Jag använde 8-punktsmarginaler för allt.

begränsningar:

Grön vy: fäst övre, vänstra och nedre kanter. Gör bredden 400.
Röd vy: fäst övre, vänstra och nedre kanterna. Gör bredden 300.
Lila vy: fäst alla fyra kanter. Gör bredden oavsett vilket återstående utrymme är (268 i detta fall).

Ställa in breddbegränsningar är också nyckeln så att rullningsvyn vet hur bred innehållsvyen blir.

Färdiga

Det är allt. Du kan köra ditt projekt nu. Den ska fungera som rullningsbilden längst upp i detta svar.

Ytterligare studier

Aktivera / inaktivera rullning

Property scrollEnabled lagrar ett Boolean värde som avgör om rullning är aktiverat eller inte.
Om värdet på den här egenskapen är sant / JA, är rullning aktiverad, annars inte. Standardvärdet är true

Snabb

scrollview.isScrollEnabled = true

Objective-C

scrollview.scrollEnabled = YES;

Zooma in / ut UIImageView

Skapa UIScrollView-instans

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

Och ställ sedan in dessa egenskaper:

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

För att zooma in och ut bilden måste vi ange hur mycket användaren kan zooma in och ut. Vi gör detta genom att ställa in värden för rullningsvyens minimumZoomScale och maximumZoomScale egenskaper. Båda dessa är som standard inställda till 1.0.

Och zoomScale till 1.0 som anger zoomfaktorn för minsta och maximala zoomning.

För att stödja zoomning måste vi ställa in en delegat för din rullningsvy. Delegatobjektet måste överensstämma med UIScrollViewDelegate protokollet. Den delegerade klassen måste implementera viewForZoomingInScrollView() och returnera vyn för att zooma.

Ändra din ViewController som visas

class ViewController: UIViewController, UIScrollViewDelegate

Lägg sedan till följande delegatfunktion i klassen.

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

Skapa nu UIImageView-instans

Gör denna variabel som klassvariabel

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

Och lägg sedan till den i scrollview

scrollView?.addSubview(imageView)

Referens

Upptäcker när UIScrollView slutförde rullningen med delegatmetoder

scrollViewDidEndDecelerating: detta berättar för delegaten att bläddringsvyn har slutat bromsa rullningsrörelsen.

Mål C:

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

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

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

Snabb:

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

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

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

Begränsa rullningsriktningen

Du kan begränsa anvisningarna som användaren kan bläddra till med följande kod:

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

Varje gång användaren rullar på x-axeln ställs ScrollViews innehållsförskjutning tillbaka till 0.
Du kan givetvis ändra x s till y s och därför låsa riktningen vara endast horisontell.

Du måste också se till att du lägger in den här koden i scrollViewDidScroll(_ scrollView: UIScrollView) . Annars får du det inte att fungera.

Se också till att du har importerat UIScrollViewDelegate i din UIScrollViewDelegate , så här:

class ViewController: UIViewController, UIScrollViewDelegate

... och ställ in ScrollViews delegat till själv på någon metod som viewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

Licensierat under CC BY-SA 3.0

Inte anslutet till Stack Overflow

iOS
UIScrollView

Sök…

Skapa en UIScrollView

Rulla Visa innehållsstorlek

ScrollView med AutoLayout

Rulla innehåll med Auto Layout aktiverat

Nyckelbegrepp

Starta ett nytt projekt

Storyboard

Färdiga

Ytterligare studier

Aktivera / inaktivera rullning

Zooma in / ut UIImageView

Skapa nu UIImageView-instans

Upptäcker när UIScrollView slutförde rullningen med delegatmetoder

Mål C:

Snabb:

Begränsa rullningsriktningen