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

问题描述 投票:0回答:2

在我的屏幕上,我有2个按钮,就像这张照片(但没有标题):dra

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

  1. 宽度相等;
  2. 根据内部文字调整大小?

我可以在没有手动大小计算的情况下实现的更好的情况是它们具有相等的宽度,但根据最小按钮的内部文本调整大小。

ios xcode uibutton constraints interface-builder
2个回答
0
投票

1.在stackView中使用两个按钮并使用您需要的间距以及使用超视图的堆栈视图约束引导尾随FillEqually。

2.使用stackView中的两个按钮并使用您需要的间距和使用超视图的stackview约束前导跟踪FillProportionly。

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


0
投票

这很简单,需要注意......

  • 将左按钮的Leading约束到视图的Leading(加上所需的填充)
  • 将右键的Trailing约束到视图的Trailing(加上所需的填充)
  • 按住Ctrl键并从左键拖动到右键,然后选择Equal Widths
  • 根据需要设置垂直约束(从顶部到上面的元素,从底部到底部的视图,但它适用于垂直定位)​​。

enter image description here

现在,左按钮的左边缘将保持距离视图左边缘16个点...右按钮的右边缘将保持距离视图右边缘16个点...按钮的大小将为适合更长的标题。

警告 - 如果您的按钮标题太长,按钮将重叠:

enter image description here

如果您知道您的标题永远不会导致,您不必担心。但是,为了防止重叠,您可以添加一个左按钮尾随向右按钮引导>= 16的约束(或者你想要多少间距):

enter image description here

这将导致按钮标题被截断(...),但这可能比重叠更好。

以下是此故事板的来源,以防您遇到任何问题:

<?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>
© www.soinside.com 2019 - 2024. All rights reserved.