我使用了约束。左按钮绑定到左侧,右侧 - 右侧。如何同时制作它们:
我可以在没有手动大小计算的情况下实现的更好的情况是它们具有相等的宽度,但根据最小按钮的内部文本调整大小。
1.在stackView中使用两个按钮并使用您需要的间距以及使用超视图的堆栈视图约束引导尾随FillEqually。
2.使用stackView中的两个按钮并使用您需要的间距和使用超视图的stackview约束前导跟踪FillProportionly。
你也可以通过比较标题的长度来分发它
这很简单,需要注意......
Leading
约束到视图的Leading
(加上所需的填充)Trailing
约束到视图的Trailing
(加上所需的填充)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>