मैं एक टेबलव्यूसेल के अंदर एक क्षैतिज संग्रह दृश्य बनाने की कोशिश कर रहा हूं, जिसमें एक गतिशील आकार uiimageview अंदर है, जो अनिवार्य दृश्य होगा।

मैंने एक UIView बनाया:

public class CardImage: UIView {
    
    private var imageView: UIImageView?
    private var titleLabel: UILabel?
    private var descriptionLabel: UILabel?
    private var subtitleLabel: UILabel?
    
    private var icon: UIImage?
    private var imageURL: String?
    
    private var screenPercentage: CGFloat = 1.0
    
    override public func layoutSubviews() {
        super.layoutSubviews()
        layer.cornerRadius = 4
    }
    
    public override func awakeFromNib() {
        super.awakeFromNib()
        setup()
        layoutSubviews()
    }
    
    public init() {
        super.init(frame: .zero)
        setup()
        layoutSubviews()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setup()
        layoutSubviews()
    }
    
    public func fill(dto: SomeDTO) {
        setupImage(icon: dto.image, imageUrl: dto.imageURL)
        descriptionLabel?.text = dto.description
        titleLabel?.text = dto.title
        subtitleLabel?.text = dto.subtitle
        screenPercentage = dto.screenPercentage
    }
    
        private func setup() {
            isUserInteractionEnabled = true
            
            translatesAutoresizingMaskIntoConstraints = false
            
            backgroundColor = .red
            
            titleLabel = UILabel()
            titleLabel?.textColor = .white
            titleLabel?.numberOfLines = 1
            addSubview(titleLabel!)
            
            descriptionLabel = UILabel()
            descriptionLabel?.textColor = .white
            descriptionLabel?.numberOfLines = 2
            addSubview(descriptionLabel!)
            
            subtitleLabel = UILabel()
            subtitleLabel?.textColor = .white
            subtitleLabel?.numberOfLines = 1
            addSubview(subtitleLabel!)
            
            imageView = UIImageView(frame: .zero)
            imageView?.backgroundColor = .red
            addSubview(imageView!)
            
            setupConstraints()
        }
        
        private func setupImage(icon: UIImage?, imageUrl: String?) {
            if let url = imageURL {
                return
            }
            
            guard let image = icon else {
                return
            }
            
            imageView?.image = image
            imageView?.contentMode = .scaleAspectFit
            
            setNeedsDisplay()
            setNeedsLayout()
        }
        
        
        private func setupConstraints() {
            imageView?.translatesAutoresizingMaskIntoConstraints = false
            imageView?.topAnchor.constraint(equalTo: topAnchor).isActive = true
            imageView?.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
            imageView?.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
            
            let screenSize = UIScreen.main.bounds
            let computedWidth = screenSize.width * screenPercentage
            imageView?.widthAnchor.constraint(equalToConstant: computedWidth).isActive = true
            //the image should be 16:9
            imageView?.heightAnchor.constraint(equalTo: widthAnchor, multiplier: 9.0/16.0).isActive = true
            
            titleLabel?.translatesAutoresizingMaskIntoConstraints = false
            titleLabel?.topAnchor.constraint(equalTo: imageView!.bottomAnchor, constant: 16).isActive = true
            titleLabel?.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16).isActive = true
            titleLabel?.heightAnchor.constraint(equalToConstant: 18).isActive = true
            
            subtitleLabel?.translatesAutoresizingMaskIntoConstraints = false
            subtitleLabel?.topAnchor.constraint(equalTo: titleLabel!.topAnchor).isActive = true
            subtitleLabel?.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16).isActive = true
            
            titleLabel?.widthAnchor.constraint(equalTo: subtitleLabel!.widthAnchor).isActive = true
            titleLabel?.trailingAnchor.constraint(equalTo: subtitleLabel!.leadingAnchor, constant: 6).isActive = true
            
            descriptionLabel?.translatesAutoresizingMaskIntoConstraints = false
            descriptionLabel?.topAnchor.constraint(equalTo: titleLabel!.bottomAnchor, constant: 16).isActive = true
            descriptionLabel?.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16).isActive = true
            descriptionLabel?.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16).isActive = true
            descriptionLabel?.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16).isActive = true
        }
}

जो एक CollectionViewCell के अंदर होगा:

