iOS => UIScrollView

Utwórz UIScrollView

Utwórz instancję UIScrollView z CGRect .

Szybki

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

Cel C

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

Przewiń Wyświetl rozmiar treści

Właściwość contentSize musi być ustawiona na rozmiar przewijalnej zawartości. Określa rozmiar przewijanego obszaru. Przewijanie jest widoczne, gdy obszar przewijalny, tzn. contentSize jest większy niż rozmiar ramki UIScrollView .

Z funkcją autolayout:

Gdy zawartość widoku przewijania jest skonfigurowana za pomocą funkcji autolayout, musi być jawnie zwymiarowana zarówno w pionie, jak iw poziomie i mieć wszystkie 4 krawędzie przypięte do zawierającego widok przewijania. W ten sposób contentSize jest obliczany automatycznie na podstawie zawartości widoku przewijania, a także aktualizowany po zmianie układu treści.

Ręcznie:

Szybki

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

Cel C

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView z AutoLayout

Proste kroki, aby korzystać z przewijania z funkcją autolayout.

Utwórz nowy projekt za pomocą aplikacji z pojedynczym widokiem
Wybierz domyślny kontroler widoku i zmień jego rozmiar ekranu na iPhone-4 cala z poziomu inspektora atrybutów.
Dodaj widok przewijania do widoku kontrolera widoku w następujący sposób i ustaw kolor tła na niebieski

Dodaj ograniczenia, jak pokazano na poniższym obrazku

Będzie to po prostu przyklejać każdą krawędź widoku przewijania do widoku kontrolera widoku

Scenariusz 1:

Powiedzmy teraz, że nasza zawartość jest ogromna i chcemy, aby przewijała się w poziomie, jak również w pionie.

Dla tego,

Dodaj widok UIView do przewijania ramki (0,0,700,700). Pozwala nadać jej pomarańczowy kolor tła, aby można go było inaczej zidentyfikować.

Następnie jest ważna część, potrzebujemy przewijania w poziomie i w pionie.

Wybierz pomarańczowy widok i dodaj następujące ograniczenia

Pozwól mi wyjaśnić, co zrobiliśmy w powyższym kroku.

Naprawiliśmy wysokość i szerokość do 700.
Ustawiamy spację końcową na scrollview = 0, która informuje scrollview, że zawartość można przewijać w poziomie.
Ustawiamy dolną spację na scrollview = 0, która informuje scrollview, że zawartość można przewijać w pionie.

Teraz uruchom projekt i sprawdź.

Scenariusz 2: Rozważmy scenariusz, w którym wiemy, że szerokość treści będzie taka sama jak szerokość przewijania, ale wysokość jest większa niż przewijanie.

Postępuj zgodnie z instrukcjami, aby przewijać zawartość w pionie.

Usuń ograniczenie szerokości w powyższym przypadku.
Zmień szerokość pomarańczowego widoku, aby dopasować do szerokości widoku przewijania.
Przeciągnij z wciśniętym klawiszem Ctrl z widoku pomarańczowego, aby przewinąć widok i dodać ograniczenie równej szerokości .

I zrobione!!! Po prostu uruchom i sprawdź, czy przewija się w pionie

Scenariusz 3:

Teraz chcemy przewijać tylko poziomo, a nie pionowo.

Postępuj zgodnie z instrukcjami, aby przewijać zawartość w poziomie.

Cofnij wszystkie zmiany, aby osiągnąć ograniczenia jak poniżej (tj. Przywróć oryginalne wiązania, które uzyskały przewijanie w pionie i poziomie )

Sprawdź ramkę pomarańczowego widoku, która powinna wynosić (0,0,700,700)
Usuń ograniczenie wysokości widoku pomarańczowego.
Zmień wysokość pomarańczowego widoku, aby dopasować do wysokości widoku przewijania.
Przeciągnij z wciśniętym klawiszem Ctrl z widoku pomarańczowego, aby przewinąć widok i dodać ograniczenie równej wysokości .

I zrobione!!! Po prostu uruchom i sprawdź, czy przewija się w pionie

Przewijanie zawartości z włączonym automatycznym układem

Ten projekt jest samodzielnym przykładem wykonanym całkowicie w Konstruktorze interfejsów. Powinieneś być w stanie przepracować to w 10 minut lub krócej. Następnie możesz zastosować poznane koncepcje do własnego projektu.

Tutaj po prostu używam UIView ale mogą reprezentować dowolny widok, który ci się podoba (np. Przycisk, etykieta itp.). Wybrałem także przewijanie w poziomie, ponieważ zrzuty ekranu scenorysu są bardziej kompaktowe dla tego formatu. Jednak zasady przewijania w pionie są takie same.

Kluczowe idee

UIScrollView powinien używać tylko jednego widoku podrzędnego. To jest „UIView”, który służy jako widok zawartości do przechowywania wszystkiego, co chcesz przewinąć.
Upewnij się, że widok zawartości i element macierzysty widoku przewijania mają równe wysokości dla przewijania w poziomie. (Równe szerokości dla przewijania w pionie)
Upewnij się, że cała przewijalna zawartość ma ustawioną szerokość i jest przypięta ze wszystkich stron.

Rozpocznij nowy projekt

Może to być tylko jedna aplikacja do przeglądania.

Storyboard

W tym przykładzie utworzymy widok przewijania w poziomie. Wybierz View Controller, a następnie wybierz Freeform w Inspektorze rozmiarów. Zrób szerokość 1,000 i wysokość 300 . To po prostu daje nam miejsce w serii ujęć, aby dodać zawartość, która będzie przewijana.

