Как использовать UIScrollView в раскадровке


У меня есть вид прокрутки с содержанием, которое составляет 1000 пикселей в высоту и хотел бы иметь возможность выложить его для легкого дизайна на раскадровке.
Я знаю, что это можно сделать программно, но я действительно хочу видеть это визуально. Каждый раз, когда я помещаю вид прокрутки на контроллер вида, он не будет прокручиваться. Можно ли заставить его работать как я хочу, или мне придется сделать это в коде?

16   118   2012-10-16 03:44:12

16 ответов:

я отвечаю на свой собственный вопрос, потому что я только что потратил 2 часа, чтобы найти решение, и StackOverflow позволяет этот стиль QA.

начала до конца, вот как заставить его работать в раскадровке.

1: Перейдите к контроллеру просмотра и нажмите на Attribute Inspector.

2: изменить размер на вывод.

3: перейдите к главному виду на этой раскадровке, а не к вашему scrollview, а к виду верхнего уровня.

4: Нажмите кнопку Size Inspector и установить это просмотр до нужного размера. Я изменил свой рост на 1000.

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

5: падение на scrollview и растянуть его так, что он занимает весь вид. Теперь у вас должен быть scrollview размером 320,1000, сидящий на виде в вашем контроллере вида.

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

6: Нажмите кнопку на вашем scrollview и нажмите на Identity Inspector.

7: Добавить User Defined runtime attribute С ключевого пути из contentSize затем введите размер и введите размер содержимого. Для меня это (320, 1000).

поскольку мы хотим видеть весь наш вид прокрутки на раскадровке, мы растянули его, и он имеет рамку 320,1000, но для того, чтобы это работало в нашем приложении, нам нужно изменить рамку до того, что будет видимым scrollview.

8: Добавить runtime attribute С KeyPath frame С типом РЕКТ и 0,0,320,416.

теперь, когда мы запускаем наше приложение, у нас будет видимый scrollview имеет кадр 0,0,320, 416 и может прокручиваться до 1000. Мы можем размещать наши подвиды и изображения и многое другое в раскадровке именно так, как мы хотим, чтобы они появились. Затем наши атрибуты времени выполнения убедитесь, что он отображается правильно. Все это без 1 строки кода.

вот шаги с Auto Layout это сработало для меня на XCode 8.2.1.

  1. выберите Size Inspector of View Controller, и изменить Simulated Size до Freeform высотой 1000 вместо Fixed.
  2. переименовать вид View Controller как RootView.
  3. перетащите a Scroll View как подпанель RootView и переименовать его как ScrollView.
  4. добавить ограничения для ScrollView:
    • ScrollView[Top, Bottom, Leading, Trailing]=RootView[Сверху, Снизу, Впереди, Сзади]
  5. перетащите a Vertical Stack View как подпанель ScrollView и переименовать его как ContentView.
  6. добавить ограничения для ContentView:
    • ContentView.высота= 1000
    • ContentView[Сверху, Снизу, Впереди, Сзади, Ширина]= ScrollView[Сверху, Снизу, Впереди, Сзади, Ширина]
  7. выберите Attributes Inspector на ContentView, и изменить Distribution до Fill Equally вместо Fill.
  8. перетащите a View как подпанель ContentView и переименовать его как RedView.
  9. Set Red в качестве фона из RedView.
  10. перетащите a View как подпанель ContentView и переименовать его как BlueView.
  11. Set Blue как фон BlueView.
  12. выберите RootView и нажмите кнопку .
    • Update Frames это новая кнопка в Xcode8, а не . Он выглядит как кнопка обновления, расположенная в панели управления ниже Раскадровка: Update Frames Button

иерархия вид:

  • RootView
    • ScrollView
      • ContentView
        • RedView
        • BlueView

Сцена Контроллера Вида (Высота: 1000):

scene

запуск на iPhone7 (Высота: 1334 / 2):

demo

вот шаги, которые работали для меня на iOS 7 и XCode 5.

  1. перетащите ViewController (он поставляется с UIView "View").

    1.1 выбрать "контроллер" и выберите "Файл-инспектор" и снимите флажок "автоматическое создание макета".

  2. перетащите ScrollView (как дочерний элемент ViewController UIView "View")
  3. выберите ScrollView и откройте "Identity Inspector".
  4. введите "contentSize" для ключевого пути. Выбирать "Размер" для типа. И Введите {320, 1000} для стоимости.

    Примечание: Шаг 4 просто говорит, что скроллер содержит некоторое содержимое, размер которого составляет 320x1000 единиц. Таким образом, установка contentSize заставит скроллер работать.

  5. выберите контроллер вида, выберите "инспектор атрибутов", затем выберите Freeform от размера.

    Примечание: Шаг 5 позволит нам изменить размер "вид", что контроллер вида приходит с.

  6. выберите "вид", а затем выберите"инспектор размера".

  7. установите ширину до 320 и высоту до 1000.

