1 line
101 KiB
JSON
1 line
101 KiB
JSON
|
{"id":"user/f2f031bd-f3e3-4893-a447-467a291c6d1e/category/e31b3fcb-27f6-4f3e-b96c-53902586e366","updated":1569830765949,"continuation":"16d74074eb8:2058:90d684ff","items":[{"originId":"https://useyourloaf.com/blog/scroll-view-layouts-with-interface-builder/","fingerprint":"3edfc038","id":"AVw5dsyytPMMU/iCsYRiYJstfLF5CXoDiC5tFHJ2Gfk=_16d8134857d:4da39:18991ffa","author":"keith@useyourloaf.com (Keith Harrison)","summary":{"direction":"ltr","content":"<p>Laying out a scroll view is a confusing task. I found it easier when, in iOS 11, Apple introduced frame and content layout guides. Too bad they neglected to add them to Interface Builder. That changed in Xcode 11. Here’s a quick guide on how to use them.</p>\n<h3>Why Are Scroll View Layouts So Hard?</h3>\n<p>For a recap on why scroll views are confusing and how the frame and content layout guides help see this earlier post on <a href=\"https://useyourloaf.com/blog/easier-scrolling-with-layout-guides/\">easier scrolling with layout guides</a>. Here’s the layout I built in code using layout guides:</p>\n<p><img width=\"400\" alt=\"Scrolling layout example\" src=\"https://useyourloaf.com/assets/images/2019/2019-09-16-003.png\"></p>\n<p>You need two groups of constraints to layout a scroll view:</p>\n<ul>\n<li>constraints that fix the frame (size and position) of the scroll view relative to its superview.</li>\n<li>constraints that layout the content relative to the content area of the scroll view and constrain its size.</li>\n</ul>\n<p>Building my layout with Interface Builder and Xcode 10 I might end up with constraints like this:</p>\n<p><img width=\"680\" alt=\"Constraining a scroll view (Xcode 10)\" src=\"https://useyourloaf.com/assets/images/2019/2019-09-16-004.png\"></p>\n<ol>\n<li>Four constraints pin the scroll view to the edges of the root view, fixing its frame.</li>\n<li>Four constraints between the stack view and the scroll view pin the content to the scroll view content area.</li>\n<li>The width of the stack view is fixed to the width of the scroll view frame.</li>\n</ol>\n<p>I never found this to be very intuitive:</p>\n<ul>\n<li>Constraints between the scroll view and a super view act on the frame of the scroll view.</li>\n<li>Constraints between the scroll view and a subview act on the content area of the scroll view.</li>\n<li>Height or width constraints between the scroll view and a subview use the frame of the scroll view.</li>\n</ul>\n<p>The introduction of the frame and content layout guides in iOS 11 promised to make things clearer. Unfortunately, Apple neglected to add support for them in Interface Builder.</p>\n<h3>What Changed In Xcode 11</h3>\n<p>From the <a href=\"https://developer.apple.com/documentation/xcode_release_notes/xcode_11_release_notes\">Xcode 11 release notes</a>:</p>\n<blockquote>\n<p>Content and Frame Layout guides are supported for UIScrollView and can be enabled in the Size inspector for more control over your scrollable content. (29711618)</p>\n</blockquote>\n<p>The content and frame layout guides are enabled by default in Xcode 11 when you drag a new scroll view into the canvas:</p>\n<p><img width=\"230\" alt=\"Scroll View Content Layout Guides\" src=\"https://useyourloaf.com/assets/images/2019/2019-09-16-001.png\"></p>\n<p>You can enable them for an older layout using the size inspector:</p>\n<p><img width=\"250\" alt=\"Enable Content Layout Guides\" src=\"https://useyourloaf.com/assets/images/2019/2019-09-16-002.png\"></p>\n<p>The best way to explain how to use them is with an example.</p>\n<h3>Using The New Layout Guides In Interface Builder</h3>\n<p>Let’s build the previous layout in Interface Builder using the content layout guides:</p>\n<ol>\n<li><p>To get started I have arranged the content for my layout in a vertical stack view that I have embedded in a scroll view in Interface Builder:</p>\n<p><img width=\"480\" alt=\"Embedded stack view\" src=\"https://useyourloaf.com/assets/images/2019/2019-09-16-006.png\"></p></li>\n<li><p>Let’s fix the size and position of the scroll view by pinning it to the edges of the root
|