Can I make a scrollview on xcode 12 without specifying content height - uiscrollview

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>

Related

Xcode - Cannot set UITextView background color (device in dark mode)

I am trying to force a UITextView to keep the background color of white regardless of the mode set on the device. At the moment, when the device is set in light mode, the background of the UITextView is white, if the user changes to dark mode, the UITextView changes to black (probably the expected behaviour).
I want to force the background color for UITextView to white regardless of the mode set on the device.
I have tried changing this everywhere both in the UI of Xcode and in the code, but it does not seem to respect the color set and always changes the background colour to black.
Here is the source code:
<view clipsSubviews="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="yI7-hV-e1x">
<rect key="frame" x="20" y="139" width="335" height="150"/>
<subviews>
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="zzp-UV-fkE">
<rect key="frame" x="0.0" y="0.0" width="335" height="150"/>
<color key="backgroundColor" white="1" alpha="1" colorSpace="calibratedWhite"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<textInputTraits key="textInputTraits" autocapitalizationType="sentences"/>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="string" keyPath="placeholder" value="Enter message here"/>
<userDefinedRuntimeAttribute type="color" keyPath="background.Color">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="color">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="UITextView.backgroundColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</textView>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="trailing" secondItem="zzp-UV-fkE" secondAttribute="trailing" id="3r4-ih-LvH"/>
<constraint firstAttribute="bottom" secondItem="zzp-UV-fkE" secondAttribute="bottom" id="43N-Io-MuA"/>
<constraint firstItem="zzp-UV-fkE" firstAttribute="leading" secondItem="yI7-hV-e1x" secondAttribute="leading" id="FUG-Np-Cu1"/>
<constraint firstItem="zzp-UV-fkE" firstAttribute="top" secondItem="yI7-hV-e1x" secondAttribute="top" id="r6c-Py-iV8"/>
<constraint firstAttribute="height" constant="150" id="xlc-gd-Q43"/>
</constraints>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<integer key="value" value="7"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="number" keyPath="layer.borderWidth">
<integer key="value" value="1"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="layer.borderColor">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
<userDefinedRuntimeAttribute type="color" keyPath="background.Color">
<color key="value" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</view>
This is what it looks like in dark mode:
And this is Light Mode:
I want the background permanently set to white.
I can achieve that with the following
<textView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" text="Reason for rejection" textAlignment="natural" translatesAutoresizingMaskIntoConstraints="NO" id="pzd-Bi-M3G">
...
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
...
<color key="textColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
...
</textView>
Note - I've truncated the irrelevant bits of XML
I was able to resolve this by adding the following:
UITextView.appearance.backgroundColor = [UIColor whiteColor];
UITextView.appearance.textColor = [UIColor blackColor];
For some reason I could not achieve it via the UI and had to do it programatically.

Custom control is not visible in Xcode designer

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

Underline Single Button from Top menu bar

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:

Add constraint between NSScrollView content and outside object

