it-swarm.com.ru

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

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

118
Alex Reynolds

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

Начните заканчивать здесь, как заставить это работать в раскадровке.

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

2: измените размер на Freeform вместо Inferred.

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

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

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

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

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

6: Нажмите на свой прокрутки и нажмите Identity Inspector.

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

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

8: Добавьте runtime attribute с KeyPath frame с типом RECT и 0,0,320,416.

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

149
Alex Reynolds

Вот шаги с Auto Layout, которые работали для меня на XCode 8.2.1.

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

Посмотреть иерархию:

  • RootView
    • ScrollView
      • ContentView
        • RedView
        • BlueView

Просмотр сцены контроллера (высота: 1000):

scene

Запустите на iPhone7 (высота: 1334/2):

demo

48
jqgsninimo

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

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

    1.1 Выберите «View Controller», выберите «File Inspector» и снимите флажок «Auto layout».

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

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

  5. Выберите View Controller, выберите «Attributes Inspector», затем выберите Freeform from Size.

    Примечание: шаг 5 позволит нам изменить размер «View», который поставляется с контроллером представления.

  6. Выберите «Вид», а затем «Инспектор размеров». 

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

Примечание. 5, 6 и 7 предназначены исключительно для просмотра растянутого или полного развернутого вида в StoryBoard . Примечание. Обязательно снимите флажок «Авторазметка» в View Controller.

Ваша иерархия View должна выглядеть следующим образом: hierarchy

43
Raja Rao

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

  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 keyPath в качестве size к scrollView в Identity Inspector и установив его в (320, 1000).

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

13
Ronny Webers

Получение прокрутки для работы в iOS7 и Auto-layout в iOS 7 и XCode 5.

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

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

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

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

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

8
Raja Rao

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

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

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

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

enter image description here

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

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

enter image description here

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

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

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

enter image description here

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

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

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

7
yoninja

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

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

5
Kyle Clegg

В iOS7 я обнаружил, что если бы у меня был View внутри UIScrollView на ViewController размером с FreeForm, он бы не прокручивал приложение, независимо от того, что я делал. Я поиграл и обнаружил, что работает следующее, которое не использует FreeForms:

  1. Вставьте UIScrollView внутри основного представления ViewController

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

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

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

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

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

4
nh32rg

Вам следует только установить свойство contentSize для viewDidAppear, как в следующем примере:

- (void)viewDidAppear:(BOOL)animated{

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

}

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

4
Lucio Fonseca

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

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

  1. Добавить представление прокрутки с ограничениями - закрепить слева, справа, снизу, сверху (без полей) в суперпредставлении (просмотр)
  2. Добавьте представление стека с теми же ограничениями для просмотра с прокруткой.
  3. Другие ограничения стека: - stackView.bottom = view.bottom и stackView.width = scrollView.width
  4. Начните добавлять свои взгляды. Представление прокрутки решит прокрутить на основе размера представления стека (который по сути является вашим представлением содержимого)
3
DharinS

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

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

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

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

3
jungle_mole

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

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

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

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

 enter image description here

3
Hulk_SMASH

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

2
TimWhiting

Ключ является contentSize.

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

Выберите UIScrollView и выберите Identity Inspector.

Добавьте contentSize keyPath в качестве size к scrollView в Инспекторе удостоверений и установите для него значение (320, 1000).

Прокрутите прочь.

0
Alex Zavatone

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

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

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

Надеюсь, это поможет!

0
Lukasz Czerwinski

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

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

0
Usman Awan