iOS => UIScrollView

Создание UIScrollView

Создайте экземпляр UIScrollView с CGRect качестве фрейма.

стриж

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

Просмотр содержимого

Свойство contentSize должно быть установлено в размере прокручиваемого содержимого. Указывает размер прокручиваемой области. Прокрутка видима при прокручиваемой области, т.е. contentSize больше, чем размер кадра UIScrollView .

С Autolayout:

Когда содержимое представления прокрутки настраивается с использованием автозапуска, оно должно быть явно размером как по вертикали, так и по горизонтали и иметь все 4 ребра, прикрепленные к содержащему прокрутку. Таким образом, contentSize рассчитывается автоматически на основе содержимого прокрутки, а также обновляется при изменении макета содержимого.

Вручную:

стриж

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

Objective-C

scrollview.contentSize = CGSizeMake(640, 800);

ScrollView с AutoLayout

Простые шаги для использования scrollview с автозапуском.

Создание нового проекта с помощью приложения с одним представлением
Выберите элемент управления представлением по умолчанию и измените его размер экрана на iPhone-4inch из инспектора атрибутов.
Добавьте scrollview к виду viewcontroller следующим образом и установите цвет фона в синий

Добавьте ограничения на него, как показано ниже.

Что это будет делать, просто придерживайтесь каждого края scrollview для просмотра viewcontroller

Сценарий 1:

Теперь позвольте сказать, что наш контент огромен, и мы хотим, чтобы он прокручивался как по горизонтали, так и по вертикали.

За это,

Добавьте UIView в scrollview рамки (0,0700,700). Давайте дадим оранжевый цвет фона, чтобы идентифицировать его по-разному.

Далее идет важная часть, нам нужно ее прокручивать по горизонтали и вертикали.

Выберите оранжевый вид и добавьте следующие ограничения

Позвольте мне объяснить, что мы сделали на предыдущем шаге.

Мы установили высоту и ширину до 700.
Мы устанавливаем конечное пространство в scrollview = 0, которое сообщает scrollview, что контент горизонтально прокручивается.
Мы устанавливаем нижнее пространство в scrollview = 0, которое сообщает прокручиванию, что контент вертикально прокручивается.

Теперь запустите проект и проверьте.

Сценарий 2. Давайте рассмотрим сценарий, в котором мы знаем, что ширина содержимого будет такой же, как ширина ширины прокрутки, но высота больше, чем scrollview.

Выполните шаги для прокрутки содержимого по вертикали.

Удалите ограничение ширины в приведенном выше случае.
Измените ширину оранжевого вида в соответствии с шириной прокрутки.
Ctrl-перетаскивание из оранжевого вида для просмотра прокрутки и добавление ограничения ширины .

И сделано !!! Просто запустите и проверьте, прокручивается ли она вертикально

Сценарий 3:

Теперь мы хотим прокручивать только по горизонтали, а не по вертикали.

Выполните шаги для горизонтальной прокрутки содержимого.

Отмените все изменения для достижения ограничений, как показано ниже (т.е. восстановить исходные ограничения, которые достигли вертикальной и горизонтальной прокрутки )

Проверьте рамку оранжевого вида, которая должна быть (0,0700,700)
Удалить ограничение высоты оранжевого вида.
Измените высоту оранжевого вида, чтобы она соответствовала высоте прокрутки.
Ctrl-перетащить с оранжевого вида, чтобы просмотреть прокрутку и добавить ограничение равных высот .

И сделано !!! Просто запустите и проверьте, прокручивается ли она вертикально

Прокрутка содержимого с включенной автоматической компоновкой

Этот проект является самодостаточным примером, полностью выполненным в Interface Builder. Вы должны иметь возможность работать через 10 минут или меньше. Затем вы можете применить концепции, которые вы узнали, к своему собственному проекту.

Здесь я просто использую UIView но они могут представлять любой понравившийся вам вид (например, кнопка, ярлык и т. Д.). Я также выбрал горизонтальную прокрутку, потому что скриншоты раскадровки более компактны для этого формата. Однако принципы одинаковы для вертикальной прокрутки.

Ключевые идеи

UIScrollView должен использовать только одно подвью. Это «UIView», который служит для просмотра содержимого, чтобы содержать все, что вы хотите прокрутить.
Сделайте представление содержимого, а родительский элемент прокрутки имеет равные высоты для горизонтальной прокрутки. (Равная ширина для вертикальной прокрутки)
Убедитесь, что все прокручиваемое содержимое имеет заданную ширину и закреплено со всех сторон.

Начать новый проект

Это может быть просто приложение с одним представлением.

Раскадровка

В этом примере мы создадим горизонтальное представление прокрутки. Выберите контроллер просмотра, а затем выберите Freeform в инспекторе размеров. Сделайте ширину 1,000 и высоту 300 . Это просто дает нам комнату на раскадровке, чтобы добавить контент, который будет прокручиваться.

