Thursday, April 25, 2024
HomeiOS Developmentios - How one can use UICollectionViewCompositionalLayout to render a distant picture...

ios – How one can use UICollectionViewCompositionalLayout to render a distant picture correctly


I wish to show a NSCollectionLayoutItem occupy the machine display screen horizontally , and nonetheless get the proper facet ratio in Vertical .

So I exploit the NSCollectionLayoutDimension.estimated(50) factors for top . however after the picture is downloaded , the peak remains to be 50 ,which isn’t sufficient for show the picture .

How one can make the structure routinely match the picture’s content material.

the picture hyperlink is right here : picture src

picture content material is :
enter image description here

and the operating outcome might be like this

enter image description here

the UICollectionView configuration code :

import UIKit

class ViewController: UIViewController {
    enum Part {
        case fundamental
    }
    
    @IBOutlet weak var collectionView: UICollectionView!
    var dataSource: UICollectionViewDiffableDataSource<Part, Int>! = nil
    override func viewDidLoad() {
        tremendous.viewDidLoad()
        // Do any extra setup after loading the view.
        self.configDataSource()
        self.configLayout()
    }

    
    func configDataSource() {
        let imageCellReg = UICollectionView.CellRegistration<ImageCell,Int>(cellNib: UINib(nibName: "ImageCell", bundle: nil)) { cell, indexPath, itemIdentifier in
            
        }
        self.dataSource = UICollectionViewDiffableDataSource<Part, Int>(collectionView: self.collectionView, cellProvider: { collectionView, indexPath, itemIdentifier in
            return self.collectionView.dequeueConfiguredReusableCell(utilizing: imageCellReg, for: indexPath, merchandise: itemIdentifier)
        })
        
        var snapshot = NSDiffableDataSourceSnapshot<Part, Int>()
        snapshot.appendSections([.main])
        snapshot.appendItems(Array(0..<2))
        dataSource.apply(snapshot, animatingDifferences: false)

    }
    
    func configLayout(){
        let itemSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                             heightDimension: .fractionalHeight(1.0))
        let merchandise = NSCollectionLayoutItem(layoutSize: itemSize)

        let groupSize = NSCollectionLayoutSize(widthDimension: .fractionalWidth(1.0),
                                               heightDimension:.estimated(50))
        let group = NSCollectionLayoutGroup.horizontal(layoutSize:groupSize, subitems: [item])
        let spacing = CGFloat(10)
        group.interItemSpacing = .fastened(spacing)

        let part = NSCollectionLayoutSection(group: group)
        part.interGroupSpacing = spacing
        part.contentInsets = NSDirectionalEdgeInsets(prime: 0, main: 10, backside: 0, trailing: 10)

        let structure = UICollectionViewCompositionalLayout(part: part)
        self.collectionView.collectionViewLayout = structure
    }

}

And the cell code:

import UIKit
import SDWebImage

class ImageCell: UICollectionViewCell {
    @IBOutlet weak var imageContentView: UIImageView!
    
    override func awakeFromNib() {
        tremendous.awakeFromNib()
        // Initialization code
        imageContentView.sd_setImage(with: URL(string: "https://www.google.com/photos/branding/googlelogo/2x/googlelogo_color_272x92dp.png"))
    }

}



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments