Wie UIStackView innerhalb eines UIScrollView

Question

Ich habe ein UIScrollView die UIStackView mit drei Objekte im Inneren hat (Label, Image und Label)

hinzufügen Wie kann ich die Scroll Arbeit mit dem stackview lassen?

Wie Sie im Code sehen, fügte ich die Label11, image1 und label12 zum Stapel , aber ich möchte die Stapelelemente ändern beim Scrollen zu label21, image2 und label22 und ich weiß nicht wie!

Wie kann ich das tun? Hier ist, was ich habe versucht:

import UIKit 

class ViewController: UIViewController { 

override func viewDidLoad() { 
    super.viewDidLoad() 
    // Do any additional setup after loading the view, typically from a nib. 

    // parent scroll 
    let ScrollView = UIScrollView() 
    ScrollView.frame = CGRectMake(0, 0, self.view.frame.size.width, 667) 
    ScrollView.contentSize = CGSizeMake(self.view.frame.size.width * 2, 667) 
    ScrollView.backgroundColor = UIColor.init(colorLiteralRed: 219, green: 237, blue: 254, alpha: 1) 
    ScrollView.pagingEnabled = true 

    //label1 
    let label11 = UILabel() 
    label11.text = "label1" 

    // image1 
    let image1 = UIImageView() 
    image1.frame = CGRectMake(self.view.frame.size.width * 1, 0, self.view.frame.size.width, 200) 
    image1.image = UIImage(named: "mother1") 

    //label2 
    let label12 = UILabel() 
    label12.text = "label2" 

    //label21 
    let label21 = UILabel() 
    label21.text = "label1" 

    // image2 
    let image = UIImageView() 
    image.frame = CGRectMake(self.view.frame.size.width * 1, 0, self.view.frame.size.width, 200) 
    image.image = UIImage(named: "mother1") 

    //label22 
    let label22 = UILabel() 
    label22.text = "label2" 

    //Stackview 
    let stackView = UIStackView(arrangedSubviews: [label11, image1, label12]) 

    stackView.distribution = .FillEqually 
    stackView.axis = .Vertical 
    stackView.alignment = .Fill 
    stackView.spacing = 0 
    stackView.translatesAutoresizingMaskIntoConstraints = false 
    stackView.backgroundColor = UIColor.blueColor() 

    ScrollView.addSubview(stackView) 

    let margins = ScrollView.layoutMarginsGuide 
    stackView.leadingAnchor.constraintEqualToAnchor(margins.leadingAnchor, constant: 0).active = true 
    stackView.trailingAnchor.constraintEqualToAnchor(margins.trailingAnchor, constant: 0).active = true 
    stackView.topAnchor.constraintEqualToAnchor(margins.topAnchor, constant: 0).active = true 
    stackView.bottomAnchor.constraintEqualToAnchor(margins.bottomAnchor, constant: 0).active = true 
    stackView.widthAnchor.constraintEqualToAnchor(ScrollView.widthAnchor, constant: 0).active = true 
    stackView.heightAnchor.constraintEqualToAnchor(ScrollView.heightAnchor, constant: 0).active = true 

    self.view.addSubview(ScrollView) 
} 

override func didReceiveMemoryWarning() { 
    super.didReceiveMemoryWarning() 
    // Dispose of any resources that can be recreated. 
} 
} 

Answer 1

landete ich es, wie dies zu tun. Beigefügt ist ein Codebeispiel

import UIKit 

class ViewController: UIViewController { 

override func viewDidLoad() { 
    super.viewDidLoad() 
    // Do any additional setup after loading the view, typically from a nib. 

    let parentView = UIView() 
    parentView.backgroundColor = UIColor.blackColor() 
    parentView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height) 

    // parent scroll 
    let parentScrollView = UIScrollView() 
    parentScrollView.frame = CGRectMake(0, 50, self.view.frame.size.width, self.view.frame.size.height - 100) 
    parentScrollView.contentSize = CGSizeMake(self.view.frame.size.width * 2, self.view.frame.size.height - 100) 
    parentScrollView.backgroundColor = UIColor.init(colorLiteralRed: 219, green: 237, blue: 254, alpha: 1) 
    parentScrollView.pagingEnabled = true 

    // add 1st mother 
    let imageView1 = UIImageView() 
    imageView1.frame = CGRectMake(self.view.frame.size.width * 0, 0, self.view.frame.size.width, 467) 
    imageView1.image = UIImage(named: "mother1") 

    // add 2nd mother 
    let imageView2 = UIImageView() 
    imageView2.frame = CGRectMake(self.view.frame.size.width * 1, 0, self.view.frame.size.width, 467) 
    imageView2.image = UIImage(named: "mother2") 
//----------------------------------------------------- 
    // child scroll 
    let childScrollView = UIScrollView() 
    childScrollView.frame = CGRectMake(0, 467, self.view.frame.size.width, 0) 
    childScrollView.contentSize = CGSizeMake(self.view.frame.size.width * 2, 0) 
    childScrollView.layer.borderColor = UIColor.blackColor().CGColor 
    childScrollView.pagingEnabled = true 

