Don_Mag icon

Vertical ScrollView with Horizontal CollectionView

Don_Mag | PRO | 08/24/21 12:50:04 PM UTC | 0 ⭐ | 2558 👁️ | Never ⏰ | []
Swift |

4.61 KB

|

None

|

0 👍

/

0 👎

 
class ViewController: UIViewController {
 
    let colors: [UIColor] = [
        .systemRed, .systemGreen, .systemBlue,
        .systemPink, .systemYellow, .systemTeal,
    ]
 
    var collectionView: UICollectionView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        view.backgroundColor = .white
        
        let scrollView: UIScrollView = {
            let v = UIScrollView()
            return v
        }()
        let topView: UILabel = {
            let v = UILabel()
            v.text = "Top View"
            v.textAlignment = .center
            v.backgroundColor = .cyan
            return v
        }()
        let bottomStackView: UIStackView = {
            let v = UIStackView()
            v.axis = .vertical
            v.spacing = 20.0
            return v
        }()
        
        // let's add 5 views to the stack view
        for i in 1...5 {
            let v = UILabel()
            v.text = "Bottom View \(i)"
            v.textAlignment = .center
            v.backgroundColor = .yellow
            v.heightAnchor.constraint(equalToConstant: 75.0).isActive = true
            bottomStackView.addArrangedSubview(v)
        }
        
        let cvFlowLayout = UICollectionViewFlowLayout()
        cvFlowLayout.scrollDirection = .horizontal
        cvFlowLayout.itemSize = CGSize(width: 100, height: 80)
        
        let collectionView: UICollectionView = UICollectionView(frame: .zero, collectionViewLayout: cvFlowLayout)
        
        scrollView.translatesAutoresizingMaskIntoConstraints = false
        collectionView.translatesAutoresizingMaskIntoConstraints = false
        topView.translatesAutoresizingMaskIntoConstraints = false
        bottomStackView.translatesAutoresizingMaskIntoConstraints = false
 
        scrollView.addSubview(topView)
        scrollView.addSubview(collectionView)
        scrollView.addSubview(bottomStackView)
        view.addSubview(scrollView)
        
        let g = view.safeAreaLayoutGuide
        let lg = scrollView.contentLayoutGuide
        let fg = scrollView.frameLayoutGuide
        
        NSLayoutConstraint.activate([
            
            scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
            scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
            scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
 
            topView.topAnchor.constraint(equalTo: lg.topAnchor, constant: 40.0),
            topView.leadingAnchor.constraint(equalTo: lg.leadingAnchor, constant: 20.0),
            topView.trailingAnchor.constraint(equalTo: lg.trailingAnchor, constant: -20.0),
            topView.heightAnchor.constraint(equalToConstant: 200.0),
            
            topView.widthAnchor.constraint(equalTo: fg.widthAnchor, constant: -40.0),
 
            collectionView.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 80.0),
            collectionView.widthAnchor.constraint(equalTo: topView.widthAnchor),
            collectionView.centerXAnchor.constraint(equalTo: topView.centerXAnchor),
            collectionView.heightAnchor.constraint(equalToConstant: 100.0),
            
            collectionView.widthAnchor.constraint(equalTo: topView.widthAnchor),
            
            bottomStackView.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 80.0),
            bottomStackView.widthAnchor.constraint(equalTo: topView.widthAnchor),
            bottomStackView.centerXAnchor.constraint(equalTo: topView.centerXAnchor),
 
            bottomStackView.bottomAnchor.constraint(equalTo: lg.bottomAnchor, constant: -40.0),
            
        ])
        
        collectionView.dataSource = self
        collectionView.delegate = self
        
        collectionView.register(MyCell.self, forCellWithReuseIdentifier: "c")
    
        scrollView.backgroundColor = .blue
        collectionView.backgroundColor = .lightGray
    }
 
 
}
 
extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
    
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let c = collectionView.dequeueReusableCell(withReuseIdentifier: "c", for: indexPath) as! MyCell
        c.contentView.backgroundColor = colors[indexPath.item % colors.count]
        c.label.text = "\(indexPath.item)"
        return c
    }
 
}
 
class MyCell: UICollectionViewCell {
    let label: UILabel = {
        let v = UILabel()
        v.translatesAutoresizingMaskIntoConstraints = false
        v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
        return v
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        commonInit()
    }
    func commonInit() -> Void {
        contentView.addSubview(label)
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
        ])
    }
}
 

Comments

  •  icon
    01/01/70 12:00:00 AM UTC
    Plain Text |

    0 B

    |

    👍

    /

    👎