Swift - 如何在ScrollView中使用自動布局和項目？

Question

我在滾動視圖中添加項目時遇到了一些麻煩。 現在我已經以編程方式將所有項目添加到滾動視圖中，但遇到了自動布局的一些問題。 我不完全理解如何在不執行我正在進行的所有編程的情況下將項添加到滾動視圖中，或者至少通過添加某種形式的自動布局，因此它在不同設備上看起來不那么糟糕。 如果你能提供幫助，請告訴我。 我的代碼如下。

謝謝！

PS文本字段添加在單獨的函數中。

PSS有些圖像是文本但是它們被用作圖像，因為你不能在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是添加UIView一個內scrollView （命名為contentView ）。 然后將所有內容放在此contentView 。 您的所有約束都將基於contentView 。 然后你要做的就是操縱contentView的框架來調整scrollView