iOS
UIScrollView

Crea un UIScrollView

Creare un'istanza di UIScrollView con un CGRect come frame.

veloce

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)];

Scorri Visualizza dimensioni del contenuto

La proprietà contentSize deve essere impostata sulla dimensione del contenuto scorrevole. Questo specifica la dimensione dell'area scorrevole. Lo scorrimento è visibile quando l'area scorrevole, ad esempio contentSize è più grande della dimensione del frame di UIScrollView .

Con Autolayout:

Quando il contenuto della vista di scorrimento viene impostato utilizzando l'autolayout, deve essere dimensionato in modo esplicito sia verticalmente che orizzontalmente e avere tutti e 4 i bordi aggiunti alla vista di scorrimento contenente. In questo modo, contentSize viene calcolato automaticamente in base ai contenuti della vista di scorrimento e viene inoltre aggiornato quando viene modificato il layout del contenuto.

manualmente:

veloce

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

Objective-C

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView con AutoLayout

Semplici passi per usare scrollview con autolayout.

• Crea un nuovo progetto con un'applicazione a vista singola
• Seleziona il viewcontroller predefinito e cambia le sue dimensioni dello schermo in iPhone-4inch dall'ispettore Attributi.
• Aggiungi una vista a scorrimento alla vista del tuo viewcontroller come segue e imposta il colore di sfondo su blu

• Aggiungi vincoli su di esso come mostrato nell'immagine qui sotto

Ciò che questo farà è semplicemente attaccare ogni angolo di scrollview alla vista di viewcontroller

Scenario 1:

Ora diciamo che il nostro contenuto è enorme e vogliamo che scorra sia orizzontalmente che verticalmente.

Per questo,

• Aggiungi un UIView alla scrollview del frame (0,0,700,700). Ti dà il colore di sfondo arancione per identificarlo in modo diverso.

Poi arriva la parte importante, ne abbiamo bisogno per scorrere orizzontalmente e verticalmente.

• Seleziona la vista arancione e aggiungi i seguenti vincoli

  

Lascia che ti spieghi cosa abbiamo fatto nel passaggio precedente.

• Abbiamo fissato l'altezza e la larghezza a 700.
• Impostiamo lo spazio finale a scrollview = 0 che indica allo scrollview che il contenuto è scorrevole orizzontalmente.
• Impostiamo lo spazio in basso per scrollview = 0, che indica allo scrollview che il contenuto è scorrevole verticalmente.

Ora esegui il progetto e controlla.

Scenario 2: consideriamo uno scenario in cui sappiamo che la larghezza del contenuto sarà uguale alla larghezza della larghezza del rotolo, ma l'altezza è maggiore di scrollview.

Seguire i passaggi per scorrere il contenuto verticalmente.

• Elimina il vincolo di larghezza nel caso precedente.
• Cambia la larghezza della vista arancione in modo che corrisponda alla larghezza della vista.
• Tenere premuto Ctrl dalla vista arancione per scorrere la vista e aggiungere un vincolo di larghezza uguale .

• E fatto !!! Basta eseguire e controllare se scorre verticalmente

Scenario 3:

Ora vogliamo scorrere solo orizzontalmente e non verticalmente.

Seguire i passaggi per scorrere orizzontalmente il contenuto.

• Annullare tutte le modifiche per ottenere i vincoli come di seguito (cioè ripristinare i vincoli originali che hanno raggiunto lo scorrimento verticale e orizzontale )

• Verifica la cornice della vista arancione, che dovrebbe essere (0,0,700,700)
• Elimina il vincolo di altezza della vista arancione.
• Cambia l'altezza della vista arancione in modo che corrisponda all'altezza della vista.
• Ctrl-trascina dalla vista arancione per scorrere la vista e aggiungere un vincolo di uguale altezza .

• E fatto !!! Basta eseguire e controllare se scorre verticalmente

Scorrimento del contenuto con Auto Layout abilitato

Questo progetto è un esempio autonomo svolto completamente in Interface Builder. Dovresti essere in grado di analizzarlo in 10 minuti o meno. Quindi puoi applicare i concetti che hai imparato al tuo progetto.

Qui uso solo UIView s ma possono rappresentare qualsiasi visualizzazione (ad es. Pulsante, etichetta, ecc.). Ho anche scelto lo scorrimento orizzontale perché gli screenshot dello storyboard sono più compatti per questo formato. I principi sono gli stessi per lo scrolling verticale, però.

Concetti chiave

• UIScrollView dovrebbe usare solo una sottoview. Questo è un 'UIView' che funge da visualizzazione del contenuto per contenere tutto ciò che desideri scorrere.
• Crea la vista del contenuto e il genitore della vista di scorrimento ha un'altezza uguale per lo scorrimento orizzontale. (Larghezze uguali per lo scorrimento verticale)
• Assicurati che tutto il contenuto scorrevole abbia una larghezza impostata ed è bloccato su tutti i lati.

Inizia un nuovo progetto

Può essere solo un'applicazione a vista singola.

storyboard

In questo esempio, creeremo una vista di scorrimento orizzontale. Seleziona il View Controller e quindi scegli Freeform in Impostazioni dimensioni. Fai la larghezza 1,000 e l'altezza 300 . Questo ci dà la stanza sullo storyboard per aggiungere contenuti che scorreranno.