public class CardImageCollectionViewCell: UICollectionViewCell {
    private let view: CardImage = CardImage()
    
    override public func awakeFromNib() {
        super.awakeFromNib()
        
        translatesAutoresizingMaskIntoConstraints = false
//this only pin the view to the four anchors of the uicollectionview
        view.pinToBounds(of: self.contentView)
        backgroundColor = .clear
        
        AccessibilityManager.setup(self, log: true)
    }
    
    public func fill(dto: SomeDTO) {
        view.fill(dto: dto)
    }
}

और फिर CollectionViewCell, एक टेबलव्यूसेल के अंदर, जिसमें एक संग्रहदृश्य है:

public class CardImageCollectionView: UIView, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout {
    
        @IBOutlet private weak var collectionView: UICollectionView!
        private var dto: [SomeDTO] = []
        
        public override func awakeFromNib() {
            super.awakeFromNib()
            setup()
        }
        
        private func setup() {
            backgroundColor = .blue
            
            collectionView.backgroundColor = .clear
            collectionView.delegate = self
            collectionView.dataSource = self
            
            if let flowLayout = collectionView?.collectionViewLayout as? UICollectionViewFlowLayout {
                flowLayout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
            }
            
            registerCells()
        }
        
        func fill(dto: [SomaImageCardDTO]) {
            self.dto = dto
            DispatchQueue.main.async {
                self.collectionView.reloadData()
                self.collectionView.layoutIfNeeded()
            }
        }
        
        private func registerCells() {
            collectionView.register(UINib(nibName: String(describing: CardImageCollectionViewCell.self), bundle: nil), forCellWithReuseIdentifier: String(describing: CardImageCollectionViewCell.self))
        }
        
        public func numberOfSections(in collectionView: UICollectionView) -> Int {
            return 1
        }
        
        public func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
            return dto.count
        }
        //this should not be setted since the sizing is automatic 
    //    public func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
    //        return CGSize(width: 304, height: 238)
    //    }
    //
        public func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: String(describing: CardImageCollectionViewCell.self), for: indexPath) as! CardImageCollectionViewCell
            
            cell.fill(dto: dto[indexPath.row])
            return cell
        }
    }

मुझे जिन दो समस्याओं का सामना करना पड़ रहा है, वह छवि किसी भी आकार को ग्रहण नहीं कर सकती है, क्योंकि संग्रह दृश्य का कोई आकार नहीं है जब तक कि यह कुछ जानकारी से भर न जाए।

और फिर, अगर मैं छवि का आकार निर्धारित करता हूं, तो भी मैं जानकारी को UITableViewcell आकार में पास नहीं कर सकता।

4
Vinícius Albino 3 मार्च 2020, 23:07

1 उत्तर

सबसे बढ़िया उत्तर

अगर मैं आपकी समस्या को सही ढंग से समझता हूं, तो आपके पास UITableView में एक से अधिक पंक्तियां हैं जिनमें क्षैतिज UICollectionViews हैं। उन संग्रह दृश्यों में ऐसे कक्ष होते हैं जिनके अंदर की छवियों के आधार पर गतिशील आकार होता है।

तो UITableView की चौड़ाई तय है, लेकिन पंक्ति की ऊंचाई UICollectionView की ऊंचाई पर निर्भर करती है, है ना?

मैं UITableView में सेल्फ-साइज़िंग सेल का उपयोग करने की सलाह दूंगा। यहां संदर्भ देखें: https://developer.apple.com/ लाइब्रेरी/संग्रह/दस्तावेज़ीकरण/उपयोगकर्ता अनुभव/अवधारणात्मक/ऑटोलेआउटपीजी/वर्किंगविथसेल्फ-साइजिंगटेबल व्यूसेल्स.एचटीएमएल

उसके बाद, आपको UICollectionView की ऊंचाई की सही गणना करने का एक तरीका खोजने की आवश्यकता है, ताकि UITableView सेल सही ऊंचाई निर्धारित कर सके। इसे करने के कई तरीके हैं, उदाहरण के लिए UICollectionView की intrinsicContentSize संपत्ति को ओवरराइड करके और छवियों की सबसे बड़ी ऊंचाई लौटाकर।

3
Endanke 1 अप्रैल 2020, 11:14