ImageView 似乎使 TableViewCell 太大了——尽管图像大小是通过使用纵横比来控制的

ImageView appears to be making TableViewCell too big - despite the image size being controlled by using aspect fit

这里我有一个 TableView,其中包含包含文本和图像的自定义单元格,主图像位于固定在顶部的堆栈视图中。

当图像设置为 aspect fill 时,它看起来不错 - 图像的顶部也在其 space 的顶部 - 与文本齐平(见屏幕截图)。

但是图像太大 - 为了解决这个问题,我尝试切换到 aspect fit。这样图像的尺寸就更好了,但是单元格的顶部和底部有很大的间隙,就好像图像仍然是完整尺寸一样。感觉好像行高是根据图像在更改之前的原始大小设置的。 Aspect fit 看起来像这样:

表格视图行设置为根据可以显示在单元格底部的可选文本根据需要扩展,但我认为这不是问题的关键。 例如TableViewController 包括: tableView.estimatedRowHeight = 150

tableView.rowHeight = UITableView.automaticDimension

为了完整起见,这里是结构和附带的约束:

A UIStackView 可以以多种方式使用,但本质上它是:

  • 根据其子视图调整本身,或
  • 根据自身的约束子视图调整大小

因此,从您所显示的情况来看,您似乎希望水平“顶部”部分为 50% 图像和 50% headline-time-logo?

因此,我们首先限制堆栈视图的前导和尾随(以定义其宽度)并将该堆栈视图的分布设置为“均匀填充”——但是,因为 left-side 是 UIImageView,如果没有额外的限制,它会将其高度调整为 image... 的高度,这是我们不想要的。

我们可能会得到各种尺寸和宽高比的图像。为了获得“整体”良好的外观,我们可以为该图像视图提供 3:2 的纵横比约束,并将其内容模式设置为 Aspect Fit 中的任一个 - 如果图像没有 3:2 比率 - 或 Aspect Fill - 将“剪裁”边或 top/bottom。 Aspect Fill 可能是更好的选择。

您没有显示下面的内容(按钮和说明),但您可能还想使用垂直的“外部堆栈视图”来排列这些元素。

所以,这是一个示例布局:

堆栈视图具有这些属性...

OuterStackView

TopStackView

RightStackView

TimeLogoStackView

两项不明显:

1 - OuterStackView 具有优先级为 999 的底部约束。这可以防止 auto-layout 对 run-time 和

的投诉

2 - “时间”标签将内容压缩阻力优先级设置为 Required (1000) 以防止其被“压缩”:

您可能想要“调整”一些值(间距等)以获得您确切想要的布局,但这应该让您接近。

这是该布局的 Storyboard 源代码,因此您可以检查所有内容:

