HomeiOS Developmentios - Swift ImageView's top appears to be like fallacious and coated...

ios – Swift ImageView’s top appears to be like fallacious and coated its tremendous StackView?


I wish to obtain a “present extra” impact for my part. The desired impact is as follows(sorry for my poor portray), the view’s top is ready to a particular worth at first(akin to 304), and after I click on the “test extra” button, the view’s top will return to its unique top.
enter image description here

In my demo, the picture all the time coated superview, and the contentLabel disappear at first, similar to the gif beneath. I attempted to set setContentCompressionResistancePriority and setContentHuggingPriority, however it’s not working.
I’ve two questions. Firstly the best way to make the picture to not cowl it is superview, and simply present part of it when its superview’s top isn’t sufficient for imageView to point out fully. Second, the contentLabel shouldn’t disappear at first, I observed that it’s as a result of the label doesn’t know its top at first, so the peak constraint is 0, however the best way to calculate the suitable top for the content material label in order that it may be proven on display screen even the superview’s top isn’t sufficient.

enter image description here

Right here is my code, I’ve tried half a day however nonetheless not a clue. Thanks for serving to:

import UIKit
import SnapKit
import SDWebImage

class ViewController: UIViewController {

    var isExpanding = false
    var defaultHeightConstraint: Constraint?
    
    personal lazy var panelView: UIView = {
        let view = UIView()
        view.layer.masksToBounds = true
        return view
    }()
    