Aggiungi una vista di scorrimento

Aggiungi un UIScrollView e UIScrollView tutti e quattro i lati alla vista radice del controller della vista.

Aggiungi una vista del contenuto

Aggiungi un UIView come sottoview alla vista di scorrimento. Questa è la chiave. Non provare ad aggiungere molte visualizzazioni secondarie alla vista di scorrimento. Basta aggiungere un singolo UIView . Questa sarà la vista del contenuto per le altre viste che desideri scorrere. Pin la vista del contenuto per la visualizzazione di scorrimento su tutti e quattro i lati.

Altezze uguali

Ora nella struttura del documento, Comando , fare clic sulla vista del contenuto e sulla vista principale della vista di scorrimento per selezionarli entrambi. Quindi imposta le altezze per essere uguale (controllo </ kbd trascinare dalla vista del contenuto alla vista di scorrimento>). Questa è anche la chiave. Poiché stiamo scorrendo orizzontalmente, la vista del contenuto della vista di scorrimento non saprà quanto dovrebbe essere alta a meno che non la impostiamo in questo modo.

Nota:

• Se stessimo facendo scorrere il contenuto verticalmente, imposteremo la larghezza della vista del contenuto uguale alla larghezza del genitore della vista di scorrimento.

Aggiungi contenuto

Aggiungi tre UIView e dai loro tutti i vincoli. Ho usato margini di 8 punti per tutto.

vincoli:

• Vista verde: pin i bordi superiore, sinistro e inferiore. Fai la larghezza 400.
• Vista rossa: pin i bordi superiore, sinistro e inferiore. Fai la larghezza 300.
• Vista viola: spilla tutti e quattro i bordi. Rendi la larghezza qualunque sia lo spazio rimanente (268 in questo caso).

L'impostazione dei vincoli di larghezza è anche la chiave in modo che la vista di scorrimento sappia quanto sarà ampia la sua vista del contenuto.

Finito

È tutto. Puoi eseguire il tuo progetto ora. Dovrebbe comportarsi come l'immagine a scorrimento nella parte superiore di questa risposta.

Ulteriore studio

• iOS: Come eseguire il layout automatico su un ScrollView
• Come configurare un UIScrollView con Auto Layout in Interface Builder
• Esercitazione video di YouTube: UIScrollView - Come mantenere le tue visualizzazioni sullo schermo

Abilita / disabilita lo scorrimento

Proprietà scrollEnabled memorizza un valore Boolean che determina se lo scorrimento è abilitato o meno.
Se il valore di questa proprietà è true / YES, lo scorrimento è abilitato, altrimenti no. Il valore predefinito è true

veloce

scrollview.isScrollEnabled = true

Objective-C

scrollview.scrollEnabled = YES;

Zoom avanti / indietro UIImageView

Crea un'istanza UIScrollView

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

E quindi imposta queste proprietà:

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

Per ingrandire e ridurre l'immagine dobbiamo specificare la quantità che l'utente può ingrandire e rimpicciolire. Lo facciamo impostando i valori delle proprietà minimumZoomScale e maximumZoomScale della vista di minimumZoomScale . Entrambi sono impostati su 1.0 per impostazione predefinita.

E zoomScale a 1.0 che specifica il fattore di zoom per lo zoom minimo e massimo.

Per supportare lo zoom, dobbiamo impostare un delegato per la tua vista di scorrimento. L'oggetto delegato deve essere conforme al protocollo UIScrollViewDelegate . Quella classe delegata deve implementare il metodo viewForZoomingInScrollView() e restituire la vista per lo zoom.

Modifica il tuo ViewController come mostrato

class ViewController: UIViewController, UIScrollViewDelegate

Quindi aggiungere la seguente funzione di delega alla classe.

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

Ora crea l'istanza UIImageView

Rendi questa variabile come variabile di classe

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

E poi aggiungilo a scrollview

scrollView?.addSubview(imageView)

Riferimento

• Scorri la vista Guida alla programmazione per iOS
• UIScrollView Tutorial

Rilevare quando UIScrollView ha terminato lo scorrimento con i metodi dei delegati

scrollViewDidEndDecelerating: indica al delegato che la visualizzazione a scorrimento ha terminato di rallentare il movimento di scorrimento.

Obiettivo C:

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

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

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

Swift:

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

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

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

Limita la direzione di scorrimento

Puoi limitare le indicazioni che l'utente può scorrere utilizzando il seguente codice:

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

Ogni volta che l'utente scorre sull'asse x, l'offset del contenuto della scrollView è impostato su 0.
Ovviamente è possibile cambiare le x s y e quindi bloccare la direzione in modo che sia solo orizzontale.

È inoltre necessario assicurarsi di inserire questo codice nel metodo delegato scrollViewDidScroll(_ scrollView: UIScrollView) . Altrimenti, non lo farai funzionare.

Inoltre, assicurarsi di aver importato UIScrollViewDelegate nella dichiarazione della classe, in questo modo:

class ViewController: UIViewController, UIScrollViewDelegate

... e imposta il delegate scrollView su self in un metodo come viewDidLoad(_:)

scrollView.delegate = self