Don_Mag

Vertical ScrollView with Horizontal CollectionView

Aug 24th, 2021
1,572
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. class ViewController: UIViewController {
  3.  
  4.     let colors: [UIColor] = [
  5.         .systemRed, .systemGreen, .systemBlue,
  6.         .systemPink, .systemYellow, .systemTeal,
  7.     ]
  8.  
  9.     var collectionView: UICollectionView!
  10.    
  11.     override func viewDidLoad() {
  12.         super.viewDidLoad()
  13.        
  14.         view.backgroundColor = .white
  15.        
  16.         let scrollView: UIScrollView = {
  17.             let v = UIScrollView()
  18.             return v
  19.         }()
  20.         let topView: UILabel = {
  21.             let v = UILabel()
  22.             v.text = "Top View"
  23.             v.textAlignment = .center
  24.             v.backgroundColor = .cyan
  25.             return v
  26.         }()
  27.         let bottomStackView: UIStackView = {
  28.             let v = UIStackView()
  29.             v.axis = .vertical
  30.             v.spacing = 20.0
  31.             return v
  32.         }()
  33.        
  34.         // let's add 5 views to the stack view
  35.         for i in 1...5 {
  36.             let v = UILabel()
  37.             v.text = "Bottom View \(i)"
  38.             v.textAlignment = .center
  39.             v.backgroundColor = .yellow
  40.             v.heightAnchor.constraint(equalToConstant: 75.0).isActive = true
  41.             bottomStackView.addArrangedSubview(v)
  42.         }
  43.        
  44.         let cvFlowLayout = UICollectionViewFlowLayout()
  45.         cvFlowLayout.scrollDirection = .horizontal
  46.         cvFlowLayout.itemSize = CGSize(width: 100, height: 80)
  47.        
  48.         let collectionView: UICollectionView = UICollectionView(frame: .zero, collectionViewLayout: cvFlowLayout)
  49.        
  50.         scrollView.translatesAutoresizingMaskIntoConstraints = false
  51.         collectionView.translatesAutoresizingMaskIntoConstraints = false
  52.         topView.translatesAutoresizingMaskIntoConstraints = false
  53.         bottomStackView.translatesAutoresizingMaskIntoConstraints = false
  54.  
  55.         scrollView.addSubview(topView)
  56.         scrollView.addSubview(collectionView)
  57.         scrollView.addSubview(bottomStackView)
  58.         view.addSubview(scrollView)
  59.        
  60.         let g = view.safeAreaLayoutGuide
  61.         let lg = scrollView.contentLayoutGuide
  62.         let fg = scrollView.frameLayoutGuide
  63.        
  64.         NSLayoutConstraint.activate([
  65.            
  66.             scrollView.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
  67.             scrollView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 20.0),
  68.             scrollView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -20.0),
  69.             scrollView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: -20.0),
  70.  
  71.             topView.topAnchor.constraint(equalTo: lg.topAnchor, constant: 40.0),
  72.             topView.leadingAnchor.constraint(equalTo: lg.leadingAnchor, constant: 20.0),
  73.             topView.trailingAnchor.constraint(equalTo: lg.trailingAnchor, constant: -20.0),
  74.             topView.heightAnchor.constraint(equalToConstant: 200.0),
  75.            
  76.             topView.widthAnchor.constraint(equalTo: fg.widthAnchor, constant: -40.0),
  77.  
  78.             collectionView.topAnchor.constraint(equalTo: topView.bottomAnchor, constant: 80.0),
  79.             collectionView.widthAnchor.constraint(equalTo: topView.widthAnchor),
  80.             collectionView.centerXAnchor.constraint(equalTo: topView.centerXAnchor),
  81.             collectionView.heightAnchor.constraint(equalToConstant: 100.0),
  82.            
  83.             collectionView.widthAnchor.constraint(equalTo: topView.widthAnchor),
  84.            
  85.             bottomStackView.topAnchor.constraint(equalTo: collectionView.bottomAnchor, constant: 80.0),
  86.             bottomStackView.widthAnchor.constraint(equalTo: topView.widthAnchor),
  87.             bottomStackView.centerXAnchor.constraint(equalTo: topView.centerXAnchor),
  88.  
  89.             bottomStackView.bottomAnchor.constraint(equalTo: lg.bottomAnchor, constant: -40.0),
  90.            
  91.         ])
  92.        
  93.         collectionView.dataSource = self
  94.         collectionView.delegate = self
  95.        
  96.         collectionView.register(MyCell.self, forCellWithReuseIdentifier: "c")
  97.    
  98.         scrollView.backgroundColor = .blue
  99.         collectionView.backgroundColor = .lightGray
  100.     }
  101.  
  102.  
  103. }
  104.  
  105. extension ViewController: UICollectionViewDataSource, UICollectionViewDelegate {
  106.    
  107.     func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
  108.         return 20
  109.     }
  110.    
  111.     func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
  112.         let c = collectionView.dequeueReusableCell(withReuseIdentifier: "c", for: indexPath) as! MyCell
  113.         c.contentView.backgroundColor = colors[indexPath.item % colors.count]
  114.         c.label.text = "\(indexPath.item)"
  115.         return c
  116.     }
  117.  
  118. }
  119.  
  120. class MyCell: UICollectionViewCell {
  121.     let label: UILabel = {
  122.         let v = UILabel()
  123.         v.translatesAutoresizingMaskIntoConstraints = false
  124.         v.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
  125.         return v
  126.     }()
  127.    
  128.     override init(frame: CGRect) {
  129.         super.init(frame: frame)
  130.         commonInit()
  131.     }
  132.     required init?(coder: NSCoder) {
  133.         super.init(coder: coder)
  134.         commonInit()
  135.     }
  136.     func commonInit() -> Void {
  137.         contentView.addSubview(label)
  138.         NSLayoutConstraint.activate([
  139.             label.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
  140.             label.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
  141.         ])
  142.     }
  143. }
  144.  
RAW Paste Data