Question

在我的屏幕上，我有2个按钮，例如这张图片（但没有标题）：

我使用约束。左侧按钮绑定到左侧，右侧-绑定到右侧。如何同时制作它们：

等宽；
根据内部文字调整大小？

如果不进行手动尺寸计算，我可以实现的更好的情况是它们的宽度相等，但会根据最小按钮的内部文本进行调整大小。

Answer 1

1。在stackView中使用两个按钮，并以所需的间距和stackview约束在superview的尾部分配FillEqually。

2。在stackView内使用两个按钮，并按所需的间距和stackview约束在superview的尾部进行FillProportionally分配。

您也可以通过比较标题的长度来分发它

Answer 2

这很简单，需要警告...

将左按钮的Leading约束为视图的Leading（加上所需的填充）
将右键按钮的Trailing约束为视图的Trailing（加上所需的填充）
按住Ctrl键从左键拖动到右键，然后选择Equal Widths
根据需要设置垂直约束（元素的顶部到上方，视图的底部到底部，但是它可以用于您的垂直定位）。

现在，“左按钮”的左边缘将保持距视图左边缘的16点...右按钮的右边缘将保持距视图右边缘的16点......和按钮将调整大小以适合较长的标题。

请注意-如果按钮标题过长，则按钮将重叠：

如果您知道，您的标题将永远不会导致这种情况，那么您不必担心。但是，为防止重叠，您可以在>= 16处添加“向右按钮尾部约束”的“向左按钮尾部”（或所需的间距）：

该将导致按钮标题被截断（...），但这可能要好于重叠。

如果您有任何麻烦，这里是此情节提要的来源：

<?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">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <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="iN1-OP-drt">
            <objects>
                <viewController id="Ele-XE-2pT" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="aqv-SZ-ggJ">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Upr-w7-EFK" userLabel="LeftButton">
                                <rect key="frame" x="16" y="621" width="163.5" height="30"/>
                                <color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <state key="normal" title="Left Button">
                                    <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                </state>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="uSP-G0-fwa" userLabel="RightButton">
                                <rect key="frame" x="195.5" y="621" width="163.5" height="30"/>
                                <color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <state key="normal" title="Really Long Title for Right Button">
                                    <color key="titleColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                </state>
                            </button>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="uSP-G0-fwa" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="Upr-w7-EFK" secondAttribute="trailing" constant="16" id="FBv-nj-wdy"/>
                            <constraint firstItem="frC-yx-t9o" firstAttribute="trailing" secondItem="uSP-G0-fwa" secondAttribute="trailing" constant="16" id="ait-JI-b7g"/>
                            <constraint firstItem="frC-yx-t9o" firstAttribute="bottom" secondItem="uSP-G0-fwa" secondAttribute="bottom" constant="16" id="fQT-AE-SiC"/>
                            <constraint firstItem="frC-yx-t9o" firstAttribute="bottom" secondItem="Upr-w7-EFK" secondAttribute="bottom" constant="16" id="nTH-Jg-7Cz"/>
                            <constraint firstItem="Upr-w7-EFK" firstAttribute="leading" secondItem="frC-yx-t9o" secondAttribute="leading" constant="16" id="xEW-CH-yaZ"/>
                            <constraint firstItem="Upr-w7-EFK" firstAttribute="width" secondItem="uSP-G0-fwa" secondAttribute="width" id="zl6-e8-hRM"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="frC-yx-t9o"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="gZ2-hX-7aO" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-1339" y="615"/>
        </scene>
    </scenes>
</document>

2个根据内部文本调整大小并同时具有相等宽度的UIButton？

2 个答案: