UIScrollView 中具有一些复杂条件的动态大小的 UIImageView
Dynamic sized UIImageView in UIScrollView with some complex conditions
如果我想创建这种布局，应该如何配置 AutoLayouts？或者让我知道是否仅靠 AutoLayout 是不可能的。
[UIView]
[UIScrollView]
[UIImageView]
[UILabel]
[UIButton]
我想实现的条件：
- UIImageView:
- 宽度:高度=1:1（纵横比=1:1）
- 宽度 <= UIView.width（最大宽度）
- 宽度 >= UIView.width*70%（最小宽度）
- 如果屏幕尺寸足够大，UIImageView 应该扩展到最大宽度并且不需要滚动。
- 如果屏幕尺寸不够大但可以在不滚动的情况下以最小宽度显示，UIImageView 应该缩小到最小宽度并且不需要滚动（即所有子视图显示时没有任何滚动条）。
- 如果屏幕尺寸不够大并且即使 UIImageView 缩小到最小宽度也需要滚动，UIImageView 应该缩小到最小宽度并且需要滚动（即不是所有子视图显示时没有任何滚动条）。
这可能对你有用...
有点难以解释所有内容，但您应该能够遵循图像中的限制条件。您唯一看不到的是 multi-line 标签必须将其 Content Compression Resistance Priority 设置为 Required (1000)。
想法是设置具有特定优先级值的约束，因此 auto-layout 将 尝试 使图像视图宽度 - 在 998 优先级 - 一样宽作为滚动视图，但随着其下方内容的增长，允许它缩小到最小宽度 70%。当它达到 70% 时，它不会变小，图像视图 + 标签 + 按钮的组合高度将迫使 "content" 视图垂直扩展，因为它有 999 的高度限制.
这里标签有7行文字，字体大小为18：
下面是字体大小增加到 28 后的样子 - 请注意图像视图现在 less-than 滚动视图的全宽：
现在，随着字体大小增加到 36，我们看到图像视图的最小宽度为 70%，并且按钮已被向下推过滚动视图框架的底部（所以一切都会滚动）：
这是 Storyboard 的来源 - 试一试 font-size and/or 标签中的文本数量以查看它是否有效：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="eB4-FG-006">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="cKl-8C-enU">
<objects>
<viewController id="eB4-FG-006" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="qMY-Qc-gio">
<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="q6G-7e-kz1">
<rect key="frame" x="20" y="60" width="335" height="567"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mbq-g1-m6Z" userLabel="ContentView">
<rect key="frame" x="0.0" y="0.0" width="335" height="567"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="N7z-eO-cci">
<rect key="frame" x="0.0" y="0.0" width="335" height="335"/>
<color key="backgroundColor" red="0.0" green="0.97680455450000003" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="N7z-eO-cci" secondAttribute="height" multiplier="1:1" id="3Za-Q8-IFq"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="1000" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Pp5-EQ-8Vh" userLabel="Multi-LineLabel">
<rect key="frame" x="142.5" y="343" width="50" height="150.5"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<string key="text">Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7</string>
<fontDescription key="fontDescription" type="system" pointSize="18"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<button opaque="NO" contentMode="scaleToFill" verticalCompressionResistancePriority="1000" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="rg8-I7-3hZ">
<rect key="frame" x="144.5" y="501.5" width="46" height="30"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="30" id="NZU-hx-0M5"/>
</constraints>
<state key="normal" title="Button"/>
</button>
</subviews>
<color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="rg8-I7-3hZ" firstAttribute="top" secondItem="Pp5-EQ-8Vh" secondAttribute="bottom" constant="8" id="6c5-vJ-c8B"/>
<constraint firstItem="rg8-I7-3hZ" firstAttribute="centerX" secondItem="mbq-g1-m6Z" secondAttribute="centerX" id="C6W-uG-Irk"/>
<constraint firstItem="Pp5-EQ-8Vh" firstAttribute="centerX" secondItem="mbq-g1-m6Z" secondAttribute="centerX" id="MDd-eI-O2X"/>
<constraint firstItem="Pp5-EQ-8Vh" firstAttribute="top" secondItem="N7z-eO-cci" secondAttribute="bottom" constant="8" id="Ozv-Hn-EbX"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="top" secondItem="mbq-g1-m6Z" secondAttribute="top" id="Qbn-EK-zhn"/>
<constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="rg8-I7-3hZ" secondAttribute="bottom" constant="8" id="XRT-bz-2bI"/>
<constraint firstItem="rg8-I7-3hZ" firstAttribute="top" secondItem="Pp5-EQ-8Vh" secondAttribute="bottom" constant="8" id="bny-1w-xOv"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="width" relation="greaterThanOrEqual" secondItem="mbq-g1-m6Z" secondAttribute="width" multiplier="0.7" id="bsP-M1-7uP"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="width" secondItem="mbq-g1-m6Z" secondAttribute="width" priority="998" id="fr8-4U-00h"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="centerX" secondItem="mbq-g1-m6Z" secondAttribute="centerX" id="hVh-Ld-mDS"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="mbq-g1-m6Z" secondAttribute="trailing" id="Fbg-Dx-idJ"/>
<constraint firstAttribute="bottom" secondItem="mbq-g1-m6Z" secondAttribute="bottom" id="Hrx-mL-t1p"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="top" secondItem="q6G-7e-kz1" secondAttribute="top" id="La2-Bo-p6J"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="leading" secondItem="q6G-7e-kz1" secondAttribute="leading" id="S8w-du-yf0"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="height" secondItem="q6G-7e-kz1" secondAttribute="height" priority="999" id="lWB-wI-t5Q"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="width" secondItem="q6G-7e-kz1" secondAttribute="width" id="ynr-jB-Phr"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="ASm-Jv-0JK" firstAttribute="trailing" secondItem="q6G-7e-kz1" secondAttribute="trailing" constant="20" id="27b-fv-IjT"/>
<constraint firstItem="q6G-7e-kz1" firstAttribute="leading" secondItem="ASm-Jv-0JK" secondAttribute="leading" constant="20" id="4sv-oj-8jc"/>
<constraint firstItem="q6G-7e-kz1" firstAttribute="top" secondItem="ASm-Jv-0JK" secondAttribute="top" constant="40" id="KKa-P9-1oI"/>
<constraint firstItem="ASm-Jv-0JK" firstAttribute="bottom" secondItem="q6G-7e-kz1" secondAttribute="bottom" constant="40" id="b3R-Aw-brw"/>
</constraints>
<viewLayoutGuide key="safeArea" id="ASm-Jv-0JK"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="zh5-Lh-ZPo" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="806" y="-161"/>
</scene>
</scenes>
</document>
如果我想创建这种布局，应该如何配置 AutoLayouts？或者让我知道是否仅靠 AutoLayout 是不可能的。
[UIView]
[UIScrollView]
[UIImageView]
[UILabel]
[UIButton]
我想实现的条件：
- UIImageView:
- 宽度:高度=1:1（纵横比=1:1）
- 宽度 <= UIView.width（最大宽度）
- 宽度 >= UIView.width*70%（最小宽度）
- 如果屏幕尺寸足够大，UIImageView 应该扩展到最大宽度并且不需要滚动。
- 如果屏幕尺寸不够大但可以在不滚动的情况下以最小宽度显示，UIImageView 应该缩小到最小宽度并且不需要滚动（即所有子视图显示时没有任何滚动条）。
- 如果屏幕尺寸不够大并且即使 UIImageView 缩小到最小宽度也需要滚动，UIImageView 应该缩小到最小宽度并且需要滚动（即不是所有子视图显示时没有任何滚动条）。
这可能对你有用...
有点难以解释所有内容，但您应该能够遵循图像中的限制条件。您唯一看不到的是 multi-line 标签必须将其 Content Compression Resistance Priority 设置为 Required (1000)。
想法是设置具有特定优先级值的约束，因此 auto-layout 将 尝试 使图像视图宽度 - 在 998 优先级 - 一样宽作为滚动视图，但随着其下方内容的增长，允许它缩小到最小宽度 70%。当它达到 70% 时，它不会变小，图像视图 + 标签 + 按钮的组合高度将迫使 "content" 视图垂直扩展，因为它有 999 的高度限制.
这里标签有7行文字，字体大小为18：
下面是字体大小增加到 28 后的样子 - 请注意图像视图现在 less-than 滚动视图的全宽：
现在，随着字体大小增加到 36，我们看到图像视图的最小宽度为 70%，并且按钮已被向下推过滚动视图框架的底部（所以一切都会滚动）：
这是 Storyboard 的来源 - 试一试 font-size and/or 标签中的文本数量以查看它是否有效：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="eB4-FG-006">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="cKl-8C-enU">
<objects>
<viewController id="eB4-FG-006" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="qMY-Qc-gio">
<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="q6G-7e-kz1">
<rect key="frame" x="20" y="60" width="335" height="567"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mbq-g1-m6Z" userLabel="ContentView">
<rect key="frame" x="0.0" y="0.0" width="335" height="567"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="N7z-eO-cci">
<rect key="frame" x="0.0" y="0.0" width="335" height="335"/>
<color key="backgroundColor" red="0.0" green="0.97680455450000003" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="N7z-eO-cci" secondAttribute="height" multiplier="1:1" id="3Za-Q8-IFq"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" verticalCompressionResistancePriority="1000" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Pp5-EQ-8Vh" userLabel="Multi-LineLabel">
<rect key="frame" x="142.5" y="343" width="50" height="150.5"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<string key="text">Line 1
Line 2
Line 3
Line 4
Line 5
Line 6
Line 7</string>
<fontDescription key="fontDescription" type="system" pointSize="18"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<button opaque="NO" contentMode="scaleToFill" verticalCompressionResistancePriority="1000" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="rg8-I7-3hZ">
<rect key="frame" x="144.5" y="501.5" width="46" height="30"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="30" id="NZU-hx-0M5"/>
</constraints>
<state key="normal" title="Button"/>
</button>
</subviews>
<color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="rg8-I7-3hZ" firstAttribute="top" secondItem="Pp5-EQ-8Vh" secondAttribute="bottom" constant="8" id="6c5-vJ-c8B"/>
<constraint firstItem="rg8-I7-3hZ" firstAttribute="centerX" secondItem="mbq-g1-m6Z" secondAttribute="centerX" id="C6W-uG-Irk"/>
<constraint firstItem="Pp5-EQ-8Vh" firstAttribute="centerX" secondItem="mbq-g1-m6Z" secondAttribute="centerX" id="MDd-eI-O2X"/>
<constraint firstItem="Pp5-EQ-8Vh" firstAttribute="top" secondItem="N7z-eO-cci" secondAttribute="bottom" constant="8" id="Ozv-Hn-EbX"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="top" secondItem="mbq-g1-m6Z" secondAttribute="top" id="Qbn-EK-zhn"/>
<constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="rg8-I7-3hZ" secondAttribute="bottom" constant="8" id="XRT-bz-2bI"/>
<constraint firstItem="rg8-I7-3hZ" firstAttribute="top" secondItem="Pp5-EQ-8Vh" secondAttribute="bottom" constant="8" id="bny-1w-xOv"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="width" relation="greaterThanOrEqual" secondItem="mbq-g1-m6Z" secondAttribute="width" multiplier="0.7" id="bsP-M1-7uP"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="width" secondItem="mbq-g1-m6Z" secondAttribute="width" priority="998" id="fr8-4U-00h"/>
<constraint firstItem="N7z-eO-cci" firstAttribute="centerX" secondItem="mbq-g1-m6Z" secondAttribute="centerX" id="hVh-Ld-mDS"/>
</constraints>
</view>
</subviews>
<color key="backgroundColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="mbq-g1-m6Z" secondAttribute="trailing" id="Fbg-Dx-idJ"/>
<constraint firstAttribute="bottom" secondItem="mbq-g1-m6Z" secondAttribute="bottom" id="Hrx-mL-t1p"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="top" secondItem="q6G-7e-kz1" secondAttribute="top" id="La2-Bo-p6J"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="leading" secondItem="q6G-7e-kz1" secondAttribute="leading" id="S8w-du-yf0"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="height" secondItem="q6G-7e-kz1" secondAttribute="height" priority="999" id="lWB-wI-t5Q"/>
<constraint firstItem="mbq-g1-m6Z" firstAttribute="width" secondItem="q6G-7e-kz1" secondAttribute="width" id="ynr-jB-Phr"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="ASm-Jv-0JK" firstAttribute="trailing" secondItem="q6G-7e-kz1" secondAttribute="trailing" constant="20" id="27b-fv-IjT"/>
<constraint firstItem="q6G-7e-kz1" firstAttribute="leading" secondItem="ASm-Jv-0JK" secondAttribute="leading" constant="20" id="4sv-oj-8jc"/>
<constraint firstItem="q6G-7e-kz1" firstAttribute="top" secondItem="ASm-Jv-0JK" secondAttribute="top" constant="40" id="KKa-P9-1oI"/>
<constraint firstItem="ASm-Jv-0JK" firstAttribute="bottom" secondItem="q6G-7e-kz1" secondAttribute="bottom" constant="40" id="b3R-Aw-brw"/>
</constraints>
<viewLayoutGuide key="safeArea" id="ASm-Jv-0JK"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="zh5-Lh-ZPo" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="806" y="-161"/>
</scene>
</scenes>
</document>