{"id":2212,"date":"2018-01-16T02:01:14","date_gmt":"2018-01-16T07:01:14","guid":{"rendered":"http:\/\/www.rexfeng.com\/blog\/?p=2212"},"modified":"2018-01-16T02:01:14","modified_gmt":"2018-01-16T07:01:14","slug":"vertically-scrolling-uiimage-programmatically","status":"publish","type":"post","link":"https:\/\/www.rexfeng.com\/blog\/2018\/01\/vertically-scrolling-uiimage-programmatically\/","title":{"rendered":"Vertically Scrolling UIImage programmatically"},"content":{"rendered":"

Working on a small side project, I wanted to display images in my view controller view at full device width in a vertical scrolling view. Sounds simple right? The good news is that it is. While you may want to use\u00a0UITableView<\/a> for more control, using\u00a0UIStackView<\/a> is a simpler way to get up and running fast.<\/p>\n

For my sample code, I opted to do it programmatically as it’s easier to copy & paste code than explain what constraints to add in Xcode. Also note that the code presented here is a proof of concept, quick and dirty example (not intended for production).<\/p>\n

The steps are easy to understand:<\/p>\n

    \n
  1. Add a scroll view to your view\n
    \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>self.<\/span>scrollView<\/span> = <\/span>UIScrollView()<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>scrollView<\/span>.<\/span>translatesAutoresizingMaskIntoConstraints = <\/span>false<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>view<\/span>.addSubview<\/span>(scrollView<\/span>)\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>scrollView<\/span>.<\/span>topAnchor.<\/span>constraint<\/span>(equalTo: <\/span>view.<\/span>safeAreaLayoutGuide.<\/span>topAnchor).<\/span>isActive = <\/span>true<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>scrollView<\/span>.<\/span>bottomAnchor.<\/span>constraint<\/span>(equalTo: <\/span>view.<\/span>safeAreaLayoutGuide.<\/span>bottomAnchor).<\/span>isActive = <\/span>true<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>scrollView<\/span>.<\/span>leadingAnchor.<\/span>constraint<\/span>(equalTo: <\/span>view.<\/span>safeAreaLayoutGuide.<\/span>leadingAnchor).<\/span>isActive = <\/span>true<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>scrollView<\/span>.<\/span>trailingAnchor.<\/span>constraint<\/span>(equalTo: <\/span>view.<\/span>safeAreaLayoutGuide.<\/span>trailingAnchor).<\/span>isActive = <\/span>true<\/span><\/pre>\n<\/li>\n
  2. Add a stack view to your scroll view\n
    \u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>self.<\/span>stackView<\/span> = <\/span>UIStackView()<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>stackView<\/span>.<\/span>translatesAutoresizingMaskIntoConstraints = <\/span>false<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>stackView<\/span>.axis<\/span> = .vertical<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>stackView<\/span>.spacing<\/span> = 23.0<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>scrollView.<\/span>addSubview<\/span>(<\/span>stackView)<\/span>\r\n\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>scrollView<\/span>.addConstraints<\/span>(NSLayoutConstraint<\/span>.constraints<\/span>(withVisualFormat: \"H:|[stackView]|\"<\/span>, options: NSLayoutFormatOptions<\/span>.alignAllCenterX<\/span>, metrics: nil<\/span>, views: [\"stackView\"<\/span>: stackView<\/span>]))\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>scrollView<\/span>.addConstraints<\/span>(NSLayoutConstraint<\/span>.constraints<\/span>(withVisualFormat: \"V:|[stackView]|\"<\/span>, options: NSLayoutFormatOptions<\/span>.alignAllCenterX<\/span>, metrics: nil<\/span>, views: [\"stackView\"<\/span>: stackView<\/span>]))<\/pre>\n<\/li>\n
  3. Add images to your stack view\n
    stackView<\/span>.<\/span>addArrangedSubview(<\/span>image<\/span>(filename: <\/span>\"photo1\"<\/span>))<\/span><\/pre>\n<\/li>\n<\/ol>\n
    For the full code, read the ViewController<\/a> on GitHub<\/a><\/p>\n
    Hope this helps you if you’re trying to throw together a quick prototype of vertically scrolling images in iOs.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Working on a small side project, I wanted to display images in my view controller view at full device width in a vertical scrolling view. Sounds simple right? The good news is that it is. While you may want to use\u00a0UITableView for more control, using\u00a0UIStackView is a simpler way to get up and running fast. […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1029],"tags":[1373,966,1372,1174,1370,1371],"class_list":["post-2212","post","type-post","status-publish","format-standard","hentry","category-programming","tag-images","tag-ios","tag-scrolling","tag-swift","tag-uiscrollview","tag-uistackview"],"_links":{"self":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/comments?post=2212"}],"version-history":[{"count":5,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2212\/revisions"}],"predecessor-version":[{"id":2217,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/posts\/2212\/revisions\/2217"}],"wp:attachment":[{"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/media?parent=2212"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/categories?post=2212"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rexfeng.com\/blog\/wp-json\/wp\/v2\/tags?post=2212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}