Verwenden von ScrollView programmatisch in Swift 3

Question

Ich habe andere Fragen und scheint immer noch einige Probleme beim Erstellen meiner scrollView mit dem automatischen Layout in swift 3 programmatisch. Ich bin in der Lage, meine scrollview zu sehen, wie in der Abbildung unten gezeigt, aber wann Ich scrolle nach unten, mein anderes Label erscheint nicht und das Label "scroll top" verschwindet nicht.

der Hoffnung, jemand meinen Code unten überprüfen kann helfen!

import UIKit 

class ViewController: UIViewController { 

let labelOne: UILabel = { 
    let label = UILabel() 
    label.text = "Scroll Top" 
    label.backgroundColor = .red 
    label.translatesAutoresizingMaskIntoConstraints = false 
    return label 
}() 

let labelTwo: UILabel = { 
    let label = UILabel() 
    label.text = "Scroll Bottom" 
    label.backgroundColor = .green 
    label.translatesAutoresizingMaskIntoConstraints = false 
    return label 
}() 


override func viewDidLoad() { 
    super.viewDidLoad() 

    let screensize: CGRect = UIScreen.main.bounds 
    let screenWidth = screensize.width 
    let screenHeight = screensize.height 
    var scrollView: UIScrollView! 
    scrollView = UIScrollView(frame: CGRect(x: 0, y: 120, width: screenWidth, height: screenHeight)) 
    scrollView.contentSize = CGSize(width: screenWidth, height: 2000) 
    scrollView.addSubview(labelOne) 
    scrollView.addSubview(labelTwo) 


    view.addSubview(labelOne) 
    view.addSubview(labelTwo) 
    view.addSubview(scrollView) 

    // Visual Format Constraints 
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|[v0]|", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": labelOne])) 
    view.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-100-[v0]", options: NSLayoutFormatOptions(), metrics: nil, views: ["v0": labelOne])) 

    // Using iOS 9 Constraints in order to place the label past the iPhone 7 view 
    view.addConstraint(NSLayoutConstraint(item: labelTwo, attribute: .top, relatedBy: .equal, toItem: labelOne, attribute: .bottom, multiplier: 1, constant: screenHeight + 200)) 
    view.addConstraint(NSLayoutConstraint(item: labelTwo, attribute: .right, relatedBy: .equal, toItem: labelOne, attribute: .right, multiplier: 1, constant: 0)) 
    view.addConstraint(NSLayoutConstraint(item: labelTwo, attribute: .left, relatedBy: .equal, toItem: labelOne, attribute: .left, multiplier: 1, constant: 0)  

    } 

} 

Answer 1

Es ist leicht, Einschränkungen zu verwenden, um die Scroll-Inhaltsgröße zu definieren - so dass Sie keine manuellen Berechnungen zu tun haben, .

Denken Sie daran:

1. Die Inhaltselemente Ihrer Ansicht blättern haben links/oben muss/Breite/Höhe Werte. Im Fall von Objekten wie Etiketten haben sie innere Größen, so dass Sie nur die linke & Oberseite definieren müssen.
2. Die Inhaltselemente Ihrer Ansicht blättern auch definieren die Grenzen des rollbaren Bereich - die contentSize - aber sie tun dies mit den unteren & rechten Einschränkungen.
3. Die Kombination dieser beiden Konzepte zeigt, dass Sie eine "kontinuierliche Kette" mit mindestens einem Element benötigen, das die oberen/linken/unteren/rechten Bereiche definiert.

Hier ist ein einfaches Beispiel, die direkt auf einem Spielplatz Seite läuft:

import UIKit 
import PlaygroundSupport 

class TestViewController : UIViewController { 

    let labelOne: UILabel = { 
     let label = UILabel() 
     label.text = "Scroll Top" 
     label.backgroundColor = .red 
     label.translatesAutoresizingMaskIntoConstraints = false 
     return label 
    }() 

    let labelTwo: UILabel = { 
     let label = UILabel() 
     label.text = "Scroll Bottom" 
     label.backgroundColor = .green 
     label.translatesAutoresizingMaskIntoConstraints = false 
     return label 
    }() 

    let scrollView: UIScrollView = { 
     let v = UIScrollView() 
     v.translatesAutoresizingMaskIntoConstraints = false 
     v.backgroundColor = .cyan 
     return v 
    }() 


    override func viewDidLoad() { 
     super.viewDidLoad() 

     // add the scroll view to self.view 
     self.view.addSubview(scrollView) 

     // constrain the scroll view to 8-pts on each side 
     scrollView.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 8.0).isActive = true 
     scrollView.topAnchor.constraint(equalTo: view.topAnchor, constant: 8.0).isActive = true 
     scrollView.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -8.0).isActive = true 
     scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -8.0).isActive = true 

     // add labelOne to the scroll view 
     scrollView.addSubview(labelOne) 

     // "pin" labelOne to left & top with 16-pts padding 
     // this also defines the left & top of the scroll content 
     labelOne.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 16.0).isActive = true 
     labelOne.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 16.0).isActive = true 

     // add labelTwo to the scroll view 
     scrollView.addSubview(labelTwo) 

     // pin labelTwo at 400-pts from the left 
     labelTwo.leadingAnchor.constraint(equalTo: scrollView.leadingAnchor, constant: 400.0).isActive = true 

     // pin labelTwo at 1000-pts from the top 
     labelTwo.topAnchor.constraint(equalTo: scrollView.topAnchor, constant: 1000).isActive = true 

     // "pin" labelTwo to right & bottom with 16-pts padding 
     labelTwo.rightAnchor.constraint(equalTo: scrollView.rightAnchor, constant: -16.0).isActive = true 
     labelTwo.bottomAnchor.constraint(equalTo: scrollView.bottomAnchor, constant: -16.0).isActive = true 

    } 

} 


