滚动视图中的多行可编辑文本和图像填充所有空间答案

【问题标题】：Multiline editable text and image in a scrollview filling all space滚动视图中的多行可编辑文本和图像填充所有空间
【发布时间】：2021-08-31 09:27:11
【问题描述】：

我试图在 iOS 上实现在 Android 上很容易做到的事情，即拥有一个正常的受限屏幕，但如果在某些时候视图比屏幕高，那么它的行为就像一个滚动视图：

这是我想要的，但在 iOS 上：

（android 实现只是在带有fillViewport="true" 的ScrollView 中使用ConstraintLayout）

这是正常的样子。底部视图被限制在底部，而 EditText（在 iOS 上我会使用 UITextView，因为我需要多行可编辑文本）在顶部。
当文本字段增长时，它只会垂直扩展。
您也可以正常滚动。

我在 iOS 上尝试了很多东西，将视图限制在内容布局指南和/或框架布局指南中，但没有什么能与此完全一样。总是有一个奇怪的行为，或者它甚至不滚动......

【问题讨论】：

禁用滚动文本视图。如果您将文本视图（和其他 UI 元素）嵌入到滚动视图中，并且您的约束设置正确，则滚动视图的滚动是全自动的。
您是否使用 Storyboard 来布局您的视图？还是全部通过代码完成？
我已经禁用了 uitextview 滚动。我主要尝试在情节提要中做到这一点，但仍然得到奇怪的结果。如果您有一个类似于我所说的工作示例，您可以附上屏幕截图/代码。

标签： ios swift uikit scrollview fillviewport

【解决方案1】：

如果在 UITextView 上禁用滚动，它的高度将自动调整到内容的高度——即使在输入内容时也是如此。

正确设置约束后，包含文本视图的滚动视图将根据嵌入的子视图总高度自动启用/禁用滚动。

它在 Storyboard/Interface Builder 中的外观如下：

.systemTeal 视图是滚动视图。
黄色背景视图是文本视图。
绿色背景视图只是其他视图。

滚动视图被限制在 20 点的顶部/前导/尾随处，高度为 288。

文本视图和某些视图受限于滚动视图的内容布局指南，具有 12 点“填充”。

这是它在运行时的样子：

