UIButton in scrollView position unexpected - ios

Question

I created a very simple custom class from UIView. On the top there is a UIScrollView. Inside the UIScrollView, I placed a couple of buttons. The buttons position is out of the scrollview.
Here is the code.
class TestView: UIView {
var tabView: UIScrollView = UIScrollView()
var buttons = [UIButton]()
var tabHeight: CGFloat = 40.0
let screenWidth: CGFloat = UIScreen.mainScreen().bounds.width
var titles = [String]()
var numberOfTitles = 0
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.addSubview(tabView)
}
func createUI() {
tabView.frame = CGRect(x: 0, y: 0, width: screenWidth, height: tabHeight)
tabView.backgroundColor = UIColor.grayColor()
tabView.contentSize = CGSize(width: screenWidth, height: tabHeight)
numberOfTitles = titles.count
for var i = 0; i < numberOfTitles; ++i {
var button = UIButton.buttonWithType(UIButtonType.Custom) as! UIButton
button.frame = CGRect(x: 50.0*CGFloat(i), y: 0, width: 50.0, height: tabHeight)
button.setTitle(titles[i], forState: UIControlState.Normal)
button.setTitleColor(UIColor.blackColor(), forState: UIControlState.Normal)
tabView.addSubview(button)
}
}
}
Here is how it looks when I debug view Hierarchy.
But if I just change the UIScrollView to UIView, as below,
var tabView: UIView = UIView()
Then the button locations are correct, as below.
I could not figure out why. Please help. Thanks!

Answer 1

This is because UIScrollView by itself only is able to scroll a container view. What you need to do is initialize a UIScrollView like you did originally, but instead of adding all the components to the scrollview, create a new UIView called conatinerView, change all the tabView to containerView, then change the required init to:
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
self.addSubview(tabView)
tabView.addSubview(containerView)
}
But make sure the frame size for containerView is correct and so is the origin point.