如何为自定义单元格中的动态附加输入字段添加约束

Posted 2023-03-10

技术标签:

【中文标题】如何为自定义单元格中的动态附加输入字段添加约束【英文标题】：How to add constraints for dynamic appending input fields in custom cell 【发布时间】：2019-12-04 10:45:23 【问题描述】：

如何在自定义表格单元格中添加动态输入字段的同时实现单元格的动态高度

- (IBAction)clickButtonAdd:(id)sender 
    NSLog(@"test chekboc");
    CGFloat y ;
    CGFloat x ;
    UITextField *textField = nil;
       textField.frame = CGRectMake(x, y,100,30);
       textField = [[UITextField alloc]initWithFrame:CGRectMake(x,y,100,30)];
       textField.borderStyle = UITextBorderStyleRoundedRect;
      [self.contentView addSubview:textField];
     NSLog(@"x value :: %f",x);

使用上面的代码，我可以附加动态输入字段。但是每当我们添加一个新的输入字段时，单元格的高度并不会动态增加。

更新

这些是动态附加到 tableview 中的自定义 tableviewcells，在第一个附加单元格中包含一个动态添加的文本字段。而第二个代表初始单元格 GUI。问题是对齐新添加的输入字段并分别增加单元格高度

【问题讨论】：

您是否要添加文本字段的“垂直堆栈”？或者只是添加一个文本字段？或者也许是字段的“网格”？你显示 "x = x + 120;" 但你没有用它做任何事情...... 我正在尝试创建一个垂直堆栈。 OK - 你最好的办法是添加一个垂直的UIStackView 并将每个新的文本字段添加为一个排列好的子视图。正确设置约束后，它将自动处理单元格高度的变化。如果不清楚，请对您当前的单元格原型进行屏幕截图，包括显示约束，并将其添加到您的问题中。 @DonMag 更新了问题 【参考方案1】：

添加视图“垂直堆栈”（例如文本字段）的一个好方法是使用UIStackView。设置约束，使堆栈视图的底部控制单元格的底部。随着每个新字段添加到堆栈视图，它会自动增加高度。

这是一个示例布局（我尝试匹配您的图像）：

两个重要的键...

为堆栈视图提供Height 约束，以便您可以在设计时看到它。但是...编辑该约束并选择Placeholder / Remove at build time。这样，当它没有排列的子视图时，它的高度为零，并且在添加视图时不会阻止它展开。将底部约束上的Priority 设置为999。虽然并非绝对必要，但它可以防止约束冲突警告，因为自动布局会多次通过以确定完整布局。

关于设计的其他几点说明：

通过将底部约束设置为 Priority: 999，如果您将单元格拉伸得比实际需要的高一点，您将不会收到 IB 警告。为避免标签垂直拉伸，请将其垂直设置为Content Hugging Priority: 1000 如果您仔细查看我设置的约束，您会发现某些元素约束是相互关联的，而不是与显式常量相关的。例如： “设置日期范围”标签垂直居中在“日期选择器”上，“范围按钮”垂直居中在标签上。 “必填”标签垂直居中于“必填按钮”，与“范围按钮”垂直间隔如果您调整任何间距，这将有助于保持元素对齐

