preface
UIScrollView believe that we are familiar with the image of the wheel and boot page can find it. UITableView and UICollectionView can scroll because they are children of UIScrollView. There is one other place in development where UIScrollView has to be used: When our interface needs to display a lot of content, and the total size of all the subspaces in one direction is greater than the size of the screen (especially in the vertical direction, the total height of all the child controls is greater than the height of the screen), we need to use UIScrollView to display all the content.
There are two common ways to use UIScrollView
1. Pure code
Adding a UIScrollView through code is relatively easy. The main reason for UIScrollView to be able to scroll is through the contentSize property, which sets the range of horizontal and vertical scrolling. The width (height) of the contentSize must be greater than the width (height) of the UIScrollView’s frame in order for the UIScrollView to scroll in the corresponding direction.
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor purpleColor];
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:CGRectMake(0.64[UIScreen mainScreen].bounds.size.width, 300)];
[self.view addSubview:scrollView];
scrollView.contentSize = CGSizeMake([UIScreen mainScreen].bounds.size.width * 3.200);
for (int i = 0; i < 3; i++) {
UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:[NSString stringWithFormat:@"Snip20170104_%d",i+1]]];
imageView.frame = CGRectMake(i* [UIScreen mainScreen].bounds.size.width, 0[UIScreen mainScreen].bounds.size.width, 200); [scrollView addSubview:imageView]; }}Copy the code2. Via Xib or StoryBoard (given constraints, controls exist only)
Xibs and storyboards are similar, so WE’ll just talk about XIBs here. Xib development can not only greatly improve the efficiency of development, but also can provide a visual interface, there are interests of developers to develop interface efficient layout of sub-controls. By default, the system provides the width and height of the controls such as eg. UISegementController, UISwitch, and UISlider. At least two additional constraints need to be added. UILabel and UIButton also only need to add two constraints besides width and height; UIView, UIImageView, and UITableView require at least 4 constraints for controls that do not give a default width and height. In general, to avoid red alert, you need to let the system know where and how to put the control you add. Typically, four constraints are required, as we can see when we set the frame. X and y of frame determine the position of the upper left corner of the control in the parent control, which determines the starting point in the parent control layout of the child control, and the width and height determine the layout of the control in the X and Y direction of the distance occupied. There is only one control that exists through these four constraints, so that the system knows how to place our controls.
Xib layout scrollView process analysis
1. Add a scrollView to the view of the controller, and set the views of the left, right, upper, and lower controllers to 0, because the scrollView can be uniquely identified, so it will not be red.
2. Add a new view to the scrollView and add four constraints. If the view is added to a normal view, we know it will not be red, but adding it to the scrollView above will be red.
3. Add a height of 160 to the view. The height direction is no longer red, but the width is still red.
4. Continue to add a width constraint, and the view finally works.
5. Running result. The view cannot move horizontally or vertically.
6. Change the height constraint so that the height is 800 (greater than the screen height) and vertical scrolling is available. If the width is larger than the width of the screen, you will find that you can scroll horizontally as well.
Summary:
In xiB, a child control on a scrollView requires more than four constraints. 2, In order to scrollView does not report red, we must let scrollView know in the horizontal and vertical direction, put down all its child controls required by the maximum width and height, so that the ScrollView knows whether it can scroll in the horizontal direction and vertical direction.
The width and height of the screen must be greater than the width and height of the screen in order to scroll. Think of the contentSize requirement in pure code. (if everything that needs to be displayed in horizontal or vertical directions can fit on the screen, then there is no need to scroll.)
Now, one might say, well, I’m just going to require at least six constraints on the child control of scrollView, because that’s what someone on the web said, and in my example above, I did add a view with six constraints. Let’s look at another example.
1. Add three views to the scrollView and set the distance of each view to 0, so that all three views have four constraints. After the above analysis, this must be red. Because ScrollView doesn’t know how far its child controls take up horizontally and vertically.
2. Add height constraint 250 to all three views, and find that the height direction is not red, because it can be determined that the total height of the scrollView in the vertical direction is 750, which is greater than the height of the screen, and the vertical direction can be rolled.
3, Set the width of the first view to 375, set the width constraint of the next two views, and find that the width direction is not red, running the program found that the vertical direction can scroll, horizontal direction can not.
Summary:
As shown above, the first view has six constraints and the other two have only five, so it is not entirely true that the child controls of a ScrollView need six constraints. In my opinion, the key to adding constraints to scrollView’s child controls is to let the ScrollView know not only where to place all the child controls, but also whether it can scroll horizontally and vertically.
Note: In the above example, why only need to set the width of the first view? Because: with the first four constraints, we already know that the next two views are the same width as the first one. By setting the width of the first View, the ScrollView already knows the maximum horizontal width it needs for all of its child controls.