let vc = TestViewController() 
vc.view.backgroundColor = .yellow 
PlaygroundPage.current.liveView = vc 

Answer 2

Zwei Dinge.

1. die Etiketten hinzufügen Ansicht scrollen, nicht Ihre Ansicht

Sie möchten Ihr Etikett mit Scroll-Ansicht scrollen, dann sollten Sie es auf Ihrer Ansicht nicht hinzufügen. Wenn Ihr Code ausgeführt wird, können Sie blättern, aber die dort fixiert Etikett zu Ihrer Ansicht fixiert ist, nicht auf dem Scroll-Ansicht

2. Stellen Sie sicher, dass Sie Ihre Einschränkungen richtig

Probieren Sie es hinzugefügt am Storyboard über das, was Die Kombination der Einschränkung reicht für eine Ansicht aus. Für ein Label werden mindestens 4 Constraints benötigt.

Unterm Strich

Hier ist eine modifizierte Version des Codes. Für Constraint habe ich Padding links, Padding oben, Breite und Höhe hinzugefügt und es funktioniert. Mein Code ist

let labelOne: UILabel = { 
    let label = UILabel() 
    label.text = "Scroll Top" 
    label.backgroundColor = .red 
    label.translatesAutoresizingMaskIntoConstraints = false 
    return label 
}() 

let labelTwo: UILabel = { 
    let label = UILabel() 
    label.text = "Scroll Bottom" 
    label.backgroundColor = .green 
    label.translatesAutoresizingMaskIntoConstraints = false 
    return label 
}() 


override func viewDidLoad() { 
    super.viewDidLoad() 

    let screensize: CGRect = UIScreen.main.bounds 
    let screenWidth = screensize.width 
    let screenHeight = screensize.height 
    var scrollView: UIScrollView! 
    scrollView = UIScrollView(frame: CGRect(x: 0, y: 120, width: screenWidth, height: screenHeight)) 

    scrollView.addSubview(labelTwo) 

    NSLayoutConstraint(item: labelTwo, attribute: .leading, relatedBy: .equal, toItem: scrollView, attribute: .leadingMargin, multiplier: 1, constant: 10).isActive = true 
    NSLayoutConstraint(item: labelTwo, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200).isActive = true 
    NSLayoutConstraint(item: labelTwo, attribute: .top, relatedBy: .equal, toItem: scrollView, attribute: .topMargin, multiplier: 1, constant: 10).isActive = true 
    NSLayoutConstraint(item: labelTwo, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 30).isActive = true 

    scrollView.contentSize = CGSize(width: screenWidth, height: 2000) 
    view.addSubview(scrollView) 

} 

Und die Scroll-Ansicht sieht wie folgt aus

Answer 3

Set Scroll Bilder auf der Tapete:

@IBOutlet var scroll_view_img: UIScrollView! 

var itemPhotoList = NSMutableArray() 

var button = NSMutableArray()  

@IBOutlet var imageview_big: UIImageView! 

override func viewDidLoad() { 

    super.viewDidLoad() 
    itemPhotoList = ["grief-and-loss copy.jpg","aaa.jpg","image_4.jpeg"]   

    // button = ["btn1","btn2"] 

    let width:CGFloat = 100 
    let height:CGFloat = 100 
    var xposition:CGFloat = 10 
    var scroll_contont:CGFloat = 0 

    for i in 0 ..< itemPhotoList.count 
    { 
     var button_img = UIButton() 
     button_img = UIButton(frame: CGRect(x: xposition, y: 50, width: width, height: height)) 
     let img = UIImage(named:itemPhotoList[i] as! String) 
     button_img.setImage(img, for: .normal) 
     scroll_view_img.addSubview(button_img) 
     button_img.addTarget(self, action: #selector(buttonAction), for: .touchUpInside) 
     button_img.tag = i 
     view.addSubview(scroll_view_img) 
     xposition += width+10 
     scroll_contont += width 
     scroll_view_img.contentSize = CGSize(width: scroll_contont, height: height) 
    } 
} 

func buttonAction(sender: UIButton!) 
{ 
    switch sender.tag { 
    case 0: 
     imageview_big.image = UIImage(named: "grief-and-loss copy.jpg") 
    case 1: 
     imageview_big.image = UIImage(named: "aaa.jpg") 
    case 2: 
     imageview_big.image = UIImage(named: "image_4.jpeg") 
    default: 
     break 
    } 
}