    // child 1 
    let imageViewChild1 = UIImageView() 
    imageViewChild1.frame = CGRectMake(self.view.frame.size.width * 0, 0, self.view.frame.size.width, 200) 
    imageViewChild1.image = UIImage(named: "child1-1") 
    childScrollView.addSubview(imageViewChild1) 
    print("the frame of imageViewChild1 is: \(imageViewChild1.frame)") 
    // child2 
    let imageViewChild2 = UIImageView() 
    imageViewChild2.frame = CGRectMake(self.view.frame.size.width * 1, 0, self.view.frame.size.width, 200) 
    imageViewChild2.image = UIImage(named: "child2-1") 
    childScrollView.addSubview(imageViewChild2) 
    print("the frame of imageViewChild2 is: \(imageViewChild2.frame)") 
//----------------------------------------------------- 
    // child scroll 
    let childScrollView2 = UIScrollView() 
    childScrollView2.frame = CGRectMake(468, 467, self.view.frame.size.width, 0) 
    childScrollView2.contentSize = CGSizeMake(self.view.frame.size.width * 2, 0) 
    childScrollView2.layer.borderColor = UIColor.blackColor().CGColor 
    childScrollView2.pagingEnabled = true 

    let imageViewChild3 = UIImageView() 
    imageViewChild3.frame = CGRectMake(self.view.frame.size.width * 0, 0, self.view.frame.size.width, 200) 
    imageViewChild3.image = UIImage(named: "user-1") 
    childScrollView2.addSubview(imageViewChild3) 
    print("the frame of imageViewChild1 is: \(imageViewChild3.frame)") 


    let imageViewChild4 = UIImageView() 
    imageViewChild4.frame = CGRectMake(self.view.frame.size.width * 1, 0, self.view.frame.size.width, 200) 
    imageViewChild4.image = UIImage(named: "user") 
    childScrollView2.addSubview(imageViewChild4) 
    print("the frame of imageViewChild4 is: \(imageViewChild4.frame)") 

//----------------------------------------------------- 
    // add label for the button space 
    let buttons = UIView() 
    buttons.backgroundColor = UIColor.redColor() 


    let motherstackView = UIStackView(arrangedSubviews: [imageView2, imageView1]) 

    motherstackView.distribution = .FillEqually 
    motherstackView.axis = .Horizontal 
    motherstackView.alignment = .Fill 
    motherstackView.spacing = 0 
    motherstackView.translatesAutoresizingMaskIntoConstraints = false 

    let ChildstackView = UIStackView(arrangedSubviews: [childScrollView, childScrollView2]) 

    ChildstackView.distribution = .FillEqually 
    ChildstackView.axis = .Horizontal 
    ChildstackView.alignment = .Fill 
    ChildstackView.spacing = 0 
    ChildstackView.translatesAutoresizingMaskIntoConstraints = false 

    //Stackview 
    let stackView = UIStackView(arrangedSubviews: [motherstackView, ChildstackView, buttons]) 

    stackView.distribution = .Fill 
    stackView.axis = .Vertical 
    stackView.alignment = .Fill 
    stackView.spacing = 0 
    stackView.translatesAutoresizingMaskIntoConstraints = false 


    parentScrollView.addSubview(stackView) 
    parentView.addSubview(parentScrollView) 

    stackView.leadingAnchor.constraintEqualToAnchor(parentScrollView.leadingAnchor, constant: 0).active = true 
    stackView.trailingAnchor.constraintEqualToAnchor(parentScrollView.trailingAnchor, constant: 0).active = true 
    stackView.topAnchor.constraintEqualToAnchor(parentScrollView.topAnchor, constant: 0).active = true 
    stackView.bottomAnchor.constraintEqualToAnchor(parentScrollView.bottomAnchor, constant: 0).active = true 
    stackView.widthAnchor.constraintEqualToAnchor(parentScrollView.widthAnchor,multiplier: 2, constant: 0).active = true 
    stackView.heightAnchor.constraintEqualToAnchor(parentScrollView.heightAnchor, constant: 0).active = true 
    motherstackView.heightAnchor.constraintEqualToAnchor(ChildstackView.heightAnchor, multiplier: 1).active = true 
    ChildstackView.heightAnchor.constraintEqualToAnchor(buttons.heightAnchor, multiplier: 2).active = true 


    self.view.addSubview(parentView) 

} 

override func didReceiveMemoryWarning() { 
    super.didReceiveMemoryWarning() 
    // Dispose of any resources that can be recreated. 
} 


} 

Answer 2

Für Menschen, die cocoapods Lösung versuchen ScrollableStackView Bibliothek benötigt. Hier ist die Github Seite:

https://github.com/gurhub/ScrollableStackView

Hier einige Beispielcode:

Swift

import ScrollableStackView 

var scrollable = ScrollableStackView(frame: view.frame) 
view.addSubview(scrollable) 

// add your views with 
let rectangle = UIView(frame: CGRect(x: 0, y: 0, width: 100, height: 55)) 
rectangle.backgroundColor = UIColor.blue 
scrollable.stackView.addArrangedSubview(rectangle) 
// ... 

Objective-C

@import ScrollableStackView 

ScrollableStackView *scrollable = [[ScrollableStackView alloc] initWithFrame:self.view.frame]; 
scrollable.stackView.distribution = UIStackViewDistributionFillProportionally; 
scrollable.stackView.alignment = UIStackViewAlignmentCenter; 
scrollable.stackView.axis = UILayoutConstraintAxisVertical; 
[self.view addSubview:scrollable]; 

UIView *rectangle = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 100, 55)]; 
[rectangle setBackgroundColor:[UIColor blueColor]]; 

// add your views with 
[scrollable.stackView addArrangedSubview:rectangle]; 
// ... 

Hoffe es hilft jemandem.