How to work with both a horizontal & vertical scrollview (swift)
0
Im working on a screen (shown below) that utilizes two scroll views. The Vertical scroll view is the base and it has another view within it for all the content. Within that view theres another scroll view that moves horizontally.
So for reference:
Scroll view (vertical) -> view -> Scroll view (horizontal)
Another thing to point out is the intrinsic text view within the first scroll view that pulls data from the backend.
The problem Im facing is this: The vertical scroll view allows you to move up and down but it stops based off of whatever height is set. So if I set the height to 1000, it will get to that point but how won't go any further. If the description is longer than that, it gets cut off so
1) how do I adjust the scrollview (vertical) so that he scrolls as far as it needs to in order to display the entire description text? Basically, how do I adjust the height of the scrollview based off of the height of the textview.
The second issue Im facing is the fact that the vertical scrollview works but the horizontal one doesn't. I've used this horizontal scrollview in many other apps with the same constraints (shown below) but never with it being within a vertical scroll view. Now that its there, it won't work while the other works, and vice versa. so,
2) How do I correctly constrain both scroll views so that they work in unison? The vertical scroll view should scroll up and down and whenever I swipe left or right on the horizontal scroll view, it should move correctly as well.
ios swift xcode uiscrollview scrollview
asked Nov 27 '18 at 16:36
VandalVandal
150110
add a comment |
0
Im working on a screen (shown below) that utilizes two scroll views. The Vertical scroll view is the base and it has another view within it for all the content. Within that view theres another scroll view that moves horizontally.
So for reference:
Scroll view (vertical) -> view -> Scroll view (horizontal)
Another thing to point out is the intrinsic text view within the first scroll view that pulls data from the backend.
The problem Im facing is this: The vertical scroll view allows you to move up and down but it stops based off of whatever height is set. So if I set the height to 1000, it will get to that point but how won't go any further. If the description is longer than that, it gets cut off so
1) how do I adjust the scrollview (vertical) so that he scrolls as far as it needs to in order to display the entire description text? Basically, how do I adjust the height of the scrollview based off of the height of the textview.
The second issue Im facing is the fact that the vertical scrollview works but the horizontal one doesn't. I've used this horizontal scrollview in many other apps with the same constraints (shown below) but never with it being within a vertical scroll view. Now that its there, it won't work while the other works, and vice versa. so,
2) How do I correctly constrain both scroll views so that they work in unison? The vertical scroll view should scroll up and down and whenever I swipe left or right on the horizontal scroll view, it should move correctly as well.
ios swift xcode uiscrollview scrollview
asked Nov 27 '18 at 16:36
VandalVandal
150110
IsThe Second Scroll Viewthe one on top, that you want to scroll horizontally? Are you using a textView instead of a label because it needs to be editable?
– DonMag
Nov 27 '18 at 18:32
Yeah, its the one on top and Idk I just always figured that with the amount of text Its pulling, it should be a text view. So you're saying do a label instead?
– Vandal
Nov 27 '18 at 19:58
In general, use a textView if you want editing and/or scrolling. Is your goal to have the text scroll vertically, while the "top horizontal" scroll view remains visible? Or should everything scroll vertically? And... I don't see where you're setting any content of the "top horizontal" scroll view?
– DonMag
Nov 27 '18 at 20:05
Ah okay so how do I set the constraints when theres a label and a scrollview?
– Vandal
Nov 27 '18 at 21:51
add a comment |
0
0
0
Im working on a screen (shown below) that utilizes two scroll views. The Vertical scroll view is the base and it has another view within it for all the content. Within that view theres another scroll view that moves horizontally.
So for reference:
Scroll view (vertical) -> view -> Scroll view (horizontal)
Another thing to point out is the intrinsic text view within the first scroll view that pulls data from the backend.
The problem Im facing is this: The vertical scroll view allows you to move up and down but it stops based off of whatever height is set. So if I set the height to 1000, it will get to that point but how won't go any further. If the description is longer than that, it gets cut off so
1) how do I adjust the scrollview (vertical) so that he scrolls as far as it needs to in order to display the entire description text? Basically, how do I adjust the height of the scrollview based off of the height of the textview.
The second issue Im facing is the fact that the vertical scrollview works but the horizontal one doesn't. I've used this horizontal scrollview in many other apps with the same constraints (shown below) but never with it being within a vertical scroll view. Now that its there, it won't work while the other works, and vice versa. so,
2) How do I correctly constrain both scroll views so that they work in unison? The vertical scroll view should scroll up and down and whenever I swipe left or right on the horizontal scroll view, it should move correctly as well.
ios swift xcode uiscrollview scrollview
asked Nov 27 '18 at 16:36
VandalVandal
150110
Im working on a screen (shown below) that utilizes two scroll views. The Vertical scroll view is the base and it has another view within it for all the content. Within that view theres another scroll view that moves horizontally.
So for reference:
Scroll view (vertical) -> view -> Scroll view (horizontal)
Another thing to point out is the intrinsic text view within the first scroll view that pulls data from the backend.
The problem Im facing is this: The vertical scroll view allows you to move up and down but it stops based off of whatever height is set. So if I set the height to 1000, it will get to that point but how won't go any further. If the description is longer than that, it gets cut off so
1) how do I adjust the scrollview (vertical) so that he scrolls as far as it needs to in order to display the entire description text? Basically, how do I adjust the height of the scrollview based off of the height of the textview.
The second issue Im facing is the fact that the vertical scrollview works but the horizontal one doesn't. I've used this horizontal scrollview in many other apps with the same constraints (shown below) but never with it being within a vertical scroll view. Now that its there, it won't work while the other works, and vice versa. so,
2) How do I correctly constrain both scroll views so that they work in unison? The vertical scroll view should scroll up and down and whenever I swipe left or right on the horizontal scroll view, it should move correctly as well.
ios swift xcode uiscrollview scrollview
ios swift xcode uiscrollview scrollview
asked Nov 27 '18 at 16:36
VandalVandal
150110
asked Nov 27 '18 at 16:36
VandalVandal
150110
asked Nov 27 '18 at 16:36
VandalVandal
150110
asked Nov 27 '18 at 16:36
VandalVandal
150110
asked Nov 27 '18 at 16:36
VandalVandal
150110
150110
IsThe Second Scroll Viewthe one on top, that you want to scroll horizontally? Are you using a textView instead of a label because it needs to be editable?
– DonMag
Nov 27 '18 at 18:32
Yeah, its the one on top and Idk I just always figured that with the amount of text Its pulling, it should be a text view. So you're saying do a label instead?
– Vandal
Nov 27 '18 at 19:58
In general, use a textView if you want editing and/or scrolling. Is your goal to have the text scroll vertically, while the "top horizontal" scroll view remains visible? Or should everything scroll vertically? And... I don't see where you're setting any content of the "top horizontal" scroll view?
– DonMag
Nov 27 '18 at 20:05
Ah okay so how do I set the constraints when theres a label and a scrollview?
– Vandal
Nov 27 '18 at 21:51
add a comment |
IsThe Second Scroll Viewthe one on top, that you want to scroll horizontally? Are you using a textView instead of a label because it needs to be editable?
– DonMag
Nov 27 '18 at 18:32
Yeah, its the one on top and Idk I just always figured that with the amount of text Its pulling, it should be a text view. So you're saying do a label instead?
– Vandal
Nov 27 '18 at 19:58
In general, use a textView if you want editing and/or scrolling. Is your goal to have the text scroll vertically, while the "top horizontal" scroll view remains visible? Or should everything scroll vertically? And... I don't see where you're setting any content of the "top horizontal" scroll view?
– DonMag
Nov 27 '18 at 20:05
Ah okay so how do I set the constraints when theres a label and a scrollview?
– Vandal
Nov 27 '18 at 21:51
Is
The Second Scroll View the one on top, that you want to scroll horizontally? Are you using a textView instead of a label because it needs to be editable?– DonMag
Nov 27 '18 at 18:32
Is
The Second Scroll View the one on top, that you want to scroll horizontally? Are you using a textView instead of a label because it needs to be editable?– DonMag
Nov 27 '18 at 18:32
Yeah, its the one on top and Idk I just always figured that with the amount of text Its pulling, it should be a text view. So you're saying do a label instead?
– Vandal
Nov 27 '18 at 19:58
Yeah, its the one on top and Idk I just always figured that with the amount of text Its pulling, it should be a text view. So you're saying do a label instead?
– Vandal
Nov 27 '18 at 19:58
In general, use a textView if you want editing and/or scrolling. Is your goal to have the text scroll vertically, while the "top horizontal" scroll view remains visible? Or should everything scroll vertically? And... I don't see where you're setting any content of the "top horizontal" scroll view?
– DonMag
Nov 27 '18 at 20:05
In general, use a textView if you want editing and/or scrolling. Is your goal to have the text scroll vertically, while the "top horizontal" scroll view remains visible? Or should everything scroll vertically? And... I don't see where you're setting any content of the "top horizontal" scroll view?
– DonMag
Nov 27 '18 at 20:05
Ah okay so how do I set the constraints when theres a label and a scrollview?
– Vandal
Nov 27 '18 at 21:51
Ah okay so how do I set the constraints when theres a label and a scrollview?
– Vandal
Nov 27 '18 at 21:51
add a comment |
2 Answers
2
active
oldest
votes
1
It's common to have a horizontal scroll view embedded in a vertical scroll view - you just need to get the constraints set correctly.
Also, using the proper constraints, it's easy to have the scroll view's content control the scrollable area -- without having to calculate and explicitly set the .contentSize.
Here is the layout. The main view background is Pink; the vertical scroll view is Yellow; the horizontal scroll view is Green:
The vertical scroll view is constrained to 0 on all 4 sides, and it's constrained Equal Width and Height to the main view.
The horizontal scroll view is constrained 0 for Leading, Top and Trailing (no Bottom constraint), and a Height constraint of 390, and it's constrained Equal Width to the main view.
The image view is constrained Leading 10 with W/H of 40.
The Title label is constrained to the image view.
The Description Label (number of lines = 0) is constrained Leading to the image view, Width Equal to the vertical scroll view -20 (10 on the left and 10 on the right). And it's constrained 0 on the Bottom. As you add text to the label and its height grows, that will automatically increase the height of the vertical scroll view's scrollable area (its .contentSize).
Here is the result, before and after scrolling:
And, for clarity, how it looks using Debug View Hierarchy:
To help you get it set up correctly, here's the controller class (no sizing code needed - all it's doing is adding text to the label):
class EmbeddedScrollViewController: UIViewController {
@IBOutlet var descriptionLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// 20 lines of text
descriptionLabel.text = (1...20).map({ "Line ($0)" }).joined(separator: "n")
}
}
and the Storyboard source:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="1GW-r8-dyB">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Embedded Scroll View Controller-->
<scene sceneID="EkT-c0-tFZ">
<objects>
<viewController id="1GW-r8-dyB" customClass="EmbeddedScrollViewController" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Mgr-6N-2U6">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="K2x-mz-KcZ" userLabel="V-Scroll">
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dcg-9m-tlK" userLabel="H-Scroll">
<rect key="frame" x="0.0" y="0.0" width="375" height="390"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Upper Left" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="unz-8T-JcR">
<rect key="frame" x="20" y="20" width="82" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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="Lower Right" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Cdr-yN-9YB">
<rect key="frame" x="500" y="330" width="90.5" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qsY-aV-AFa" userLabel="InfoLabel">
<rect key="frame" x="20" y="281" width="320" height="41"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="320" id="g2L-p3-Nt5"/>
</constraints>
<string key="text">To demonstrate Horizontal scrolling,
There is Another Label to the Right ---></string>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="390" id="2ln-JF-25C"/>
<constraint firstAttribute="bottom" secondItem="Cdr-yN-9YB" secondAttribute="bottom" constant="20" id="C6t-Uu-DXN"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="top" secondItem="qsY-aV-AFa" secondAttribute="bottom" constant="8" id="GfU-jw-KzP"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="leading" secondItem="qsY-aV-AFa" secondAttribute="trailing" constant="160" id="Q4e-Fl-IEg"/>
<constraint firstAttribute="trailing" secondItem="Cdr-yN-9YB" secondAttribute="trailing" constant="20" id="X5C-nj-47A"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="leading" secondItem="Dcg-9m-tlK" secondAttribute="leading" constant="20" id="cVG-kM-8ZI"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="leading" secondItem="unz-8T-JcR" secondAttribute="leading" id="pPP-Ko-du2"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="top" secondItem="unz-8T-JcR" secondAttribute="bottom" constant="240" id="tMx-HW-l2L"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="top" constant="20" id="ybo-xk-6LG"/>
</constraints>
</scrollView>
<pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="3" translatesAutoresizingMaskIntoConstraints="NO" id="B7V-nL-rCv">
<rect key="frame" x="121.5" y="353" width="132" height="37"/>
<color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="132" id="2ge-VP-yzz"/>
</constraints>
</pageControl>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="3cl-Ou-kTu">
<rect key="frame" x="10" y="405" width="40" height="40"/>
<color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="40" id="E0D-Ed-vVX"/>
<constraint firstAttribute="height" constant="40" id="MFN-Ap-lkV"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Sf-bC-0yM">
<rect key="frame" x="58" y="415" width="70" height="21"/>
<color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" 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="Description Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MkP-AG-X03">
<rect key="frame" x="10" y="461" width="355" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" 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.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="MkP-AG-X03" secondAttribute="bottom" constant="8" id="62d-uw-l6l"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="centerX" secondItem="Dcg-9m-tlK" secondAttribute="centerX" id="6TH-qD-Rpg"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" id="8Cm-Zq-jKu"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="centerY" secondItem="3cl-Ou-kTu" secondAttribute="centerY" id="D54-Jk-1zW"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" constant="-20" id="Sk8-fq-0I8"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="bottom" constant="15" id="XN2-Lz-nQQ"/>
<constraint firstAttribute="trailing" secondItem="Dcg-9m-tlK" secondAttribute="trailing" id="YtO-y4-qn9"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="leading" id="ZM0-3U-XLQ"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="top" secondItem="K2x-mz-KcZ" secondAttribute="top" id="fxa-1i-NHa"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" id="l7O-qV-Ja9"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" constant="10" id="on9-FW-ZiG"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="bottom" secondItem="Dcg-9m-tlK" secondAttribute="bottom" id="tbv-ao-adS"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="trailing" constant="8" id="wuV-fj-HFV"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="top" secondItem="3cl-Ou-kTu" secondAttribute="bottom" constant="16" id="x4z-IQ-o2z"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="MMC-8B-qcF" firstAttribute="trailing" secondItem="K2x-mz-KcZ" secondAttribute="trailing" id="3S9-mL-Ldn"/>
<constraint firstItem="MMC-8B-qcF" firstAttribute="bottom" secondItem="K2x-mz-KcZ" secondAttribute="bottom" id="7g2-ph-w0I"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="top" secondItem="MMC-8B-qcF" secondAttribute="top" id="PIT-lg-Z3r"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="leading" secondItem="MMC-8B-qcF" secondAttribute="leading" id="irI-yU-v4c"/>
</constraints>
<viewLayoutGuide key="safeArea" id="MMC-8B-qcF"/>
</view>
<connections>
<outlet property="descriptionLabel" destination="MkP-AG-X03" id="4xr-iw-3tF"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="gbQ-wO-etq" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="41" y="2257"/>
</scene>
</scenes>
</document>
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
add a comment |
1
I would use a CollecttionView or tableView and then put a CollectionView in the cell that you want horizontal scrolling.
You can resize the cell containing the textview in different ways
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53504212%2fhow-to-work-with-both-a-horizontal-vertical-scrollview-swift%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
It's common to have a horizontal scroll view embedded in a vertical scroll view - you just need to get the constraints set correctly.
Also, using the proper constraints, it's easy to have the scroll view's content control the scrollable area -- without having to calculate and explicitly set the .contentSize.
Here is the layout. The main view background is Pink; the vertical scroll view is Yellow; the horizontal scroll view is Green:
The vertical scroll view is constrained to 0 on all 4 sides, and it's constrained Equal Width and Height to the main view.
The horizontal scroll view is constrained 0 for Leading, Top and Trailing (no Bottom constraint), and a Height constraint of 390, and it's constrained Equal Width to the main view.
The image view is constrained Leading 10 with W/H of 40.
The Title label is constrained to the image view.
The Description Label (number of lines = 0) is constrained Leading to the image view, Width Equal to the vertical scroll view -20 (10 on the left and 10 on the right). And it's constrained 0 on the Bottom. As you add text to the label and its height grows, that will automatically increase the height of the vertical scroll view's scrollable area (its .contentSize).
Here is the result, before and after scrolling:
And, for clarity, how it looks using Debug View Hierarchy:
To help you get it set up correctly, here's the controller class (no sizing code needed - all it's doing is adding text to the label):
class EmbeddedScrollViewController: UIViewController {
@IBOutlet var descriptionLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// 20 lines of text
descriptionLabel.text = (1...20).map({ "Line ($0)" }).joined(separator: "n")
}
}
and the Storyboard source:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="1GW-r8-dyB">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Embedded Scroll View Controller-->
<scene sceneID="EkT-c0-tFZ">
<objects>
<viewController id="1GW-r8-dyB" customClass="EmbeddedScrollViewController" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Mgr-6N-2U6">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="K2x-mz-KcZ" userLabel="V-Scroll">
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dcg-9m-tlK" userLabel="H-Scroll">
<rect key="frame" x="0.0" y="0.0" width="375" height="390"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Upper Left" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="unz-8T-JcR">
<rect key="frame" x="20" y="20" width="82" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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="Lower Right" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Cdr-yN-9YB">
<rect key="frame" x="500" y="330" width="90.5" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qsY-aV-AFa" userLabel="InfoLabel">
<rect key="frame" x="20" y="281" width="320" height="41"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="320" id="g2L-p3-Nt5"/>
</constraints>
<string key="text">To demonstrate Horizontal scrolling,
There is Another Label to the Right ---></string>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="390" id="2ln-JF-25C"/>
<constraint firstAttribute="bottom" secondItem="Cdr-yN-9YB" secondAttribute="bottom" constant="20" id="C6t-Uu-DXN"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="top" secondItem="qsY-aV-AFa" secondAttribute="bottom" constant="8" id="GfU-jw-KzP"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="leading" secondItem="qsY-aV-AFa" secondAttribute="trailing" constant="160" id="Q4e-Fl-IEg"/>
<constraint firstAttribute="trailing" secondItem="Cdr-yN-9YB" secondAttribute="trailing" constant="20" id="X5C-nj-47A"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="leading" secondItem="Dcg-9m-tlK" secondAttribute="leading" constant="20" id="cVG-kM-8ZI"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="leading" secondItem="unz-8T-JcR" secondAttribute="leading" id="pPP-Ko-du2"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="top" secondItem="unz-8T-JcR" secondAttribute="bottom" constant="240" id="tMx-HW-l2L"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="top" constant="20" id="ybo-xk-6LG"/>
</constraints>
</scrollView>
<pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="3" translatesAutoresizingMaskIntoConstraints="NO" id="B7V-nL-rCv">
<rect key="frame" x="121.5" y="353" width="132" height="37"/>
<color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="132" id="2ge-VP-yzz"/>
</constraints>
</pageControl>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="3cl-Ou-kTu">
<rect key="frame" x="10" y="405" width="40" height="40"/>
<color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="40" id="E0D-Ed-vVX"/>
<constraint firstAttribute="height" constant="40" id="MFN-Ap-lkV"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Sf-bC-0yM">
<rect key="frame" x="58" y="415" width="70" height="21"/>
<color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" 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="Description Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MkP-AG-X03">
<rect key="frame" x="10" y="461" width="355" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" 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.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="MkP-AG-X03" secondAttribute="bottom" constant="8" id="62d-uw-l6l"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="centerX" secondItem="Dcg-9m-tlK" secondAttribute="centerX" id="6TH-qD-Rpg"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" id="8Cm-Zq-jKu"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="centerY" secondItem="3cl-Ou-kTu" secondAttribute="centerY" id="D54-Jk-1zW"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" constant="-20" id="Sk8-fq-0I8"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="bottom" constant="15" id="XN2-Lz-nQQ"/>
<constraint firstAttribute="trailing" secondItem="Dcg-9m-tlK" secondAttribute="trailing" id="YtO-y4-qn9"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="leading" id="ZM0-3U-XLQ"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="top" secondItem="K2x-mz-KcZ" secondAttribute="top" id="fxa-1i-NHa"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" id="l7O-qV-Ja9"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" constant="10" id="on9-FW-ZiG"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="bottom" secondItem="Dcg-9m-tlK" secondAttribute="bottom" id="tbv-ao-adS"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="trailing" constant="8" id="wuV-fj-HFV"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="top" secondItem="3cl-Ou-kTu" secondAttribute="bottom" constant="16" id="x4z-IQ-o2z"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="MMC-8B-qcF" firstAttribute="trailing" secondItem="K2x-mz-KcZ" secondAttribute="trailing" id="3S9-mL-Ldn"/>
<constraint firstItem="MMC-8B-qcF" firstAttribute="bottom" secondItem="K2x-mz-KcZ" secondAttribute="bottom" id="7g2-ph-w0I"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="top" secondItem="MMC-8B-qcF" secondAttribute="top" id="PIT-lg-Z3r"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="leading" secondItem="MMC-8B-qcF" secondAttribute="leading" id="irI-yU-v4c"/>
</constraints>
<viewLayoutGuide key="safeArea" id="MMC-8B-qcF"/>
</view>
<connections>
<outlet property="descriptionLabel" destination="MkP-AG-X03" id="4xr-iw-3tF"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="gbQ-wO-etq" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="41" y="2257"/>
</scene>
</scenes>
</document>
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
add a comment |
1
It's common to have a horizontal scroll view embedded in a vertical scroll view - you just need to get the constraints set correctly.
Also, using the proper constraints, it's easy to have the scroll view's content control the scrollable area -- without having to calculate and explicitly set the .contentSize.
Here is the layout. The main view background is Pink; the vertical scroll view is Yellow; the horizontal scroll view is Green:
The vertical scroll view is constrained to 0 on all 4 sides, and it's constrained Equal Width and Height to the main view.
The horizontal scroll view is constrained 0 for Leading, Top and Trailing (no Bottom constraint), and a Height constraint of 390, and it's constrained Equal Width to the main view.
The image view is constrained Leading 10 with W/H of 40.
The Title label is constrained to the image view.
The Description Label (number of lines = 0) is constrained Leading to the image view, Width Equal to the vertical scroll view -20 (10 on the left and 10 on the right). And it's constrained 0 on the Bottom. As you add text to the label and its height grows, that will automatically increase the height of the vertical scroll view's scrollable area (its .contentSize).
Here is the result, before and after scrolling:
And, for clarity, how it looks using Debug View Hierarchy:
To help you get it set up correctly, here's the controller class (no sizing code needed - all it's doing is adding text to the label):
class EmbeddedScrollViewController: UIViewController {
@IBOutlet var descriptionLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// 20 lines of text
descriptionLabel.text = (1...20).map({ "Line ($0)" }).joined(separator: "n")
}
}
and the Storyboard source:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="1GW-r8-dyB">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Embedded Scroll View Controller-->
<scene sceneID="EkT-c0-tFZ">
<objects>
<viewController id="1GW-r8-dyB" customClass="EmbeddedScrollViewController" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Mgr-6N-2U6">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="K2x-mz-KcZ" userLabel="V-Scroll">
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dcg-9m-tlK" userLabel="H-Scroll">
<rect key="frame" x="0.0" y="0.0" width="375" height="390"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Upper Left" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="unz-8T-JcR">
<rect key="frame" x="20" y="20" width="82" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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="Lower Right" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Cdr-yN-9YB">
<rect key="frame" x="500" y="330" width="90.5" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qsY-aV-AFa" userLabel="InfoLabel">
<rect key="frame" x="20" y="281" width="320" height="41"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="320" id="g2L-p3-Nt5"/>
</constraints>
<string key="text">To demonstrate Horizontal scrolling,
There is Another Label to the Right ---></string>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="390" id="2ln-JF-25C"/>
<constraint firstAttribute="bottom" secondItem="Cdr-yN-9YB" secondAttribute="bottom" constant="20" id="C6t-Uu-DXN"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="top" secondItem="qsY-aV-AFa" secondAttribute="bottom" constant="8" id="GfU-jw-KzP"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="leading" secondItem="qsY-aV-AFa" secondAttribute="trailing" constant="160" id="Q4e-Fl-IEg"/>
<constraint firstAttribute="trailing" secondItem="Cdr-yN-9YB" secondAttribute="trailing" constant="20" id="X5C-nj-47A"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="leading" secondItem="Dcg-9m-tlK" secondAttribute="leading" constant="20" id="cVG-kM-8ZI"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="leading" secondItem="unz-8T-JcR" secondAttribute="leading" id="pPP-Ko-du2"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="top" secondItem="unz-8T-JcR" secondAttribute="bottom" constant="240" id="tMx-HW-l2L"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="top" constant="20" id="ybo-xk-6LG"/>
</constraints>
</scrollView>
<pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="3" translatesAutoresizingMaskIntoConstraints="NO" id="B7V-nL-rCv">
<rect key="frame" x="121.5" y="353" width="132" height="37"/>
<color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="132" id="2ge-VP-yzz"/>
</constraints>
</pageControl>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="3cl-Ou-kTu">
<rect key="frame" x="10" y="405" width="40" height="40"/>
<color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="40" id="E0D-Ed-vVX"/>
<constraint firstAttribute="height" constant="40" id="MFN-Ap-lkV"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Sf-bC-0yM">
<rect key="frame" x="58" y="415" width="70" height="21"/>
<color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" 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="Description Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MkP-AG-X03">
<rect key="frame" x="10" y="461" width="355" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" 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.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="MkP-AG-X03" secondAttribute="bottom" constant="8" id="62d-uw-l6l"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="centerX" secondItem="Dcg-9m-tlK" secondAttribute="centerX" id="6TH-qD-Rpg"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" id="8Cm-Zq-jKu"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="centerY" secondItem="3cl-Ou-kTu" secondAttribute="centerY" id="D54-Jk-1zW"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" constant="-20" id="Sk8-fq-0I8"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="bottom" constant="15" id="XN2-Lz-nQQ"/>
<constraint firstAttribute="trailing" secondItem="Dcg-9m-tlK" secondAttribute="trailing" id="YtO-y4-qn9"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="leading" id="ZM0-3U-XLQ"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="top" secondItem="K2x-mz-KcZ" secondAttribute="top" id="fxa-1i-NHa"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" id="l7O-qV-Ja9"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" constant="10" id="on9-FW-ZiG"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="bottom" secondItem="Dcg-9m-tlK" secondAttribute="bottom" id="tbv-ao-adS"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="trailing" constant="8" id="wuV-fj-HFV"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="top" secondItem="3cl-Ou-kTu" secondAttribute="bottom" constant="16" id="x4z-IQ-o2z"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="MMC-8B-qcF" firstAttribute="trailing" secondItem="K2x-mz-KcZ" secondAttribute="trailing" id="3S9-mL-Ldn"/>
<constraint firstItem="MMC-8B-qcF" firstAttribute="bottom" secondItem="K2x-mz-KcZ" secondAttribute="bottom" id="7g2-ph-w0I"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="top" secondItem="MMC-8B-qcF" secondAttribute="top" id="PIT-lg-Z3r"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="leading" secondItem="MMC-8B-qcF" secondAttribute="leading" id="irI-yU-v4c"/>
</constraints>
<viewLayoutGuide key="safeArea" id="MMC-8B-qcF"/>
</view>
<connections>
<outlet property="descriptionLabel" destination="MkP-AG-X03" id="4xr-iw-3tF"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="gbQ-wO-etq" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="41" y="2257"/>
</scene>
</scenes>
</document>
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
add a comment |
1
1
1
It's common to have a horizontal scroll view embedded in a vertical scroll view - you just need to get the constraints set correctly.
Also, using the proper constraints, it's easy to have the scroll view's content control the scrollable area -- without having to calculate and explicitly set the .contentSize.
Here is the layout. The main view background is Pink; the vertical scroll view is Yellow; the horizontal scroll view is Green:
The vertical scroll view is constrained to 0 on all 4 sides, and it's constrained Equal Width and Height to the main view.
The horizontal scroll view is constrained 0 for Leading, Top and Trailing (no Bottom constraint), and a Height constraint of 390, and it's constrained Equal Width to the main view.
The image view is constrained Leading 10 with W/H of 40.
The Title label is constrained to the image view.
The Description Label (number of lines = 0) is constrained Leading to the image view, Width Equal to the vertical scroll view -20 (10 on the left and 10 on the right). And it's constrained 0 on the Bottom. As you add text to the label and its height grows, that will automatically increase the height of the vertical scroll view's scrollable area (its .contentSize).
Here is the result, before and after scrolling:
And, for clarity, how it looks using Debug View Hierarchy:
To help you get it set up correctly, here's the controller class (no sizing code needed - all it's doing is adding text to the label):
class EmbeddedScrollViewController: UIViewController {
@IBOutlet var descriptionLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// 20 lines of text
descriptionLabel.text = (1...20).map({ "Line ($0)" }).joined(separator: "n")
}
}
and the Storyboard source:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="1GW-r8-dyB">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Embedded Scroll View Controller-->
<scene sceneID="EkT-c0-tFZ">
<objects>
<viewController id="1GW-r8-dyB" customClass="EmbeddedScrollViewController" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Mgr-6N-2U6">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="K2x-mz-KcZ" userLabel="V-Scroll">
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dcg-9m-tlK" userLabel="H-Scroll">
<rect key="frame" x="0.0" y="0.0" width="375" height="390"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Upper Left" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="unz-8T-JcR">
<rect key="frame" x="20" y="20" width="82" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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="Lower Right" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Cdr-yN-9YB">
<rect key="frame" x="500" y="330" width="90.5" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qsY-aV-AFa" userLabel="InfoLabel">
<rect key="frame" x="20" y="281" width="320" height="41"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="320" id="g2L-p3-Nt5"/>
</constraints>
<string key="text">To demonstrate Horizontal scrolling,
There is Another Label to the Right ---></string>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="390" id="2ln-JF-25C"/>
<constraint firstAttribute="bottom" secondItem="Cdr-yN-9YB" secondAttribute="bottom" constant="20" id="C6t-Uu-DXN"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="top" secondItem="qsY-aV-AFa" secondAttribute="bottom" constant="8" id="GfU-jw-KzP"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="leading" secondItem="qsY-aV-AFa" secondAttribute="trailing" constant="160" id="Q4e-Fl-IEg"/>
<constraint firstAttribute="trailing" secondItem="Cdr-yN-9YB" secondAttribute="trailing" constant="20" id="X5C-nj-47A"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="leading" secondItem="Dcg-9m-tlK" secondAttribute="leading" constant="20" id="cVG-kM-8ZI"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="leading" secondItem="unz-8T-JcR" secondAttribute="leading" id="pPP-Ko-du2"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="top" secondItem="unz-8T-JcR" secondAttribute="bottom" constant="240" id="tMx-HW-l2L"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="top" constant="20" id="ybo-xk-6LG"/>
</constraints>
</scrollView>
<pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="3" translatesAutoresizingMaskIntoConstraints="NO" id="B7V-nL-rCv">
<rect key="frame" x="121.5" y="353" width="132" height="37"/>
<color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="132" id="2ge-VP-yzz"/>
</constraints>
</pageControl>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="3cl-Ou-kTu">
<rect key="frame" x="10" y="405" width="40" height="40"/>
<color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="40" id="E0D-Ed-vVX"/>
<constraint firstAttribute="height" constant="40" id="MFN-Ap-lkV"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Sf-bC-0yM">
<rect key="frame" x="58" y="415" width="70" height="21"/>
<color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" 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="Description Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MkP-AG-X03">
<rect key="frame" x="10" y="461" width="355" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" 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.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="MkP-AG-X03" secondAttribute="bottom" constant="8" id="62d-uw-l6l"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="centerX" secondItem="Dcg-9m-tlK" secondAttribute="centerX" id="6TH-qD-Rpg"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" id="8Cm-Zq-jKu"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="centerY" secondItem="3cl-Ou-kTu" secondAttribute="centerY" id="D54-Jk-1zW"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" constant="-20" id="Sk8-fq-0I8"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="bottom" constant="15" id="XN2-Lz-nQQ"/>
<constraint firstAttribute="trailing" secondItem="Dcg-9m-tlK" secondAttribute="trailing" id="YtO-y4-qn9"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="leading" id="ZM0-3U-XLQ"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="top" secondItem="K2x-mz-KcZ" secondAttribute="top" id="fxa-1i-NHa"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" id="l7O-qV-Ja9"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" constant="10" id="on9-FW-ZiG"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="bottom" secondItem="Dcg-9m-tlK" secondAttribute="bottom" id="tbv-ao-adS"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="trailing" constant="8" id="wuV-fj-HFV"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="top" secondItem="3cl-Ou-kTu" secondAttribute="bottom" constant="16" id="x4z-IQ-o2z"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="MMC-8B-qcF" firstAttribute="trailing" secondItem="K2x-mz-KcZ" secondAttribute="trailing" id="3S9-mL-Ldn"/>
<constraint firstItem="MMC-8B-qcF" firstAttribute="bottom" secondItem="K2x-mz-KcZ" secondAttribute="bottom" id="7g2-ph-w0I"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="top" secondItem="MMC-8B-qcF" secondAttribute="top" id="PIT-lg-Z3r"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="leading" secondItem="MMC-8B-qcF" secondAttribute="leading" id="irI-yU-v4c"/>
</constraints>
<viewLayoutGuide key="safeArea" id="MMC-8B-qcF"/>
</view>
<connections>
<outlet property="descriptionLabel" destination="MkP-AG-X03" id="4xr-iw-3tF"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="gbQ-wO-etq" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="41" y="2257"/>
</scene>
</scenes>
</document>
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
It's common to have a horizontal scroll view embedded in a vertical scroll view - you just need to get the constraints set correctly.
Also, using the proper constraints, it's easy to have the scroll view's content control the scrollable area -- without having to calculate and explicitly set the .contentSize.
Here is the layout. The main view background is Pink; the vertical scroll view is Yellow; the horizontal scroll view is Green:
The vertical scroll view is constrained to 0 on all 4 sides, and it's constrained Equal Width and Height to the main view.
The horizontal scroll view is constrained 0 for Leading, Top and Trailing (no Bottom constraint), and a Height constraint of 390, and it's constrained Equal Width to the main view.
The image view is constrained Leading 10 with W/H of 40.
The Title label is constrained to the image view.
The Description Label (number of lines = 0) is constrained Leading to the image view, Width Equal to the vertical scroll view -20 (10 on the left and 10 on the right). And it's constrained 0 on the Bottom. As you add text to the label and its height grows, that will automatically increase the height of the vertical scroll view's scrollable area (its .contentSize).
Here is the result, before and after scrolling:
And, for clarity, how it looks using Debug View Hierarchy:
To help you get it set up correctly, here's the controller class (no sizing code needed - all it's doing is adding text to the label):
class EmbeddedScrollViewController: UIViewController {
@IBOutlet var descriptionLabel: UILabel!
override func viewDidLoad() {
super.viewDidLoad()
// 20 lines of text
descriptionLabel.text = (1...20).map({ "Line ($0)" }).joined(separator: "n")
}
}
and the Storyboard source:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14109" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="1GW-r8-dyB">
<device id="retina4_7" orientation="portrait">
<adaptation id="fullscreen"/>
</device>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14088"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--Embedded Scroll View Controller-->
<scene sceneID="EkT-c0-tFZ">
<objects>
<viewController id="1GW-r8-dyB" customClass="EmbeddedScrollViewController" customModule="SW4Temp" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="Mgr-6N-2U6">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="K2x-mz-KcZ" userLabel="V-Scroll">
<rect key="frame" x="0.0" y="20" width="375" height="647"/>
<subviews>
<scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Dcg-9m-tlK" userLabel="H-Scroll">
<rect key="frame" x="0.0" y="0.0" width="375" height="390"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Upper Left" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="unz-8T-JcR">
<rect key="frame" x="20" y="20" width="82" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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="Lower Right" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Cdr-yN-9YB">
<rect key="frame" x="500" y="330" width="90.5" height="21"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" 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" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="qsY-aV-AFa" userLabel="InfoLabel">
<rect key="frame" x="20" y="281" width="320" height="41"/>
<color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="320" id="g2L-p3-Nt5"/>
</constraints>
<string key="text">To demonstrate Horizontal scrolling,
There is Another Label to the Right ---></string>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.45009386540000001" green="0.98132258650000004" blue="0.4743030667" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="height" constant="390" id="2ln-JF-25C"/>
<constraint firstAttribute="bottom" secondItem="Cdr-yN-9YB" secondAttribute="bottom" constant="20" id="C6t-Uu-DXN"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="top" secondItem="qsY-aV-AFa" secondAttribute="bottom" constant="8" id="GfU-jw-KzP"/>
<constraint firstItem="Cdr-yN-9YB" firstAttribute="leading" secondItem="qsY-aV-AFa" secondAttribute="trailing" constant="160" id="Q4e-Fl-IEg"/>
<constraint firstAttribute="trailing" secondItem="Cdr-yN-9YB" secondAttribute="trailing" constant="20" id="X5C-nj-47A"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="leading" secondItem="Dcg-9m-tlK" secondAttribute="leading" constant="20" id="cVG-kM-8ZI"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="leading" secondItem="unz-8T-JcR" secondAttribute="leading" id="pPP-Ko-du2"/>
<constraint firstItem="qsY-aV-AFa" firstAttribute="top" secondItem="unz-8T-JcR" secondAttribute="bottom" constant="240" id="tMx-HW-l2L"/>
<constraint firstItem="unz-8T-JcR" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="top" constant="20" id="ybo-xk-6LG"/>
</constraints>
</scrollView>
<pageControl opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" numberOfPages="3" translatesAutoresizingMaskIntoConstraints="NO" id="B7V-nL-rCv">
<rect key="frame" x="121.5" y="353" width="132" height="37"/>
<color key="backgroundColor" red="0.4756349325" green="0.47564673419999998" blue="0.47564041610000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="132" id="2ge-VP-yzz"/>
</constraints>
</pageControl>
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="3cl-Ou-kTu">
<rect key="frame" x="10" y="405" width="40" height="40"/>
<color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" constant="40" id="E0D-Ed-vVX"/>
<constraint firstAttribute="height" constant="40" id="MFN-Ap-lkV"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="This Title" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1Sf-bC-0yM">
<rect key="frame" x="58" y="415" width="70" height="21"/>
<color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" 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="Description Label" textAlignment="natural" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="MkP-AG-X03">
<rect key="frame" x="10" y="461" width="355" height="20.5"/>
<color key="backgroundColor" red="1" green="0.83234566450000003" blue="0.47320586440000001" 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.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="bottom" secondItem="MkP-AG-X03" secondAttribute="bottom" constant="8" id="62d-uw-l6l"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="centerX" secondItem="Dcg-9m-tlK" secondAttribute="centerX" id="6TH-qD-Rpg"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" id="8Cm-Zq-jKu"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="centerY" secondItem="3cl-Ou-kTu" secondAttribute="centerY" id="D54-Jk-1zW"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" constant="-20" id="Sk8-fq-0I8"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="top" secondItem="Dcg-9m-tlK" secondAttribute="bottom" constant="15" id="XN2-Lz-nQQ"/>
<constraint firstAttribute="trailing" secondItem="Dcg-9m-tlK" secondAttribute="trailing" id="YtO-y4-qn9"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="leading" id="ZM0-3U-XLQ"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="top" secondItem="K2x-mz-KcZ" secondAttribute="top" id="fxa-1i-NHa"/>
<constraint firstItem="Dcg-9m-tlK" firstAttribute="width" secondItem="K2x-mz-KcZ" secondAttribute="width" id="l7O-qV-Ja9"/>
<constraint firstItem="3cl-Ou-kTu" firstAttribute="leading" secondItem="K2x-mz-KcZ" secondAttribute="leading" constant="10" id="on9-FW-ZiG"/>
<constraint firstItem="B7V-nL-rCv" firstAttribute="bottom" secondItem="Dcg-9m-tlK" secondAttribute="bottom" id="tbv-ao-adS"/>
<constraint firstItem="1Sf-bC-0yM" firstAttribute="leading" secondItem="3cl-Ou-kTu" secondAttribute="trailing" constant="8" id="wuV-fj-HFV"/>
<constraint firstItem="MkP-AG-X03" firstAttribute="top" secondItem="3cl-Ou-kTu" secondAttribute="bottom" constant="16" id="x4z-IQ-o2z"/>
</constraints>
</scrollView>
</subviews>
<color key="backgroundColor" red="1" green="0.1857388616" blue="0.57339501380000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="MMC-8B-qcF" firstAttribute="trailing" secondItem="K2x-mz-KcZ" secondAttribute="trailing" id="3S9-mL-Ldn"/>
<constraint firstItem="MMC-8B-qcF" firstAttribute="bottom" secondItem="K2x-mz-KcZ" secondAttribute="bottom" id="7g2-ph-w0I"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="top" secondItem="MMC-8B-qcF" secondAttribute="top" id="PIT-lg-Z3r"/>
<constraint firstItem="K2x-mz-KcZ" firstAttribute="leading" secondItem="MMC-8B-qcF" secondAttribute="leading" id="irI-yU-v4c"/>
</constraints>
<viewLayoutGuide key="safeArea" id="MMC-8B-qcF"/>
</view>
<connections>
<outlet property="descriptionLabel" destination="MkP-AG-X03" id="4xr-iw-3tF"/>
</connections>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="gbQ-wO-etq" userLabel="First Responder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="41" y="2257"/>
</scene>
</scenes>
</document>
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
answered Nov 28 '18 at 13:42
DonMagDonMag
17k21029
17k21029
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
add a comment |
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
Wow, thank you so much for taking out the time to do all of this! I greatly appreciate it. One thing though: For me, it worked with the height not being set on the vertical scroll view. Just the width.
– Vandal
Nov 29 '18 at 4:57
add a comment |
1
I would use a CollecttionView or tableView and then put a CollectionView in the cell that you want horizontal scrolling.
You can resize the cell containing the textview in different ways
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
add a comment |
1
I would use a CollecttionView or tableView and then put a CollectionView in the cell that you want horizontal scrolling.
You can resize the cell containing the textview in different ways
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
add a comment |
1
1
1
I would use a CollecttionView or tableView and then put a CollectionView in the cell that you want horizontal scrolling.
You can resize the cell containing the textview in different ways
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
I would use a CollecttionView or tableView and then put a CollectionView in the cell that you want horizontal scrolling.
You can resize the cell containing the textview in different ways
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
answered Nov 27 '18 at 16:52
shayeghshayegh
1477
1477
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53504212%2fhow-to-work-with-both-a-horizontal-vertical-scrollview-swift%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Is
The Second Scroll Viewthe one on top, that you want to scroll horizontally? Are you using a textView instead of a label because it needs to be editable?– DonMag
Nov 27 '18 at 18:32
Yeah, its the one on top and Idk I just always figured that with the amount of text Its pulling, it should be a text view. So you're saying do a label instead?
– Vandal
Nov 27 '18 at 19:58
In general, use a textView if you want editing and/or scrolling. Is your goal to have the text scroll vertically, while the "top horizontal" scroll view remains visible? Or should everything scroll vertically? And... I don't see where you're setting any content of the "top horizontal" scroll view?
– DonMag
Nov 27 '18 at 20:05
Ah okay so how do I set the constraints when theres a label and a scrollview?
– Vandal
Nov 27 '18 at 21:51