iOS ScrollView needs constraint for y position or height
Whenever using ScrollView with auto layout always follow below steps,
ScrollView constraints: leadingSpace, topSpace, TrailingSpace, bottomSpace to superView and make sure when you control drag to add constraint, add it by pressing alt so that the constraint would be set without margin.
Add UIView inside scroll view as container view and set its constraints:
leadingSpace, topSpace, trailingSpace, bottomSpace to ScrollView without pressing alt button and set equalWidth to ScrollView.Whatever views you add inside this container view must have top to bottom constraint that is all view's should have vertical constraint, so containerView can calculate height required for itself based on the content inside it.
If the constraints are set correctly then the scrollView will set its content size automatically based on the component inside it and you do not need to set the content size manually, also the scrollView will only scroll if the component inside the container view is not fitting inside otherwise it won't scroll. If you want to make it scroll anyways then you need to check the Bounces Vertically property from storyboard to get the bounce effect.
Note: While you set constraint to the component inside the scrollView, you will see the constraint warning till you set the constraint from top component to the bottom one, aways remember that your top component should have top constraint (Vertical constraint) to superView and the component at the bottom should have bottom space constraint to the super view. When this satisfy then all warning will disappear eventually.
ScrollView constraints:
ContainerView constraints:
UIScrollView - Need Constraints for x position/width, Need Constraints for y position/height
Scroll views can be a little tricky at first. You really have 3 parts:
- Actual frame of the scroll view
- Actual frame of the subview(s) contained in the scroll view
- The contentSize of the scroll view - that is, how far it should scroll in either direction
So, 1. is pretty straight-forward.
The second part also seems straight-forward, except that we tend to "pin" subviews to the inside edges of their superviews. In the case of scroll view subviews, those constraints are what defines the contentSize. You also have to make sure the subviews have a "size".
Starting with just one subview, you would:
- set the scroll view's constraints as "normal".
- set the size of the subview - just for demo purposes, set it to 100 x 100
- pin all four edges of the subview to the four edges of the scroll view
Run the app. Assuming you set background colors so you know what you're looking at, you should see the scroll view positioned and sized as you'd expect... you should see the subview of 100 x 100 sitting somewhere inside the scroll view... and you will likely not be able to do any actual scrolling.
If you go back and change the subview to, say, 100 x 800, and still have its bottom constraint pinned to the bottom of the scroll view (the subview's superview), and run the app again... You should be able to scroll up and down for the full 800 pt height of the subview.
The way to think about it is: the scroll view's content - whether it's one or many subviews - has to define its own size, which will define the scrollable area (the scroll view's contentSize).
Hope that makes sense!
How to set the scrollview height when UI elements are dynamically created
An empty UIStackView has no intrinsic height, so IB / Storyboard doesn't know how to satisfy the contentSize of the scroll view.
You need to give it a height constraint at design-time - it can be any value, because it's going to change at runtime. So, give your stack view a height constraint of, say, 300.
Of course, that won't allow it to "grow" as you dynamically add arranged subviews, so you have a couple options.
1 - Give the height constraint a low priority:
This will satisfy IB, but will allow the stack view to grow.
2 - Set the height constraint to be a "placeholder":
At build time, this constraint will be removed, again allowing the stack view to grow.
Edit: Using the first option (low priority), this is how your Document Outline should look:
Simple example... This class will add 30 labels as arranged subviews of the initially empty stack view:
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)
}
}
}
and here is the Storyboard source:
<?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>
UISTackview constraint error in a UIScrollview in viewcontroller
Your second image is correct - but you need one more constraint.
Add a constraint from the Bottom of the Stack View to the Bottom of View (its superview), but set it to >= 0
A couple of tips...
- rename your UI elements... it gets very confusing to refer to elements by default generic names (you have more than one
View, for example). - give your objects contrasting background colors during development... makes it much, much easier to see the frames.
Scrollview working by breaking constraint
There is conflict between your constraints with contentView
1. There is Top, bottom, leading, trailing with the scrollview
2. Fixed height and fixed width constraint of contentView
These two will conflict each other as OS will not be sure which constraint to fulfil.
As a solution reduce the priority of height and width constraint so that the more priority is given to the constraint with respect to the scrollView.
For more details please follow below tutorial
How to configure a UIScrollView with Auto Layout
ScrollView doesn't work properly in Xcode
Constraint View.centerY = centerY between the content view and the scrollView will prevent scrolling. Drop that constraint.
Related Topics
Maskstobounds VS. Clipstobounds
Launching Viber App via Url Scheme on iOS
Fixing Xcode 9 Issue: "iPhone Is Busy: Preparing Debugger Support for Iphone"
Add Left/Right Horizontal Padding to Uilabel
iOS 7 - How to Disable the Swipe Back and Forward Functionality in Safari
Save iOS 8 Documents to Icloud Drive
Return from Initializer Without Initializing All Stored Properties
1St April Dates of 80S Failed to Parse in iOS 10.0
Auto Adjust Custom Uitableviewcell and Label in It to the Text
Add a Button on Right View of Uitextfield in Such Way That, Text Should Not Overlap the Button
Xcode 10: a Valid Provisioning Profile for This Executable Was Not Found
Setting Scroll Position in Uitableview
How to Build a Url with Query Parameters Containing Multiple Values for the Same Key in Swift