Question

我有一个自定义表格视图单元格：

enter image description here

有3个标签（相应的一个，两个，三个）和2个图像（右侧和底部）。

底部图像被限制在底部，左侧，右侧父容器边缘为0 - 因此它将占据100％宽度并始终位于底部（工作）。

正确的图像具有约束的宽度和高度 - 因此它总是相同的大小70x70，并且约束到左父容器边缘并且约束在垂直对齐 - 因此它将保留在左中间（工作< / strong>）

问题在于我的标签：

它们被限制在容器的顶部和底部边缘，因此它们可以伸展整个高度（工作）

但问题在于它们的宽度 - 我希望这3个标签占据单元格的宽度（单元格指定为500 px，但表格视图的宽度可变）：

第二，第三个标签必须比第一个大两倍。

比例1：2：2 - 如何实现这一目标？

Answer 1

添加这些约束（除＃5外，所有乘数均为1）

Label1领先空间到其超级视图的前沿
Label1尾随空格到Label2的前沿
Label2尾随空格到Label3的前沿
Label3尾随空间到RightImage的前沿
Label1与Label2的宽度相等（乘数：0.5（如果Label2是第一项，则为2））
Label2与Label3的宽度相等

然后通过更新其框架以匹配其约束来解决任何错位的视图。

这是一个示例xib（源代码格式）：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="5056" systemVersion="13D65" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES">
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="3733"/>
        <capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <tableViewCell contentMode="scaleToFill" selectionStyle="default" indentationWidth="10" reuseIdentifier="Cell" rowHeight="71" id="Snt-TF-Qv9" userLabel="Table View Cell - Cell (frame: {0, 0, 500, 71})">
            <rect key="frame" x="0.0" y="0.0" width="500" height="71"/>
            <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" tableViewCell="Snt-TF-Qv9" id="ifW-8U-Dwt" userLabel="Content View - frame: {0, 0, 500, 70}">
                <rect key="frame" x="0.0" y="0.0" width="500" height="70"/>
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="ebK-KE-wKZ" userLabel="RightImage - frame: {430, 0, 70, 70}">
                        <rect key="frame" x="430" y="0.0" width="70" height="70"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <constraints>
                            <constraint firstAttribute="width" constant="70" id="IJt-5U-cmM" userLabel="Width of 70"/>
                            <constraint firstAttribute="height" constant="70" id="KLU-ff-5JU" userLabel="Height of 70"/>
                        </constraints>
                    </imageView>
                    <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label1" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="07L-x8-fgp" userLabel="Label1 - frame: {0, 0, 86, 70}">
                        <rect key="frame" x="0.0" y="0.0" width="86" height="70"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                        <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label2" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="TKJ-Pe-W0d" userLabel="Label2 - frame: {86, 0, 172, 70}">
                        <rect key="frame" x="86" y="0.0" width="172" height="70"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                        <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label3" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="0cS-0h-VY6" userLabel="Label3 - frame: {258, 0, 172, 70}">
                        <rect key="frame" x="258" y="0.0" width="172" height="70"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                        <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="paS-mk-EO0" userLabel="BottomImage - frame: {0, 69, 500, 1}">
                        <rect key="frame" x="0.0" y="69" width="500" height="1"/>
                        <autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
                        <constraints>
                            <constraint firstAttribute="height" constant="1" id="UqL-XZ-Bqo" userLabel="Height of 1"/>
                        </constraints>
                    </imageView>
                </subviews>
                <constraints>
                    <constraint firstAttribute="bottom" secondItem="paS-mk-EO0" secondAttribute="bottom" id="21O-zu-Ufa" userLabel="BottomImage bottom to superview bottom"/>
                    <constraint firstAttribute="bottom" secondItem="07L-x8-fgp" secondAttribute="bottom" id="4dl-nF-vdx" userLabel="Label1 bottom to superview bottom"/>
                    <constraint firstItem="TKJ-Pe-W0d" firstAttribute="width" secondItem="0cS-0h-VY6" secondAttribute="width" id="Aln-95-m3O" userLabel="Label2 equal width to Label3 width"/>
                    <constraint firstItem="0cS-0h-VY6" firstAttribute="leading" secondItem="TKJ-Pe-W0d" secondAttribute="trailing" id="CDV-tB-YBi" userLabel="Label2 trailing to Label3 leading"/>
                    <constraint firstAttribute="centerY" secondItem="ebK-KE-wKZ" secondAttribute="centerY" id="CIO-EH-7R1" userLabel="RightImage centerY to superview centerY"/>
                    <constraint firstAttribute="trailing" secondItem="paS-mk-EO0" secondAttribute="trailing" id="D4c-iR-zR6" userLabel="BottomImage trailing to superview trailing"/>
                    <constraint firstItem="ebK-KE-wKZ" firstAttribute="leading" secondItem="0cS-0h-VY6" secondAttribute="trailing" id="PAK-Kk-uLp" userLabel="Label3 trailing to RightImage leading"/>
                    <constraint firstAttribute="trailing" secondItem="ebK-KE-wKZ" secondAttribute="trailing" id="YVm-6s-8cL" userLabel="RightImage trailing to superview trailing"/>
                    <constraint firstItem="07L-x8-fgp" firstAttribute="width" secondItem="TKJ-Pe-W0d" secondAttribute="width" multiplier="0.5" id="Z0j-ak-yiS" userLabel="Label1 equal width to Label2 width (multiplier 0.5)"/>
                    <constraint firstItem="TKJ-Pe-W0d" firstAttribute="top" secondItem="ifW-8U-Dwt" secondAttribute="top" id="b3m-Jy-1Q7" userLabel="Label2 top to superview top"/>
                    <constraint firstAttribute="bottom" secondItem="TKJ-Pe-W0d" secondAttribute="bottom" id="dBA-LG-fEf" userLabel="Label2 bottom to superview bottom"/>
                    <constraint firstItem="07L-x8-fgp" firstAttribute="top" secondItem="ifW-8U-Dwt" secondAttribute="top" id="g0E-cS-DWn" userLabel="Label1 top to superview top"/>
                    <constraint firstItem="0cS-0h-VY6" firstAttribute="top" secondItem="ifW-8U-Dwt" secondAttribute="top" id="h1K-sO-uXk" userLabel="Label3 top to superview top"/>
                    <constraint firstAttribute="bottom" secondItem="0cS-0h-VY6" secondAttribute="bottom" id="h4D-TA-lsH" userLabel="Label3 bottom to superview bottom"/>
                    <constraint firstItem="paS-mk-EO0" firstAttribute="leading" secondItem="ifW-8U-Dwt" secondAttribute="leading" id="hGy-Tw-hgS" userLabel="BottomImage leading to superview leading"/>
                    <constraint firstItem="07L-x8-fgp" firstAttribute="trailing" secondItem="TKJ-Pe-W0d" secondAttribute="leading" id="hVt-yJ-sJz" userLabel="Label1 trailing to Label2 leading"/>
                    <constraint firstItem="07L-x8-fgp" firstAttribute="leading" secondItem="ifW-8U-Dwt" secondAttribute="leading" id="iJX-3Z-bN4" userLabel="Label1 leading to superview leading"/>
                </constraints>
            </tableViewCellContentView>
        </tableViewCell>
    </objects>
</document>

Answer 2

如果您使用的是UILabel，那么您可以执行以下操作：

确保关闭包含表格视图单元格的位置的自动布局。

在cellForRowAtIndexPath:中，您可以添加以下代码：

CGRect newFrame = cell.yourLabel.frame;

newFrame.size.width = 500; 

cell.yourLabel.frame = newFrame;

希望有所帮助。

iOS中的自适应设计

2 个答案: