In XCode 10.1 , Interface Builder keeps messing up my storyboards. At first seemingly at random, changing the size and/or position of carefully positioned UI elements. I can correct it. Then later, when I make an unrelated change to another element in the storyboard, it reverts back again. To the point that when I correct 1 width of 1 UI element, when I look at the changes in the xml code, I notice width and or position properties of dozens other UI elements being messed up again. Even if I choose to commit all these changes, letting Interface Builder has its way, next time I edit something a new batch of seemingly random changes take place.
Analyzing the behavior back to the core I noticed the following things :
- It seems to have everything to do with views having widthSizable="YES" and heightSizable="YES", placed inside views that also have these properties.
- What you see is not always what you get. If the xml says the width of an object is 103, then Interface Builder might say that it is 104. But I will not commit this change to the xml until you make some actual change in the design. Only at that point will it change the 103 to 104 in the code. As a result changing a property of 1 element can lead to changes to multiple other.
See the code example. I have got 3 pink views being a subview of 3 red parent views. The pink views are carefully paced at x=4, y=4 and having a width and height of 263. I also have 2 labels placed inside a subview. placed at x=25 with a width of 103.
But opening this in Interface Builder will change things. The first and third pink view will have its width reduced by 1 point. The second pink view and the second label will have its width increased by 1 point, and it's x position reduced by 1 point. Xml code of the storyboard will only be changed once you make some actual manual change, like correcting one of the changes.
What is going on? It seems to have everything to do with the autoresizing properties of the views.
Why does interface builder insists on these changes? Is there some setting I need to use to prevent interface builder from making changes on my behalf?
<?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" colorMatched="YES">
<device id="ipad9_7" orientation="landscape">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Pads View Controller-->
<scene sceneID="29X-ru-k3e">
<objects>
<viewController storyboardIdentifier="DUBPadsViewController" id="K8u-H8-1gq" customClass="DUBPadsViewController" customModule="InterfaceBuilderBug" customModuleProvider="target" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="R7c-RJ-s0L"/>
<viewControllerLayoutGuide type="bottom" id="cf2-ad-Oen"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="W4r-9T-iqb">
<rect key="frame" x="0.0" y="0.0" width="973" height="335"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" flexibleMaxX="YES" flexibleMinY="YES" flexibleMaxY="YES"/>
<subviews>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="ZrE-4D-D5t">
<rect key="frame" x="40" y="299" width="134" height="22"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label A" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Rcr-5Y-UIA">
<rect key="frame" x="25" y="0.0" width="103" height="22"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="Avenir-Medium" family="Avenir" pointSize="11"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="1" green="0.28351856600000003" blue="0.11137302910000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="wA1-jm-LnT">
<rect key="frame" x="177" y="299" width="134" height="22"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label B" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ZmY-M4-qUf">
<rect key="frame" x="25" y="0.0" width="103" height="22"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="Avenir-Medium" family="Avenir" pointSize="11"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="1" green="0.28351856600000003" blue="0.11137302910000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="EKv-pO-CaP">
<rect key="frame" x="40" y="16" width="271" height="271"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<subviews>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="KkF-uY-icM">
<rect key="frame" x="4" y="4" width="263" height="263"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" red="0.93333333330000001" green="0.48687065969999999" blue="0.92156862750000001" alpha="1" colorSpace="deviceRGB"/>
</view>
</subviews>
<color key="backgroundColor" red="1" green="0.28351856600000003" blue="0.11137302910000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="a9U-gL-6LU">
<rect key="frame" x="351" y="16" width="271" height="271"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<subviews>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="V3f-qo-7Gz">
<rect key="frame" x="4" y="4" width="263" height="263"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" red="0.93333333330000001" green="0.48687065969999999" blue="0.92156862750000001" alpha="1" colorSpace="deviceRGB"/>
</view>
</subviews>
<color key="backgroundColor" red="1" green="0.28351856600000003" blue="0.11137302910000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</view>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="Abi-Xp-jLY">
<rect key="frame" x="660" y="16" width="271" height="271"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<subviews>
<view contentMode="scaleToFill" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="8jR-Gr-IWp">
<rect key="frame" x="4" y="4" width="263" height="263"/>
<autoresizingMask key="autoresizingMask" flexibleMinX="YES" widthSizable="YES" flexibleMaxX="YES" flexibleMinY="YES" heightSizable="YES" flexibleMaxY="YES"/>
<color key="backgroundColor" red="0.93333333330000001" green="0.48687065969999999" blue="0.92156862750000001" alpha="1" colorSpace="deviceRGB"/>
</view>
</subviews>
<color key="backgroundColor" red="1" green="0.28351856600000003" blue="0.11137302910000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</view>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
</view>
<size key="freeformSize" width="973" height="335"/>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="6NU-Rl-zi7" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="669" y="-44"/>
</scene>
</scenes>
</document>