Добавить прокрутку

Добавьте UIScrollView и соедините все четыре стороны с корневым представлением контроллера вида.

Добавление содержимого

Добавьте UIView в качестве представления в прокрутку. Это ключ. Не пытайтесь добавить много просмотров в прокрутку. Просто добавьте один UIView . Это будет просмотр вашего контента для других просмотров, которые вы хотите прокрутить. Подключите просмотр содержимого к списку прокрутки со всех четырех сторон.

Равные высоты

В настоящее время в структуре документа, Command нажмите как представление содержимого и родительский просмотр представления скроллинга для того , чтобы выбрать их оба. Затем установите высоту равным (Control </ kbd перетащить из представления содержимого в вид прокрутки>). Это также ключ. Поскольку мы прокручиваем по горизонтали, представление содержимого прокрутки не будет знать, насколько оно должно быть высоким, если мы не установим его таким образом.

Замечания:

Если бы мы производили прокрутку содержимого по вертикали, мы бы установили ширину представления содержимого равным ширине родительского представления прокрутки.

Добавить контент

Добавьте три UIView и дайте им все ограничения. Я использовал 8 пунктов поля для всего.

Ограничения:

Зеленый вид: нажмите верхний, левый и нижний края. Сделайте ширину 400.
Красный вид: прикрепите верхний, левый и нижний края. Сделайте ширину 300.
Фиолетовый вид: выровняйте все четыре края. Сделайте ширину любым оставшимся пространством (268 в этом случае).

Установка ограничений ширины также является ключевой, так что представление прокрутки знает, насколько широким будет просмотр содержимого.

Законченный

Это все. Теперь вы можете запустить свой проект. Он должен вести себя как прокручиваемое изображение в верхней части этого ответа.

Дальнейшее обучение

Включить / отключить прокрутку

Свойство scrollEnabled хранит Boolean значение, определяющее, включена ли прокрутка.
Если значение этого свойства истинно / ДА, прокрутка включена, в противном случае нет. Значение по умолчанию - true

стриж

scrollview.isScrollEnabled = true

Objective-C

scrollview.scrollEnabled = YES;

Увеличение / уменьшение UIImageView

Создать экземпляр UIScrollView

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

А затем установите следующие свойства:

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

Чтобы увеличить и уменьшить изображение, мы должны указать размер, который пользователь может увеличить и уменьшить. Мы делаем это, устанавливая значения maximumZoomScale свойств minimumZoomScale и maximumZoomScale . По умолчанию оба они установлены в 1.0.

И zoomScale до 1.0, которые определяют коэффициент масштабирования для минимального и максимального масштабирования.

Для поддержки масштабирования мы должны установить делегат для просмотра прокрутки. Объект делегата должен соответствовать протоколу UIScrollViewDelegate . Этот класс делегата должен реализовать метод viewForZoomingInScrollView() и вернуть представление для увеличения.

Измените свой ViewController как показано

class ViewController: UIViewController, UIScrollViewDelegate

Затем добавьте следующую функцию делегата в класс.

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

Теперь создайте экземпляр UIImageView

Сделайте эту переменную переменной класса

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

А затем добавьте его в scrollview

scrollView?.addSubview(imageView)

Ссылка

Обнаружение при завершении прокрутки UIScrollView с помощью методов делегирования

scrollViewDidEndDecelerating: это говорит делегату, что просмотр прокрутки завершил замедление движения прокрутки.

Цель 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
}

Ограничить направление прокрутки

Вы можете ограничить направления, которые пользователь может прокрутить, используя следующий код:

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

Каждый раз, когда пользователь прокручивается по оси x, смещение содержимого scrollView возвращается к 0.
Вы можете, очевидно, изменить x s на y s и тем самым заблокировать направление только по горизонтали.

Вам также необходимо убедиться, что вы поместили этот код в метод scrollViewDidScroll(_ scrollView: UIScrollView) . В противном случае вы не сможете заставить его работать.

Кроме того, обязательно импортируйте UIScrollViewDelegate в объявление класса, например:

class ViewController: UIViewController, UIScrollViewDelegate

... и установите делегат scrollView для себя в каком-то методе, например viewDidLoad(_:)

scrollView.delegate = self

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

iOS
UIScrollView

Поиск…

Создание UIScrollView

Просмотр содержимого

ScrollView с AutoLayout

Прокрутка содержимого с включенной автоматической компоновкой

Ключевые идеи

Начать новый проект

Раскадровка

Законченный

Дальнейшее обучение

Включить / отключить прокрутку

Увеличение / уменьшение UIImageView

Теперь создайте экземпляр UIImageView

Обнаружение при завершении прокрутки UIScrollView с помощью методов делегирования

Цель C:

Swift:

Ограничить направление прокрутки