这里是 Storyboard 的源代码，因此您可以检查并试用它（不需要 ViewController 代码）。新建一个工程就行了，在默认的Main.storyboard上右键，选择Open As -> Source Code，把整个xml源码替换成如下：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="End-pl-wnP">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
        <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="GaN-aS-ajy">
            <objects>
                <viewController id="End-pl-wnP" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8Qt-g9-qT2">
                        <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="eZS-Cx-qYs" userLabel="TealScrollView">
                                <rect key="frame" x="20" y="20" width="335" height="288"/>
                                <subviews>
                                    <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" scrollEnabled="NO" text="This is the text view." textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="7Se-XO-OPS" userLabel="YellowTextView">
                                        <rect key="frame" x="12" y="12" width="311" height="45"/>
                                        <color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <color key="textColor" systemColor="labelColor"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="24"/>
                                        <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
                                    </textView>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Some View" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2Mx-yX-VZg" userLabel="GreenSomeView">
                                        <rect key="frame" x="47.5" y="77" width="240" height="60"/>
                                        <color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="width" constant="240" id="AqV-is-i0i"/>
                                            <constraint firstAttribute="height" constant="60" id="fff-dn-2i5"/>
                                        </constraints>
                                        <fontDescription key="fontDescription" type="system" pointSize="30"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemTealColor"/>
                                <constraints>
                                    <constraint firstItem="2Mx-yX-VZg" firstAttribute="centerX" secondItem="7Se-XO-OPS" secondAttribute="centerX" id="45Q-oe-nAR"/>
                                    <constraint firstItem="2Mx-yX-VZg" firstAttribute="bottom" secondItem="eBA-LY-1GE" secondAttribute="bottom" constant="-12" id="4NU-Uv-m9I"/>
                                    <constraint firstItem="7Se-XO-OPS" firstAttribute="leading" secondItem="eBA-LY-1GE" secondAttribute="leading" constant="12" id="BYn-bQ-6KV"/>
                                    <constraint firstItem="2Mx-yX-VZg" firstAttribute="top" secondItem="7Se-XO-OPS" secondAttribute="bottom" constant="20" id="Hzr-4N-5Ql"/>
                                    <constraint firstAttribute="height" constant="288" id="U0g-vv-Ze5"/>
                                    <constraint firstItem="7Se-XO-OPS" firstAttribute="width" secondItem="QZA-CN-WnC" secondAttribute="width" constant="-24" id="VPa-39-0aV"/>
                                    <constraint firstItem="7Se-XO-OPS" firstAttribute="trailing" secondItem="eBA-LY-1GE" secondAttribute="trailing" constant="12" id="ZVh-Fb-ig9"/>
                                    <constraint firstItem="7Se-XO-OPS" firstAttribute="top" secondItem="eBA-LY-1GE" secondAttribute="top" constant="12" id="kWx-ff-DeQ"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="eBA-LY-1GE"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="QZA-CN-WnC"/>
                            </scrollView>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="NOq-jz-yuG"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="eZS-Cx-qYs" firstAttribute="top" secondItem="NOq-jz-yuG" secondAttribute="top" constant="20" id="Oh5-z6-HeB"/>
                            <constraint firstItem="eZS-Cx-qYs" firstAttribute="leading" secondItem="NOq-jz-yuG" secondAttribute="leading" constant="20" id="ZeN-Gb-OvE"/>
                            <constraint firstItem="NOq-jz-yuG" firstAttribute="trailing" secondItem="eZS-Cx-qYs" secondAttribute="trailing" constant="20" id="bxt-As-NfZ"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="waK-s5-f38" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="341" y="155"/>
        </scene>
    </scenes>
    <resources>
        <systemColor name="labelColor">
            <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
        <systemColor name="systemTealColor">
            <color red="0.35294117647058826" green="0.78431372549019607" blue="0.98039215686274506" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
    </resources>
</document>

编辑 - 在 cmets...

如果你想让“其他视图”一直停留在底部直到它需要滚动：

将文本视图和其他视图嵌入到“持有者”视图中
将持有者视图约束到内容布局指南
从文本视图底部限制“某些视图”顶部 >= 20
将支架视图高度限制为框架布局指南高度（减去一些顶部和底部“填充”）
给出高度限制Priority: 250 (Default Low)

它的外观如下：

