Uiscrollview constraint layout for IOS development

Qingcheng classmate 2021-10-14 08:08:17


stay iOS Developing learning ,UIScrollView Is an important control that can't get around .

But relative to Android Of ScrollView,iOS The usage of this scroll control is ten thousand times more complex ...

The main thing is that most of the video tutorials you can find are about UIScrollView A tutorial for , Is to use Frame Layout . No use found AutoLayout A tutorial on layout .. Only read the text tutorial to learn , Then sum it up for yourself .

StoryBoard Operation layout

stay storyboard in , Drag into one UIScrollView, Then open the... On the right show the size inspector, Uncheck content layout guides, Then set the UIScrollView The upper, lower, left and right constraints of are 0, Then check again content layout guides

Find out here Xcode Prompt constraint error , The reason is because UIScrollView We need to have a ContentView To determine your scrolling area .

So drag another UIView To UIScrollView On , Then change the name to this UIView by ContentView, Right click and drag this UIView To UIScrollView Of content layout guides On , Hold down shift Check the first four constraints , Give Way UIScrollView and ContentView Four edges establish constraints .

Then adjust ContentView Constrained constant Value ,Xcode The constraints created by default don't seem perfect , It is calculated automatically by default ContentView Initial size of .


Adjust these to 0

After the last few settings , The red dot of constraint error still does not disappear ... Click to open it .

explain UIScrollView The rolling direction cannot be determined according to the width and height . You need to set the width and height . Because it's a mobile device . Default should be Y Axis roll .

Then set the width equal to UIScrollView Width . Set the height to a higher value , You can scroll

Drag with the right mouse button ContentView To Frame Layout Guides On , Then constrain ContentView and Frame Layout Guides The width is the same .

Then set it separately ContentView The height of 1000, The red dot of constraint error is gone , Run the program , A scroll bar appears on a white background , You can slide up and down .

Use pure code layout

Thinking and using StoryBoard equally . It's just described in code

 let sv = UIScrollView();
sv.translatesAutoresizingMaskIntoConstraints = false
sv.backgroundColor = UIColor.systemGray;
sv.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor).isActive = true
sv.leadingAnchor.constraint(equalTo: self.view.leadingAnchor).isActive = true
sv.bottomAnchor.constraint(equalTo: self.view.bottomAnchor).isActive = true
sv.trailingAnchor.constraint(equalTo: self.view.trailingAnchor).isActive = true
let contentView = UIView()
contentView.translatesAutoresizingMaskIntoConstraints = false
contentView.layer.name = "contentView"
contentView.backgroundColor = UIColor.white
contentView.leadingAnchor.constraint(equalTo: sv.contentLayoutGuide.leadingAnchor).isActive = true
contentView.topAnchor.constraint(equalTo: sv.contentLayoutGuide.topAnchor).isActive = true
contentView.trailingAnchor.constraint(equalTo: sv.contentLayoutGuide.trailingAnchor).isActive = true
contentView.bottomAnchor.constraint(equalTo: sv.bottomAnchor).isActive = true
contentView.widthAnchor.constraint(equalTo: sv.frameLayoutGuide.widthAnchor).isActive = true
contentView.heightAnchor.constraint(equalToConstant: 1000).isActive = true


Welcome to my official account and communicate with me

Please bring the original link to reprint ,thank
Similar articles