Search code examples
iosswiftuikit

How to change position of photo and add 3 small photo under main photo (programmatically)?


I need to position my photo and add 3 small photos like on the second screen. What constaraints i need?(programmatically)

enter image description here

enter image description here

import UIKit

class DetailsHomeViewController: UIViewController {
    
    
    let someImageView: UIImageView = {
           let theImageView = UIImageView()
           theImageView.image = UIImage(named: "t-shirt.png")
           theImageView.translatesAutoresizingMaskIntoConstraints = false
           return theImageView
        }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(someImageView)
        
        someImageViewConstraints()
        

        view.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
        setupViews()
    }
    
    private func setupViews() {
        createCustomNavigationBar()
        
        let RightButton = createCustomButton(
            imageName: "square.and.arrow.up",
            selector: #selector(RightButtonTapped)
        )
        
        let customTitleView = createCustomTitleView(
            detailsName: "Label"
        )
        
        navigationItem.rightBarButtonItems = [RightButton]
        navigationItem.titleView = customTitleView
    }
    
    
    func someImageViewConstraints() {
        someImageView.translatesAutoresizingMaskIntoConstraints = false
        someImageView.widthAnchor.constraint(equalToConstant: 340).isActive = true
        someImageView.heightAnchor.constraint(equalToConstant: 340).isActive = true
        someImageView.translatesAutoresizingMaskIntoConstraints = false
        someImageView.heightAnchor.constraint(equalToConstant: 80).isActive = true
        someImageView.widthAnchor.constraint(equalTo: someImageView.heightAnchor, multiplier: 16/9 ).isActive = true
           
        }
   
    
    @objc private func RightButtonTapped() {
        print("RightButtonTapped")
    }
    
}

Solution

  • All you have to make a collectionView with 3 cells or whatever count you want

    import UIKit
    
    class DetailsHomeViewController: UIViewController {
        
        var images:[String] = ["image name 1","2","3"] // number of images
      
        let someImageView: UIImageView = {
            let theImageView = UIImageView()
            theImageView.backgroundColor = .red
            theImageView.translatesAutoresizingMaskIntoConstraints = false
            theImageView.isUserInteractionEnabled = true
            return theImageView
        }()
        
        lazy var collectionView:UICollectionView = {
            let layout = UICollectionViewFlowLayout()
            let cv = UICollectionView(frame: .zero, collectionViewLayout: layout)
            cv.dataSource = self
            cv.delegate = self
            cv.register(ImageCell.self, forCellWithReuseIdentifier: ImageCell.identifier)
            cv.translatesAutoresizingMaskIntoConstraints = false
            return cv
        }()
        
        override func viewDidLoad() {
            super.viewDidLoad()
            view.addSubview(someImageView)
            someImageView.addSubview(collectionView)
            someImageViewConstraints()
            
            
            view.backgroundColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
            setupViews()
        }
        
       
        private func setupViews() {
            someImageViewConstraints()
        }
        
        
        func someImageViewConstraints() {
            someImageView.frame = CGRect(x: 0, y: 0, width: view.frame.width, height: view.frame.width)
            someImageView.center = view.center
    
            let itemHeight = 90
            let padding = 30
            let width = (itemHeight * 3) + padding
            collectionView.frame = CGRect(x: Int(view.center.x) - (width / 2),
                                          y: Int(someImageView.frame.height) - (itemHeight + padding),
                                          width: width, height: itemHeight)
          
        }
        
        
        @objc private func RightButtonTapped() {
            print("RightButtonTapped")
        }
        
    }
    extension DetailsHomeViewController:UICollectionViewDataSource , UICollectionViewDelegate {
        
        func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return images.count
        }
        
        func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: ImageCell.identifier, for: indexPath) as! ImageCell
            cell.someImageView.image = UIImage(named: images[indexPath.row])
            return cell
        }
        
     
    }
    extension DetailsHomeViewController:UICollectionViewDelegateFlowLayout {
        
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAt section: Int) -> CGFloat {
            return 0
        }
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAt section: Int) -> CGFloat {
            return 0
        }
        func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
            return CGSize(width: collectionView.frame.height, height: collectionView.frame.height)
        }
    }
    

    Cell class

    class ImageCell:UICollectionViewCell {
        static let identifier = "ImageCell"
        
         // changing border color on selection
        override var isSelected: Bool {
            didSet {
                self.someImageView.layer.borderColor = isSelected ? UIColor.green.cgColor : UIColor.clear.cgColor
                self.someImageView.layer.borderWidth = 5
            }
        }
        
        let someImageView: UIImageView = {
            let theImageView = UIImageView()
            theImageView.backgroundColor = .blue
            theImageView.clipsToBounds = true
            return theImageView
        }()
        
        
        override init(frame: CGRect) {
            super.init(frame: frame)
            self.layer.cornerRadius = 8
            self.clipsToBounds = true
            addSubview(someImageView)
            someImageView.frame = self.bounds
        }
        
        override func layoutSubviews() {
            super.layoutSubviews()
    //        someImageView.frame = self.frame
        }
        
        required init?(coder: NSCoder) {
            fatalError("init(coder:) has not been implemented")
        }
    }