Skip to content

Commit 94a6d58

Browse files
samsymonsajsecord
samsymons
authored and
ajsecord
committed
[Catalog] Center views in the Buttons (Swift and Storyboard) demo (#1126)
* Center the Storyboard button demo. This uses an outer container to set up a view which is 50% the screen width (to allow for the other half of the button demo), and then an inner container to vertically and horizontally center the buttons. * Center the buttons added programatically.
1 parent b62b9c0 commit 94a6d58

File tree

2 files changed

+115
-47
lines changed

2 files changed

+115
-47
lines changed

‎components/Buttons/examples/ButtonsStoryboardAndProgrammatic.swift‎

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,20 @@ class ButtonsStoryboardAndProgrammaticController: UIViewController {
3535
@IBOutlet weak var storyboardFlat: MDCFlatButton!
3636
@IBOutlet weak var storyboardFloating: MDCFloatingButton!
3737

38+
private lazy var containerView: UIView = {
39+
let view = UIView()
40+
view.translatesAutoresizingMaskIntoConstraints = false
41+
42+
return view
43+
}()
44+
45+
private lazy var innerContainerView: UIView = {
46+
let view = UIView()
47+
view.translatesAutoresizingMaskIntoConstraints = false
48+
49+
return view
50+
}()
51+
3852
init() {
3953
super.init(nibName: nil, bundle: nil)
4054
}
@@ -46,26 +60,42 @@ class ButtonsStoryboardAndProgrammaticController: UIViewController {
4660
override func viewDidLoad() {
4761
super.viewDidLoad()
4862

63+
self.view.addSubview(containerView)
64+
65+
NSLayoutConstraint.activate([
66+
NSLayoutConstraint(item: containerView, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1.0, constant: 0),
67+
NSLayoutConstraint(item: containerView, attribute: .top, relatedBy: .equal, toItem: view, attribute: .top, multiplier: 1.0, constant: 0),
68+
NSLayoutConstraint(item: containerView, attribute: .bottom, relatedBy: .equal, toItem: view, attribute: .bottom, multiplier: 1.0, constant: 0),
69+
NSLayoutConstraint(item: containerView, attribute: .width, relatedBy: .equal, toItem: view, attribute: .width, multiplier: 0.5, constant: 0)
70+
])
71+
72+
containerView.addSubview(innerContainerView)
73+
74+
NSLayoutConstraint.activate([
75+
NSLayoutConstraint(item: innerContainerView, attribute: .centerX, relatedBy: .equal, toItem: containerView, attribute: .centerX, multiplier: 1.0, constant: 0),
76+
NSLayoutConstraint(item: innerContainerView, attribute: .centerY, relatedBy: .equal, toItem: containerView, attribute: .centerY, multiplier: 1.0, constant: 0)
77+
])
78+
4979
raisedButton.setTitle("Programmatic", for: UIControlState())
5080
raisedButton.sizeToFit()
5181
raisedButton.translatesAutoresizingMaskIntoConstraints = false
5282
raisedButton.addTarget(self, action: #selector(tap), for: .touchUpInside)
53-
self.view.addSubview(raisedButton)
83+
self.innerContainerView.addSubview(raisedButton)
5484

5585
flatButton.customTitleColor = UIColor.gray
5686
flatButton.setTitle("Programmatic", for: UIControlState())
5787
flatButton.sizeToFit()
5888
flatButton.translatesAutoresizingMaskIntoConstraints = false
5989
flatButton.addTarget(self, action: #selector(tap), for: .touchUpInside)
60-
self.view.addSubview(flatButton)
90+
self.innerContainerView.addSubview(flatButton)
6191

6292
floatingButton.sizeToFit()
6393
floatingButton.translatesAutoresizingMaskIntoConstraints = false
6494
floatingButton.addTarget(self, action: #selector(tap), for: .touchUpInside)
6595

6696
let floatingPlusShapeLayer = ButtonsTypicalUseSupplemental.createPlusShapeLayer(floatingButton)
6797
floatingButton.layer.addSublayer(floatingPlusShapeLayer)
68-
self.view.addSubview(floatingButton)
98+
self.innerContainerView.addSubview(floatingButton)
6999

70100
let storyboardPlusShapeLayer =
71101
ButtonsTypicalUseSupplemental.createPlusShapeLayer(floatingButton)
@@ -81,22 +111,31 @@ class ButtonsStoryboardAndProgrammaticController: UIViewController {
81111
item: raisedButton,
82112
attribute: .leading,
83113
relatedBy: .equal,
84-
toItem: self.view,
114+
toItem: innerContainerView,
85115
attribute: .leading,
86116
multiplier: 1.0,
87-
constant: 8.0))
117+
constant: 0))
118+
119+
self.view.addConstraint(NSLayoutConstraint(
120+
item: raisedButton,
121+
attribute: .trailing,
122+
relatedBy: .equal,
123+
toItem: innerContainerView,
124+
attribute: .trailing,
125+
multiplier: 1.0,
126+
constant: 0))
88127

89128
self.view.addConstraint(NSLayoutConstraint(
90129
item: raisedButton,
91130
attribute: .top,
92131
relatedBy: .equal,
93-
toItem: self.view,
132+
toItem: innerContainerView,
94133
attribute: .top,
95134
multiplier: 1.0,
96-
constant: 22.0))
135+
constant: 0))
97136

98137
self.view.addConstraints(
99-
NSLayoutConstraint.constraints(withVisualFormat: "V:[raised]-22-[flat]-22-[floating]",
138+
NSLayoutConstraint.constraints(withVisualFormat: "V:|[raised]-22-[flat]-22-[floating]|",
100139
options: .alignAllCenterX,
101140
metrics: nil,
102141
views: views))

‎components/Buttons/examples/resources/ButtonsStoryboardAndProgrammatic.storyboard‎

Lines changed: 68 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
1-
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
2-
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="10117" systemVersion="15G1108" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" initialViewController="rmZ-Mt-scB">
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<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="rmZ-Mt-scB">
3+
<device id="retina4_7" orientation="portrait">
4+
<adaptation id="fullscreen"/>
5+
</device>
36
<dependencies>
47
<deployment identifier="iOS"/>
5-
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="10085"/>
8+
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="11757"/>
69
<capability name="Constraints to layout margins" minToolsVersion="6.0"/>
10+
<capability name="Constraints with non-1.0 multipliers" minToolsVersion="5.1"/>
11+
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
712
</dependencies>
813
<scenes>
914
<!--Buttons Storyboard And Programmatic Controller-->
@@ -15,45 +20,69 @@
1520
<viewControllerLayoutGuide type="bottom" id="QjK-x9-gr9"/>
1621
</layoutGuides>
1722
<view key="view" contentMode="scaleToFill" id="dz8-vM-Ak5">
18-
<rect key="frame" x="0.0" y="0.0" width="600" height="600"/>
23+
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
1924
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
2025
<subviews>
21-
<button opaque="NO" contentMode="scaleToFill" misplaced="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ixI-3k-a3r" customClass="MDCRaisedButton">
22-
<rect key="frame" x="407" y="28" width="173" height="30"/>
23-
<state key="normal" title="Storyboard">
24-
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
25-
</state>
26-
<connections>
27-
<action selector="tap:" destination="rmZ-Mt-scB" eventType="touchUpInside" id="JuO-kL-5tW"/>
28-
</connections>
29-
</button>
30-
<button opaque="NO" contentMode="scaleToFill" misplaced="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="BDu-tK-SwC" customClass="MDCFloatingButton">
31-
<rect key="frame" x="478" y="104" width="56" height="56"/>
32-
<state key="normal">
33-
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="calibratedRGB"/>
34-
</state>
35-
<connections>
36-
<action selector="tap:" destination="rmZ-Mt-scB" eventType="touchUpInside" id="FTx-qa-X3A"/>
37-
</connections>
38-
</button>
39-
<button opaque="NO" contentMode="scaleToFill" misplaced="YES" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="1Dc-Q4-b6Z" customClass="MDCFlatButton">
40-
<rect key="frame" x="407" y="66" width="173" height="30"/>
41-
<state key="normal" title="Storyboard">
42-
<color key="titleColor" red="0.49803921579999999" green="0.49803921579999999" blue="0.49803921579999999" alpha="1" colorSpace="calibratedRGB"/>
43-
</state>
44-
<connections>
45-
<action selector="tap:" destination="rmZ-Mt-scB" eventType="touchUpInside" id="D3j-iL-WdR"/>
46-
</connections>
47-
</button>
26+
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ISg-pg-Aeq" userLabel="Button Container">
27+
<rect key="frame" x="187.5" y="20" width="187.5" height="647"/>
28+
<subviews>
29+
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="VTp-Pq-SmW" userLabel="Inner Button Container">
30+
<rect key="frame" x="48.5" y="254.5" width="91" height="138"/>
31+
<subviews>
32+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ixI-3k-a3r" customClass="MDCRaisedButton">
33+
<rect key="frame" x="0.0" y="0.0" width="91" height="34"/>
34+
<state key="normal" title="Storyboard">
35+
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
36+
</state>
37+
<connections>
38+
<action selector="tap:" destination="rmZ-Mt-scB" eventType="touchUpInside" id="JuO-kL-5tW"/>
39+
</connections>
40+
</button>
41+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="1Dc-Q4-b6Z" customClass="MDCFlatButton">
42+
<rect key="frame" x="7" y="56" width="77" height="30"/>
43+
<state key="normal" title="Storyboard">
44+
<color key="titleColor" red="0.49803921579999999" green="0.49803921579999999" blue="0.49803921579999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
45+
</state>
46+
<connections>
47+
<action selector="tap:" destination="rmZ-Mt-scB" eventType="touchUpInside" id="D3j-iL-WdR"/>
48+
</connections>
49+
</button>
50+
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="BDu-tK-SwC" customClass="MDCFloatingButton">
51+
<rect key="frame" x="30.5" y="108" width="30" height="30"/>
52+
<state key="normal">
53+
<color key="titleColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
54+
</state>
55+
<connections>
56+
<action selector="tap:" destination="rmZ-Mt-scB" eventType="touchUpInside" id="FTx-qa-X3A"/>
57+
</connections>
58+
</button>
59+
</subviews>
60+
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
61+
<constraints>
62+
<constraint firstItem="ixI-3k-a3r" firstAttribute="leading" secondItem="VTp-Pq-SmW" secondAttribute="leading" id="FBb-3p-CG8"/>
63+
<constraint firstAttribute="trailing" secondItem="ixI-3k-a3r" secondAttribute="trailing" id="H0k-Sg-FgP"/>
64+
<constraint firstAttribute="bottom" secondItem="BDu-tK-SwC" secondAttribute="bottom" id="Ha3-Ha-PXS"/>
65+
<constraint firstItem="BDu-tK-SwC" firstAttribute="top" secondItem="1Dc-Q4-b6Z" secondAttribute="bottom" constant="22" id="Kt1-XG-qoe"/>
66+
<constraint firstItem="ixI-3k-a3r" firstAttribute="top" secondItem="VTp-Pq-SmW" secondAttribute="top" id="d6b-wg-hsL"/>
67+
<constraint firstItem="BDu-tK-SwC" firstAttribute="centerX" secondItem="VTp-Pq-SmW" secondAttribute="centerX" id="myT-KJ-say"/>
68+
<constraint firstItem="1Dc-Q4-b6Z" firstAttribute="centerX" secondItem="VTp-Pq-SmW" secondAttribute="centerX" id="vqd-tJ-Ycb"/>
69+
<constraint firstItem="1Dc-Q4-b6Z" firstAttribute="top" secondItem="ixI-3k-a3r" secondAttribute="bottom" constant="22" id="wNB-v5-avy"/>
70+
</constraints>
71+
</view>
72+
</subviews>
73+
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="calibratedWhite"/>
74+
<constraints>
75+
<constraint firstItem="VTp-Pq-SmW" firstAttribute="centerX" secondItem="ISg-pg-Aeq" secondAttribute="centerX" id="1ea-fU-34C"/>
76+
<constraint firstItem="VTp-Pq-SmW" firstAttribute="centerY" secondItem="ISg-pg-Aeq" secondAttribute="centerY" id="Ucq-pJ-ESS"/>
77+
</constraints>
78+
</view>
4879
</subviews>
49-
<color key="backgroundColor" red="0.81176470590000005" green="0.90980392160000001" blue="0.97254901959999995" alpha="1" colorSpace="calibratedRGB"/>
80+
<color key="backgroundColor" red="0.81176470590000005" green="0.90980392160000001" blue="0.97254901959999995" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
5081
<constraints>
51-
<constraint firstItem="1Dc-Q4-b6Z" firstAttribute="top" secondItem="ixI-3k-a3r" secondAttribute="bottom" constant="22" id="BnU-WV-iZC"/>
52-
<constraint firstAttribute="trailingMargin" secondItem="ixI-3k-a3r" secondAttribute="trailing" id="Gt7-Bm-l2M"/>
53-
<constraint firstItem="BDu-tK-SwC" firstAttribute="top" secondItem="1Dc-Q4-b6Z" secondAttribute="bottom" constant="22" id="JzA-Sk-491"/>
54-
<constraint firstItem="1Dc-Q4-b6Z" firstAttribute="centerX" secondItem="BDu-tK-SwC" secondAttribute="centerX" id="PhP-TV-oLS"/>
55-
<constraint firstItem="ixI-3k-a3r" firstAttribute="centerX" secondItem="1Dc-Q4-b6Z" secondAttribute="centerX" id="WwS-8J-IZN"/>
56-
<constraint firstItem="ixI-3k-a3r" firstAttribute="top" secondItem="dkA-v6-Opi" secondAttribute="bottom" constant="22" id="mIM-Ub-zl9"/>
82+
<constraint firstItem="ISg-pg-Aeq" firstAttribute="width" secondItem="dz8-vM-Ak5" secondAttribute="width" multiplier="0.5" id="19q-Zc-Tgb"/>
83+
<constraint firstItem="ISg-pg-Aeq" firstAttribute="trailing" secondItem="dz8-vM-Ak5" secondAttribute="trailingMargin" constant="16" id="PMn-Bh-3ZY"/>
84+
<constraint firstItem="ISg-pg-Aeq" firstAttribute="top" secondItem="dkA-v6-Opi" secondAttribute="bottom" id="cJX-J8-2o7"/>
85+
<constraint firstItem="QjK-x9-gr9" firstAttribute="top" secondItem="ISg-pg-Aeq" secondAttribute="bottom" id="pC7-ZM-ScF"/>
5786
</constraints>
5887
</view>
5988
<connections>
@@ -64,7 +93,7 @@
6493
</viewController>
6594
<placeholder placeholderIdentifier="IBFirstResponder" id="LO5-z8-Ix6" userLabel="First Responder" sceneMemberID="firstResponder"/>
6695
</objects>
67-
<point key="canvasLocation" x="443" y="468"/>
96+
<point key="canvasLocation" x="442.39999999999998" y="467.3163418290855"/>
6897
</scene>
6998
</scenes>
7099
</document>

0 commit comments

Comments
 (0)