首页 > 解决方案 > 当我在 CollectionView 中向下滚动时,图片消失了

问题描述

我有一个用于显示帖子的 collectionView,我有 3 种不同的帖子类型(文本、图像和视频)。我已经向单元格添加了一个图像视图,并且我在 cellForItemAt 函数中使用 if else 代码来显示图像和视频帖子的图像视图,或者使用 heightAnchor = 0 隐藏它以用于文本帖子。

它在开始时加载正确,但是当我向下滚动并再次向上滚动图像时,每个帖子的 heightAnchor 重置为“0”。我该如何解决这个问题?

加载帖子时

加载帖子时

当我向下滚动并再次向上滚动时

当我向下滚动并再次向上滚动时

时间轴帖子 CollectionViewCell

class TimelinePosts: UICollectionViewCell {

    let avatar: UIImageView = {
        let avatar = UIImageView()
        avatar.contentMode = .scaleAspectFill
        avatar.clipsToBounds = true
        avatar.layer.cornerRadius = 24
        avatar.translatesAutoresizingMaskIntoConstraints = false
        return avatar
    }()

    let name: UILabel = {
        let name = UILabel()
        name.numberOfLines = 1
        name.translatesAutoresizingMaskIntoConstraints = false
        return name
    }()

    let content: ActiveLabel = {
        let content = ActiveLabel()
        content.numberOfLines = 0
        content.font = UIFont.systemFont(ofSize: 15)
        content.translatesAutoresizingMaskIntoConstraints = false
        return content
    }()

    let image: UIImageView = {
        let image = UIImageView()
        image.contentMode = .scaleAspectFill
        image.clipsToBounds = true
        image.layer.cornerRadius = 12
        image.translatesAutoresizingMaskIntoConstraints = false
        return image
    }()

    let time: UILabel = {
        let time = UILabel()
        time.numberOfLines = 1
        time.textColor = .gray
        time.font = UIFont.systemFont(ofSize: 14)
        time.textAlignment = .center
        time.translatesAutoresizingMaskIntoConstraints = false
        return time
    }()

    let moreButton: UIButton = {
        let button = UIButton()
        let image = UIImage(named: "arrow")
        button.setImage(image, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()


    let favoriteButton: FaveButton = {
        let button = FaveButton(frame: CGRect(x:0, y:0, width: 28, height: 28), faveIconNormal: UIImage(named: "favorite"))
        button.normalColor = UIColor(hexString: "#CBCBCB")
        button.selectedColor = UIColor(hexString: "#FFBE00")
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()

    let boostButton: FaveButton = {
        let button = FaveButton(frame: CGRect(x:0, y:0, width: 28, height: 28), faveIconNormal: UIImage(named: "boost-pressed"))
        button.normalColor = UIColor(hexString: "#CBCBCB")
        button.selectedColor = UIColor(hexString: "#6e00ff")
        button.translatesAutoresizingMaskIntoConstraints = false
        return button
    }()

    let actions: UILabel = {
        let view = UILabel()
        view.numberOfLines = 1
        view.textAlignment = .left
        view.translatesAutoresizingMaskIntoConstraints = false
        return view
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        addViews()
        setupViews()
    }

    func addViews(){
        addSubview(avatar)
        addSubview(moreButton)
        addSubview(time)
        addSubview(name)
        addSubview(content)
        addSubview(image)
        addSubview(favoriteButton)
        addSubview(boostButton)
        addSubview(actions)

    }

    func setupViews(){

        avatar.leftAnchor.constraint(equalTo: leftAnchor, constant: 15).isActive = true
        avatar.topAnchor.constraint(equalTo: topAnchor, constant: 15).isActive = true
        avatar.widthAnchor.constraint(equalToConstant: 48).isActive = true
        avatar.heightAnchor.constraint(equalToConstant: 48).isActive = true

        moreButton.rightAnchor.constraint(equalTo: rightAnchor, constant: -18).isActive = true
        moreButton.topAnchor.constraint(equalTo: topAnchor, constant: 15).isActive = true
        moreButton.widthAnchor.constraint(equalToConstant: 14).isActive = true
        moreButton.heightAnchor.constraint(equalToConstant: 14).isActive = true

        time.leftAnchor.constraint(equalTo: leftAnchor, constant: 15).isActive = true
        time.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true
        time.widthAnchor.constraint(equalToConstant: 48).isActive = true
        time.heightAnchor.constraint(equalToConstant: 20).isActive = true

        name.leftAnchor.constraint(equalTo: avatar.rightAnchor, constant: 10).isActive = true
        name.rightAnchor.constraint(equalTo: moreButton.leftAnchor, constant: -14).isActive = true
        name.topAnchor.constraint(equalTo: topAnchor, constant: 15).isActive = true
        name.heightAnchor.constraint(equalToConstant: 20).isActive = true

        content.leftAnchor.constraint(equalTo: leftAnchor, constant: 73).isActive = true
        content.rightAnchor.constraint(equalTo: rightAnchor, constant: -46).isActive = true
        content.topAnchor.constraint(equalTo: name.bottomAnchor, constant: 5).isActive = true

        image.leftAnchor.constraint(equalTo: leftAnchor, constant: 73).isActive = true
        image.rightAnchor.constraint(equalTo: rightAnchor, constant: -46).isActive = true
        image.topAnchor.constraint(equalTo: content.bottomAnchor, constant: 5).isActive = true
        image.heightAnchor.constraint(equalToConstant: ((UIScreen.main.bounds.width - 120) * 2) / 3).isActive = true

        actions.leftAnchor.constraint(equalTo: avatar.rightAnchor, constant: 10).isActive = true
        actions.rightAnchor.constraint(equalTo: moreButton.leftAnchor, constant: -14).isActive = true
        actions.topAnchor.constraint(equalTo: image.bottomAnchor, constant: 10).isActive = true
        actions.heightAnchor.constraint(equalToConstant: 20).isActive = true
        actions.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true

        favoriteButton.rightAnchor.constraint(equalTo: rightAnchor, constant: -14).isActive = true
        favoriteButton.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -10).isActive = true
        favoriteButton.widthAnchor.constraint(equalToConstant: 20).isActive = true
        favoriteButton.heightAnchor.constraint(equalToConstant: 20).isActive = true

        boostButton.rightAnchor.constraint(equalTo: rightAnchor, constant: -14).isActive = true
        boostButton.bottomAnchor.constraint(equalTo: favoriteButton.topAnchor, constant: -12).isActive = true
        boostButton.widthAnchor.constraint(equalToConstant: 20).isActive = true
        boostButton.heightAnchor.constraint(equalToConstant: 20).isActive = true


       /* name.backgroundColor = .yellow
        content.backgroundColor = .red
        image.backgroundColor = .green */

    }


    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

}

和 cellForItemAt 函数

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
            let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "TimelinePosts", for: indexPath) as! TimelinePosts