Примечание: 5, 6 & 7-это чисто для нас посмотреть растянутый или весь расширенный вид внутри раскадровки. Примечание: не забудьте снять флажок "авто макет" на контроллере вида.

иерархия представлений должна выглядеть так: hierarchy

после нескольких часов проб и ошибок я нашел очень простой способ поместить содержимое в scrollviews, которые являются "закадровыми". Протестировано с XCode 5 и iOS 7. Вы можете сделать это почти полностью в раскадровке, используя 2 небольших трюка / обходные пути:

  1. перетащите viewcontroller на раскадровку.
  2. перетащите scrollView на этом viewController, для демонстрации вы можете оставить его размер по умолчанию, покрывая весь экран.
  3. сейчас идет Фокус 1 : прежде чем добавив любой элемент в scrollView, перетащите обычный " вид " (этот вид будет больше экрана и будет содержать все подэлементы, такие как кнопки, метки, ...давайте назовем это'вшита посмотреть').
  4. пусть этот размер y заключительного вида в инспекторе размера, например, 800.
  5. поместите метку на охватывающий вид, где-то в позиции y 200, назовите ее "метка 1".
  6. Трюк 2 : убедитесь, что элемент вшита посмотреть выбран (не scrollView !), и установите его положение Y, например -250, так что вы можете добавить элемент, который находится " вне " экрана
  7. поместите метку, где-то в нижней части экрана, назовите ее "метка 2". Эта метка на самом деле "вне экрана".
  8. сбросьте положение Y заключительного вида до 0, вы больше не увидите метку 2, так как она была расположена вне экрана.

пока для раскадровки работа, теперь вам нужно добавить одну строку кода в метод ViewController 'viewDidLoad', чтобы установить содержимое scrollViews, чтобы оно содержало весь "охватывающий вид". Я не нашел способ сделать это в раскадровке:

- (void)viewDidLoad
{
    [super viewDidLoad];

    self.scrollView.contentSize = CGSizeMake(320, 800);
}

вы можете попробовать сделать это, добавив contentSize путь в size к scrollView в Инспекторе идентификации и установка его в (320, 1000).

Я думаю, что Apple должна сделать это проще в раскадровке, в TableViewController вы можете просто прокрутить за кадром в раскадровке (просто добавьте 20 ячеек, и вы увидите, что вы можете просто прокручивать), это должно быть возможно и с помощью ScrollViewController.

получение прокрутки для работы в iOS7 и автоматической компоновки в iOS 7 и XCode 5.

в дополнение к этому:https://stackoverflow.com/a/22489795/1553014

видимо, все, что нам нужно сделать, это:

  1. установите все ограничения для просмотра прокрутки (т. е. сначала исправьте вид прокрутки)

  2. затем установите ограничение расстояния от-scrollView до самого нижнего элемента для прокрутки (который является супер-видом).

Примечание: Шаг 2 покажет раскадровку, где последний кусок контента находится в режиме прокрутки.

в этом примере я снял флажок функция автозапуска построителя интерфейса. И я все еще использую (без всякой причины) относительно старую версию 4.6.1 Xcode.

начните с контроллера вида, который имеет вид прокрутки над ним (основной вид).

1: добавьте представление контейнера из библиотеки объектов в представление прокрутки. Обратите внимание, что новый контроллер вида добавляется в раскадровку и связан с контроллером вида с помощью прокрутки вид.

2: выберите вид контейнера и в Инспекторе размеров закрепите его сверху и слева без автоматического изменения размера.

enter image description here

3: измените его высоту на 1000. (Для этого примера используется 1000. Вы должны применить значение, которое вам требуется.)

4: выберите новый контроллер вида и в Инспекторе атрибутов измените размер на Freeform.

enter image description here

5: выберите вид нового контроллера вида и инспектор размера, измените высоту на 1000 (что равно высоте представления контейнера).

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

7: выберите вид прокрутки из исходного контроллера вида. В инспекторе удостоверений добавьте атрибут с ключом, установленным в contentSize, типом, установленным в Size, и значением, установленным в {320, 1000} (или представление контейнера размер.)

enter image description here

8: запуск на 4-дюймовом симуляторе iPhone. Вы должны иметь возможность прокручивать от верхней метки до нижней метки.

9: запуск на 3,5-дюймовом симуляторе iPhone. Вы должны иметь возможность прокручивать от верхней метки до нижней метки.

помните, что Xcode 4.6.1 может строить только для iOS6 и ниже. Используя этот подход и построение для iOS6, я все еще могу достичь тех же результатов, когда приложение запускается на iOS7.

обратите внимание, что внутри UITableView, вы можете прокрутить tableview, выбрав ячейку или элемент в нем и прокрутки вверх или вниз с помощью трекпада.

