Method of automatic layout in IOS Scrollview (applicable to swift 3.0)

Time:2020-10-25

preface

As we all know, in the development process, there may be many elements displayed on some pages, which may exceed one screen, but they are not suitable for tableview or collectionview. At this time, we usually use Scrollview, so the problem of automatic layout will appear. The following is not much to say, let’s have a look at the detailed introduction.

Implementation mode

Pure code

  • Feature coding tedious: need handwritten control
  • Security: as long as the constraints or frame and contentsize are set correctly, there will be no rolling problem

Examples


lazy var scrollView: UIScrollView = {
 let obj = UIScrollView(frame: CGRect(x: 0, y: 0, width: .screenW, height: self.screenH))
 return obj
}()
override func viewDidLoad() {
 super.viewDidLoad()
 view.addSubview(scrollView)
 let subViewH: CGFloat = 400
 let topView = UIView(frame: CGRect(x: 0, y: 0, width: enW, height: subViewH))
 topView.backgroundColor = UIColor.red
 scrollView.addSubview(topView)
 let bottomView = UIView(frame: CGRect(x: 0, y: subViewH, h: screenW, height: subViewH))
 bottomView.backgroundColor = UIColor.purple
 scrollView.addSubview(bottomView)
 scrollView.contentSize = CGSize(width: screenW, height: iewH * 2)
}

design sketch

scrollview_纯代码实现.gif

Storyboard + internal view

characteristic

  • The interface is simple
  • visual
  • Occupancy view required

The page structure is shown in the figure

Scrollview_SB_InnerView.png

Possible problems

  • Add a child element directly in the Scrollview. An error is reportedHas ambiguous scrollable content height
  • Scrollview cannot scroll beyond the screen

Scrollview_layout_error.png

Code for scrolling

override func viewDidLayoutSubviews() {
 super.viewDidLayoutSubviews()
 let statusBarH: CGFloat = 20
 //If there is no navigation bar, return to the height of the status bar
 let navH = gationController?.navigationBar.frame.maxY ?? statusBarH
 let deltaH = (screenH - navH) - bottomView.frame.maxY
 placeholderViewBottomConstraint.constant = deltaH
}

design sketch

Scrollview_SB+InnerView.gif

Storyboard + external view

characteristic

  • The interface is simple
  • visual
  • There is no footprint view and no special handling of the layout of Scrollview
  • Frames that need to handle external views (can be ignored if there is no user interaction)

The page structure is shown in the figure

Scrollview_SB+OutterView.png

Possible problems

  • Add a child element directly in the Scrollview. An error is reportedHas ambiguous scrollable content height
  • When the content exceeds the screen height, the containerview frame must be set, otherwise it cannot scroll or the part beyond the screen will not accept events

Scrollview_SB+OutterView_事件问题.png

Code for scrolling

override func viewDidLoad() {
 super.viewDidLoad()
 scrollView.addSubview(containerView)
}
override func viewDidLayoutSubviews() {
 super.viewDidLayoutSubviews()
 var f = containerView.frame
 f.size.width = screenW
 //This code is very important to deal with the problem of not responding to events beyond the screen
 f.size.height = bottomView.frame.maxY
 containerView.frame = f
 scrollView.contentSize = CGSize(width: screenW, height: omView.frame.maxY)
}

design sketch

Scrollview_SB+OutterView.gif

summary

Why Scrollview can’t scroll

  • contentSize less thanSize of self frame
  • The isscrollenabled property. However, it is true by default and does not need to be set by default
  • The Scrollview or its parent element cannot interact. In this case, we need to check whether the isuserinteractionenabled property is true

Scrollview always supports scrolling

By default, when the elements in the Scrollview are less than a screen height, you cannot scroll. To scroll (spring effect), you need to set the alwaysbouncevertical property to true (the same is true for the horizontal direction)

Selection of Scrollview layout

Pure code layout

If it is a pure code layout, only mode 1 can be used. Honest, line by line code to achieve layout, although the code is complex, but few holes. (there are still many companies that program in this way.)

Interface layout

Method 3 is recommended. In this way, the Scrollview is separated from its child elements, which can simplify many constraint problems and make it more intuitive

The above code is applicable to swift 3.0 syntax.

Well, the above is the whole content of this article, I hope that the content of this article has a certain reference value for your study or work. If you have any questions, you can leave a message and exchange, thank you for your support to developeppaer.

Recommended Today

Layout of angular material (2): layout container

Layout container Layout and container Using thelayoutDirective to specify the layout direction for its child elements: arrange horizontally(layout=”row”)Or vertically(layout=”column”)。 Note that if thelayoutInstruction has no value, thenrowIs the default layout direction. row: items arranged horizontally.max-height = 100%andmax-widthIs the width of the item in the container. column: items arranged vertically.max-width = 100%andmax-heightIs the height of the […]