这是 .xib 的来源，因此您可以更仔细地检查约束：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15505" targetRuntime="ios.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15510"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <tableViewCell clipsSubviews="YES" contentMode="scaleToFill" preservesSuperviewLayoutMargins="YES" selectionStyle="default" indentationWidth="10" rowHeight="166" id="PJb-fG-tbA">
            <rect key="frame" x="0.0" y="0.0"  />
            <autoresizingMask key="autoresizingMask"/>
            <tableViewCellContentView key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" preservesSuperviewLayoutMargins="YES" insetsLayoutMarginsFromSafeArea="NO" tableViewCell="PJb-fG-tbA" id="kHE-Zl-zZn">
                <rect key="frame" x="0.0" y="0.0"  />
                <autoresizingMask key="autoresizingMask"/>
                <subviews>
                    <textField opaque="NO" contentMode="scaleToFill" verticalHuggingPriority="1000" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="Question" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="edU-F7-Rfh">
                        <rect key="frame" x="10" y="10"  />
                        <fontDescription key="fontDescription" type="system" pointSize="14"/>
                        <textInputTraits key="textInputTraits"/>
                    </textField>
                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="1000" text="Date Picker" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="UGi-vq-LEE">
                        <rect key="frame" x="10" y="57"  />
                        <constraints>
                            <constraint firstAttribute="width" constant="180" id="H3h-PK-Tn5"/>
                        </constraints>
                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                        <nil key="textColor"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Set Date Range" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="J4r-by-M6A">
                        <rect key="frame" x="251" y="57"  />
                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                        <nil key="textColor"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="RBZ-hT-7ef" userLabel="RangeButton">
                        <rect key="frame" x="378" y="55"  />
                        <color key="backgroundColor" red="0.83741801979999997" green="0.83743780850000005" blue="0.83742713930000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstAttribute="width" constant="25" id="7aP-lC-w89"/>
                            <constraint firstAttribute="width" secondItem="RBZ-hT-7ef" secondAttribute="height" multiplier="1:1" id="wgb-Ok-OF2"/>
                        </constraints>
                    </button>
                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Required" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="JQn-il-RKW">
                        <rect key="frame" x="301" y="93"  />
                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                        <nil key="textColor"/>
                        <nil key="highlightedColor"/>
                    </label>
                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="qmA-hD-Bry" userLabel="RequiredButton">
                        <rect key="frame" x="378" y="91"  />
                        <color key="backgroundColor" red="0.83741801979999997" green="0.83743780850000005" blue="0.83742713930000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstAttribute="width" constant="25" id="YBm-hg-3dr"/>
                            <constraint firstAttribute="width" secondItem="qmA-hD-Bry" secondAttribute="height" multiplier="1:1" id="u7w-4a-ue5"/>
                        </constraints>
                    </button>
                    <button opaque="NO" contentMode="scaleToFill" verticalHuggingPriority="1000" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="YJ4-1K-hxl" userLabel="TrashButton">
                        <rect key="frame" x="16" y="89"  />
                        <color key="backgroundColor" red="0.92003184559999995" green="0.73834878130000003" blue="0.71511208169999996" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
                        <constraints>
                            <constraint firstAttribute="width" secondItem="YJ4-1K-hxl" secondAttribute="height" multiplier="1:1" id="djU-d0-anS"/>
                            <constraint firstAttribute="width" constant="24" id="soO-f2-V8B"/>
                        </constraints>
                    </button>
                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="11" translatesAutoresizingMaskIntoConstraints="NO" id="Gg8-ZU-spe" userLabel="FieldHolderStackView">
                        <rect key="frame" x="10" y="124"  />
                        <constraints>
                            <constraint firstAttribute="height" constant="30" placeholder="YES" id="iYY-1E-iFe"/>
                            <constraint firstAttribute="width" constant="100" id="w6c-FN-Qk0"/>
                        </constraints>
                    </stackView>
                </subviews>
                <constraints>
                    <constraint firstAttribute="bottom" secondItem="Gg8-ZU-spe" secondAttribute="bottom" priority="999" constant="10" id="0I5-0k-03U"/>
                    <constraint firstItem="qmA-hD-Bry" firstAttribute="top" secondItem="RBZ-hT-7ef" secondAttribute="bottom" constant="11" id="1P1-gw-Cwp"/>
                    <constraint firstItem="RBZ-hT-7ef" firstAttribute="leading" secondItem="J4r-by-M6A" secondAttribute="trailing" constant="8" id="2Ao-ZT-eIv"/>
                    <constraint firstItem="YJ4-1K-hxl" firstAttribute="top" secondItem="UGi-vq-LEE" secondAttribute="bottom" constant="11" id="6hR-g2-Ihn"/>
                    <constraint firstItem="UGi-vq-LEE" firstAttribute="leading" secondItem="kHE-Zl-zZn" secondAttribute="leading" constant="10" id="9CW-cL-yiq"/>
                    <constraint firstItem="RBZ-hT-7ef" firstAttribute="centerY" secondItem="J4r-by-M6A" secondAttribute="centerY" id="BBF-sa-WsF"/>
                    <constraint firstItem="Gg8-ZU-spe" firstAttribute="top" secondItem="YJ4-1K-hxl" secondAttribute="bottom" constant="11" id="FWT-S5-XZB"/>
                    <constraint firstAttribute="trailing" secondItem="RBZ-hT-7ef" secondAttribute="trailing" constant="11" id="GIW-p6-CgM"/>
                    <constraint firstAttribute="trailing" secondItem="edU-F7-Rfh" secondAttribute="trailing" constant="9" id="M5u-uX-qfk"/>
                    <constraint firstItem="UGi-vq-LEE" firstAttribute="top" secondItem="edU-F7-Rfh" secondAttribute="bottom" constant="13" id="Npo-gd-sot"/>
                    <constraint firstItem="edU-F7-Rfh" firstAttribute="top" secondItem="kHE-Zl-zZn" secondAttribute="top" constant="10" id="OT2-CJ-5fh"/>
                    <constraint firstItem="edU-F7-Rfh" firstAttribute="leading" secondItem="kHE-Zl-zZn" secondAttribute="leading" constant="10" id="UUv-RU-c4W"/>
                    <constraint firstAttribute="trailing" secondItem="qmA-hD-Bry" secondAttribute="trailing" constant="11" id="VdG-Gt-Q0N"/>
                    <constraint firstItem="JQn-il-RKW" firstAttribute="centerY" secondItem="qmA-hD-Bry" secondAttribute="centerY" id="Wu6-Sf-34N"/>
                    <constraint firstItem="qmA-hD-Bry" firstAttribute="leading" secondItem="JQn-il-RKW" secondAttribute="trailing" constant="8" id="ZlM-6u-Tsh"/>
                    <constraint firstItem="Gg8-ZU-spe" firstAttribute="leading" secondItem="kHE-Zl-zZn" secondAttribute="leading" constant="10" id="aQy-xo-rYY"/>
                    <constraint firstItem="J4r-by-M6A" firstAttribute="centerY" secondItem="UGi-vq-LEE" secondAttribute="centerY" id="eVE-sv-0Cf"/>
                    <constraint firstItem="YJ4-1K-hxl" firstAttribute="leading" secondItem="kHE-Zl-zZn" secondAttribute="leading" constant="16" id="gdo-Xv-dBt"/>
                </constraints>
            </tableViewCellContentView>
            <point key="canvasLocation" x="113.04347826086958" y="175.44642857142856"/>
        </tableViewCell>
    </objects>
</document>

【讨论】：

以上是关于如何为自定义单元格中的动态附加输入字段添加约束的主要内容，如果未能解决你的问题，请参考以下文章

自定义表格单元格中的堆栈视图

根据在单元格中的文本字段中输入的值动态增加表格视图单元格

UITableView 自定义单元格高度未正确管理 swift 中的动态约束

如何为 UITableView 添加自定义 EditingAccessoryView？

使用堆栈视图和自动布局创建自定义 UITableViewCell

使用单独的控制器将自定义单元格中的标签设置为数组中的名称