<?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">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--Table View Controller-->
        <scene sceneID="VSk-CA-kDJ">
            <objects>
                <tableViewController id="kTW-th-aXp" sceneMemberID="viewController">
                    <tableView key="view" clipsSubviews="YES" contentMode="scaleToFill" alwaysBounceVertical="YES" dataMode="prototypes" style="plain" separatorStyle="default" rowHeight="-1" estimatedRowHeight="-1" sectionHeaderHeight="28" sectionFooterHeight="28" id="8wi-Zy-dI1">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <prototypes>
                            <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="284" id="cWZ-Hx-Mr4">
                                <rect key="frame" x="0.0" y="28" width="375" height="284"/>
                                <autoresizingMask key="autoresizingMask"/>
                                <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="cWZ-Hx-Mr4" id="Npw-Cx-NLg">
                                    <rect key="frame" x="0.0" y="0.0" width="375" height="284"/>
                                    <autoresizingMask key="autoresizingMask"/>
                                    <subviews>
                                        <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="gNf-7h-70l" userLabel="OuterStackView">
                                            <rect key="frame" x="8" y="8" width="359" height="268"/>
                                            <subviews>
                                                <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" alignment="top" spacing="4" translatesAutoresizingMaskIntoConstraints="NO" id="qfh-3q-dxE" userLabel="TopStackView">
                                                    <rect key="frame" x="0.0" y="0.0" width="359" height="128.5"/>
                                                    <subviews>
                                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="DebHaaland" translatesAutoresizingMaskIntoConstraints="NO" id="6u7-ig-6GL" userLabel="Article Image">
                                                            <rect key="frame" x="0.0" y="0.0" width="177.5" height="118.5"/>
                                                            <color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                            <constraints>
                                                                <constraint firstAttribute="width" secondItem="6u7-ig-6GL" secondAttribute="height" multiplier="3:2" id="Jah-9w-tPO"/>
                                                            </constraints>
                                                        </imageView>
                                                        <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="4" translatesAutoresizingMaskIntoConstraints="NO" id="5cg-eC-vi9" userLabel="RightStackView">
                                                            <rect key="frame" x="181.5" y="0.0" width="177.5" height="106"/>
                                                            <subviews>
                                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Deb Haaland confirmed as first-ever Native American US cabinet secretary" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Jre-1x-Jqv" userLabel="Headline">
                                                                    <rect key="frame" x="0.0" y="0.0" width="177.5" height="76.5"/>
                                                                    <fontDescription key="fontDescription" type="system" weight="light" pointSize="16"/>
                                                                    <nil key="textColor"/>
                                                                    <nil key="highlightedColor"/>
                                                                </label>
                                                                <stackView opaque="NO" contentMode="scaleToFill" spacing="2" translatesAutoresizingMaskIntoConstraints="NO" id="1rD-Xm-5YT" userLabel="TimeLogoStackView">
                                                                    <rect key="frame" x="0.0" y="80.5" width="177.5" height="25.5"/>
                                                                    <subviews>
                                                                        <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" horizontalCompressionResistancePriority="1000" text="30 minutes ago" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0Rx-2c-SNK" userLabel="Time">
                                                                            <rect key="frame" x="0.0" y="0.0" width="87" height="25.5"/>
                                                                            <fontDescription key="fontDescription" type="system" weight="light" pointSize="12"/>
                                                                            <nil key="textColor"/>
                                                                            <nil key="highlightedColor"/>
                                                                        </label>
                                                                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="f24logo" translatesAutoresizingMaskIntoConstraints="NO" id="lbn-Uc-VHY" userLabel="Logo">
                                                                            <rect key="frame" x="89" y="0.0" width="88.5" height="25.5"/>
                                                                            <constraints>
                                                                                <constraint firstAttribute="width" secondItem="lbn-Uc-VHY" secondAttribute="height" multiplier="420:120" id="nGJ-ou-v3G"/>
                                                                            </constraints>
                                                                        </imageView>
                                                                    </subviews>
                                                                </stackView>
                                                            </subviews>
                                                        </stackView>
                                                    </subviews>
                                                </stackView>
                                                <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="IWg-Gv-dfU" userLabel="Buttons Stack View">
                                                    <rect key="frame" x="0.0" y="136.5" width="359" height="30"/>
                                                    <subviews>
                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ovM-SW-tOX">
                                                            <rect key="frame" x="0.0" y="0.0" width="84" height="30"/>
                                                            <state key="normal" title="Button"/>
                                                        </button>
                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="BGE-T6-Y7H">
                                                            <rect key="frame" x="92" y="0.0" width="83.5" height="30"/>
                                                            <state key="normal" title="Button"/>
                                                        </button>
                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hgu-1h-hdf">
                                                            <rect key="frame" x="183.5" y="0.0" width="84" height="30"/>
                                                            <state key="normal" title="Button"/>
                                                        </button>
                                                        <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="8wq-fU-hTM">
                                                            <rect key="frame" x="275.5" y="0.0" width="83.5" height="30"/>
                                                            <state key="normal" title="Button"/>
                                                        </button>
                                                    </subviews>
                                                </stackView>
                                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2hh-vS-zmg" userLabel="Description">
                                                    <rect key="frame" x="0.0" y="174.5" width="359" height="93.5"/>
                                                    <string 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.</string>
                                                    <fontDescription key="fontDescription" type="system" weight="light" pointSize="13"/>
                                                    <nil key="textColor"/>
                                                    <nil key="highlightedColor"/>
                                                </label>
                                            </subviews>
                                        </stackView>
                                    </subviews>
                                    <constraints>
                                        <constraint firstItem="gNf-7h-70l" firstAttribute="leading" secondItem="Npw-Cx-NLg" secondAttribute="leading" constant="8" id="5cg-Qd-M8w"/>
                                        <constraint firstAttribute="trailing" secondItem="gNf-7h-70l" secondAttribute="trailing" constant="8" id="Aru-zO-BJc"/>
                                        <constraint firstItem="gNf-7h-70l" firstAttribute="top" secondItem="Npw-Cx-NLg" secondAttribute="top" constant="8" id="fej-fk-c8x"/>
                                        <constraint firstAttribute="bottom" secondItem="gNf-7h-70l" secondAttribute="bottom" priority="999" constant="8" id="r6d-qb-Wn1"/>
                                    </constraints>
                                </tableViewCellContentView>
                            </tableViewCell>
                        </prototypes>
                        <connections>
                            <outlet property="dataSource" destination="kTW-th-aXp" id="nPX-e7-JuK"/>
                            <outlet property="delegate" destination="kTW-th-aXp" id="hKn-OZ-zAe"/>
                        </connections>
                    </tableView>
                </tableViewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="k0k-be-VUx" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="357.60000000000002" y="137.18140929535232"/>
        </scene>
    </scenes>
    <resources>
        <image name="DebHaaland" width="512" height="342"/>
        <image name="f24logo" width="420" height="120"/>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>

我用了这两张图: