滚动视图中的多行可编辑文本和图像填充全部 space

Multiline editable text and image in a scrollview filling all space

我正试图在 iOS 上实现一些在 Android 上很容易做到的事情,那就是有一个正常的约束屏幕但是如果在某些时候视图比屏幕高,那么它的行为就像一个滚动视图:

这就是我想要的但是 iOS:

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

  1. 这是正常情况下的样子。底部视图被限制在底部,EditText(在 iOS 上我会使用 UITextView 因为我需要多行可编辑文本)在顶部。

  2. 当文本字段变大时,它只是垂直扩展。

  3. 您也可以正常滚动。

我在 iOS 上尝试了很多东西,将视图限制为内容布局指南 and/or 到框架布局指南,但没有任何东西能像这样工作。总是有一个奇怪的行为或者它甚至不滚动...

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

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

这是它在 Storyboard/Interface Builder 中的样子:

  • .systemTeal 视图是滚动视图。
  • 黄色背景视图是文本视图。
  • 绿色背景视图只是另一种视图。

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

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

这是 运行 时间的样子:

这里是情节提要的源代码,因此您可以检查并试用(无需 ViewController 代码)。只需新建一个项目,右键单击默认的Main.storyboard、select 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>

编辑 - 评论后...

如果您希望“其他视图”固定在底部直到它需要滚动:

  • 在“holder”视图中嵌入文本视图和其他视图
  • 将持有者视图限制在内容布局指南中
  • 从文本视图底部限制“某些视图”顶部 >= 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>