Динамический размер UIImageView в UIScrollView с некоторыми сложными условиями

Question

Как мне настроить AutoLayouts, если я хочу создать макет такого типа? Или дайте мне знать, если это невозможно только с помощью AutoLayout.

[UIView]
  [UIScrollView]
    [UIImageView]
    [UILabel]
    [UIButton]

Условия, которые я хочу реализовать:

• UIImageView:
  • ширина: высота = 1: 1 (соотношение сторон = 1: 1)
  • ширина <= UIView.width (Макс. Ширина) </li>
  • ширина> = UIView.width * 70% (минимальная ширина)
• Если размер экрана достаточно велик, UIImageView должен расшириться до максимальной ширины и прокрутка не требуется.
• Если размер экрана недостаточно велик , но его можно отобразить в его минимальной ширине без прокрутки , UIImageView должен сузиться до минимальной ширины и прокрутка не требуется (т.е. все подпредставления отображаются без прокрутки) .
• Если размер экрана недостаточно велик и необходима прокрутка, даже если UIImageView уменьшается до минимальной ширины , UIImageView должен сжиматься до минимальной ширины и необходима прокрутка (т. Е. НЕ все подпредставления отображаются без прокрутки) .

Answer 1

Это может помочь вам ...

В некотором смысле сложно все объяснить, но вы должны быть в состоянии следовать ограничениям на изображении.Единственное, что вы не видите, это то, что многострочная метка должна иметь Content Compression Resistance Priority, установленную на Required (1000).

Идея состоит в том, чтобы установить ограничения с определенными значениями Приоритета, чтобы при автоматическом размещении попытался сделать ширину вида изображения - при 998 Приоритет - такой же широкой, как при просмотре с прокруткой, но разрешитьон уменьшается до минимальной ширины 70% по мере роста содержания под ним.Когда он достигнет 70%, он не станет меньше, и объединенная высота вида изображения + метка + кнопка заставит представление «содержимое» развернуться вертикально, поскольку оно имеет ограничение высоты 999.

Здесь метка содержит 7 строк текста с размером шрифта 18:

А вот как это выглядит с увеличенным размером шрифтадо 28 - обратите внимание, что представление изображения теперь меньше полной ширины представления прокрутки:

и теперь с увеличенным размером шрифта36, мы видим, что минимальное значение ширины окна просмотра изображения составляет 70%, и кнопка была нажата за нижнюю часть рамки представления прокрутки (поэтому все будет прокручиваться):

Вот источник раскадровки - поэкспериментируйте с размером шрифта и / или объемом текста в метке, чтобы увидеть, как он работает:

<?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>