我可以在 xcode 12 上制作滚动视图而不指定内容高度吗
Can I make a scrollview on xcode 12 without specifying content height
好的,我是一个相对较新的 Swift 开发人员,我刚刚开始学习滚动视图。我见过的所有教程总是为内容视图指定一个特定的高度以激活滚动视图。
有没有办法在不指定高度的情况下制作滚动视图。在更大的屏幕上检查内容视图实际上切断了滚动视图,这不是好的 UI 设计。
Step-by-Step...
- 向故事板添加视图控制器
- 向视图控制器添加滚动视图
- 用 20 点顶部/底部/前导/尾随约束
- 向滚动视图添加两个标签 - 一个靠近 top-left,另一个靠近 bottom-right
- 将第一个标签 Top: 8 和 Leading: 8 约束到滚动视图的 Content Layout Guide
- 将第二个标签 Bottom: 8 和 Trailing: 8 约束到滚动视图的 Content Layout Guide
- 约束第一个标签尾随的第二个标签
- 将第二个标签顶部约束到第一个标签底部
- 将 that 约束常量更改为较大的数字 - 例如 1200
如果你做对了,它应该看起来像这样:
您看不到 Bottom-Right-Label,因为它位于顶部标签下方 1200 磅(因此,它位于视图底部之外)。
运行 应用程序,您将拥有垂直滚动视图。
这是该情节提要的来源,因此您可以直接查看它:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="uUy-L1-OnG">
<device id="retina3_5" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
<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="Rrc-66-RYL">
<objects>
<viewController id="uUy-L1-OnG" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="39G-hU-x3e">
<rect key="frame" x="0.0" y="0.0" width="320" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2QQ-od-V3W">
<rect key="frame" x="20" y="20" width="280" height="440"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Bottom-Right Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6dS-VR-QcN">
<rect key="frame" x="131" y="1229" width="149" height="21"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Top-Left Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="KrQ-5T-fSH">
<rect key="frame" x="8" y="8" width="112" height="21"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.46202266219999999" green="0.83828371759999998" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="j0p-3A-LQb" firstAttribute="bottom" secondItem="6dS-VR-QcN" secondAttribute="bottom" constant="8" id="1yq-cx-1GE"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="top" secondItem="KrQ-5T-fSH" secondAttribute="bottom" constant="1200" id="BpQ-El-04G"/>
<constraint firstItem="KrQ-5T-fSH" firstAttribute="top" secondItem="j0p-3A-LQb" secondAttribute="top" constant="8" id="JhA-o5-VKG"/>
<constraint firstItem="KrQ-5T-fSH" firstAttribute="leading" secondItem="j0p-3A-LQb" secondAttribute="leading" constant="8" id="axd-l2-1aY"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="trailing" secondItem="j0p-3A-LQb" secondAttribute="trailing" constant="8" id="han-0E-Nx6"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="leading" secondItem="KrQ-5T-fSH" secondAttribute="trailing" constant="11" id="vB2-hP-NmI"/>
</constraints>
<viewLayoutGuide key="contentLayoutGuide" id="j0p-3A-LQb"/>
<viewLayoutGuide key="frameLayoutGuide" id="wx7-6c-6AG"/>
</scrollView>
</subviews>
<viewLayoutGuide key="safeArea" id="5O3-dC-9nE"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="2QQ-od-V3W" firstAttribute="top" secondItem="5O3-dC-9nE" secondAttribute="top" constant="20" id="1P9-kk-0OW"/>
<constraint firstItem="2QQ-od-V3W" firstAttribute="leading" secondItem="5O3-dC-9nE" secondAttribute="leading" constant="20" id="Isk-wd-i1O"/>
<constraint firstItem="5O3-dC-9nE" firstAttribute="bottom" secondItem="2QQ-od-V3W" secondAttribute="bottom" constant="20" id="dhp-c0-XAb"/>
<constraint firstItem="5O3-dC-9nE" firstAttribute="trailing" secondItem="2QQ-od-V3W" secondAttribute="trailing" constant="20" id="eYJ-in-3Lv"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iqc-7R-rKj" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-416.25" y="128.75"/>
</scene>
</scenes>
<resources>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
好的,我是一个相对较新的 Swift 开发人员,我刚刚开始学习滚动视图。我见过的所有教程总是为内容视图指定一个特定的高度以激活滚动视图。 有没有办法在不指定高度的情况下制作滚动视图。在更大的屏幕上检查内容视图实际上切断了滚动视图,这不是好的 UI 设计。
Step-by-Step...
- 向故事板添加视图控制器
- 向视图控制器添加滚动视图
- 用 20 点顶部/底部/前导/尾随约束
- 向滚动视图添加两个标签 - 一个靠近 top-left,另一个靠近 bottom-right
- 将第一个标签 Top: 8 和 Leading: 8 约束到滚动视图的 Content Layout Guide
- 将第二个标签 Bottom: 8 和 Trailing: 8 约束到滚动视图的 Content Layout Guide
- 约束第一个标签尾随的第二个标签
- 将第二个标签顶部约束到第一个标签底部
- 将 that 约束常量更改为较大的数字 - 例如 1200
如果你做对了,它应该看起来像这样:
您看不到 Bottom-Right-Label,因为它位于顶部标签下方 1200 磅(因此,它位于视图底部之外)。
运行 应用程序,您将拥有垂直滚动视图。
这是该情节提要的来源,因此您可以直接查看它:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="uUy-L1-OnG">
<device id="retina3_5" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
<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="Rrc-66-RYL">
<objects>
<viewController id="uUy-L1-OnG" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="39G-hU-x3e">
<rect key="frame" x="0.0" y="0.0" width="320" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2QQ-od-V3W">
<rect key="frame" x="20" y="20" width="280" height="440"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Bottom-Right Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6dS-VR-QcN">
<rect key="frame" x="131" y="1229" width="149" height="21"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Top-Left Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="KrQ-5T-fSH">
<rect key="frame" x="8" y="8" width="112" height="21"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.46202266219999999" green="0.83828371759999998" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="j0p-3A-LQb" firstAttribute="bottom" secondItem="6dS-VR-QcN" secondAttribute="bottom" constant="8" id="1yq-cx-1GE"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="top" secondItem="KrQ-5T-fSH" secondAttribute="bottom" constant="1200" id="BpQ-El-04G"/>
<constraint firstItem="KrQ-5T-fSH" firstAttribute="top" secondItem="j0p-3A-LQb" secondAttribute="top" constant="8" id="JhA-o5-VKG"/>
<constraint firstItem="KrQ-5T-fSH" firstAttribute="leading" secondItem="j0p-3A-LQb" secondAttribute="leading" constant="8" id="axd-l2-1aY"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="trailing" secondItem="j0p-3A-LQb" secondAttribute="trailing" constant="8" id="han-0E-Nx6"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="leading" secondItem="KrQ-5T-fSH" secondAttribute="trailing" constant="11" id="vB2-hP-NmI"/>
</constraints>
<viewLayoutGuide key="contentLayoutGuide" id="j0p-3A-LQb"/>
<viewLayoutGuide key="frameLayoutGuide" id="wx7-6c-6AG"/>
</scrollView>
</subviews>
<viewLayoutGuide key="safeArea" id="5O3-dC-9nE"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="2QQ-od-V3W" firstAttribute="top" secondItem="5O3-dC-9nE" secondAttribute="top" constant="20" id="1P9-kk-0OW"/>
<constraint firstItem="2QQ-od-V3W" firstAttribute="leading" secondItem="5O3-dC-9nE" secondAttribute="leading" constant="20" id="Isk-wd-i1O"/>
<constraint firstItem="5O3-dC-9nE" firstAttribute="bottom" secondItem="2QQ-od-V3W" secondAttribute="bottom" constant="20" id="dhp-c0-XAb"/>
<constraint firstItem="5O3-dC-9nE" firstAttribute="trailing" secondItem="2QQ-od-V3W" secondAttribute="trailing" constant="20" id="eYJ-in-3Lv"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iqc-7R-rKj" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-416.25" y="128.75"/>
</scene>
</scenes>
<resources>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>