这是修改后的故事板源代码：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="End-pl-wnP">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
        <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="GaN-aS-ajy">
            <objects>
                <viewController id="End-pl-wnP" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="8Qt-g9-qT2">
                        <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="eZS-Cx-qYs" userLabel="TealScrollView">
                                <rect key="frame" x="20" y="20" width="335" height="288"/>
                                <subviews>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="TZH-n0-mbL" userLabel="OrangeHolderView">
                                        <rect key="frame" x="12" y="12" width="311" height="264"/>
                                        <subviews>
                                            <textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" scrollEnabled="NO" text="This is the text view." textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="7Se-XO-OPS" userLabel="YellowTextView">
                                                <rect key="frame" x="0.0" y="0.0" width="311" height="45"/>
                                                <color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <color key="textColor" systemColor="labelColor"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="24"/>
                                                <textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
                                            </textView>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Some View" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2Mx-yX-VZg" userLabel="GreenSomeView">
                                                <rect key="frame" x="35.5" y="204" width="240" height="60"/>
                                                <color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="width" constant="240" id="AqV-is-i0i"/>
                                                    <constraint firstAttribute="height" constant="60" id="fff-dn-2i5"/>
                                                </constraints>
                                                <fontDescription key="fontDescription" type="system" pointSize="30"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                        </subviews>
                                        <color key="backgroundColor" systemColor="systemOrangeColor"/>
                                        <constraints>
                                            <constraint firstItem="7Se-XO-OPS" firstAttribute="leading" secondItem="TZH-n0-mbL" secondAttribute="leading" id="2Qh-gf-Aqd"/>
                                            <constraint firstItem="7Se-XO-OPS" firstAttribute="top" secondItem="TZH-n0-mbL" secondAttribute="top" id="34Q-R4-aJ7"/>
                                            <constraint firstItem="2Mx-yX-VZg" firstAttribute="centerX" secondItem="7Se-XO-OPS" secondAttribute="centerX" id="Leg-dA-7qH"/>
                                            <constraint firstAttribute="bottom" secondItem="2Mx-yX-VZg" secondAttribute="bottom" id="RxT-uL-vKL"/>
                                            <constraint firstAttribute="trailing" secondItem="7Se-XO-OPS" secondAttribute="trailing" id="UFn-D6-4fs"/>
                                            <constraint firstItem="2Mx-yX-VZg" firstAttribute="top" relation="greaterThanOrEqual" secondItem="7Se-XO-OPS" secondAttribute="bottom" constant="20" id="Vfv-7A-o9l"/>
                                        </constraints>
                                    </view>
                                </subviews>
                                <color key="backgroundColor" systemColor="systemTealColor"/>
                                <constraints>
                                    <constraint firstItem="TZH-n0-mbL" firstAttribute="width" secondItem="QZA-CN-WnC" secondAttribute="width" constant="-24" id="F0n-tQ-VZs"/>
                                    <constraint firstItem="TZH-n0-mbL" firstAttribute="trailing" secondItem="eBA-LY-1GE" secondAttribute="trailing" constant="-12" id="Qzd-kt-eRV"/>
                                    <constraint firstAttribute="height" constant="288" id="U0g-vv-Ze5"/>
                                    <constraint firstItem="TZH-n0-mbL" firstAttribute="leading" secondItem="eBA-LY-1GE" secondAttribute="leading" constant="12" id="Xcd-EH-rvM"/>
                                    <constraint firstItem="TZH-n0-mbL" firstAttribute="height" secondItem="QZA-CN-WnC" secondAttribute="height" priority="250" constant="-24" id="eWO-d1-VMo"/>
                                    <constraint firstItem="TZH-n0-mbL" firstAttribute="top" secondItem="eBA-LY-1GE" secondAttribute="top" constant="12" id="jg5-71-Hyn"/>
                                    <constraint firstItem="TZH-n0-mbL" firstAttribute="bottom" secondItem="eBA-LY-1GE" secondAttribute="bottom" constant="-12" id="yc1-tC-Xsw"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="eBA-LY-1GE"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="QZA-CN-WnC"/>
                            </scrollView>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="NOq-jz-yuG"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="eZS-Cx-qYs" firstAttribute="top" secondItem="NOq-jz-yuG" secondAttribute="top" constant="20" id="Oh5-z6-HeB"/>
                            <constraint firstItem="eZS-Cx-qYs" firstAttribute="leading" secondItem="NOq-jz-yuG" secondAttribute="leading" constant="20" id="ZeN-Gb-OvE"/>
                            <constraint firstItem="NOq-jz-yuG" firstAttribute="trailing" secondItem="eZS-Cx-qYs" secondAttribute="trailing" constant="20" id="bxt-As-NfZ"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="waK-s5-f38" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="341" y="155"/>
        </scene>
    </scenes>
    <resources>
        <systemColor name="labelColor">
            <color white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
        <systemColor name="systemOrangeColor">
            <color red="1" green="0.58431372549019611" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
        <systemColor name="systemTealColor">
            <color red="0.35294117647058826" green="0.78431372549019607" blue="0.98039215686274506" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
    </resources>
</document>

【讨论】：

我知道这一点。但正如我所说，我想要的是底部视图位于底部，而不仅仅是文本视图下方。如果视图不需要滚动，它将被锚定在底部，当顶部视图增长时，它将像图像中一样。
@DanielIllescas - 供将来参考，如果您提供有关您正在尝试做的事情的清晰、完整的详细信息，您将获得更好的答案。请参阅我的答案的编辑。
我提供了 3 张截图。