Поиск…


Создание 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 минут или меньше. Затем вы можете применить концепции, которые вы узнали, к своему собственному проекту.

анимированный gif с горизонтальной прокруткой

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

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

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

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

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

Раскадровка

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

Изображение

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

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

прикрепленный скриншот scrollview

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

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

скриншот

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

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

установка скриншота с равными высотами

Замечания:

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

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

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

Скриншот IB с дополнительными просмотрами контента

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

  • Зеленый вид: нажмите верхний, левый и нижний края. Сделайте ширину 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