How do you make an object outside of a scroll view lock onto an object within a scroll view using Auto Layout constraints?
The intent of the code below is to make the box object on the right move up with the bottom half of the scroll view content.
Instead, it starts in the right place, but doesn't move with the scroll view content.
AppDelegate.swift:
import Cocoa
#NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {
#IBOutlet weak var window: NSWindow!
func applicationDidFinishLaunching(_ aNotification: Notification) {
window.contentViewController = ViewController(nibName: "View", bundle: nil)
// Insert code here to initialize your application
}
func applicationWillTerminate(_ aNotification: Notification) {
// Insert code here to tear down your application
}
}
ViewController.swift:
import Cocoa
class ViewController: NSViewController {
#IBOutlet weak var view1: NSView!
#IBOutlet weak var view2: NSView!
override func viewDidLoad() {
view1.colorBackground(NSColor.red)
view2.colorBackground(NSColor.blue)
}
}
extension NSView {
func colorBackground(_ color: NSColor) {
wantsLayer = true
layer?.backgroundColor = color.cgColor
}
}
View.xib:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.Cocoa.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="MacOSX.Cocoa" propertyAccessControl="none" useAutolayout="YES" customObjectInstantitationMethod="direct">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.CocoaPlugin" version="14460.31"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<objects>
<customObject id="-2" userLabel="File's Owner" customClass="ViewController" customModule="Test" customModuleProvider="target">
<connections>
<outlet property="view" destination="c22-O7-iKe" id="Yxc-sQ-AW4"/>
<outlet property="view1" destination="8x7-dp-Hsw" id="evk-7F-37Z"/>
<outlet property="view2" destination="f8D-v7-oc2" id="BgB-Fo-M7R"/>
</connections>
</customObject>
<customObject id="-1" userLabel="First Responder" customClass="FirstResponder"/>
<customObject id="-3" userLabel="Application" customClass="NSObject"/>
<customView id="c22-O7-iKe">
<rect key="frame" x="0.0" y="0.0" width="500" height="200"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMinY="YES"/>
<subviews>
<scrollView horizontalLineScroll="10" horizontalPageScroll="10" verticalLineScroll="10" verticalPageScroll="10" usesPredominantAxisScrolling="NO" translatesAutoresizingMaskIntoConstraints="NO" id="agq-bZ-fEr">
<rect key="frame" x="0.0" y="0.0" width="400" height="200"/>
<clipView key="contentView" id="iYq-AW-6CU">
<rect key="frame" x="1" y="1" width="398" height="198"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view translatesAutoresizingMaskIntoConstraints="NO" id="Jr5-4g-mif">
<rect key="frame" x="-1" y="-201" width="400" height="400"/>
<subviews>
<stackView distribution="fillEqually" orientation="vertical" alignment="leading" spacing="0.0" horizontalStackHuggingPriority="249.99998474121094" verticalStackHuggingPriority="249.99998474121094" detachesHiddenViews="YES" translatesAutoresizingMaskIntoConstraints="NO" id="SyR-ko-zr4">
<rect key="frame" x="0.0" y="0.0" width="400" height="400"/>
<subviews>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="8x7-dp-Hsw">
<rect key="frame" x="0.0" y="96" width="400" height="304"/>
</customView>
<customView translatesAutoresizingMaskIntoConstraints="NO" id="f8D-v7-oc2">
<rect key="frame" x="0.0" y="0.0" width="400" height="96"/>
</customView>
</subviews>
<constraints>
<constraint firstItem="f8D-v7-oc2" firstAttribute="width" secondItem="SyR-ko-zr4" secondAttribute="width" id="CUa-kB-FHn"/>
<constraint firstItem="8x7-dp-Hsw" firstAttribute="width" secondItem="SyR-ko-zr4" secondAttribute="width" id="Qeh-ci-tD8"/>
</constraints>
<visibilityPriorities>
<integer value="1000"/>
<integer value="1000"/>
</visibilityPriorities>
<customSpacing>
<real value="3.4028234663852886e+38"/>
<real value="3.4028234663852886e+38"/>
</customSpacing>
</stackView>
</subviews>
<constraints>
<constraint firstAttribute="trailing" secondItem="SyR-ko-zr4" secondAttribute="trailing" id="071-Ds-bqi"/>
<constraint firstAttribute="bottom" secondItem="SyR-ko-zr4" secondAttribute="bottom" id="GBW-oP-mbV"/>
<constraint firstAttribute="height" constant="400" id="LG2-HP-nAB"/>
<constraint firstItem="SyR-ko-zr4" firstAttribute="leading" secondItem="Jr5-4g-mif" secondAttribute="leading" id="xno-LJ-JNv"/>
<constraint firstItem="SyR-ko-zr4" firstAttribute="top" secondItem="Jr5-4g-mif" secondAttribute="top" id="y6g-52-NdQ"/>
</constraints>
</view>
</subviews>
</clipView>
<constraints>
<constraint firstItem="Jr5-4g-mif" firstAttribute="top" secondItem="agq-bZ-fEr" secondAttribute="top" id="Ln7-Pi-szE"/>
<constraint firstAttribute="trailing" secondItem="Jr5-4g-mif" secondAttribute="trailing" id="MO9-MN-kVt"/>
<constraint firstAttribute="height" constant="200" id="l0n-gW-nUT"/>
<constraint firstItem="Jr5-4g-mif" firstAttribute="leading" secondItem="agq-bZ-fEr" secondAttribute="leading" id="zbi-k8-oiU"/>
</constraints>
<scroller key="horizontalScroller" wantsLayer="YES" verticalHuggingPriority="750" horizontal="YES" id="gZP-Yp-TOe">
<rect key="frame" x="1" y="183" width="398" height="16"/>
<autoresizingMask key="autoresizingMask"/>
</scroller>
<scroller key="verticalScroller" wantsLayer="YES" verticalHuggingPriority="750" doubleValue="1" horizontal="NO" id="Vcv-Oy-xXi">
<rect key="frame" x="383" y="1" width="16" height="198"/>
<autoresizingMask key="autoresizingMask"/>
</scroller>
</scrollView>
<box boxType="custom" title="Box" translatesAutoresizingMaskIntoConstraints="NO" id="wHO-ht-fwK">
<rect key="frame" x="450" y="-104" width="50" height="50"/>
<view key="contentView" id="7Ur-kr-AeI">
<rect key="frame" x="1" y="1" width="48" height="48"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
</view>
<constraints>
<constraint firstAttribute="height" constant="50" id="Tof-Kf-eC0"/>
<constraint firstAttribute="width" constant="50" id="wqS-HE-kqB"/>
</constraints>
<color key="fillColor" red="1" green="0.3294117647" blue="0.3294117647" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</box>
</subviews>
<constraints>
<constraint firstItem="agq-bZ-fEr" firstAttribute="top" secondItem="c22-O7-iKe" secondAttribute="top" id="CrV-le-r8T"/>
<constraint firstAttribute="trailing" secondItem="wHO-ht-fwK" secondAttribute="trailing" id="Tas-pu-9sK"/>
<constraint firstAttribute="trailing" secondItem="agq-bZ-fEr" secondAttribute="trailing" constant="100" id="VWL-ze-Lbx"/>
<constraint firstAttribute="bottom" secondItem="agq-bZ-fEr" secondAttribute="bottom" id="gPO-Wu-Czj"/>
<constraint firstItem="wHO-ht-fwK" firstAttribute="bottom" secondItem="f8D-v7-oc2" secondAttribute="top" id="qgy-WE-2Sh"/>
<constraint firstItem="agq-bZ-fEr" firstAttribute="leading" secondItem="c22-O7-iKe" secondAttribute="leading" id="y6u-QG-JtA"/>
</constraints>
</customView>
</objects>
</document>

xamarin auto layout is not working - it doesn't respect the constraints while it's fully constrainted

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

Resources