Как создать тень для материала, похожего на ячейки табличного представления? - PullRequest
Новая
       51

Как создать тень для материала, похожего на ячейки табличного представления?

0 голосов
/ 11 июля 2019

Я пытаюсь сделать так, чтобы ячейки табличного представления выглядели «материально». Вот что-то похожее на то, что я хочу сделать ( source ):

enter image description here

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

Сначала я спроектировал свою ячейку в файле XIB. Я поместил UIView с именем containerView как подпредставление представления содержимого. Я добавил ограничения, чтобы containerView имел верхнее, нижнее, левое и правое поля 8. Это так, что containerView немного меньше, чем представление содержимого, так что тень, которую я на него накладываю, будет видна .

Я также добавил UILabel под названием label в качестве подпредставления containerView, чтобы показать некоторый текст.

Это подкласс UITableViewCell: 

class QueueItemCell: UITableViewCell {
    @IBOutlet var label: UILabel!
    @IBOutlet var container: UIView!

    override func setHighlighted(_ highlighted: Bool, animated: Bool) {
        ...
    }

    override func setSelected(_ selected: Bool, animated: Bool) {
        ...
    }

    override func awakeFromNib() {
        container.layer.shadowColor = UIColor.black.cgColor
        container.layer.shadowOpacity = 0.7
        container.layer.shadowOffset = CGSize(width: 3, height: 9)
        container.layer.shadowRadius = 4
        container.layer.cornerRadius = 4
        container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath
        selectionStyle = .none
    }
}

В источниках данных и методах делегатов нет ничего особенного, кроме того, что я установил высоту ячеек на 61 в heightForRowAt.

Когда я запускаю приложение, я получаю что-то вроде этого:

enter image description here

Тень на нижнем и левом краях довольно хорошая. Но правильный край - полная катастрофа. Верхний край также не имеет тени, что нежелательно. Я пытался сделать метод проб и ошибок с shadowPath и shadowOffset, но всегда есть один или два ребра, которые выглядят плохо.

Как получить тень на всех краях ячейки, как показано на первом изображении?

1 Ответ

1 голос
/ 11 июля 2019

в awakeFromNib у вас неправильный размер просмотра. Вам необходимо переместить container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath в layoutSubviews

или удалите этот код 

container.layer.shadowPath = UIBezierPath(roundedRect: container.bounds, cornerRadius: 4).cgPath

, поэтому тень будет настроена автоматически

...