iosswiftlayoutuikitxib
How to align Stack View with 4 elements and Stack View with 5 elements in XIB?
I am creating a custom Numpad keyboard through xib.
The numpad has 4 rows: 3 rows with 5 buttons and 1 last row with 4 buttons.
I can't understand, how to align a width of a yellow button "=" to be equal of doubled width of upper row's 2 yellow buttons "+" and "x". Plus 3 grey buttons width to be the same as upper 3 grey buttons have?
I don't want to add hardcoded values like each yellow button width equals 60 then "=" button width equals 120.
This is how it looks now:
I tried to google for solution, but found the cases only with 4 elements in a row, not 5.
Here is the test project on Github: CLICK
Solution
You have what appears to be a lot of unneeded embedding in extra views and stack views...
Take a look at this:
Here's the source for that xib (took out whitespace so it would fit in this answer):
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
<device id="retina6_1" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<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"/>
<view contentMode="scaleToFill" id="w35-oq-szw">
<rect key="frame" x="0.0" y="0.0" width="745" height="531"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<visualEffectView opaque="NO" clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="req-q9-lx2">
<rect key="frame" x="0.0" y="0.0" width="745" height="531"/>
<view key="contentView" opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="center" insetsLayoutMarginsFromSafeArea="NO" id="d1H-9Q-j7P">
<rect key="frame" x="0.0" y="0.0" width="745" height="531"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="sSl-mz-1DQ">
<rect key="frame" x="10" y="0.0" width="725" height="531"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="fGC-p9-L4U">
<rect key="frame" x="0.0" y="0.0" width="725" height="125.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="248" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="1fo-rx-txj">
<rect key="frame" x="0.0" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="7">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="JkP-z1-kBt">
<rect key="frame" x="147" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="8">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="aA8-sE-uyJ">
<rect key="frame" x="294" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="9">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="JdT-jT-0wO">
<rect key="frame" x="441" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="C">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="MqJ-SJ-vgm">
<rect key="frame" x="588" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="^">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="ryL-j9-8Gp">
<rect key="frame" x="0.0" y="135.5" width="725" height="125"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ATt-PW-v4y">
<rect key="frame" x="0.0" y="0.0" width="137" height="125"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="4">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="249" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ToS-iL-gQp">
<rect key="frame" x="147" y="0.0" width="137" height="125"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="5">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" horizontalHuggingPriority="248" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="OSw-U5-1GF">
<rect key="frame" x="294" y="0.0" width="137" height="125"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="6">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Uiw-M5-1xf">
<rect key="frame" x="441" y="0.0" width="137" height="125"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="-">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="dHS-oz-6Ou">
<rect key="frame" x="588" y="0.0" width="137" height="125"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="/">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="JRw-LQ-aMf">
<rect key="frame" x="0.0" y="270.5" width="725" height="125.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="mal-m2-BW0">
<rect key="frame" x="0.0" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="1">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="KI1-ty-RLg">
<rect key="frame" x="147" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="2">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="5EU-9l-FVK">
<rect key="frame" x="294" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="3">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="y6Q-JT-JWy">
<rect key="frame" x="441" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="+">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="G9r-jQ-QQ9">
<rect key="frame" x="588" y="0.0" width="137" height="125.5"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="x">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" spacing="10" translatesAutoresizingMaskIntoConstraints="NO" id="Uw9-qZ-Dfo">
<rect key="frame" x="0.0" y="406" width="725" height="125"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="8ld-d6-RQK">
<rect key="frame" x="0.0" y="0.0" width="137" height="125"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title=".">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="mBP-LN-MlY">
<rect key="frame" x="147" y="0.0" width="137" height="125"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="0">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="nde-Sc-JPt">
<rect key="frame" x="294" y="0.0" width="137" height="125"/>
<color key="backgroundColor" white="0.66666666669999997" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="D">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="dGq-08-Kzm">
<rect key="frame" x="441" y="0.0" width="284" height="125"/>
<color key="backgroundColor" red="0.97410839800000004" green="0.8403052688" blue="0.2821659446" alpha="1" colorSpace="custom" customColorSpace="displayP3"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="plain" title="=">
<fontDescription key="titleFontDescription" type="system" pointSize="40"/>
</buttonConfiguration>
</button>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="nde-Sc-JPt" firstAttribute="width" secondItem="5EU-9l-FVK" secondAttribute="width" id="4El-5L-MaG"/>
<constraint firstItem="mBP-LN-MlY" firstAttribute="width" secondItem="KI1-ty-RLg" secondAttribute="width" id="Htd-Ko-RcX"/>
<constraint firstItem="8ld-d6-RQK" firstAttribute="width" secondItem="mal-m2-BW0" secondAttribute="width" id="m9s-WZ-peK"/>
</constraints>
</stackView>
</subviews>
<constraints>
<constraint firstItem="sSl-mz-1DQ" firstAttribute="top" secondItem="d1H-9Q-j7P" secondAttribute="top" id="Db1-iD-Elh"/>
<constraint firstAttribute="trailing" secondItem="sSl-mz-1DQ" secondAttribute="trailing" constant="10" id="KbS-0k-Ie2"/>
<constraint firstItem="sSl-mz-1DQ" firstAttribute="leading" secondItem="d1H-9Q-j7P" secondAttribute="leading" constant="10" id="TJv-db-APH"/>
<constraint firstAttribute="bottom" secondItem="sSl-mz-1DQ" secondAttribute="bottom" id="g6s-Ye-LzN"/>
</constraints>
</view>
<blurEffect style="systemThinMaterial"/>
</visualEffectView>
</subviews>
<viewLayoutGuide key="safeArea" id="V0A-kF-WY5"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="req-q9-lx2" firstAttribute="leading" secondItem="V0A-kF-WY5" secondAttribute="leading" id="0fX-Cx-EME"/>
<constraint firstItem="req-q9-lx2" firstAttribute="trailing" secondItem="V0A-kF-WY5" secondAttribute="trailing" id="Jvp-Gw-hsl"/>
<constraint firstItem="req-q9-lx2" firstAttribute="top" secondItem="w35-oq-szw" secondAttribute="top" id="hrp-Zn-ETe"/>
<constraint firstAttribute="bottom" secondItem="req-q9-lx2" secondAttribute="bottom" id="kDe-Se-hCP"/>
</constraints>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="621" y="728"/>
</view>
</objects>
<resources>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
- SwiftUI: How would I make stretchable (flexible) sticky header for ScrollView?
- How do I detect if a Firebase Storage file exists?
- Making GCM work for iOS device in the background
- Do I still need the @available 13.0 attribute in my class if my minimum deployment target is iOS 13.0?
- How to create circular text in SwiftUI that goes from a flat line to a perfect circle based on degree changes?
- Change UITextField and UITextView Cursor / Caret Color
- Can we create custom blur in react native?
- Whats the difference between UDID and UDID?
- SwiftUI - Strikethrough on TextField
- CSS overflow scrolling and hidden scrollbar (iOS)
- Managing multiple versions of same bundle name iOS app on the App Store
- How to play a sound using Swift?
- How to get a specific value in firebase-realtime-database in swift 4.0
- Xcode Build failed,fatal error: module 'firebase_auth' not found @import firebase_auth;
- How to segue when a new programmatically created button is pressed?
- How to create a react native ios share extension app
- Flutter - Displaying two ListViews on one screen
- SK3DNode shows SCNScene darker than in SCNView
- SwiftUI: Nested scroll views on opposite axis
- Xcode error: Failed to prepare device for development
- Xcode fails to connect to iPhone
- Passing touches between stacked UIWindows?
- LazyVGrid item hit test area is not expected
- How to set background color of UIPickerView using UIAppearance?
- How do I install a newer swift-tools-version?
- No matching profiles found in Visual Studio after renewing an expiring provisioning profile using Xcode 16
- Web on mobile - Open URLs in full browser apps when navigating from Chrome Custom Tabs or Safari ViewController
- Weird issue while showing an image in rounded rectangle
- Is there a way to tell if the search bar is active with the .searchable modifier?
- Change location of Navigation Bar