2 кнопки UIB, которые изменяются в соответствии с внутренним текстом и имеют одинаковую ширину одновременно?

Question

На моем экране 2 кнопки, как на этом рисунке (но без заголовков):

Я использовал ограничения.Левая кнопка привязана к левой стороне, справа - к правой.Как сделать их одновременно:

1. равной ширины;
2. с изменением размера в соответствии с внутренним текстом?

Лучший вариант, который я могу достичь без ручного размерарасчеты имеют одинаковую ширину, но их размер изменяется в соответствии с внутренним текстом самой маленькой кнопки.

Answer 1

Это просто, с оговоркой ...

• Ограничение левой кнопки 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>

Answer 2

1.Используйте две кнопки внутри stackView и распределите их FillEqually с требуемым интервалом, и с ограничением просмотра стека, ведущим трейлинг с суперпредставлением.

2.Используйте две кнопки внутри stackView и распределите FillProp пропорционально с интерваломВы требовали, и с ограничением стека ведущий трейлинг с суперпредставлением.

Вы можете распространять его, сравнивая длину заголовков тоже