How to Use UIScrollView (multiple contentviews) in AutoLayout)

How to Use UIScrollView (multiple contentviews) in AutoLayout)

 

This post demonstrates how to use UIScrollView in AutoLayout. The ScrollView also contains multiple subviews. In this example, I use three views with different background colors as the ContentView of ScrollView.

Code download: https://github.com/djsison/iOS-ScrollView-AutoLayout-MultipleContents

If you want to know the ScrollView with only one view, you can view
IOS: How to use UIScrollView with Auto Layout (PureAuto Layout)-Single Content View

This article uses the AutoLayout-only layout method. See the following connection:

Https://developer.apple.com/library/ios/technotes/tn2154/_index.html

First, I define the following view layers in the story board:

• View (view of UIViewController)

  · Scroll View (UIScrollView)-dark gray

  · Container View (UIView)-light gray

  · Content1 (UIView)-red

  · Content2 (UIView)-green

  · Content3 (UIView)-blue

  The layout shown in the Story Board is as follows:
  

   

  Note the following before setting layout rules:

  • The Scroll view does not have a fixed height and width.
  • The width and height of the Scroll View are determined by the content (that is, the contentSize of the Scroll View ).
  • The size of the content must not depend on the size of the Scroll View. For example, Content1, Content2, and Content3 cannot contain any layout constraints of top, bottom, left, and right related to the Container View. Only constraints with fixed width and height can be included (each constraint must be defined at least on one of them ). If any content view does not contain these constraints, their size will depend on Scroll View (because they are bound to the margins of Scroll View ), however, Scroll View depends on the size of the content, which leads to conflicts.
  • ScrollView must have at least one content bound to its four sides, such as top, left, right, and bottom. In this way, ScrollView can know the boundary of its content, that is, the ContentSize of Scroll View.

    Now, let's start the layout.

    
    

     

    • Scroll View (UIScrollView): 20 for superview, leading, trailing, top, and bottom.
      You can also change 20 to 0, which will occupy the entire View Size of the view Controller.
    • Container View (UIView): Compared with Scroll View, leading, trailing, top, and bottom, the distance between them is 0.
      In general, this is fixed, unless you want to do a white effect on the side.
      In, the distance between leading, trailing, top, and bottom is set to 0. The size of the Container View is determined by the size of three Content views, which affects the size of the ScrollView (the actual size of the ScrollView is calculated at runtime, setting the size on the storyboard does not have any effect ).
    • Content1: fixed width 100, height 240, leading and trailing margins 20, top margin 8, bottom margin 8 (the spacing between Content1 and Content2 ).
      Note the leading and trailing constraints and width constraints. If content1 is located in another fixed-size view, Xcode will prompt a constraint conflict. Except bottom, the top, left, and right margins of content1 are relative to ScrollView.
    • Content2: leading and trailing are 20, bottom is 8 (Vertical spacing between Content2 and Content3), and the height is 100.
      We have not added the Width limit. In this way, only content1 can affect the contentSize of ScrollView.
    • Content3: leading and trailing are 20, and button 20 (Vertical spacing between content3 and superView is ContainerView ). The width is fixed at 100. Now, we also have a view that is related to the bottom edge of the ScrollView.

       

      Run the program on the iPhone 3.5 inch simulator and observe the running result.

      Why cannot I scroll?
      Don't worry, this is because contentView is not big enough for ScrollView.

      We can modify the Size of any contentView. Here, I only modified the width of Content1:

      -(Void) viewDidLoad {

      [Super viewDidLoad];

      Self. content1WidthConstraint. constant = 500;

      }

      Run the program and the horizontal scroll bar appears. Note: Do not forget to create an IBOulet for the corresponding constraints.

      Then, try to modify the height of content2.

      -(Void) viewDidLoad {

      [Super viewDidLoad];

      Self. content2HeightConstraint. constant = 200;

      }

      Run the program and the vertical scroll bar also appears.