I am struggling getting the xcode constraints to work properly, I have 6 images and text underneath that is looking bad in larger iphone sizes. It looks fine in iphone SE/8 but for iphone 11 the left and right images hug the sides more.
Here are screen shots of them in iphone SE & 11:
iphone SE and 11 screen shot
Here are the constraints for the images:
image constraints
And here are the text constraints:
text constraints
Any feedback greatly appreciated, I'm not sure what I am doing wrong here
The UIStackView makes this layout rather easy to accomplish...
put a Button and a Label in a Vertical Stack View... that makes a "column"
Alignment: Fill / Distribution: Fill / Spacing: 8
put 3 of those into a Horizontal Stack View... that makes "Row 1" with 3 "columns"
Alignment: Fill / Distribution: Equal Spacing / Spacing: 0
Do that again, for "Row 2"
put the 2 "row" stack views in an "outer" Vertical Stack View
Alignment: Fill / Distribution: Fill Equally / Spacing: 16
For the constraints, we'll start with the "outer" stack view
constrain Top 16-pts from bottom of your "banner" view
constrain Width to 90% of view (width equal to view width, Multiplier: 0.9)
constrain CenterX to view CenterX
constrain "btn1" with 1:1 ratio (keeps it "square"), and Width equal to row1 Width, Multiplier: 0.3 (30%)
constrain "btn2" equal width and height to "btn1"
constrain "btn3" equal width and height to "btn1"
constrain "btn4" with 1:1 ratio (keeps it "square"), and Width equal to row2 Width, Multiplier: 0.3 (30%)
constrain "btn5" equal width and height to "btn4"
constrain "btn6" equal width and height to "btn4"
Here's how it looks in Storyboard (large image, click to see it better):
and here is the source code to that Storyboard so you can inspect it (I added images named "b1" / "b2" / etc):
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="LKM-8A-nb2">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
<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>
<!--Grid View Controller-->
<scene sceneID="79o-Ox-TwA">
<objects>
<viewController id="LKM-8A-nb2" customClass="GridViewController" customModule="PanZoom" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="IYJ-Hg-6cW">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="P8z-Sm-Q6t" userLabel="BannerView">
<rect key="frame" x="0.0" y="0.0" width="375" height="136"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="person.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="4jH-vt-7l5" userLabel="BannerImageView">
<rect key="frame" x="8" y="9.5" width="120" height="117"/>
<constraints>
<constraint firstAttribute="width" secondItem="4jH-vt-7l5" secondAttribute="height" multiplier="1:1" id="81h-yQ-hei"/>
<constraint firstAttribute="width" constant="120" id="uwP-ci-9yv"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="u6h-2Y-fxg">
<rect key="frame" x="136" y="16" width="231" height="20.5"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Some Text" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="awQ-9d-ac7">
<rect key="frame" x="136" y="44.5" width="80" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" systemColor="systemBlueColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Some More Text" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="kfJ-4l-Yax">
<rect key="frame" x="136" y="73" width="123.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" systemColor="systemBlueColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.7673358321" green="0.76744776960000005" blue="0.78157937529999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="4jH-vt-7l5" firstAttribute="top" secondItem="P8z-Sm-Q6t" secondAttribute="top" constant="8" id="54V-Ke-kwa"/>
<constraint firstItem="u6h-2Y-fxg" firstAttribute="leading" secondItem="4jH-vt-7l5" secondAttribute="trailing" constant="8" id="C0B-BT-gMX"/>
<constraint firstItem="kfJ-4l-Yax" firstAttribute="top" secondItem="awQ-9d-ac7" secondAttribute="bottom" constant="8" id="Gge-WX-XeV"/>
<constraint firstItem="4jH-vt-7l5" firstAttribute="leading" secondItem="P8z-Sm-Q6t" secondAttribute="leading" constant="8" id="VzJ-jF-PeU"/>
<constraint firstAttribute="trailing" secondItem="u6h-2Y-fxg" secondAttribute="trailing" constant="8" id="fgo-dg-lvH"/>
<constraint firstAttribute="bottom" secondItem="4jH-vt-7l5" secondAttribute="bottom" constant="8" id="jOP-Za-STU"/>
<constraint firstItem="awQ-9d-ac7" firstAttribute="leading" secondItem="u6h-2Y-fxg" secondAttribute="leading" id="p8C-R8-P3n"/>
<constraint firstItem="u6h-2Y-fxg" firstAttribute="top" secondItem="P8z-Sm-Q6t" secondAttribute="top" constant="16" id="tpW-8x-5cn"/>
<constraint firstItem="awQ-9d-ac7" firstAttribute="top" secondItem="u6h-2Y-fxg" secondAttribute="bottom" constant="8" id="wI1-Kb-F4D"/>
<constraint firstItem="kfJ-4l-Yax" firstAttribute="leading" secondItem="awQ-9d-ac7" secondAttribute="leading" id="yVa-mI-4gE"/>
</constraints>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="kvJ-kl-KIN" userLabel="Outer Stack View">
<rect key="frame" x="19" y="152" width="337.5" height="275.5"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="sQJ-MU-CSp" userLabel="Row1 Stack View">
<rect key="frame" x="0.0" y="0.0" width="337.5" height="130"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="OTb-dV-ttj" userLabel="R1C1 Stack View">
<rect key="frame" x="0.0" y="0.0" width="101" height="130"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="yyV-A5-4ke" userLabel="btn1" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101.5"/>
<constraints>
<constraint firstAttribute="width" secondItem="yyV-A5-4ke" secondAttribute="height" multiplier="1:1" id="P3x-SZ-1Mc"/>
</constraints>
<state key="normal" backgroundImage="b1"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 1" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1jL-GW-qqq">
<rect key="frame" x="0.0" y="109.5" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="8Q6-9W-gXz" userLabel="R1C2 Stack View">
<rect key="frame" x="118" y="0.0" width="101" height="130"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="V37-nh-l7V" userLabel="bn2" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101.5"/>
<state key="normal" backgroundImage="b2"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 2" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Kmm-DY-Y3T">
<rect key="frame" x="0.0" y="109.5" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="rkC-n3-1XR" userLabel="R1C3 Stack View">
<rect key="frame" x="236" y="0.0" width="101.5" height="130"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kEA-jG-33S" userLabel="btn3" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101.5" height="101.5"/>
<state key="normal" backgroundImage="b3"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 3" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xNJ-8c-vjq">
<rect key="frame" x="0.0" y="109.5" width="101.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="kEA-jG-33S" firstAttribute="height" secondItem="yyV-A5-4ke" secondAttribute="height" id="2Si-on-gKK"/>
<constraint firstItem="kEA-jG-33S" firstAttribute="width" secondItem="yyV-A5-4ke" secondAttribute="width" id="50T-Oa-2nZ"/>
<constraint firstItem="V37-nh-l7V" firstAttribute="width" secondItem="yyV-A5-4ke" secondAttribute="width" id="MTd-OL-UU7"/>
<constraint firstItem="yyV-A5-4ke" firstAttribute="width" secondItem="sQJ-MU-CSp" secondAttribute="width" multiplier="0.3" id="XMH-jn-adE"/>
<constraint firstItem="V37-nh-l7V" firstAttribute="height" secondItem="yyV-A5-4ke" secondAttribute="height" id="twm-hP-ffF"/>
</constraints>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" translatesAutoresizingMaskIntoConstraints="NO" id="gpl-wE-cdj" userLabel="Row2 Stack View">
<rect key="frame" x="0.0" y="146" width="337.5" height="129.5"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="xBX-2X-LgE" userLabel="R2C1 Stack View">
<rect key="frame" x="0.0" y="0.0" width="101" height="129.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="cXk-UC-q0U" userLabel="btn4" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101"/>
<constraints>
<constraint firstAttribute="width" secondItem="cXk-UC-q0U" secondAttribute="height" multiplier="1:1" id="eod-eh-BtF"/>
</constraints>
<state key="normal" backgroundImage="b4"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 4" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dVu-b1-jO2">
<rect key="frame" x="0.0" y="109" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Dmz-Yl-dol" userLabel="R2C2 Stack View">
<rect key="frame" x="118" y="0.0" width="101" height="129.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="M6I-u0-WFF" userLabel="btn5" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101"/>
<state key="normal" backgroundImage="b5"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 5" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="O8J-rz-IMQ">
<rect key="frame" x="0.0" y="109" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="k3d-gs-eoH" userLabel="R2C3 Stack View">
<rect key="frame" x="236" y="0.0" width="101.5" height="129.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kTF-VQ-Jbo" userLabel="btn6" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101.5" height="101"/>
<state key="normal" backgroundImage="b6"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 6" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="9T2-30-xGr">
<rect key="frame" x="0.0" y="109" width="101.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="M6I-u0-WFF" firstAttribute="height" secondItem="cXk-UC-q0U" secondAttribute="height" id="4OF-bE-18u"/>
<constraint firstItem="kTF-VQ-Jbo" firstAttribute="height" secondItem="cXk-UC-q0U" secondAttribute="height" id="RtW-GA-B4z"/>
<constraint firstItem="kTF-VQ-Jbo" firstAttribute="width" secondItem="cXk-UC-q0U" secondAttribute="width" id="ZQL-ND-pb9"/>
<constraint firstItem="M6I-u0-WFF" firstAttribute="width" secondItem="cXk-UC-q0U" secondAttribute="width" id="lZf-hT-U08"/>
<constraint firstItem="cXk-UC-q0U" firstAttribute="width" secondItem="gpl-wE-cdj" secondAttribute="width" multiplier="0.3" id="zu9-SD-Sf7"/>
</constraints>
</stackView>
</subviews>
</stackView>
</subviews>
<viewLayoutGuide key="safeArea" id="itM-WY-yzX"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="itM-WY-yzX" firstAttribute="trailing" secondItem="P8z-Sm-Q6t" secondAttribute="trailing" id="TYg-aZ-N52"/>
<constraint firstItem="kvJ-kl-KIN" firstAttribute="width" secondItem="IYJ-Hg-6cW" secondAttribute="width" multiplier="0.9" id="cAB-cO-cjP"/>
<constraint firstItem="kvJ-kl-KIN" firstAttribute="top" secondItem="P8z-Sm-Q6t" secondAttribute="bottom" constant="16" id="kst-RO-T6D"/>
<constraint firstItem="kvJ-kl-KIN" firstAttribute="centerX" secondItem="IYJ-Hg-6cW" secondAttribute="centerX" id="nQx-iz-Die"/>
<constraint firstItem="P8z-Sm-Q6t" firstAttribute="leading" secondItem="itM-WY-yzX" secondAttribute="leading" id="pEQ-i4-9gg"/>
<constraint firstItem="P8z-Sm-Q6t" firstAttribute="top" secondItem="itM-WY-yzX" secondAttribute="top" id="xJS-lS-jlb"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="cWX-J6-EFK" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="16.800000000000001" y="185.75712143928038"/>
</scene>
</scenes>
<designables>
<designable name="M6I-u0-WFF">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="V37-nh-l7V">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="cXk-UC-q0U">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="kEA-jG-33S">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="kTF-VQ-Jbo">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="yyV-A5-4ke">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
</designables>
<resources>
<image name="b1" width="80" height="80"/>
<image name="b2" width="80" height="80"/>
<image name="b3" width="80" height="80"/>
<image name="b4" width="80" height="80"/>
<image name="b5" width="80" height="80"/>
<image name="b6" width="80" height="80"/>
<image name="person.fill" catalog="system" width="128" height="120"/>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
<systemColor name="systemBlueColor">
<color red="0.0" green="0.47843137254901963" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
Related
I try to create custom control and use it to create views in Xcode designer. My new created custom control meet all the requirements from this site https://learn.microsoft.com/en-us/xamarin/ios/user-interface/designer/ios-designable-controls-overview.
MyCustomControl.cs
[Register("MyCustomControl"), DesignTimeVisible(true)]
public class MyCustomControl : UIView
{
public MyCustomControl(IntPtr intPtr) : base(intPtr)
{
}
}
MyCustomControl.xib
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES">
<device id="retina6_1" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
<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" customClass="MyCustomControl"/>
<placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
<view contentMode="scaleToFill" id="1">
<rect key="frame" x="0.0" y="0.0" width="414" height="168"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="launch_image.png" translatesAutoresizingMaskIntoConstraints="NO" id="mzD-dG-Liz">
<rect key="frame" x="20" y="20" width="128" height="128"/>
<color key="backgroundColor" systemColor="systemGreenColor"/>
<constraints>
<constraint firstAttribute="height" constant="128" id="PWL-tY-GGw"/>
<constraint firstAttribute="width" constant="128" id="pzM-Pd-W9T"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="aut-I9-LZ3">
<rect key="frame" x="156" y="20" width="238" height="128"/>
<fontDescription key="fontDescription" type="system" pointSize="30"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="mzD-dG-Liz" firstAttribute="leading" secondItem="1" secondAttribute="leading" constant="20" symbolic="YES" id="0eJ-7I-8oa"/>
<constraint firstItem="aut-I9-LZ3" firstAttribute="leading" secondItem="mzD-dG-Liz" secondAttribute="trailing" constant="8" symbolic="YES" id="2WT-9N-Ahk"/>
<constraint firstAttribute="bottom" secondItem="aut-I9-LZ3" secondAttribute="bottom" constant="20" symbolic="YES" id="4e9-Uy-yd0"/>
<constraint firstAttribute="trailing" secondItem="aut-I9-LZ3" secondAttribute="trailing" constant="20" symbolic="YES" id="AMI-iw-m0b"/>
<constraint firstItem="aut-I9-LZ3" firstAttribute="top" secondItem="1" secondAttribute="top" constant="20" symbolic="YES" id="DXk-Cr-Rua"/>
<constraint firstItem="mzD-dG-Liz" firstAttribute="top" secondItem="1" secondAttribute="top" constant="20" symbolic="YES" id="HUw-sB-TJ2"/>
<constraint firstAttribute="bottom" secondItem="mzD-dG-Liz" secondAttribute="bottom" constant="20" symbolic="YES" id="ZcF-qS-fei"/>
</constraints>
<freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
<point key="canvasLocation" x="-18.840579710144929" y="-265.84821428571428"/>
</view>
</objects>
<resources>
<image name="launch_image.png" width="420" height="420"/>
<systemColor name="systemGreenColor">
<color red="0.20392156862745098" green="0.7803921568627451" blue="0.34901960784313724" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
I have rebuild project, create another custom view to see MyCustomView appears in Xcode designer but I can't see it. Is there something I have forgotten?
Visual Studio for Mac 8.9.9
Xcode 12.5
Okay, I'm a relatively new Swift developer and I just started learning scrollviews. All the tutorials I've seen always specify a particular height for the content view so as to activate the scrollview.
Is there a way to make a scrollview without specifying the height. Checking it on bigger screens the content view is actually cut off the scrollview and that's not good UI design.
Step-by-Step...
Add a view controller to your Storyboard
Add a scroll view to the view controller
Constrain it with 20-pts Top / Bottom / Leading / Trailing
Add two labels to the scroll view - position one near the top-left and the other near the bottom-right
Constrain the First label Top: 8 and Leading: 8 to the scroll view's Content Layout Guide
Constrain the Second label Bottom: 8 and Trailing: 8 to the scroll view's Content Layout Guide
Constrain the Second label Leading to the First label Trailing
Constrain the Second label Top to the First label Bottom
Change that constraint constant to a large number - such as 1200
If you've done it right, it should look something like this:
You cannot see the Bottom-Right-Label because it is 1200-pts below the top label (so, it's off the bottom of the view).
Run the app, and you will have a vertically scrolling view.
Here's the source to that Storyboard so you can inspect it directly:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="uUy-L1-OnG">
<device id="retina3_5" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
<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="Rrc-66-RYL">
<objects>
<viewController id="uUy-L1-OnG" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="39G-hU-x3e">
<rect key="frame" x="0.0" y="0.0" width="320" height="480"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2QQ-od-V3W">
<rect key="frame" x="20" y="20" width="280" height="440"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Bottom-Right Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6dS-VR-QcN">
<rect key="frame" x="131" y="1229" width="149" height="21"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Top-Left Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="KrQ-5T-fSH">
<rect key="frame" x="8" y="8" width="112" height="21"/>
<color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.46202266219999999" green="0.83828371759999998" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="j0p-3A-LQb" firstAttribute="bottom" secondItem="6dS-VR-QcN" secondAttribute="bottom" constant="8" id="1yq-cx-1GE"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="top" secondItem="KrQ-5T-fSH" secondAttribute="bottom" constant="1200" id="BpQ-El-04G"/>
<constraint firstItem="KrQ-5T-fSH" firstAttribute="top" secondItem="j0p-3A-LQb" secondAttribute="top" constant="8" id="JhA-o5-VKG"/>
<constraint firstItem="KrQ-5T-fSH" firstAttribute="leading" secondItem="j0p-3A-LQb" secondAttribute="leading" constant="8" id="axd-l2-1aY"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="trailing" secondItem="j0p-3A-LQb" secondAttribute="trailing" constant="8" id="han-0E-Nx6"/>
<constraint firstItem="6dS-VR-QcN" firstAttribute="leading" secondItem="KrQ-5T-fSH" secondAttribute="trailing" constant="11" id="vB2-hP-NmI"/>
</constraints>
<viewLayoutGuide key="contentLayoutGuide" id="j0p-3A-LQb"/>
<viewLayoutGuide key="frameLayoutGuide" id="wx7-6c-6AG"/>
</scrollView>
</subviews>
<viewLayoutGuide key="safeArea" id="5O3-dC-9nE"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="2QQ-od-V3W" firstAttribute="top" secondItem="5O3-dC-9nE" secondAttribute="top" constant="20" id="1P9-kk-0OW"/>
<constraint firstItem="2QQ-od-V3W" firstAttribute="leading" secondItem="5O3-dC-9nE" secondAttribute="leading" constant="20" id="Isk-wd-i1O"/>
<constraint firstItem="5O3-dC-9nE" firstAttribute="bottom" secondItem="2QQ-od-V3W" secondAttribute="bottom" constant="20" id="dhp-c0-XAb"/>
<constraint firstItem="5O3-dC-9nE" firstAttribute="trailing" secondItem="2QQ-od-V3W" secondAttribute="trailing" constant="20" id="eYJ-in-3Lv"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="iqc-7R-rKj" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="-416.25" y="128.75"/>
</scene>
</scenes>
<resources>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>
As seen in the image MyTopBar
I have 5 uibuttons inside a scroll view. I am using it as Navigation/Top bar
I want to achieve an underline effect only on selected button among the 5 button. imageTarget
I saw some libraries but it did not work as I expected them to
I will be refreshing same view so that’s not really useful
Can some tell me a simple way to achieve this underline affect?
There are various ways to do this. Here's one approach...
Put your buttons in a horizontal stack view
add a UIView as your "underline view"
For your "underline view":
set height constraint to 4
set top constraint equal to the stack view's bottom
set widthAnchor equal to first button widthAnchor, constant 8 (4-pts wider)
set centerXAnchor equal to first button centerXAnchor
Connect the width and center anchors to #IBOutlets in your custom class.
When a button is tapped:
de-activate width and centerX constraints
set them to the tapped button
re-activate them
animate into position if desired
Here is code for a sample implementation:
protocol TopBarButtonTapProtocol {
func didSelect(_ sender: UIButton)
}
class MyTopBar: UIView {
var delegate: TopBarButtonTapProtocol?
#IBOutlet var theStack: UIStackView!
#IBOutlet var uView: UIView!
#IBOutlet var uWidth: NSLayoutConstraint!
#IBOutlet var uCenter: NSLayoutConstraint!
override func didMoveToWindow() {
super.didMoveToWindow()
let btns = theStack.arrangedSubviews
btns.forEach { v in
guard let btn = v as? UIButton else {
fatalError("Stack view must contain buttons only!")
}
btn.addTarget(self, action: #selector(didTap(_:)), for: .touchUpInside)
}
}
#objc func didTap(_ sender: UIButton) -> Void {
uCenter.isActive = false
uWidth.isActive = false
uCenter = uView.centerXAnchor.constraint(equalTo: sender.centerXAnchor)
uWidth = uView.widthAnchor.constraint(equalTo: sender.widthAnchor, constant: 8)
uCenter.isActive = true
uWidth.isActive = true
UIView.animate(withDuration: 0.3) {
self.layoutIfNeeded()
}
delegate?.didSelect(sender)
}
}
class TestMyTopBarViewController: UIViewController, TopBarButtonTapProtocol {
#IBOutlet var myTopBar: MyTopBar!
override func viewDidLoad() {
super.viewDidLoad()
myTopBar.delegate = self
}
func didSelect(_ sender: UIButton) {
print("Top Bar button selected:", sender.currentTitle)
}
}
and here is the source to an example Storyboard:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="abg-zX-CIL">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Test My Top Bar View Controller-->
<scene sceneID="Jte-e1-dR6">
<objects>
<viewController id="abg-zX-CIL" customClass="TestMyTopBarViewController" customModule="MiniScratch" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="TsC-q0-s74">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="kx6-5a-S6X" customClass="MyTopBar" customModule="MiniScratch" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="375" height="46"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="BXS-ke-LLN">
<rect key="frame" x="0.0" y="0.0" width="375" height="46"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="Gtj-bJ-9xt">
<rect key="frame" x="16" y="8" width="406" height="30"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ljU-s4-4DJ">
<rect key="frame" x="0.0" y="0.0" width="65" height="30"/>
<state key="normal" title="FOR YOU">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="242-wz-PkM">
<rect key="frame" x="81" y="0.0" width="75" height="30"/>
<state key="normal" title="TRENDING">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="c15-qj-lxv">
<rect key="frame" x="172" y="0.0" width="34" height="30"/>
<state key="normal" title="NEW">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="5DP-bs-qBc">
<rect key="frame" x="222" y="0.0" width="75" height="30"/>
<state key="normal" title="FEATURED">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ZfK-40-1VN">
<rect key="frame" x="313" y="0.0" width="93" height="30"/>
<state key="normal" title="BOOKMARKS">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="974-mZ-VM1">
<rect key="frame" x="12" y="38" width="73" height="4"/>
<color key="backgroundColor" systemColor="systemRedColor" red="1" green="0.23137254900000001" blue="0.18823529410000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="4" id="rvK-8e-XTq"/>
</constraints>
</view>
</subviews>
<constraints>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="trailing" secondItem="Zfb-Kx-C2I" secondAttribute="trailing" constant="16" id="4nw-75-kgv"/>
<constraint firstItem="974-mZ-VM1" firstAttribute="centerX" secondItem="ljU-s4-4DJ" secondAttribute="centerX" id="9Ig-gt-a62"/>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="leading" secondItem="Zfb-Kx-C2I" secondAttribute="leading" constant="16" id="EGu-UL-6tD"/>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="bottom" secondItem="Zfb-Kx-C2I" secondAttribute="bottom" id="Fby-qZ-GyD"/>
<constraint firstItem="974-mZ-VM1" firstAttribute="width" secondItem="ljU-s4-4DJ" secondAttribute="width" constant="8" id="GNh-W8-umn"/>
<constraint firstItem="974-mZ-VM1" firstAttribute="top" secondItem="Gtj-bJ-9xt" secondAttribute="bottom" id="QeJ-UW-lPh"/>
<constraint firstItem="Gtj-bJ-9xt" firstAttribute="top" secondItem="Zfb-Kx-C2I" secondAttribute="top" constant="8" id="gXv-a7-43N"/>
<constraint firstItem="x1k-em-xS5" firstAttribute="bottom" secondItem="Gtj-bJ-9xt" secondAttribute="bottom" constant="8" id="yQ5-dH-18H"/>
</constraints>
<viewLayoutGuide key="contentLayoutGuide" id="Zfb-Kx-C2I"/>
<viewLayoutGuide key="frameLayoutGuide" id="x1k-em-xS5"/>
</scrollView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="BXS-ke-LLN" secondAttribute="trailing" id="1Qh-mv-QIl"/>
<constraint firstItem="BXS-ke-LLN" firstAttribute="top" secondItem="kx6-5a-S6X" secondAttribute="top" id="XBR-Uf-huR"/>
<constraint firstItem="BXS-ke-LLN" firstAttribute="leading" secondItem="kx6-5a-S6X" secondAttribute="leading" id="YyI-HM-ve8"/>
<constraint firstAttribute="bottom" secondItem="BXS-ke-LLN" secondAttribute="bottom" id="ioI-y3-Lmd"/>
</constraints>
<connections>
<outlet property="theStack" destination="Gtj-bJ-9xt" id="5XU-eX-2NB"/>
<outlet property="uCenter" destination="9Ig-gt-a62" id="TxH-Bf-Hy0"/>
<outlet property="uView" destination="974-mZ-VM1" id="BZ0-ne-Fcb"/>
<outlet property="uWidth" destination="GNh-W8-umn" id="aFq-4f-sQu"/>
</connections>
</view>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstItem="kx6-5a-S6X" firstAttribute="top" secondItem="u6w-w1-8iK" secondAttribute="top" id="KhJ-Id-pdJ"/>
<constraint firstItem="kx6-5a-S6X" firstAttribute="trailing" secondItem="u6w-w1-8iK" secondAttribute="trailing" id="R2z-YZ-Vkl"/>
<constraint firstItem="kx6-5a-S6X" firstAttribute="leading" secondItem="u6w-w1-8iK" secondAttribute="leading" id="ifV-RN-a6g"/>
</constraints>
<viewLayoutGuide key="safeArea" id="u6w-w1-8iK"/>
</view>
<navigationItem key="navigationItem" id="cpA-Qb-gmu">
<barButtonItem key="rightBarButtonItem" systemItem="add" id="mAr-W2-GXa">
<connections>
<action selector="addBtnPressed:" destination="abg-zX-CIL" id="OIu-lZ-j2s"/>
</connections>
</barButtonItem>
</navigationItem>
<connections>
<outlet property="myTopBar" destination="kx6-5a-S6X" id="Ssi-YG-3F2"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="wfE-oG-abp" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="1703" y="1657"/>
</scene>
</scenes>
</document>
and here's how it looks at run-time, with the buttons scrolled to the left, and the "Featured" button selected:
I use Xcode. I want to use bash to batch modify the UI fonts.
For instance change:
<fontDescription key="fontDescription" type="system" pointSize="17"/>
to:
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>`
Code to start:
find . -type f '(' -name '*.storyboard' -o -name '*.xib' ')' . \
-exec sed -i '' s/'\<fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"17\"\/\>'/'\<fontDescription key=\"fontDescription\" name=\"PingFangSC-Regular\" family=\"PingFang SC\" pointSize=\"12\"\/\>'/ {} +
# placeholder, to look code better
This is the easy version. I want to find the number ( font size ) and replaced in the next string.
I have read Using sed to find and replace complex string (preferrably with regex) .
Thanks to #battlmonstr, I tried
find . -type f '(' -name '*.storyboard' -o -name '*.xib' ')' \
-exec sed -E -i '' 's#\<fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"17\"/>#<fontDescription key=\"fontDescription\" name=\"PingFangSC-Regular\" family=\"PingFang SC\" pointSize=\"12\"\/>#' {} +
# placeholder
It is OK.
In order to test more , like
$ echo abcd123 | sed 's/\([a-z]*\).*/\1/'
abcd
I want to keep the number.
In order to get the number ,and then arrange the content to replace, I tried
$ echo "<fontDescription key="fontDescription" type="system" pointSize="17"/>" | \
sed -E 's#\<fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"(\d+)\"\/>#\1#'
<fontDescription key=fontDescription type=system pointSize=17/>
The result is not OK, not like the one above. Not expected.
I tested in regex101 which is OK. I'm still figuring why.
The example content:
<?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" initialViewController="BYZ-38-t0r">
<device id="retina4_7" orientation="portrait">
<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>
<!--View Controller-->
<scene sceneID="tne-QT-ifu">
<objects>
<viewController id="BYZ-38-t0r" customClass="ViewController" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="7yI-IF-sfh">
<rect key="frame" x="126" y="266" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="vTz-nw-d8Y">
<rect key="frame" x="126" y="416" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="VCU-bo-Iyu">
<rect key="frame" x="175" y="218" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="O3R-uM-fzi">
<rect key="frame" x="91" y="217" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="93Z-nX-mmW">
<rect key="frame" x="188" y="64" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="9O2-dY-2nt">
<rect key="frame" x="277" y="197" width="42" height="13"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="7Mp-RI-aG9">
<rect key="frame" x="69" y="87" width="42" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" name="PingFangSC-Regular" family="PingFang SC" pointSize="12"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<gestureRecognizers/>
<connections>
<outletCollection property="gestureRecognizers" destination="QsQ-yU-xmv" appends="YES" id="4co-bU-mXm"/>
</connections>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
<pongPressGestureRecognizer allowableMovement="10" minimumPressDuration="0.5" id="QsQ-yU-xmv"/>
</objects>
<point key="canvasLocation" x="53.600000000000001" y="26.53673163418291"/>
</scene>
</scenes>
</document>
Between the first and 2nd version you have replaced -i '' with -E '' which is likely causing this problem. You probably want to keep -i, and add -E before that like this:
sed -E -i '' ...
'' is an argument to -i that basically tells "do not do backups".
What usually helps to find the problem is to debug "sed" separately from "find", e.g. run that sed command separately, without find and without in-place replacement, and hack until it works. Then add -i and find on top.
I recommend to start simple and work your way forward.
Simplify to this:
sed -E 's/pointSize="12"/pointSize="15"/'
Test that it works. Then improve it a bit:
sed -E 's/pointSize="[0-9]+"/pointSize="15"/'
Test that it works, etc.
The actual code based on battlmonstr's answer.
find . -type f '(' -name '*.storyboard' -o -name '*.xib' ')' -exec \
sed -E -i '' 's#\<fontDescription key=\"fontDescription\" type=\"system\" pointSize=\"([0-9]+)\"/>#<fontDescription key=\"fontDescription\" name=\"PingFangSC-Regular\" family=\"PingFang SC\" pointSize=\"\1\"\/>#' {} +
#
Firstly I try like this echo "pointSize=\"11\"" | sed -E 's#\pointSize=\"([0-9]+)\"#poinize=\"\1\"#'
I'm using the auto layout in storyboards in a Xamarin.iOS project.
why is my constrains not respected when I switch from Iphone4 to iPhone 5 or o Iphon6 etc.
I tried in all modes... I also tried to design in GENERIC mode and it the label, button are staying in fixed position on the Screen and it cut's off it shows orange when I switch to different render modes in Xamarin Studio - designer.
AutoLayout, size classing is checked on! and the controls are fully constrained in other words has x,y,height, width etc. are set.
I also followed this short introduction video about AutoLAyout, but I don't get the same results: https://www.youtube.com/watch?v=pDlCx0C3v74
2nd ISSUE I have is:
When I make changes in the properties e.g. the height from 21 to 30 and I press the "update frames based on constraints" then I expect the height on the designer is going to be adjust to 30. But when I click on the "Update frames..." button then the property value is set back to 21... I thought this should be other way around... !!!!
any advice?
Xamarin Studio
Version 6.1.3 (build 19)
switch to Iphone6
switch to iPhone 4
UPDATED (storyboard code added)
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="11762" systemVersion="16C67" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r" launchScreen="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
<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" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Hi there this is a label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="3" translatesAutoresizingMaskIntoConstraints="NO">
<rect key="frame" x="225" y="290" width="254" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
<constraints>
<constraint id="10" firstItem="3" firstAttribute="height" constant="21"/>
<constraint id="13" firstItem="3" firstAttribute="width" constant="254"/>
</constraints>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="one more label is here" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="4" translatesAutoresizingMaskIntoConstraints="NO" fixedFrame="YES">
<rect key="frame" x="225" y="344" width="231" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<constraints>
<constraint id="9" firstItem="3" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" constant="225"/>
<constraint id="12" firstItem="3" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" constant="270"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="0.0" y="0.0"/>
</scene>
</scenes>
</document>
From my experience the iOS Designer can be quite buggy, and especially for constraints its easier to use interface builder.
right click on the storyboard > Open with > Xcode Interface builder
From the code you posted it looks like only the constraints for the top label have been set everything else is not there see this screenshot from interface builder of the code you posted:
I would add the constraints in interface builder like so:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="11762" systemVersion="16C67" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" colorMatched="YES" initialViewController="BYZ-38-t0r" launchScreen="YES">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
<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" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="y3c-jy-aDJ"/>
<viewControllerLayoutGuide type="bottom" id="wfy-db-euE"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="8bC-Xf-vdC">
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Hi there this is a label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="3" translatesAutoresizingMaskIntoConstraints="NO">
<rect key="frame" x="225" y="290" width="254" height="21"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
<constraints>
<constraint id="10" firstItem="3" firstAttribute="height" constant="21"/>
<constraint id="13" firstItem="3" firstAttribute="width" constant="254"/>
</constraints>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="one more label is here" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" id="4" translatesAutoresizingMaskIntoConstraints="NO" fixedFrame="YES">
<rect key="frame" x="225" y="344" width="231" height="21"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<constraints>
<constraint id="9" firstItem="3" firstAttribute="leading" secondItem="8bC-Xf-vdC" secondAttribute="leading" constant="225"/>
<constraint id="12" firstItem="3" firstAttribute="top" secondItem="y3c-jy-aDJ" secondAttribute="bottom" constant="270"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="dkx-z0-nzr" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="0.0" y="0.0"/>
</scene>
</scenes>
</document>
Generally if you are trying to accommodate for other screens you wouldn't set the leading to have a constant of 225 as other devices will have different screen sizes and it will possibly be off screen. So it is better to try to position the relative to the center vertical or horizontal of a view or using ratios in the constant.
Also to default the storyboard and xib to open with xcode interface builder you can use this awesome addon from ColbyWilliams