3 способа показать изображение и заголовок при смахивании

Это дизайн Apple, что только когда высота ячейки равна или больше 90, и изображение, и заголовок будут отображаться при смахивании. Есть 3 способа показать оба.

Следующий код задает для названия действия значение «Пойман» и задает для изображения системный значок звездочки.

let starAction = UIContextualAction(style: .normal, title: “Caught”) { _, _, _ in }
let starImage = UIImage(systemName: “star.fill”)
starAction.image = starImage

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

Это дизайн Apple, что только когда высота ячейки равна или больше 90, и изображение, и заголовок будут отображаться при смахивании. Когда высота ячейки меньше 90, при смахивании будет отображаться только изображение, если вы установите и изображение, и заголовок. Вы можете наблюдать это в некоторых встроенных приложениях, таких как Сообщения.

Что, если вы хотите показать их обоих? Вы можете рассмотреть следующие 3 способа.

1. Установите высоту ячейки на ›= 90

Это очень просто. Если установить высоту ячейки равной или большей 90, появятся и изображение, и текст.

2. Замените изображение символом Юникода

Если ваша иконка обычная, например, звезда, сердце или мусорная корзина, возможно, вы можете заменить изображение на символ Unicode.

let star = UIContextualAction(style: .normal, title: “\u{2605}\nCaught”) { _, _, _ in }

Символ Юникода выглядит меньше системного значка при смахивании. Возможно, вы захотите увеличить значок, изменив размер шрифта, но при этом увеличится и текст.

Недостатком этого подхода является то, что вы не можете изменить размер только значка, не затрагивая остальную часть текста. Включение значка Unicode в заголовок означает, что размер значка будет меняться вместе с размером шрифта.

Вы можете подумать об атрибутированной строке. К сожалению, заголовок UIContextualAction не поддерживает строку с атрибутами.

3. Преобразуйте изображение и заголовок в изображение

Мы можем создать метку, включающую текст и изображения через NSAttributedString и NSTextAttachment, а затем преобразовать метку в изображение.

Во-первых, создайте строку с атрибутами, которая включает в себя как ваш текст, так и изображение.

let text = NSMutableAttributedString(string: “Caught”)
let attachment = NSTextAttachment()
attachment.image = UIImage(systemName: “star.fill”)
text.append(NSAttributedString(attachment: attachment))

А затем создайте метку для хранения строки с атрибутами.

let label = UILabel(frame: CGRect(x: 0, y: 0, width: 50, height: 50))
label.textAlignment = .center
label.numberOfLines = 2
label.attributedText = text

Наконец, преобразуйте метку в изображение.

let renderer = UIGraphicsImageRenderer(bounds: label.bounds)
let image = renderer.image { context in
    label.layer.render(in: context.cgContext)
}
if let cgImage = image.cgImage {
    let finalImage = UIImage(cgImage: cgImage, scale: UIScreen.main.scale, orientation: .up)
}

У этого подхода есть некоторые недостатки:

Размер шрифта будет фиксированным на изображении, поэтому и значок, и текст в действии смахивания не будут поддерживать динамический тип.

Кроме того, изображение в действии смахивания имеет максимальный размер; если ваша метка слишком широкая, изображение будет уменьшаться при смахивании.

Кроме того, шрифт текста выглядит меньше, чем отображается в заголовке. Если вы попытаетесь установить размер шрифта больше, текст будет обрезан.

Использованная литература: