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

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

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

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

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

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

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

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

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


ios swift uistackview uiscrollview ios-autolayout
person learner    schedule 18.01.2019    source источник
comment
Можете выложить скриншот раскадровки?   -  person humblePilgrim    schedule 18.01.2019
comment
Идея состоит в том, чтобы иметь какую-то высоту, которую может использовать scrollview. Теперь не имеет значения, будет ли ваше представление стека динамическим, поскольку, когда высота вашего представления стека динамически увеличивается, то же самое будет и размер содержимого прокрутки. Поэтому убедитесь, что у вас есть что-нибудь для просмотра прокрутки, чтобы рассчитать размер содержимого. Как будто внутри stackview должно быть что-то, имеющее какую-то высоту. Надеюсь, вы поняли мою мысль. Также для ее решения будет полезна дополнительная информация о вашей проблеме. Ваше здоровье   -  person AjinkyaSharma    schedule 18.01.2019

Ответы (2)


arrow_upward
4
arrow_downward

Пустой UIStackView не имеет внутренней высоты, поэтому IB / Storyboard не знает, как удовлетворить 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>
person DonMag    schedule 18.01.2019
comment
Что еще нужно сделать программно после этого? Поскольку представление прокрутки не прокручивается после выполнения этих предложенных настроек. - person learner; 21.01.2019
comment
Вы добавляете достаточно упорядоченных подвидов, чтобы они превышали высоту экрана? - person DonMag; 21.01.2019
comment
@learner - сравните структуру вашего документа с изображением, которое я добавил в свой ответ. - person DonMag; 21.01.2019
comment
да. У меня точно такой же контур, и просмотр прокрутки не прокручивается. Не уверен, что здесь может быть не так - person learner; 23.01.2019
comment
Также я попробовал оба ваших предложения. Была такая же проблема - person learner; 23.01.2019
comment
@learner - я добавил источник для примера, который работает ... класс контроллера простого представления, который добавляет 30 меток к изначально пустому представлению стека, и источник для раскадровки. - person DonMag; 24.01.2019
comment
Спасибо @DonMag. theStackView.addArrangedSubview (v) был ключевым здесь. Ценю вашу помощь. - person learner; 07.03.2019

arrow_upward
1
arrow_downward

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

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

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

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

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

person Jarvis The Avenger    schedule 18.01.2019