    personal lazy var stackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .middle
        stackView.distribution = .fill
        return stackView
    }()
    
    personal lazy var textPanelView: UIView = {
        let view = UIView()
        view.backgroundColor = .grey
        return UIView()
    }()
    
    personal lazy var textTitleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 16)
        label.textColor = .black
        return label
    }()
    
    personal lazy var textContentLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 12)
        label.textColor = .black
        label.numberOfLines = 0
        return label
    }()
    
    personal lazy var imagePanelView: UIView = {
        let view = UIView()
        view.backgroundColor = .cyan
        view.layer.masksToBounds = true
        return UIView()
    }()
    
    personal lazy var imageTitleLabel: UILabel = {
        let label = UILabel()
        label.font = UIFont.systemFont(ofSize: 16)
        label.textColor = .black
        return label
    }()
    
    personal lazy var imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFill
        view.layer.masksToBounds = true
        return imageView
    }()
    
    personal lazy var expandPanel: UIView = {
        UIView()
    }()
    
    personal lazy var expandBtnBgView: UIView = {
        let view = UIView()
        return view
    }()
    
    personal lazy var expandBtn: UIButton = {
        let button = UIButton()
        button.titleLabel?.font = UIFont.systemFont(ofSize: 14)
        button.setTitleColor(.systemGreen, for: .regular)
        button.setTitle("Examine Extra", for: .regular)
        button.addTarget(self, motion: #selector(onClickExpandBtn), for: .touchUpInside)
        button.backgroundColor = .white
        return button
    }()
    
    override func viewDidLoad() {
        tremendous.viewDidLoad()
        setupUI()
        setupModel()
    }
    
    override func viewDidAppear(_ animated: Bool) {
        tremendous.viewDidAppear(animated)
    }
    
    override func viewWillLayoutSubviews() {
        
    }
    
    personal func setupUI() {
        view.backgroundColor = .white
        
        view.addSubview(panelView)
        panelView.addSubview(stackView)
        stackView.addArrangedSubview(textPanelView)
        stackView.addArrangedSubview(imagePanelView)
        textPanelView.addSubview(textTitleLabel)
        textPanelView.addSubview(textContentLabel)
        imagePanelView.addSubview(imageTitleLabel)
        imagePanelView.addSubview(imageView)
        
        panelView.addSubview(expandPanel)
        expandPanel.addSubview(expandBtnBgView)
        expandBtnBgView.addSubview(expandBtn)
        
        panelView.snp.makeConstraints { make in
            make.prime.equalToSuperview().inset(40)
            make.left.proper.equalToSuperview().inset(16)
            defaultHeightConstraint = make.top.lessThanOrEqualTo(304).constraint
        }
        defaultHeightConstraint?.isActive = true
        
        stackView.snp.makeConstraints { make in
            make.edges.equalToSuperview()
        }
        
        textPanelView.snp.makeConstraints { make in
            make.left.proper.equalToSuperview()
        }
        
        textTitleLabel.snp.makeConstraints { make in
            make.left.prime.equalToSuperview()
            make.top.equalTo(22)
        }
        
        textContentLabel.snp.makeConstraints { make in
            make.left.proper.equalToSuperview()
            make.prime.equalTo(textTitleLabel.snp.backside).offset(12)
            make.backside.equalToSuperview().inset(24)
        }
                
        imagePanelView.snp.makeConstraints { make in
            make.left.proper.equalToSuperview()
        }
        
        imageTitleLabel.snp.makeConstraints { make in
            make.prime.equalToSuperview()
            make.left.equalToSuperview()
            make.top.equalTo(22)
        }
        
        imageView.snp.makeConstraints { make in
            make.prime.equalTo(imageTitleLabel.snp.backside).offset(12)
            make.left.proper.equalToSuperview().inset(16)
            make.width.equalTo(UIScreen.fundamental.bounds.width - 64)
            make.top.equalTo(0)
            make.backside.equalToSuperview().inset(24)
        }
        
        expandPanel.snp.makeConstraints { make in
            make.left.proper.equalToSuperview()
            make.top.equalTo(86)
            make.backside.equalToSuperview()
        }

        expandBtnBgView.snp.makeConstraints { make in
            make.left.proper.equalToSuperview()
            make.top.equalTo(46)
            make.backside.equalToSuperview()
        }

        expandBtn.snp.makeConstraints { make in
            make.centerX.equalToSuperview()
            make.backside.equalToSuperview().inset(16)
        }
        
        // this code didn't work
        textPanelView.setContentHuggingPriority(.defaultHigh, for: .vertical)
        textPanelView.setContentCompressionResistancePriority(.required, for: .vertical)
        textContentLabel.setContentCompressionResistancePriority(.required, for: .vertical)
        textContentLabel.setContentHuggingPriority(.required, for: .vertical)
        imagePanelView.setContentHuggingPriority(.defaultLow, for: .vertical)
        imagePanelView.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
        imageView.setContentHuggingPriority(.defaultLow, for: .vertical)
        imageView.setContentCompressionResistancePriority(.defaultLow, for: .vertical)
    }
    
    personal func setupModel() {
        // setupText
        textTitleLabel.textual content = "Bundle Title"
        textContentLabel.textual content = "BeefnCheese BeefnDouble Cheese BeefnDouble Cheese BeefnDouble Cheese BeefnDouble Cheese BeefnDouble Cheese Beef "
        // setupImage
        imageTitleLabel.textual content = "Picture Title"
        let imgString = "https://i.postimg.cc/Wzxfw1JY/stylish.jpg"
        imageView.sd_setImage(with: URL(string: imgString)) { [weak self] picture, _, _, _ in
            guard let self = self, let picture = picture else { return }
            let imgSize = picture.measurement
            let actualWidth = UIScreen.fundamental.bounds.width - 64
            let actualHeight = (actualWidth / imgSize.width) * imgSize.top
            self.imageView.snp.updateConstraints { make in
                make.width.equalTo(actualWidth)
                make.top.equalTo(actualHeight)
            }
        }
    }
    
    @objc func onClickExpandBtn() {
        isExpanding = !isExpanding
        
        if isExpanding {
            defaultHeightConstraint?.isActive = false
            expandBtn.setTitle("Collapse", for: .regular)
        } else {
            defaultHeightConstraint?.isActive = true
            expandBtn.setTitle("Examine Extra", for: .regular)
        }
    }
}

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments