iosswifthorizontal-scrollinguistackview
UIStackView items width issue in iOS 15.0
I have two items inside the stackView, width for both the items(Buttons) depends on the text size with horizontal scroll. In iOS 15.5+ devices its working fine where as in below 15.5 its width stretching for both the items. I have set below stack view properties in Xcode
Alignment - Fill
Distribution - Fill proportionally
spacing - 8
Attaching both the screenshot below
in iOS 15.5 +
In iOS 15
Source of the Storyboard(Only storyboard no code at all)
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21507" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="BYZ-38-t0r">
<device id="retina6_12" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="21505"/>
<capability name="Named colors" minToolsVersion="9.0"/>
<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>
<scenes>
<!--View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" customModule="HorizontalScroll" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="393" height="852"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" showsHorizontalScrollIndicator="NO" showsVerticalScrollIndicator="NO" indicatorStyle="white" translatesAutoresizingMaskIntoConstraints="NO" id="pPz-B2-Rzp">
<rect key="frame" x="9" y="134" width="375" height="28"/>
<subviews>
<stackView contentMode="scaleAspectFill" distribution="fillProportionally" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="38d-tZ-Ob8">
<rect key="frame" x="8" y="0.0" width="551" height="28"/>
<subviews>
<button opaque="NO" contentMode="scaleAspectFit" contentHorizontalAlignment="leading" contentVerticalAlignment="fill" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="9yA-Gf-ewo">
<rect key="frame" x="8" y="0.0" width="157.33333333333334" height="28"/>
<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" image="square.and.arrow.up.fill" catalog="system" imagePlacement="leading" title="Left not as right" imagePadding="10">
<fontDescription key="titleFontDescription" name="FidelitySans-Regular" family="Fidelity Sans" pointSize="14"/>
</buttonConfiguration>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="15"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="center" semanticContentAttribute="forceRightToLeft" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="hg7-VQ-pG3">
<rect key="frame" x="173.33333333333334" y="0.0" width="369.66666666666663" height="28"/>
<color key="backgroundColor" white="0.66666666666666663" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<inset key="imageEdgeInsets" minX="0.0" minY="0.0" maxX="10" maxY="0.0"/>
<state key="normal" title="Button" image="header_down_arrow_active"/>
<buttonConfiguration key="configuration" style="plain" image="rectangle.portrait.and.arrow.forward.fill" catalog="system" title="Right Button width is dynamic based on the title" imagePadding="10">
<fontDescription key="titleFontDescription" name="FidelitySans-Regular" family="Fidelity Sans" pointSize="14"/>
</buttonConfiguration>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="cornerRadius">
<real key="value" value="15"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="width" relation="greaterThanOrEqual" constant="300" id="bBu-9U-0sf"/>
</constraints>
<edgeInsets key="layoutMargins" top="0.0" left="8" bottom="0.0" right="8"/>
</stackView>
</subviews>
<color key="backgroundColor" name="hlo-white"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="38d-tZ-Ob8" secondAttribute="bottom" id="DzN-fS-Ej7"/>
<constraint firstAttribute="height" constant="28" id="EvL-B8-0B9"/>
<constraint firstItem="38d-tZ-Ob8" firstAttribute="leading" secondItem="pPz-B2-Rzp" secondAttribute="leading" constant="8" id="eJW-wz-W4i"/>
<constraint firstItem="38d-tZ-Ob8" firstAttribute="top" secondItem="pPz-B2-Rzp" secondAttribute="top" id="qSq-Ub-rYd"/>
<constraint firstAttribute="trailing" secondItem="38d-tZ-Ob8" secondAttribute="trailing" id="uve-dX-nuu"/>
<constraint firstItem="38d-tZ-Ob8" firstAttribute="centerY" secondItem="pPz-B2-Rzp" secondAttribute="centerY" id="w5w-1X-may"/>
</constraints>
</scrollView>
</subviews>
<viewLayoutGuide key="safeArea" id="6Tk-OE-BBY"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="pPz-B2-Rzp" firstAttribute="leading" secondItem="6Tk-OE-BBY" secondAttribute="leading" constant="9" id="jpM-Ag-u78"/>
<constraint firstItem="pPz-B2-Rzp" firstAttribute="top" secondItem="6Tk-OE-BBY" secondAttribute="top" constant="75" id="kx9-AK-3lD"/>
<constraint firstItem="pPz-B2-Rzp" firstAttribute="centerX" secondItem="8bC-Xf-vdC" secondAttribute="centerX" id="nTS-yX-v1j"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-108" y="4"/>
</scene>
</scenes>
<resources>
<image name="header_down_arrow_active" width="20" height="11"/>
<image name="rectangle.portrait.and.arrow.forward.fill" catalog="system" width="128" height="108"/>
<image name="square.and.arrow.up.fill" catalog="system" width="115" height="128"/>
<namedColor name="hlo-white">
<color red="0.32899999618530273" green="0.32400000095367432" blue="0.4779999852180481" alpha="0.33000001311302185" colorSpace="custom" customColorSpace="sRGB"/>
</namedColor>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
Solution
Apple has made a number of changes over the years in an attempt to make UI elements "more readable" and to make layouts "more uniform."
Here (and I've seen this in other situations), it appears UIKit sizes the buttons in unexpected ways.
You can fix this specific issue by Requiring both Content Hugging and Content Compression Resistance on both buttons:
- How to disable iOS 11 and iOS 12 Drag & Drop in WKWebView?
- Capture of 'self' with non-sendable type 'TypeName' in a `@Sendable` closure
- cordova-ios 7.1.0 privacy-manifest correct format?
- Error Regarding undefined method `map' for nil:NilClass for Flutter App / CocoaPod Error
- There are still screenshot uploads in progress. Apple App Submission
- Optional @ViewBuilder closure
- Target debug_ios_bundle_flutter_assets failed:
- Connect from ios device to localhost
- The provided entity includes a relationship with an invalid value
- Scroll UICollectionView to section header view
- How to disable title color change when highlighted state for UIButton using UIButtonConfiguration is active?
- Changing @State variable does not update the View in SwiftUI
- SwiftUI Countdowntimer bouncing (Timer changes its size when the time runs out)
- Remove "more" button from navigation view for custom tab bar with 5+ items
- How to change the circle color of Slider of SwiftUI?
- VisionOS: Reduce building time of rkassets package
- -12909 error decoding h264 stream with intra-refresh
- Find the URL scheme of an app on my iPhone
- Flutter: Downloading failed always using flutter_downlaoder
- Specifying IOS simulator when running app via .NET command line tools
- iOS file patterns: The `source_files` pattern did not match any file
- Is there any advantage doing a guard let on a table view cell or not?
- How to pass a string to a view model upon initialization?
- Why is my carefully designed to be "not-optional" return value being treated like an optional?
- How to simultaneously satisfy constraints in Swift
- Get lighter and darker color variations for a given UIColor
- How to make top part of list background stay fixed?
- After switching to Xcode 14 beta I got this error: QOS_CLASS_USER_INITIATED waiting on a lower QoS thread running at QOS_CLASS_DEFAULT
- How turn off vibration effect on banners using NotificationBannerSwift in IOS
- Error with go_router while doing a phone auth with Firebase on iOS