Допустим, я добавил больше видов в UIStackView, которые можно отобразить, как я могу сделать UIStackView
прокрутку?
ios
uiscrollview
uistackview
itsaboutcode
источник
источник
Ответы:
В случае, если кто-то ищет решение без кода , я создал пример, чтобы сделать это полностью в раскадровке, используя Auto Layout.
Вы можете получить его из GitHub .
В основном, чтобы воссоздать пример (для вертикальной прокрутки):
UIScrollView
и установите его ограничения.UIStackView
кUIScrollView
Leading
,Trailing
,Top
иBottom
должны быть равны те изUIScrollView
Width
ограничения междуUIStackView
иUIScrollView
.UIStackView
UIViews
вUIStackView
Замените
Width
наHeight
шаге 4 и установитеAxis
=Horizontal
на шаге 5, чтобы получить горизонтальный UIStackView.источник
Apple Auto Layout Guide содержит целый раздел по работе с представлениями прокрутки . Некоторые соответствующие фрагменты:
Более того:
Подводя итог, представление содержимого представления прокрутки (в данном случае, представление стека) должно быть прикреплено к его краям, и его ширина и / или высота должны быть ограничены иным образом. Это означает, что содержимое представления стека должно быть ограничено (прямо или косвенно) в направлении (ях), в котором желательна прокрутка, что может означать, например, добавление ограничения высоты для каждого представления в представлении стека с вертикальной прокруткой. Ниже приведен пример того, как разрешить вертикальную прокрутку представления прокрутки, содержащего представление стека:
источник
Need constraints for: Y position or height.
эта ошибка исчезает, только если вы устанавливаете ограничение ширины и высоты для стекового представления, которое отключает вертикальную прокрутку. Этот код все еще работает для вас?Ограничения в ответе с наибольшим количеством голосов здесь работали для меня, и я вставил изображение ограничений ниже, как создано в моей раскадровке.
Я столкнулся с двумя проблемами, о которых другие должны знать:
После добавления ограничений, аналогичных тем, которые содержатся в принятом ответе, я получу красную ошибку автоматического определения местоположения
Need constraints for: X position or width
. Это было решено путем добавления UILabel в качестве подпредставления стекового представления.Я добавляю подпредставления программно, поэтому у меня изначально не было подпредставлений на раскадровке. Чтобы избавиться от ошибок автоматического размещения, добавьте подпредставление в раскадровку, а затем удалите его при загрузке перед добавлением ваших реальных подпредставлений и ограничений.
Первоначально я пытался добавить
UIButtons
в UIStackView. Кнопки и представления будут загружаться, но представление прокрутки не будет прокручиваться . Это было решено путем добавленияUILabels
в Stack View вместо кнопок. Используя те же ограничения, эта иерархия представления с UILabels прокручивается, а UIButton - нет.Я смущен этой проблемой, поскольку UIB-кнопки , кажется, имеют IntrinsicContentSize (используется стековым представлением). Если кто-нибудь знает, почему кнопки не работают, я хотел бы знать, почему.
Вот моя иерархия представления и ограничения, для справки:
источник
Как говорит Эйк,
UIStackView
иUIScrollView
играйте вместе, смотрите здесь .Ключевым моментом является то, что он
UIStackView
обрабатывает переменную высоту / ширину для различного содержимого, аUIScrollView
затем хорошо выполняет свою работу по прокрутке / отскоку этого содержимого:источник
Я хотел сделать то же самое и наткнулся на этот отличный пост. Если вы хотите сделать это программно с помощью API привязки, это путь.
Подводя итог, вставьте свой
UIStackView
в вашUIScrollView
, и установите ограничения привязки для,UIStackView
чтобы соответствовать тем изUIScrollView
:источник
В актуальном состоянии до 2020 года.
100% раскадровка ИЛИ 100% код.
Вот самое простое объяснение:
Пустая полноэкранная сцена
Добавить вид прокрутки. Удерживая клавишу Control, перетащите из вида прокрутки в базовый вид , добавьте левый-правый-верхний-нижний, все ноль.
Добавьте представление стека в представлении прокрутки. Удерживая клавишу Control, перетащите из представления стека в представление прокрутки , добавьте левый-правый-верхний-нижний, все ноль.
Поместите две или три метки внутри стека.
Для наглядности сделайте цвет фона метки красным. Установите высоту этикетки до 100.
Теперь установите ширину каждой UILabel:
Удивительно, но перетаскиванием элемента управления из в
UILabel
представление прокрутки, а не в представление стека, и выберите равную ширину .Повторить:
Не контролируйте перетаскивание от UILabel к родителю UILabel - переходите к бабушке и дедушке. (Другими словами, перейдите полностью к представлению прокрутки, не переходите к представлению стека.)
Это так просто. Это секрет.
Вы сделали
Совет: вы должны добавить высоту для каждого нового элемента . Каждый элемент в любом представлении стека прокрутки должен иметь внутренний размер (например, метку) или добавлять явное ограничение высоты.
Альтернативный подход:
Выше: неожиданно, установите ширину UILabels равной ширине вида прокрутки (не вида стека).
С другой стороны ...
Перетащите из представления стека в представление прокрутки и добавьте ограничение "ширина равна". Это кажется странным, потому что вы уже прикололись влево-вправо , но именно так вы это делаете . Неважно, как странно, что это секрет.
Итак, у вас есть два варианта:
или
Чтобы было ясно, используйте ОДИН из этих методов, НЕ делайте оба.
источник
Горизонтальная прокрутка (UIStackView в UIScrollView)
Для горизонтальной прокрутки. Сначала создайте a
UIStackView
и aUIScrollView
и добавьте их в свой вид следующим образом:Вспомнив , чтобы установить ,
translatesAutoresizingMaskIntoConstraints
чтобыfalse
наUIStackView
иUIScrollView
:Чтобы все работало, задний, ведущий, верхний и нижний якоря
UIStackView
должны быть равныUIScrollView
якорям:Но ширина якоря
UIStackView
должна быть равна или больше шириныUIScrollView
якоря:Теперь якорь ваш
UIScrollView
, например:Далее я бы предложил попробовать следующие параметры
UIStackView
выравнивания и распределения:Наконец, вам нужно использовать
addArrangedSubview:
метод для добавления подпредставлений в ваш UIStackView.Текстовые вставки
Еще одна полезная функция, которая может оказаться полезной, заключается в том, что, поскольку
UIStackView
она хранится внутриUIScrollView
, теперь у вас есть доступ к текстовым вставкам, чтобы вещи выглядели немного красивее.источник
Просто добавьте это к
viewdidload
:источник: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/LayoutUsingStackViews.html
источник
Вы можете попробовать ScrollableStackView : https://github.com/gurhub/ScrollableStackView
Это Objective-C и Swift совместимая библиотека. Это доступно через CocoaPods .
Образец кода (Swift)
Образец кода (Objective-C)
источник
Если у вас есть ограничение по центру стекового вида вертикально внутри прокрутки, просто удалите его.
источник
Пример вертикального просмотра стека / прокрутки (с использованием
EasyPeasy
for autolayout):Просто убедитесь, что высота каждого вашего подпредставления определена!
источник
Прежде всего, создайте свой дизайн, желательно в Sketch, или получите представление о том, что вы хотите использовать в качестве прокручиваемого контента.
После этого создайте произвольную форму контроллера представления (выберите из инспектора атрибутов) и задайте высоту и ширину в соответствии с внутренним размером содержимого вашего представления (выбирается из инспектора размера).
После этого в контроллере представления поместите представление прокрутки, и это логика, которая, как я обнаружил, работает почти все время в iOS (может потребоваться просмотр документации этого класса представления, которую можно получить с помощью команды + клик на тот класс или через гугл)
Если вы работаете с двумя или более представлениями, то сначала начните с представления, которое было представлено ранее или является более примитивным, а затем перейдите к представлению, которое было представлено позже или является более современным. Так что здесь, так как представление прокрутки было введено сначала, начните с представления прокрутки сначала и затем перейдите к представлению стека. Здесь поместите ограничения вида прокрутки в ноль во всех направлениях относительно его суперпредставления. Поместите все свои представления в это представление прокрутки и затем поместите их в представление стека.
Во время работы с представлением стека
Сначала начните с оснований вверх (подход снизу вверх), т. Е. Если у вас есть метки, текстовые поля и изображения в вашем представлении, затем сначала разложите эти представления (в представлении прокрутки), а затем поместите их в представление стека.
После этого настройте свойство стека. Если желаемый вид все еще не достигнут, тогда используйте другой вид стека.
После создания представления поместите ограничение между представлением стека матриц и представлением прокрутки, в то время как представление стека дочерних элементов ограничения будет представлением стека матриц. Надеемся, что к этому времени он будет работать нормально, или вы можете получить предупреждение от XCode с предложениями, прочитать то, что он говорит, и реализовать их. Надеюсь, теперь у вас должен быть рабочий взгляд согласно вашим ожиданиям :).
источник
Для вложенного или одиночного стекового вида прокрутки необходимо установить фиксированную ширину с корневым представлением. Основной вид стека, который находится внутри вида прокрутки, должен иметь такую же ширину. [Мой вид прокрутки ниже представления игнорировать его]
источник
Если кто-то ищет горизонтально прокрутки
источник
Поместите вид прокрутки на вашу сцену и измените его размер так, чтобы он заполнил всю сцену. Затем поместите представление стека в представление прокрутки и поместите кнопку добавления элемента в представление стека. Как только все будет готово, установите следующие ограничения:
Код:
Stack View.Width = Scroll View.Width
это ключ.источник
Добавление некоторой новой перспективы для MacOS Catalyst. Так как приложения macOS поддерживают изменение размера окна, возможно, вы
UIStackView
перейдете из состояния без прокрутки в состояние с прокруткой или наоборот. Здесь есть две тонкие вещи:UIStackView
предназначен для всех областей, в которых это возможно.UIScrollView
попытается изменить размеры своих границ, чтобы учесть вновь приобретенную / потерянную область под панелью навигации (или панелью инструментов в случае приложений MacOS).Это, к сожалению, создаст бесконечный цикл. Я не очень знаком с ним
UIScrollView
и егоadjustedContentInset
, но из моего журнала в егоlayoutSubviews
методе я вижу следующее поведение:UIScrollView
пытается уменьшить свои границы (так как нет необходимости в области под панелью инструментов).UIStackView
следующим образом.UIScrollView
не удовлетворены, и решили восстановить в более широких пределах. Это очень странно для меня, так как я вижу из журнала, чтоUIScrollView.bounds.height == UIStackView.bounds.height
.UIStackView
следующим образом.Мне кажется, что два шага решат проблему:
UIStackView.top
кUIScrollView.topMargin
.contentInsetAdjustmentBehavior
в.never
.Здесь меня интересует вертикально прокручиваемый вид с вертикально растущим
UIStackView
. Для горизонтальной пары измените код соответствующим образом.Надеюсь, это поможет кому-нибудь в будущем. Не удалось найти никого, кто бы упомянул об этом в Интернете, и мне потребовалось довольно много времени, чтобы понять, что произошло.
источник