wake-up-neo.net

Programmgesteuertes Verwenden von ScrollView in Swift 3

Ich habe andere Fragen gesucht und habe immer noch Probleme mit der automatischen Erstellung meines scrollView mit Autolayout in Swift 3. Ich bekomme die Möglichkeit, meinen scrollView wie in der Abbildung unten zu zeigen, aber wenn ich nach unten scrolle, funktioniert mein anderes Label wird nicht angezeigt und die Beschriftung "Bildlauf nach oben" verschwindet nicht. 

 ScrollView

Ich hoffe, dass jemand helfen kann, meinen Code unten zu überprüfen! 

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)     

    }

}
13
a2b123

Mit Hilfe von Einschränkungen können Sie die Größe des Bildlaufs festlegen. Sie müssen also keine manuellen Berechnungen durchführen.

Denk dran:

  1. Die content-Elemente Ihrer Bildlaufansicht müssen Werte für links/oben/Breite/Höhe haben. Bei Objekten wie z. B. Beschriftungen haben sie intrinsische Größen, so dass Sie nur die linke und obere Seite definieren müssen.
  2. Die content-Elemente Ihrer Bildlaufansichtauchdefinieren die Grenzen des scrollbaren Bereichs - der contentSize -, jedoch mit den unteren und rechten Randbedingungen.
  3. Wenn Sie diese beiden Konzepte kombinieren, sehen Sie, dass Sie eine "durchgehende Kette" benötigen, bei der mindestens ein Element die oberen/linken/unteren/rechten Bereiche definiert.

Hier ist ein einfaches Beispiel, das direkt auf einer Playground-Seite ausgeführt wird:

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)

        // constrain 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)

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

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

        // constrain 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
23
DonMag

Zwei Dinge.

1. Fügen Sie die Etiketten der Bildlaufansicht hinzu, nicht Ihrer Ansicht.

Sie möchten, dass Ihr Etikett in der Bildlaufansicht angezeigt wird, und Sie sollten es nicht in Ihrer Ansicht hinzufügen. Wenn Sie Ihren Code ausführen, können Sie einen Bildlauf durchführen, aber das dort festgelegte Label wird in Ihrer Ansicht und nicht in Ihrer Bildlaufansicht fixiert

2. Stellen Sie sicher, dass Sie Ihre Einschränkungen korrekt hinzugefügt haben.

Versuchen Sie es in Ihrem Storyboard, welche Kombination von Einschränkungen für eine Ansicht ausreicht. Für ein Label sind mindestens 4 Bedingungen erforderlich.

Endeffekt

Hier ist eine modifizierte Version Ihres Codes. Zur Einschränkung habe ich links aufgefüllt, oben, Breite und Höhe aufgefüllt und es funktioniert. Mein Code lautet 

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 Scrollansicht sieht so aus

 enter image description here

5
Fangming

Legen Sie die Bildlaufbilder für das Hintergrundbild fest:

@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
    }
}
0
Manoj Kumar

Meine Punktzahl ist noch nicht hoch genug, um einen Kommentar abzugeben, aber ich möchte ein kleines Detail hinzufügen, das mich stundenlang an dieser Scroll-View-Aufgabe festhielt.

Diese Antworten funktionieren nicht mit großen Titeln in der Navigationsleiste. Stellen Sie sicher, dass Sie den folgenden Code in Ihrer viewDidLoad () - Methode Ihres View-Controllers haben.

self.navigationController?.navigationBar.prefersLargeTitles = false
0
hsul0001