JakeC
Reputation: 241
How do I set constraints for this view?
I have this view which I simply cannot get the constraints down right. I even tried stack views but it still could not get it. Please click the image link to see what the layout looks like.
I need help setting the right constraints in storyboard and also making sure it is dynamic ( including the text shrinking to the right size of the screen). Thank you for the help!
Upvotes: 0
Views: 151
Answers (2)
Suhail kalathil
Reputation: 2693
I edited your storyboard.Here i paste the xml.Take outles of first top button width and height constraints.Then change through code for dynamic behaviour .
#import "ViewController.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *buttonWidthConstraint;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *buttonHeightConstant;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//60 = gap between button and left right padding
//140 = gap between buttons and top bottom padding
self.buttonWidthConstraint.constant = (self.view.frame.size.width - 60)/2;
self.buttonHeightConstant.constant = (self.view.frame.size.height - 140)/4;
[UIView animateWithDuration:0.5 animations:^{
[self.view layoutIfNeeded];
}];
// Do any additional setup after loading the view, typically from a nib.
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="8191" systemVersion="14F27" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="JGf-ti-vAF">
<dependencies>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="8154"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="YlR-y8-Jbu">
<objects>
<viewController id="JGf-ti-vAF" customClass="ViewController" sceneMemberID="viewController">
<layoutGuides>
<viewControllerLayoutGuide type="top" id="Abf-DD-SvM"/>
<viewControllerLayoutGuide type="bottom" id="j19-ef-uDb"/>
</layoutGuides>
<view key="view" contentMode="scaleToFill" id="qIt-ah-XBl">
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="7Cn-GC-UIA">
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
</imageView>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="aHp-jP-RgJ">
<rect key="frame" x="226" y="45" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<constraints>
<constraint firstAttribute="width" constant="148" id="emB-rW-56o"/>
<constraint firstAttribute="height" constant="101" id="g0F-rb-AVX"/>
</constraints>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="8Rm-YT-wZ7">
<rect key="frame" x="20" y="166" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="T5I-DX-agA">
<rect key="frame" x="432" y="166" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="Its-1I-c8f">
<rect key="frame" x="432" y="287" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="Wxo-Rh-KVV">
<rect key="frame" x="20" y="408" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="UDX-S2-uRA">
<rect key="frame" x="432" y="408" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="wordWrap" translatesAutoresizingMaskIntoConstraints="NO" id="t2m-9Y-3Gr">
<rect key="frame" x="20" y="287" width="148" height="101"/>
<color key="backgroundColor" red="1" green="0.087589855729999999" blue="0.067484365290000001" alpha="1" colorSpace="calibratedRGB"/>
<fontDescription key="fontDescription" name="Avenir-Book" family="Avenir" pointSize="18"/>
<state key="normal" title="Button one">
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
</state>
<userDefinedRuntimeAttributes>
<userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
<real key="value" value="8.5"/>
</userDefinedRuntimeAttribute>
</userDefinedRuntimeAttributes>
</button>
</subviews>
<color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="calibratedWhite"/>
<constraints>
<constraint firstItem="Wxo-Rh-KVV" firstAttribute="leading" secondItem="t2m-9Y-3Gr" secondAttribute="leading" id="180-eR-Wwt"/>
<constraint firstAttribute="trailing" secondItem="7Cn-GC-UIA" secondAttribute="trailing" id="5nC-Gx-Fa1"/>
<constraint firstItem="aHp-jP-RgJ" firstAttribute="width" secondItem="T5I-DX-agA" secondAttribute="width" id="BY2-aC-Yd3"/>
<constraint firstItem="Wxo-Rh-KVV" firstAttribute="top" secondItem="UDX-S2-uRA" secondAttribute="top" id="CuU-5v-5rN"/>
<constraint firstItem="UDX-S2-uRA" firstAttribute="leading" secondItem="Its-1I-c8f" secondAttribute="leading" id="DlE-Nf-3io"/>
<constraint firstItem="j19-ef-uDb" firstAttribute="top" secondItem="7Cn-GC-UIA" secondAttribute="bottom" id="Fbp-KG-e6q"/>
<constraint firstItem="7Cn-GC-UIA" firstAttribute="leading" secondItem="qIt-ah-XBl" secondAttribute="leading" id="Jr4-7g-Upm"/>
<constraint firstItem="aHp-jP-RgJ" firstAttribute="centerX" secondItem="qIt-ah-XBl" secondAttribute="centerX" id="M5Z-AL-SGA"/>
<constraint firstItem="t2m-9Y-3Gr" firstAttribute="leading" secondItem="8Rm-YT-wZ7" secondAttribute="leading" id="NBt-0c-Fv9"/>
<constraint firstItem="aHp-jP-RgJ" firstAttribute="top" secondItem="Abf-DD-SvM" secondAttribute="bottom" constant="25" id="NqB-Cg-7cN"/>
<constraint firstItem="t2m-9Y-3Gr" firstAttribute="top" secondItem="8Rm-YT-wZ7" secondAttribute="bottom" constant="20" id="Q76-UZ-V5H"/>
<constraint firstItem="aHp-jP-RgJ" firstAttribute="height" secondItem="T5I-DX-agA" secondAttribute="height" id="T9R-Ug-Bub"/>
<constraint firstItem="aHp-jP-RgJ" firstAttribute="height" secondItem="8Rm-YT-wZ7" secondAttribute="height" id="UNQ-d0-l4z"/>
<constraint firstItem="t2m-9Y-3Gr" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="Zer-FI-bBB"/>
<constraint firstItem="UDX-S2-uRA" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="c56-IW-gRF"/>
<constraint firstAttribute="trailing" secondItem="T5I-DX-agA" secondAttribute="trailing" constant="20" id="dXU-Gh-eXL"/>
<constraint firstItem="t2m-9Y-3Gr" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="e14-04-CG0"/>
<constraint firstItem="Wxo-Rh-KVV" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="fiF-yH-qvW"/>
<constraint firstItem="Wxo-Rh-KVV" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="jc3-oJ-ze2"/>
<constraint firstItem="UDX-S2-uRA" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="kNm-AX-HVB"/>
<constraint firstItem="aHp-jP-RgJ" firstAttribute="width" secondItem="8Rm-YT-wZ7" secondAttribute="width" id="kRf-PB-mDD"/>
<constraint firstItem="t2m-9Y-3Gr" firstAttribute="top" secondItem="Its-1I-c8f" secondAttribute="top" id="kTF-qT-xAw"/>
<constraint firstItem="8Rm-YT-wZ7" firstAttribute="top" secondItem="T5I-DX-agA" secondAttribute="top" id="mbc-xn-Fgi"/>
<constraint firstItem="Its-1I-c8f" firstAttribute="height" secondItem="aHp-jP-RgJ" secondAttribute="height" id="ogn-ja-iwo"/>
<constraint firstItem="8Rm-YT-wZ7" firstAttribute="leading" secondItem="qIt-ah-XBl" secondAttribute="leading" constant="20" id="riZ-Om-LeS"/>
<constraint firstItem="Its-1I-c8f" firstAttribute="width" secondItem="aHp-jP-RgJ" secondAttribute="width" id="s0k-AT-xQk"/>
<constraint firstItem="8Rm-YT-wZ7" firstAttribute="top" secondItem="aHp-jP-RgJ" secondAttribute="bottom" constant="20" id="u62-4u-etC"/>
<constraint firstItem="8Rm-YT-wZ7" firstAttribute="height" secondItem="T5I-DX-agA" secondAttribute="height" id="vid-B6-03f"/>
<constraint firstItem="8Rm-YT-wZ7" firstAttribute="width" secondItem="T5I-DX-agA" secondAttribute="width" id="w0d-EC-Erp"/>
<constraint firstItem="7Cn-GC-UIA" firstAttribute="top" secondItem="qIt-ah-XBl" secondAttribute="top" id="wy5-7A-SfF"/>
<constraint firstItem="Wxo-Rh-KVV" firstAttribute="top" secondItem="t2m-9Y-3Gr" secondAttribute="bottom" constant="20" id="x0A-hz-o8i"/>
<constraint firstItem="Its-1I-c8f" firstAttribute="leading" secondItem="T5I-DX-agA" secondAttribute="leading" id="xwQ-c1-xDh"/>
</constraints>
<variation key="default">
<mask key="constraints">
<exclude reference="vid-B6-03f"/>
<exclude reference="w0d-EC-Erp"/>
</mask>
</variation>
</view>
<connections>
<outlet property="buttonHeightConstant" destination="g0F-rb-AVX" id="7fh-Sc-ymq"/>
<outlet property="buttonWidthConstraint" destination="emB-rW-56o" id="Lil-Fv-rOV"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="bSl-KE-cTH" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="3" y="179"/>
</scene>
</scenes>
</document>
Upvotes: 1
rob mayoff
Reputation: 385500
So you have seven buttons:
You apparently want the top button to be in a row by itself, and the remaining buttons in three rows of two. So I select the top two side-by-side buttons and click the “embed in stack view” button at the bottom of the canvas.
Because I had already placed the two buttons in a somewhat horizontal row by hand, Xcode automatically put them in a horizontal stack view.
I repeat the procedure for the other two rows of two buttons. It ends up looking like this:
Then I select the top standalone button and the three horizontal stack views, and click the “embed in stack view” button again. This time, Xcode creates a vertical stack view, and it looks like this:
Since you want the top button centered, I set the alignment of the vertical stack view to Center in the Attributes inspector:
I guess you want the whole arrangement centered, so I create constraints on the vertical stack view to center it horizontally and vertically in its container:
You also want padding between the buttons, so I select all the stack views and set the padding in the Attributes inspector:
You didn't explain how you chose the size of your buttons. I'll just pick the top button and constrain it to be 100 by 60:
Then I'll select all the buttons in the document outline and constrain them to equal width and height:
Xcode threw the vertical stack view off-center when I did this, but I just selected it in the document outline and then chose Editor > Resolve Auto Layout Issues > (All Views) Update Frames to fix the misplacement. It looks like this in the end:
Upvotes: 1
Related Questions
- Setting Autolayout Constraints on UIButton in Swift
- Constrain Button with its own width
- Error trying to set the constraints for a UIButton
- Programatically add constraint to prevent button overlap SWIFT 4
- Constraints Overlapping, Swift Xcode
- Add constraints to button in swift (Apple iOS Tutorial)
- How to modify programmatically constraints of UIButton
- Add constraints to side by side buttons
- how to give constraints for UIbuttons
- Adding constraints for UIButton in swift