自动布局 - 制作 UITextView,而不是 UIImageView,拉伸容器视图
Auto Layout - Make UITextView, not UIImageView, stretch the container view
我有3个观点:
- a
UIImageView
(空白,无图像集)
- a
UITextView
isScrollEnabled
设置为 false
- 一个
UIView
容器(灰色背景),其中包含 UIImageView
和 UITextView
我试图让容器根据 UITextView
的内容调整大小。它运行良好——但是一旦我设置图像,容器似乎就会根据 UIImageView
.
调整大小
Shorter text
Longer text
After setting image
我确实希望 UIImageView
增长并且 填充 容器视图的高度。我只是不希望它 拉伸 容器视图。那是 UITextView
的工作。这是我的约束的样子:
故事板代码:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina6_1" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
<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="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="AutoLayoutImage" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="6rW-8U-sdf" userLabel="Container View">
<rect key="frame" x="0.0" y="197.5" width="414" height="501"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="a4K-HY-RKq">
<rect key="frame" x="0.0" y="0.0" width="150" height="501"/>
<constraints>
<constraint firstAttribute="width" constant="150" id="Pim-0S-hxs"/>
</constraints>
</imageView>
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" scrollEnabled="NO" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="9HO-GD-av1">
<rect key="frame" x="150" y="0.0" width="264" height="501"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<mutableString key="text">Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.</mutableString>
<color key="textColor" systemColor="labelColor"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
</textView>
</subviews>
<color key="backgroundColor" systemColor="systemGrayColor"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="a4K-HY-RKq" secondAttribute="bottom" id="1sx-AM-Fqw"/>
<constraint firstItem="9HO-GD-av1" firstAttribute="leading" secondItem="a4K-HY-RKq" secondAttribute="trailing" id="Jyx-tB-n4x"/>
<constraint firstItem="9HO-GD-av1" firstAttribute="top" secondItem="6rW-8U-sdf" secondAttribute="top" id="QxL-cJ-Jed"/>
<constraint firstAttribute="trailing" secondItem="9HO-GD-av1" secondAttribute="trailing" id="UGU-yx-lKn"/>
<constraint firstItem="a4K-HY-RKq" firstAttribute="top" secondItem="6rW-8U-sdf" secondAttribute="top" id="WWU-dr-LHm"/>
<constraint firstAttribute="bottom" secondItem="9HO-GD-av1" secondAttribute="bottom" id="fuH-5Z-rGP"/>
<constraint firstItem="a4K-HY-RKq" firstAttribute="leading" secondItem="6rW-8U-sdf" secondAttribute="leading" id="wdj-Os-8pf"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="6rW-8U-sdf" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="Veu-vt-Hmb"/>
<constraint firstItem="6rW-8U-sdf" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" id="hXI-pR-7IQ"/>
<constraint firstItem="6rW-8U-sdf" firstAttribute="trailing" secondItem="8bC-Xf-vdC" secondAttribute="trailing" id="zQE-bH-DL3"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="131.8840579710145" y="114.50892857142857"/>
</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="systemGrayColor">
<color red="0.55686274509803924" green="0.55686274509803924" blue="0.57647058823529407" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
And here's the image that I used。如何根据 UITextView
而不是 UIImageView
调整容器大小?
您应该将图像视图的垂直内容压缩阻力优先级设置为低于文本视图的垂直内容压缩优先级。例如,我将前者设置为“低”,将后者设置为“高”,并且有效。
图像视图:
文本视图:
在我看来,您应该使用约束来解决您的问题!
设置文本视图约束高度等于视图(或设置等于顶部和底部)高度约束并设置静态图像视图约束高度(例如:imageView 高度约束 = 250)
我有3个观点:
- a
UIImageView
(空白,无图像集) - a
UITextView
isScrollEnabled
设置为 false - 一个
UIView
容器(灰色背景),其中包含UIImageView
和UITextView
我试图让容器根据 UITextView
的内容调整大小。它运行良好——但是一旦我设置图像,容器似乎就会根据 UIImageView
.
Shorter text | Longer text | After setting image |
---|---|---|
我确实希望 UIImageView
增长并且 填充 容器视图的高度。我只是不希望它 拉伸 容器视图。那是 UITextView
的工作。这是我的约束的样子:
故事板代码:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina6_1" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
<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="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="AutoLayoutImage" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="6rW-8U-sdf" userLabel="Container View">
<rect key="frame" x="0.0" y="197.5" width="414" height="501"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="a4K-HY-RKq">
<rect key="frame" x="0.0" y="0.0" width="150" height="501"/>
<constraints>
<constraint firstAttribute="width" constant="150" id="Pim-0S-hxs"/>
</constraints>
</imageView>
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" scrollEnabled="NO" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="9HO-GD-av1">
<rect key="frame" x="150" y="0.0" width="264" height="501"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<mutableString key="text">Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.Lorem ipsum dolor sit er elit lamet, consectetaur cillium adipisicing pecu, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Nam liber te conscient to factor tum poen legum odioque civiuda.</mutableString>
<color key="textColor" systemColor="labelColor"/>
<fontDescription key="fontDescription" type="system" pointSize="14"/>
<textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
</textView>
</subviews>
<color key="backgroundColor" systemColor="systemGrayColor"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="a4K-HY-RKq" secondAttribute="bottom" id="1sx-AM-Fqw"/>
<constraint firstItem="9HO-GD-av1" firstAttribute="leading" secondItem="a4K-HY-RKq" secondAttribute="trailing" id="Jyx-tB-n4x"/>
<constraint firstItem="9HO-GD-av1" firstAttribute="top" secondItem="6rW-8U-sdf" secondAttribute="top" id="QxL-cJ-Jed"/>
<constraint firstAttribute="trailing" secondItem="9HO-GD-av1" secondAttribute="trailing" id="UGU-yx-lKn"/>
<constraint firstItem="a4K-HY-RKq" firstAttribute="top" secondItem="6rW-8U-sdf" secondAttribute="top" id="WWU-dr-LHm"/>
<constraint firstAttribute="bottom" secondItem="9HO-GD-av1" secondAttribute="bottom" id="fuH-5Z-rGP"/>
<constraint firstItem="a4K-HY-RKq" firstAttribute="leading" secondItem="6rW-8U-sdf" secondAttribute="leading" id="wdj-Os-8pf"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="6rW-8U-sdf" firstAttribute="centerY" secondItem="8bC-Xf-vdC" secondAttribute="centerY" id="Veu-vt-Hmb"/>
<constraint firstItem="6rW-8U-sdf" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" id="hXI-pR-7IQ"/>
<constraint firstItem="6rW-8U-sdf" firstAttribute="trailing" secondItem="8bC-Xf-vdC" secondAttribute="trailing" id="zQE-bH-DL3"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="131.8840579710145" y="114.50892857142857"/>
</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="systemGrayColor">
<color red="0.55686274509803924" green="0.55686274509803924" blue="0.57647058823529407" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
And here's the image that I used。如何根据 UITextView
而不是 UIImageView
调整容器大小?
您应该将图像视图的垂直内容压缩阻力优先级设置为低于文本视图的垂直内容压缩优先级。例如,我将前者设置为“低”,将后者设置为“高”,并且有效。
图像视图:
文本视图:
在我看来,您应该使用约束来解决您的问题! 设置文本视图约束高度等于视图(或设置等于顶部和底部)高度约束并设置静态图像视图约束高度(例如:imageView 高度约束 = 250)