на UIScrollView, Мне нравится предложение Алекса, но я бы порекомендовал временно изменение контроллера вида на freeform, увеличение высоты корневого представления, создание пользовательского интерфейса (шаги 1-5), а затем изменение его обратно на стандартный выводимый размер, когда вы закончите, чтобы вам не пришлось жестко кодировать содержимое размеры в качестве атрибутов времени выполнения. Если вы это сделаете, вы откроете для себя множество проблем с обслуживанием, пытаясь поддерживать как 3,5-дюймовые, так и 4-дюймовые устройства, а также возможность увеличения разрешения экрана в будущем.

вы должны только установить свойство contentSize на viewDidAppear, как в этом примере:

- (void)viewDidAppear:(BOOL)animated{

     [super viewDidAppear:animated];
     self.scrollView.contentSize=CGSizeMake(306,400.0);

}

он решает проблемы автозапуска и отлично работает на iOS7.

в iOS7 я обнаружил, что если бы у меня был вид внутри UIScrollView на ViewController размером со свободную форму, он не прокручивался бы в приложении, независимо от того, что я сделал. Я играл вокруг и нашел следующее, Казалось, работает, который не использует никаких свободных форм:

  1. вставьте UIScrollView в основной вид ViewController

  2. установите ограничения автозапуска для ScrollView соответствующим образом. Для меня я использовал 0 к началу Руководство по компоновке и от 0 до Нижнего макета Руководство

  3. внутри ScrollView поместите представление контейнера. Установите его высоту на все, что вы хотите (например, 1000)

  4. добавьте ограничение по высоте (1000) в контейнер, чтобы он не изменялся. Дно будет за концом формы.

  5. добавить строку [self.scrollView setContentSize:CGSizeMake (320, 1000)]; к ViewController, который содержит scrollView (который вы подключили как IBOutlet)

ViewController (автоматически добавленный), связанный с контейнером, будет иметь желаемую высоту (1000) в Interface Builder, а также будет правильно прокручиваться в исходном контроллере вида. Теперь вы можете использовать ViewController контейнера для компоновки элементов управления.

Я хочу поставить свои 5 центов на принятый ответ: я исследовал тему в течение 2 дней и, наконец, нашел решение, которое я буду использовать всегда отныне

перейти к пункту 4 в принятом ответе и забыть о добавлении атрибутов фреймов и contentsizes и так далее

чтобы сделать все автоматически просто использовать решение от этой ссылке

все ясно, легко, элегантно и работает как шарм на ios 7. я очень доволен всем этим лол

отказ от ответственности: - только для ios 9 и выше (Вид стека).

Если вы развертываете свое приложение на устройствах ios 9, Используйте stack view. Вот шаги : -

  1. добавить вид прокрутки с ограничениями-pin слева, справа, снизу, сверху (без полей) в superview (view)
  2. добавьте представление стека с теми же ограничениями для прокрутки.
  3. Stack View другие ограничения: - stackView.снизу = вид.дно и stackView.ширина= представление ScrollView.ширина
  4. начните добавлять свои представления. Вид прокрутки будет принимать решение о прокрутке на основе размера представления стека (который по существу является вашим представлением содержимого)

вот простое решение.

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

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

  3. теперь просто убедитесь, что есть ограничения в подвидах scrollview, которые соединяют верхнюю и нижнюю части прокрутки. Одинаковые для левой и правой если у вас есть горизонтальная прокрутка.

enter image description here

вот немного грязный ответ, который подходит к тому же решению для вертикальных видов прокрутки, но (против этоса stackoverflow) не отвечает на вопрос. Вместо того, чтобы использовать scrollView, просто используйте UITableView, перетащите обычный UIView в заголовок и сделайте его таким большим, как вы хотите, теперь вы можете прокручивать содержимое в раскадровке.

видимо вы Не нужно указывать высоту на всех! что отлично, если он изменяется по какой-то причине (вы изменяете размер компонентов или размер шрифта).

Я просто следовал этому учебнику, и все работало:http://natashatherobot.com/ios-autolayout-scrollview/

(боковое Примечание: нет необходимости реализовывать viewDidLayoutSubviews, если вы не хотите центрировать представление, поэтому список шагов еще короче).

надеюсь, что помогает!

ключ-это contentSize.

это часто отсутствует и не указывается при добавлении UIScrollView.

выберите UIScrollView и выберите инспектор идентификации.

добавить a contentSize путь в size к scrollView в Инспекторе идентификации и установка его в (320, 1000).

свиток подальше.

Если вы используете auto-layout, то лучшим подходом является использование UITableViewController со статическими ячейками в раскадровке.

Я также однажды столкнулся с проблемой с видом, который требует гораздо больше прокрутки, поэтому измените UIScrollView с помощью вышеупомянутой техники.