Как установить высоту прокрутки при динамическом создании элементов пользовательского интерфейса

Question

На раскадровке внутри контроллера представления у меня есть прокрутка. Панель навигации и представление стека встроены в представление прокрутки. Программно я добавляю некоторые элементы пользовательского интерфейса один под другим в представлении стека.

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

Ограничения на панели навигации - задний, ведущий, верхний, ширина такие же, как и у суперпредставления.

Ограничения стека - трейлинг, ведущий, нижний, ширина такие же, как суперпредставление.

Нижняя часть панели навигации совпадает с верхней частью стека, поэтому они расположены один под другим.

После установки этих ограничений возникает ошибка в scrollview - нужны ограничения для: Y position или Height

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

Я попробовал опцию «добавить отсутствующее ограничение», и она добавляет постоянную высоту к представлению стека, что не работает для всех устройств. Любая помощь приветствуется, так как я новичок в разработке приложений для iOS. Спасибо.

Answer 1

Пустое UIStackView не имеет внутренней высоты, поэтому IB / Раскадровка не знает, как удовлетворить contentSize вида прокрутки.

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

Конечно, это не позволит ему «расти» при динамическом добавлении упорядоченных подпредставлений, поэтому у вас есть пара вариантов.

1 - Дайте ограничению высоты низкий приоритет:

Это удовлетворит IB, но позволит увеличить представление стека.

2 - Установите ограничение высоты как «заполнитель»:

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

---

Редактировать: Используя первую опцию (с низким приоритетом), вот как должна выглядеть схема документа:

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

import UIKit

class StackInScrollViewController: UIViewController {

    @IBOutlet var theStackView: UIStackView!

    override func viewDidLoad() {
        super.viewDidLoad()

        for i in 1...30 {
            let v = UILabel()
            v.translatesAutoresizingMaskIntoConstraints = false
            v.backgroundColor = .yellow
            v.text = "This is Label \(i)"
            theStackView.addArrangedSubview(v)
        }

    }

}

и вот источник раскадровки:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="v4n-Ck-gNo">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--Stack In Scroll View Controller-->
        <scene sceneID="85i-FA-G1W">
            <objects>
                <viewController storyboardIdentifier="pageOne" id="v4n-Ck-gNo" customClass="StackInScrollViewController" customModule="XC10SWScratch" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="meJ-hR-GiR">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="h2O-la-OOI">
                                <rect key="frame" x="0.0" y="20" width="375" height="647"/>
                                <subviews>
                                    <navigationBar contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Ozf-iG-Ogw">
                                        <rect key="frame" x="0.0" y="0.0" width="375" height="44"/>
                                        <items>
                                            <navigationItem title="Title" id="gMo-gQ-HLZ"/>
                                        </items>
                                    </navigationBar>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="FOm-go-etU">
                                        <rect key="frame" x="0.0" y="44" width="375" height="300"/>
                                        <constraints>
                                            <constraint firstAttribute="height" priority="250" constant="300" id="4A2-93-8hK"/>
                                        </constraints>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" red="0.46202266219999999" green="0.83828371759999998" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="trailing" secondItem="FOm-go-etU" secondAttribute="trailing" id="2wm-HM-UgW"/>
                                    <constraint firstItem="Ozf-iG-Ogw" firstAttribute="width" secondItem="h2O-la-OOI" secondAttribute="width" id="5m2-MQ-vcg"/>
                                    <constraint firstItem="Ozf-iG-Ogw" firstAttribute="top" secondItem="h2O-la-OOI" secondAttribute="top" id="76R-nE-Vve"/>
                                    <constraint firstAttribute="bottom" secondItem="FOm-go-etU" secondAttribute="bottom" id="ASq-4m-5zD"/>
                                    <constraint firstAttribute="trailing" secondItem="Ozf-iG-Ogw" secondAttribute="trailing" id="GHy-BT-HmJ"/>
                                    <constraint firstItem="FOm-go-etU" firstAttribute="width" secondItem="h2O-la-OOI" secondAttribute="width" id="LcJ-rd-yDs"/>
                                    <constraint firstItem="Ozf-iG-Ogw" firstAttribute="leading" secondItem="h2O-la-OOI" secondAttribute="leading" id="VCw-iY-MfZ"/>
                                    <constraint firstItem="FOm-go-etU" firstAttribute="top" secondItem="Ozf-iG-Ogw" secondAttribute="bottom" id="l3k-Nm-hTu"/>
                                    <constraint firstItem="FOm-go-etU" firstAttribute="leading" secondItem="h2O-la-OOI" secondAttribute="leading" id="r3A-iy-6bu"/>
                                </constraints>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="h2O-la-OOI" firstAttribute="leading" secondItem="k8i-v0-f9m" secondAttribute="leading" id="0YL-7I-Lst"/>
                            <constraint firstItem="h2O-la-OOI" firstAttribute="top" secondItem="k8i-v0-f9m" secondAttribute="top" id="4Zo-wX-Rir"/>
                            <constraint firstItem="k8i-v0-f9m" firstAttribute="bottom" secondItem="h2O-la-OOI" secondAttribute="bottom" id="FUr-4Z-b6w"/>
                            <constraint firstItem="k8i-v0-f9m" firstAttribute="trailing" secondItem="h2O-la-OOI" secondAttribute="trailing" id="Ic8-zA-xpZ"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="k8i-v0-f9m"/>
                    </view>
                    <connections>
                        <outlet property="theStackView" destination="FOm-go-etU" id="72X-V9-Lzg"/>
                    </connections>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="Ora-A0-Q75" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-327" y="165"/>
        </scene>
    </scenes>
</document>

Answer 2

В соответствии с вашим вопросом вам необходимо представление прокрутки с динамическим содержимым в нем.Вы можете решить свою проблему двумя способами.Сначала используется Tableview вместо представления прокрутки.Но я постараюсь ответить на ваши вопросы с вашей реализацией.

• Добавьте ScrollView в ViewController с ограничением top, bottom, lead, trailing с его super view.

• Добавьте StackView с ограничением в начале, в конце, сверху и снизу.

• При каждом программном добавлении содержимого StackView вызывайте self.view.layoutIfNeeded() и self.view.layoutSubviews().

• Окончательно установите размер содержимого представления прокрутки. scrollView.contentSize = CGSize(width:CGFloat, height: CGFloat)