Search code examples
iosiphoneuiscrollviewstoryboardinterface-builder

Is IOS Scroll View is Scrollable in Storyboard while Designing? Not Runtime in Simulator


In Storyboard i have view controller, inside i have a scroll view. question is scrollview is not scrollable while design time (UIKit). is it like that ? though, it works fine in simulator. Inage


Solution

  • If you have setup your constrains correctly, sure, you can scroll in Storyboard / Interface Builder.

    Simply select any subview of the scroll view, and you can scroll just like you scroll anything else (such as this web page).

    Here I have a stack view with several labels and buttons, in a scroll view:

    enter image description here

    I have the stack view selected and, as you see, I can scroll the content:

    enter image description here


    Edit - example without stack view:

    enter image description here

    enter image description here

    enter image description here

    Storyboard Source

    <?xml version="1.0" encoding="UTF-8"?>
    <document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
        <device id="retina4_0" orientation="portrait" appearance="light"/>
        <dependencies>
            <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
            <capability name="Safe area layout guides" minToolsVersion="9.0"/>
            <capability name="System colors in document resources" minToolsVersion="11.0"/>
            <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
        </dependencies>
        <scenes>
            <!--View Controller-->
            <scene sceneID="R32-dA-683">
                <objects>
                    <viewController id="vD2-wr-GKn" sceneMemberID="viewController">
                        <view key="view" contentMode="scaleToFill" id="nx6-KC-Ism">
                            <rect key="frame" x="0.0" y="0.0" width="320" height="568"/>
                            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                            <subviews>
                                <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="iRw-uR-kHf">
                                    <rect key="frame" x="29" y="80" width="262" height="200"/>
                                    <subviews>
                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="These are NOT in a stack view." textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2gt-3M-hxU" userLabel="TopLabel">
                                            <rect key="frame" x="12" y="12" width="238" height="57.5"/>
                                            <color key="backgroundColor" red="0.66847345069999997" green="0.96944552660000005" blue="0.92393370939999997" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                                            <fontDescription key="fontDescription" type="system" pointSize="24"/>
                                            <nil key="textColor"/>
                                            <nil key="highlightedColor"/>
                                        </label>
                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="XQI-7T-dgO">
                                            <rect key="frame" x="12" y="89.5" width="238" height="34"/>
                                            <color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                            <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
                                            <state key="normal" title="Button 1"/>
                                        </button>
                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 1" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xM5-9u-L9O">
                                            <rect key="frame" x="12" y="143.5" width="238" height="29"/>
                                            <color key="backgroundColor" red="0.66847345069999997" green="0.96944552660000005" blue="0.92393370939999997" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                                            <fontDescription key="fontDescription" type="system" pointSize="24"/>
                                            <nil key="textColor"/>
                                            <nil key="highlightedColor"/>
                                        </label>
                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="8Xy-ME-rrn">
                                            <rect key="frame" x="12" y="192.5" width="238" height="34"/>
                                            <color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                            <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
                                            <state key="normal" title="Button 2"/>
                                        </button>
                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 2" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="cmo-bX-Wha">
                                            <rect key="frame" x="12" y="246.5" width="238" height="29"/>
                                            <color key="backgroundColor" red="0.66847345069999997" green="0.96944552660000005" blue="0.92393370939999997" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                                            <fontDescription key="fontDescription" type="system" pointSize="24"/>
                                            <nil key="textColor"/>
                                            <nil key="highlightedColor"/>
                                        </label>
                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="oJQ-EN-Pc2">
                                            <rect key="frame" x="12" y="295.5" width="238" height="34"/>
                                            <color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                            <inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="2.2250738585072014e-308" maxY="0.0"/>
                                            <state key="normal" title="Button 3"/>
                                        </button>
                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label 3" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qbm-Ls-5bH">
                                            <rect key="frame" x="12" y="349.5" width="238" height="29"/>
                                            <color key="backgroundColor" red="0.66847345069999997" green="0.96944552660000005" blue="0.92393370939999997" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                                            <fontDescription key="fontDescription" type="system" pointSize="24"/>
                                            <nil key="textColor"/>
                                            <nil key="highlightedColor"/>
                                        </label>
                                    </subviews>
                                    <constraints>
                                        <constraint firstItem="XQI-7T-dgO" firstAttribute="top" secondItem="2gt-3M-hxU" secondAttribute="bottom" constant="20" id="1JB-jn-Y1A"/>
                                        <constraint firstItem="8Xy-ME-rrn" firstAttribute="trailing" secondItem="2gt-3M-hxU" secondAttribute="trailing" id="5xk-GB-AXw"/>
                                        <constraint firstItem="qbm-Ls-5bH" firstAttribute="leading" secondItem="2gt-3M-hxU" secondAttribute="leading" id="Fvr-yK-lDT"/>
                                        <constraint firstAttribute="height" constant="200" id="Ihy-yc-MRl"/>
                                        <constraint firstItem="cmo-bX-Wha" firstAttribute="top" secondItem="8Xy-ME-rrn" secondAttribute="bottom" constant="20" id="Iin-6N-3gO"/>
                                        <constraint firstItem="xM5-9u-L9O" firstAttribute="top" secondItem="XQI-7T-dgO" secondAttribute="bottom" constant="20" id="J9M-zb-NzA"/>
                                        <constraint firstItem="qbm-Ls-5bH" firstAttribute="trailing" secondItem="2gt-3M-hxU" secondAttribute="trailing" id="Kde-rB-mb0"/>
                                        <constraint firstItem="2gt-3M-hxU" firstAttribute="top" secondItem="QXL-qb-619" secondAttribute="top" constant="12" id="Ntt-xH-QjE"/>
                                        <constraint firstItem="8Xy-ME-rrn" firstAttribute="top" secondItem="xM5-9u-L9O" secondAttribute="bottom" constant="20" id="Pwf-RD-jiR"/>
                                        <constraint firstItem="qbm-Ls-5bH" firstAttribute="bottom" secondItem="QXL-qb-619" secondAttribute="bottom" constant="-12" id="Svr-fK-RCS"/>
                                        <constraint firstItem="cmo-bX-Wha" firstAttribute="trailing" secondItem="2gt-3M-hxU" secondAttribute="trailing" id="Ybg-lo-eZf"/>
                                        <constraint firstItem="xM5-9u-L9O" firstAttribute="leading" secondItem="2gt-3M-hxU" secondAttribute="leading" id="cG2-4v-Nhr"/>
                                        <constraint firstItem="8Xy-ME-rrn" firstAttribute="leading" secondItem="2gt-3M-hxU" secondAttribute="leading" id="ckZ-hn-bLA"/>
                                        <constraint firstItem="XQI-7T-dgO" firstAttribute="leading" secondItem="2gt-3M-hxU" secondAttribute="leading" id="ddl-OY-kTY"/>
                                        <constraint firstItem="oJQ-EN-Pc2" firstAttribute="trailing" secondItem="2gt-3M-hxU" secondAttribute="trailing" id="eLH-pR-rdE"/>
                                        <constraint firstItem="2gt-3M-hxU" firstAttribute="trailing" secondItem="QXL-qb-619" secondAttribute="trailing" constant="12" id="ePZ-Uj-mk4"/>
                                        <constraint firstItem="XQI-7T-dgO" firstAttribute="trailing" secondItem="2gt-3M-hxU" secondAttribute="trailing" id="hIQ-js-aEj"/>
                                        <constraint firstItem="qbm-Ls-5bH" firstAttribute="top" secondItem="oJQ-EN-Pc2" secondAttribute="bottom" constant="20" id="jNx-LZ-ynL"/>
                                        <constraint firstItem="oJQ-EN-Pc2" firstAttribute="leading" secondItem="2gt-3M-hxU" secondAttribute="leading" id="kw8-Ms-6YK"/>
                                        <constraint firstItem="2gt-3M-hxU" firstAttribute="width" secondItem="Qga-bs-KPf" secondAttribute="width" constant="-24" id="pNe-nW-Yzd"/>
                                        <constraint firstItem="xM5-9u-L9O" firstAttribute="trailing" secondItem="2gt-3M-hxU" secondAttribute="trailing" id="pUa-cV-nnJ"/>
                                        <constraint firstItem="cmo-bX-Wha" firstAttribute="leading" secondItem="2gt-3M-hxU" secondAttribute="leading" id="qNj-RD-4sl"/>
                                        <constraint firstItem="2gt-3M-hxU" firstAttribute="leading" secondItem="QXL-qb-619" secondAttribute="leading" constant="12" id="qXU-fl-OTt"/>
                                        <constraint firstItem="oJQ-EN-Pc2" firstAttribute="top" secondItem="cmo-bX-Wha" secondAttribute="bottom" constant="20" id="ucE-MC-AnG"/>
                                    </constraints>
                                    <viewLayoutGuide key="contentLayoutGuide" id="QXL-qb-619"/>
                                    <viewLayoutGuide key="frameLayoutGuide" id="Qga-bs-KPf"/>
                                </scrollView>
                            </subviews>
                            <viewLayoutGuide key="safeArea" id="OhM-Cg-QZj"/>
                            <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                            <constraints>
                                <constraint firstItem="iRw-uR-kHf" firstAttribute="top" secondItem="OhM-Cg-QZj" secondAttribute="top" constant="80" id="EH1-J3-Hha"/>
                                <constraint firstItem="iRw-uR-kHf" firstAttribute="leading" secondItem="OhM-Cg-QZj" secondAttribute="leading" constant="29" id="LKa-pv-cz5"/>
                                <constraint firstAttribute="trailing" secondItem="iRw-uR-kHf" secondAttribute="trailing" constant="29" id="xW2-T3-k3K"/>
                            </constraints>
                        </view>
                    </viewController>
                    <placeholder placeholderIdentifier="IBFirstResponder" id="1GU-I7-lw5" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
                </objects>
                <point key="canvasLocation" x="-789.375" y="214.43661971830986"/>
            </scene>
        </scenes>
        <resources>
            <systemColor name="systemBackgroundColor">
                <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
            </systemColor>
        </resources>
    </document>