            if indexPath.row < id.count{

            cell.avatar.sd_setImage(with: URL(string: avatars[indexPath.row]))

            cell.time.text = hours[indexPath.row]

            cell.favoriteButton.isSelected = isLike[indexPath.row]
            cell.favoriteButton.isUserInteractionEnabled = true
            cell.favoriteButton.tag = indexPath.row

            cell.boostButton.isSelected = isBoost[indexPath.row]
            cell.boostButton.isUserInteractionEnabled = true
            cell.boostButton.tag = indexPath.row

            let selectedArrowTap = UITapGestureRecognizer(target: self, action: #selector(self.selectedArrow))
            selectedArrowTap.numberOfTapsRequired = 1
            cell.moreButton.isUserInteractionEnabled = true
            cell.moreButton.tag = indexPath.row
            cell.moreButton.addGestureRecognizer(selectedArrowTap)


            cell.content.customize { label in
                label.text = content[indexPath.row]
                label.hashtagColor = UIColor(hexString: "#6e00ff")
                label.mentionColor = UIColor(hexString: "#6e00ff")
                label.URLColor = UIColor(hexString: "#0366d6")
            }

            cell.content.handleHashtagTap { hashtag in
                print("Success. You just tapped the \(hashtag) hashtag")
            }

            cell.content.handleURLTap { url in

                let urlString = url.absoluteString

                if urlString.hasPrefix("http://")
                {
                    let openURL = URL(string: urlString)!
                    let svc = SFSafariViewController(url: openURL)
                    self.present(svc, animated: true, completion: nil)
                }
                else if urlString.hasPrefix("https://")
                {
                    let openURL = URL(string: urlString)!
                    let svc = SFSafariViewController(url: openURL)
                    self.present(svc, animated: true, completion: nil)
                }
                else
                {
                    let openURL = URL(string: "https://" + urlString)!
                    let svc = SFSafariViewController(url: openURL)
                    self.present(svc, animated: true, completion: nil)
                }

            }



            if types[indexPath.row] == 2{
                cell.image.sd_setImage(with: URL(string: images[indexPath.row]))
                let selectedImageTap = UITapGestureRecognizer(target: self, action: #selector(self.photoZoom))
                selectedImageTap.numberOfTapsRequired = 1
                cell.image.isUserInteractionEnabled = true
                cell.image.tag = indexPath.row
                cell.image.addGestureRecognizer(selectedImageTap)

            }else if types[indexPath.row] == 3{
                cell.image.sd_setImage(with: URL(string: "https://i.ytimg.com/vi/\(self.extractYoutubeIdFromLink(link: videos[indexPath.row])!)/mqdefault.jpg"))

                let playBtn = UIImageView()
                playBtn.image = UIImage(named: "youtube-play")
                playBtn.tag = indexPath.row
                playBtn.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(self.videoPlay)))
                playBtn.isUserInteractionEnabled = true
                playBtn.translatesAutoresizingMaskIntoConstraints = false
                cell.image.isUserInteractionEnabled = true

                cell.image.addSubview(playBtn)

                playBtn.centerXAnchor.constraint(equalTo: cell.image.centerXAnchor).isActive = true
                playBtn.centerYAnchor.constraint(equalTo: cell.image.centerYAnchor).isActive = true
                playBtn.widthAnchor.constraint(equalToConstant: 74).isActive = true
                playBtn.heightAnchor.constraint(equalToConstant: 52).isActive = true



            }else{
                cell.image.heightAnchor.constraint(equalToConstant: 0).isActive = true
            }
}

            return cell
        }

标签: iosswiftuicollectionview

解决方案


你不应该修改图像高度

cell.image.heightAnchor.constraint(equalToConstant: 0).isActive = true

imageHeightConstraint在你身上创建一个新变量TimelinesPosts

将此变量设置为setupViews()

imageHeightConstraint = image.heightAnchor.constraint(equalToConstant: ((UIScreen.main.bounds.width - 120) * 2) / 3).isActive = true

然后通过这个改变高度

// don't miss this code.
imageHeightConstraint.constant = ((UIScreen.main.bounds.width - 120) * 2) / 3
if types[indexPath.row] == 2 {
//***************     
} else if types[indexPath.row] == 3 {

//***************     

} else {
    imageHeightConstraint.constant = 0  
}

推荐阅读