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

Time:07-25

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")
    }
    
}

CodePudding user response:

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")
    }
}
  • Related