Как правильно сопоставить кадр пользовательского представления с кадром TableViewCell?

Question

У меня есть TableView, который содержит изображение, растянутое в ячейку, и я добавил вид для затемнения изображения.Поскольку я хочу рисовать это представление только в начале, а не каждый раз, когда прокручиваю таблицу, я добавил свои коды в awakeFromNib в TableViewCell.

TableViewCell.swift

@IBOutlet weak var equipmentImageView: UIImageView!
let darkFilter = UIView()

override func awakeFromNib() {
    super.awakeFromNib()

    darkFilter.backgroundColor = .black
    darkFilter.layer.opacity = 0.6
    darkFilter.frame = self.equipmentImageView.frame
    equipmentImageView.addSubview(darkFilter)
}

Моя проблема в том, что этот вид не будет иметь одинаковую ширину с ImageView, поэтому эффект, который я пытаюсь реализовать, занимает половину экрана.

Я следовал этому решению, но проблема в том, что это решение будет применяться только после того, как ячейки воссоздают себя, прокручивая вниз и снова.

TableViewCell.swift

override func layoutSubviews() {
    super.layoutSubviews()
    darkFilter.backgroundColor = .black
    darkFilter.layer.opacity = 0.6
    darkFilter.frame = self.equipmentImageView.frame
    equipmentImageView.addSubview(darkFilter)

}

Как я могу применить это решение до создания ячеек и не будуперерисовать при прокрутке?

Answer 1

Вы можете установить цвет ячейки .background на .black, а затем понизить alpha equipmentImageView, и вы получите тот же затемненный эффект без добавления нового UIView.

EDIT

Чтобы проиллюстрировать мою точку зрения: вот очень неаккуратный и быстрый пример, который я нарисовал на игровой площадке с изображением под названием «Untitled.jpg», чтобы доказать, что изображение с черным фоном ячеек работает аналогично добавлению выцветшего черного слоя сверху. ячейки с изображением:

Изображение результата:

код:

//: A UIKit based Playground for presenting user interface

import UIKit
import PlaygroundSupport


class CustomTableViewCell: UITableViewCell {

    let myImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.translatesAutoresizingMaskIntoConstraints = false
        imageView.contentMode = .scaleAspectFill

        if let sample = Bundle.main.path(forResource: "Untitled", ofType: "jpg") {
            let image = UIImage(contentsOfFile: sample)
            imageView.image = image
        }

        imageView.clipsToBounds = true

        return imageView
    }()

    let blackView: UIView = {
        let myView = UIView()
        myView.translatesAutoresizingMaskIntoConstraints = false
        myView.backgroundColor = .black
        return myView
    }()

    let title: UILabel = {
        let label = UILabel()
        label.translatesAutoresizingMaskIntoConstraints = false
        label.textColor = .white
        label.font = UIFont.systemFont(ofSize: 12)
        return label
    }()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)

        backgroundColor = .black

        let views = [myImageView,
                     blackView,
                     title]

        views.forEach {
            contentView.addSubview($0)

            NSLayoutConstraint.activate([
                $0.heightAnchor.constraint(equalTo: contentView.heightAnchor),
                $0.widthAnchor.constraint(equalTo: contentView.widthAnchor),
                $0.centerYAnchor.constraint(equalTo: contentView.centerYAnchor),
                $0.centerXAnchor.constraint(equalTo: contentView.centerXAnchor),
                ])
        }

    }

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

    func setCellViews(indexPath: IndexPath) {
        blackView.alpha = 0

        if indexPath.row % 2 == 0 {
            if indexPath.row % 4 == 0 {
                blackView.alpha = 0.4
                title.text = "blackLayer added and faded"
            } else {
                backgroundColor = .black
                myImageView.alpha = 0.6
                title.text = "backView faded"
            }
        } else {
            title.text = "not faded at all"
        }
    }
}


private let reuseId = "cellId"

class MyViewController : UIViewController {

    let tableView: UITableView = {
        let tableView = UITableView()
        tableView.translatesAutoresizingMaskIntoConstraints = false
        tableView.separatorStyle = .none
        return tableView
    }()

    let data = ["one", "two", "three", "four", "five"]

    override func viewDidLoad() {
        super.viewDidLoad()

        setTableView()
    }

    func setTableView() {
        tableView.dataSource = self
        tableView.delegate = self
        tableView.register(CustomTableViewCell.self, forCellReuseIdentifier: reuseId)

        view.addSubview(tableView)

        NSLayoutConstraint.activate([
            tableView.heightAnchor.constraint(equalTo: view.heightAnchor),
            tableView.widthAnchor.constraint(equalTo: view.widthAnchor),
            tableView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            tableView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            ])
    }
}

extension MyViewController: UITableViewDataSource, UITableViewDelegate {

    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return data.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: reuseId, for: indexPath) as! CustomTableViewCell
        cell.setCellViews(indexPath: indexPath)
        return cell
    }

    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 50
    }

}

// Present the view controller in the Live View window
PlaygroundPage.current.liveView = MyViewController()

Answer 2

2 предложения:

1) Поскольку вы имеете дело с IBOutlets для ячейки, вы также можете добавить представление IB в верхней части представления изображения, а затем добавить к нему ограничения, чтобы соответствовать размеру представления изображения.

2) Если вы хотите добавить его программно, вам может потребоваться настроить его ограничения на основе представления содержимого ячейки. Например:

darkFilter.backgroundColor = .black
darkFilter.layer.opacity = 0.6

contentView.addSubview(darkFilter)
darkFilter.translatesAutoresizingMaskIntoConstraints = false
darkFilter.topAnchor.constraint(equalTo: contentView.topAnchor).isActive = true
darkFilter.leftAnchor.constraint(equalTo: contentView.leftAnchor).isActive = true
darkFilter.rightAnchor.constraint(equalTo: contentView.rightAnchor).isActive = true
darkFilter.bottomAnchor.constraint(equalTo: contentView.bottomAnchor).isActive = true