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

Posted 2023-03-10

【中文标题】Swift - 如何对 ScrollView 中的项目使用自动布局？

【英文标题】：Swift - How do I use auto layout with items in a ScrollView?

【发布时间】：2017-04-20 23:55:51

【问题描述】：

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

先谢谢了！

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

附言有些图像是文本，但它们被用作图像，因为您无法在 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

【参考方案1】：

使用scrollView 的最简单方法是在scrollView 中添加UIView（将其命名为contentView）。然后将所有内容都放在这个contentView 中。您的所有约束都将基于contentView。那么你所要做的就是操纵contentView的框架来调整scrollView

【讨论】：

好的，但这不会影响页面间距吗？另外，如何在 Main.storyboard 中为每个页面执行此操作？

跨页到底是什么意思？您是否在不同的 viewControllers 中使用相同的 scrollView？