ios - Swift - 如何对 ScrollView 中的项目使用自动布局？

Question

我在将项目添加到 ScrollView 时遇到了一些问题。现在我已经以编程方式将所有项目添加到 ScrollView 中，但遇到了一些自动布局问题。我不完全理解如何在不执行我正在做的所有编程的情况下将项目添加到 ScrollView 中，或者至少通过添加某种形式的自动布局来使其在不同设备上看起来不会那么糟糕。如果你能帮忙，请告诉我。我的代码如下。

提前致谢!

附言文本字段添加到一个单独的函数中。

附言有些图像是文本，但它们被用作图像，因为您无法在 iOS 中设置它们的格式以获得我想要的外观。

/*
 ManagePages - This section handles the UIScrollView
 */
private func managePages()
{
    self.sideScrollView.frame = CGRect(x:0, y:0, width:self.view.frame.width, height:self.view.frame.height)
    let scrollViewWidth:CGFloat = self.sideScrollView.frame.width
    let scrollViewHeight:CGFloat = self.sideScrollView.frame.height

    let imgOne = UIImageView(frame: CGRect(x:(scrollViewWidth/2) - (129/2), y:157,width:129, height:84))
    imgOne.image = UIImage(named: "Image1")
    imgOne.contentMode = .scaleAspectFit
    let imgTwo = UIImageView(frame: CGRect(x:((((scrollViewWidth*2)/4))*3)-(153/2), y:137,width:153, height:153))
    imgTwo.image = UIImage(named: "Image2")
    imgOne.contentMode = .scaleAspectFit
    let imgThree = UIImageView(frame: CGRect(x:((((scrollViewWidth*3)/6))*5)-(132/2), y:137,width:132, height:151))
    imgThree.image = UIImage(named: "Image3")
    imgOne.contentMode = .scaleAspectFit
    let imgFour = UIImageView(frame: CGRect(x:((((scrollViewWidth*4)/8))*7)-(139/2), y:137,width:139, height:118))
    imgFour.image = UIImage(named: "Image4")
    imgOne.contentMode = .center
    let imgFive = UIImageView(frame: CGRect(x:((((scrollViewWidth*5)/10))*9)-(171/2), y:127,width:171, height:169))
    imgFive.image = UIImage(named: "Image5")
    imgOne.contentMode = .scaleAspectFit
    let imgSix = UIImageView(frame: CGRect(x:((((scrollViewWidth*6)/12))*11)-(133/2), y:127,width:133, height:175))
    imgSix.image = UIImage(named: "Image6")
    imgSix.contentMode = .scaleAspectFit

    let messageOne = UIImageView(frame: CGRect(x: 0, y: (137+153+25), width: scrollViewWidth, height: 112))
    messageOne.image = UIImage(named: "Message1")
    messageOne.contentMode = .scaleAspectFit

    let titleOne = UIImageView(frame: CGRect(x: (scrollViewWidth/2) - (131/2), y:57, width: 131, height: 56))
    titleOne.image = UIImage(named: "Title1")
    titleOne.contentMode = .scaleAspectFit
    let titleTwo = UIImageView(frame: CGRect(x:(((scrollViewWidth*2)/4)*3)-(184/2), y: 57, width:184, height: 56))
    titleTwo.image = UIImage(named: "Title2")
    titleTwo.contentMode = .scaleAspectFit
    let titleThree = UIImageView(frame: CGRect(x:(((scrollViewWidth*3)/6)*5)-(227/2), y: 57, width:227, height: 56))
    titleThree.image = UIImage(named: "Title3")
    titleThree.contentMode = .scaleAspectFit
    let titleFour = UIImageView(frame: CGRect(x:(((scrollViewWidth*4)/8)*7)-(scrollViewWidth/2), y: 57, width:scrollViewWidth, height: 56))
    titleFour.image = UIImage(named: "Title4")
    titleFour.contentMode = .scaleAspectFit
    let titleFive = UIImageView(frame: CGRect(x:(((scrollViewWidth*5)/10)*9)-(270/2), y: 57, width:270, height: 56))
    titleFive.image = UIImage(named: "Title5")
    titleFive.contentMode = .scaleAspectFit
    let titleSix = UIImageView(frame: CGRect(x:(((scrollViewWidth*6)/12)*11)-(270/2), y: 57, width:270, height: 56))
    titleSix.image = UIImage(named: "Title6")
    titleSix.contentMode = .scaleAspectFit

    for (index,element) in inputFields.enumerated()
    {
        if(index == 0)
        {
            element.frame = CGRect(x: calculateTextFieldXLocation(pageNumber: 1, scrollWidth: scrollViewWidth, width: 244), y: 222, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.keyboardType = .emailAddress
            element.autocapitalizationType = .none
            element.placeholder = "Email"
            element.contentMode = .scaleAspectFit
        }
        else if(index == 1)
        {
            element.frame = CGRect(x: calculateTextFieldXLocation(pageNumber: 1, scrollWidth: scrollViewWidth, width: 244), y: 327, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.isSecureTextEntry = true
            element.placeholder = "Password"
            element.contentMode = .scaleAspectFit
            element.returnKeyType = .done
        }
        else if(index == 2)
        {
            element.frame = CGRect(x: calculateTextFieldXLocation(pageNumber: 2, scrollWidth: scrollViewWidth, width: 244), y: 222, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "First Name"
            element.contentMode = .scaleAspectFit
            element.returnKeyType = .done
        }
        else if(index == 3)
        {
            element.frame = CGRect(x: calculateTextFieldXLocation(pageNumber: 2, scrollWidth: scrollViewWidth, width: 244), y: 327, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Last Name"
            element.contentMode = .scaleAspectFit
            element.returnKeyType = .done
        }
        else if(index == 4)
        {
            element.frame = CGRect(x: (scrollViewWidth*3)-(scrollViewWidth/2)-(122), y: 432, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Date of Birth"
            element.contentMode = .scaleAspectFit
            addDatePicker(element: element)
        }
        else if(index == 5)
        {
            element.frame = CGRect(x: (scrollViewWidth*3)-(scrollViewWidth/2)-(122), y: 534, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Gender"
            element.contentMode = .scaleAspectFit
            element.inputView = genderPicker
        }
        else if(index == 6)
        {
            element.frame = CGRect(x: (scrollViewWidth*4)-(scrollViewWidth/2)-(122), y: 222, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Favorite Type"
            element.contentMode = .scaleAspectFit
            element.inputView = typePicker
        }
        else if(index == 7)
        {
            element.frame = CGRect(x: (scrollViewWidth*4)-(scrollViewWidth/2)-(122), y: 327, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Eye Color"
            element.contentMode = .scaleAspectFit
            element.inputView = colorPicker
        }
        else if(index == 8)
        {
            element.frame = CGRect(x: (scrollViewWidth*4)-(scrollViewWidth/2)-(122), y: 432, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Height"
            element.contentMode = .scaleAspectFit
            element.returnKeyType = .done
        }
        else if(index == 9)
        {
            element.frame = CGRect(x: (scrollViewWidth*4)-(scrollViewWidth/2)-(122), y: 534, width: 244, height: 49)
            element.background = UIImage(named:"SetupTextField")
            element.font = UIFont(name: "System", size: 24.0)
            element.textAlignment = .center
            element.placeholder = "Weight"
            element.contentMode = .scaleAspectFit
            element.keyboardType = .decimalPad
            element.returnKeyType = .done
        }
    }

    let swipeArrow = UIImageView(frame: CGRect(x:(scrollViewWidth/2)-(170/2), y: scrollViewHeight-120, width:170, height: 60))
    swipeArrow.image = UIImage(named: "WelcomeSwipeToContinue")
    swipeArrow.contentMode = .scaleAspectFit

    let getStartedButton = UIButton(frame: CGRect(x:((scrollViewWidth*5) + scrollViewWidth/2)-125, y: scrollViewHeight-175, width: 250, height: 99))
    getStartedButton.setImage(UIImage(named: "GetStartedButton"), for: UIControlState.normal)
    getStartedButton.addTarget(self, action: #selector(finishSetup), for: .touchUpInside)


    self.sideScrollView.addSubview(imgOne)

    self.sideScrollView.addSubview(messageOne)

    self.sideScrollView.addSubview(titleOne)
    self.sideScrollView.addSubview(titleTwo)
    self.sideScrollView.addSubview(titleThree)
    self.sideScrollView.addSubview(titleFour)
    self.sideScrollView.addSubview(titleFive)
    self.sideScrollView.addSubview(titleSix)

    self.sideScrollView.addSubview(swipeArrow)

    for fieldName in inputFields
    {
        self.sideScrollView.addSubview(fieldName)
    }

    self.sideScrollView.addSubview(getStartedButton)

    self.sideScrollView.contentSize = CGSize(width:self.sideScrollView.frame.width * 6, height:self.sideScrollView.frame.height)
    self.sideScrollView.delegate = self
    //self.pageControl.currentPage = 0

}

Answer 1

使用 scrollView 的最简单方法是在 scrollView 中添加一个 UIView(将其命名为 contentView ).然后将所有内容放入此 contentView 中。您的所有约束都将基于 contentView。然后你所要做的就是操纵contentView的frame来调整scrollView