Dodaj widok przewijania

Dodaj UIScrollView i UIScrollView wszystkie cztery strony do widoku głównego kontrolera widoku.

Dodaj widok zawartości

Dodaj widok UIView jako widok podrzędny do widoku przewijania. To jest klucz. Nie próbuj dodawać wielu widoków podrzędnych do widoku przewijania. Wystarczy dodać pojedynczy UIView . Będzie to widok zawartości dla innych widoków, które chcesz przewinąć. Przypnij widok zawartości do widoku przewijania ze wszystkich czterech stron.

Równe wysokości

Teraz w Zarysie dokumentu polecenie kliknij zarówno widok zawartości, jak i widok macierzysty widoku przewijania, aby wybrać je oba. Następnie ustaw wysokości, aby były równe (przeciągnij Control </ kbd z Widoku zawartości do Widoku przewijania>). To też jest klucz. Ponieważ przewijamy w poziomie, widok zawartości widoku przewijania nie będzie wiedział, jak wysoko powinien być, chyba że ustawimy go w ten sposób.

Uwaga:

Gdybyśmy przewijali zawartość w pionie, wówczas ustawilibyśmy szerokość widoku zawartości na równą szerokości rodzica widoku przewijania.

Dodaj zawartość

Dodaj trzy UIView i daj im wszystkie ograniczenia. Do wszystkiego użyłem 8 punktów marginesów.

Ograniczenia:

Zielony widok: przypnij górną, lewą i dolną krawędź. Zrób szerokość 400.
Widok czerwony: przypnij górną, lewą i dolną krawędź. Zrób szerokość 300.
Widok fioletowy: przypnij wszystkie cztery krawędzie. Ustaw szerokość niezależnie od pozostałej przestrzeni (w tym przypadku 268).

Ustawienie ograniczeń szerokości jest również kluczowe, aby widok przewijania wiedział, jak szeroki będzie jego widok zawartości.

Skończone

To wszystko. Możesz teraz uruchomić swój projekt. Powinno zachowywać się jak przewijany obraz u góry tej odpowiedzi.

Dalsze badanie

Włącz / wyłącz przewijanie

Właściwość scrollEnabled przechowuje wartość Boolean która określa, czy przewijanie jest włączone, czy nie.
Jeśli wartością tej właściwości jest true / YES, przewijanie jest włączone, w przeciwnym razie nie. Wartość domyślna to true

Szybki

scrollview.isScrollEnabled = true

Cel C

scrollview.scrollEnabled = YES;

Zoom In / Out UIImageView

Utwórz instancję UIScrollView

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

A następnie ustaw te właściwości:

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

Aby powiększyć lub pomniejszyć obraz, musimy określić ilość, którą użytkownik może powiększyć lub pomniejszyć. Robimy to, ustawiając wartości właściwości minimumZoomScale i maximumZoomScale w widoku przewijania. Oba są domyślnie ustawione na 1.0.

I zoomScale do 1.0, które określają współczynnik powiększenia dla minimalnego i maksymalnego powiększenia.

Aby obsługiwać powiększanie, musimy ustawić delegata dla widoku przewijania. Obiekt delegowany musi być zgodny z protokołem UIScrollViewDelegate . Ta klasa delegowana musi implementować viewForZoomingInScrollView() i przywrócić widok do powiększenia.

Zmodyfikuj ViewController, jak pokazano

class ViewController: UIViewController, UIScrollViewDelegate

Następnie dodaj następującą funkcję delegowania do klasy.

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

Teraz utwórz instancję UIImageView

Ustaw tę zmienną jako zmienną klasy

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

A następnie dodaj go do widoku przewijania

scrollView?.addSubview(imageView)

Odniesienie

Wykrywanie, kiedy UIScrollView zakończy przewijanie za pomocą metod delegowania

scrollViewDidEndDecelerating: informuje delegata, że widok przewijania zakończył spowalnianie ruchu przewijania.

Cel C:

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

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

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

Szybki:

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

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

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

Ogranicz kierunek przewijania

Możesz ograniczyć kierunki, do których użytkownik może przewijać, używając następującego kodu:

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

Za każdym razem, gdy użytkownik przewija na osi X, przesunięcie zawartości scrollView jest ustawiane z powrotem na 0.
Można oczywiście zmienić x S by y s i do nich zamka kierunek być tylko pozioma.

Musisz także upewnić się, że umieściłeś ten kod w metodzie delegowania scrollViewDidScroll(_ scrollView: UIScrollView) . W przeciwnym razie nie uruchomisz go.

Pamiętaj też, aby zaimportować UIScrollViewDelegate do deklaracji klasy, w ten sposób:

class ViewController: UIViewController, UIScrollViewDelegate

... i ustaw delegata scrollView na self w jakiejś metodzie, takiej jak viewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

Licencjonowany na podstawie CC BY-SA 3.0

Nie związany z Stack Overflow

iOS
UIScrollView

Szukaj…

Utwórz UIScrollView

Przewiń Wyświetl rozmiar treści

ScrollView z AutoLayout

Przewijanie zawartości z włączonym automatycznym układem

Kluczowe idee

Rozpocznij nowy projekt

Storyboard

Skończone

Dalsze badanie

Włącz / wyłącz przewijanie

Zoom In / Out UIImageView

Teraz utwórz instancję UIImageView

Wykrywanie, kiedy UIScrollView zakończy przewijanie za pomocą metod delegowania

Cel C:

Szybki:

Ogranicz kierunek przewijania