Как нарисовать значок и добавить его к изображению в iOS Swift
У меня есть значок уведомления, и я хочу показать этот значок со значком, пока доступны новые уведомления, иначе мне нужно показать только значок уведомления.
в моем случае мне нужно нарисовать красный значок и добавить его к существующему изображению значка и передать его другому пользовательскому компоненту (собственному компоненту), который принимает изображение
Пожалуйста, обратитесь к скриншоту 1, так как скриншот - это значок уведомления, который у меня есть.
Обратитесь к скриншоту 2 для ожидаемого, когда появится новое уведомление, я хочу нарисовать значок и добавить его к существующему значку.
заранее спасибо
Привет @Paulw11, я жду в UIKit
Затем я предлагаю вам создать UIView, установить его цвет на красный, ограничить его ширину и высоту и установить его угловой радиус равным половине ширины/высоты. Затем поместите это представление в верхний угол вашего UIImageView.
Используйте символ научной фантастики с именем bell.badge. Он поддерживает многоцветность, поэтому вы сможете сделать точку красной.
Привет @HangarRash, значок колокольчика SF Symbol немного отличается, поэтому я не могу его использовать, спасибо !!!
Ответы 1
AlertWithBadgeView — это представление с двумя изображениями. alertImageView используется для фонового изображения, а badgeImageView используется для изображения значка.
class AlertWithBadgeView: UIView {
var alertImageView: UIImageView!
var badgeImageView: UIImageView!
required init?(coder: NSCoder) {
fatalError("don't use the view from within storyboards or xibs")
}
override init(frame: CGRect) {
super.init(frame: frame)
createView()
}
private func createView() {
_ = {
let imageView = UIImageView()
addSubview(imageView)
imageView.frame = bounds
imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
alertImageView = imageView
}()
_ = {
let imageView = UIImageView()
addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
imageView.widthAnchor.constraint(equalToConstant: 20),
imageView.heightAnchor.constraint(equalToConstant: 20),
imageView.topAnchor.constraint(equalTo: topAnchor),
imageView.trailingAnchor.constraint(equalTo: trailingAnchor),
])
badgeImageView = imageView
}()
}
}
Базовое создание и настройку можно выполнить с помощью метода cellForRow(at:):
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "cell", for: indexPath) as! CustomCell
let alert = AlertWithBadgeView()
alert.alertImageView.image = .init(systemName: "bell.badge")
alert.badgeImageView.image = .init(systemName: "circle.fill")
cell.addSubview(alert)
alert.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
cell.centerYAnchor.constraint(equalTo: alert.centerYAnchor),
cell.leadingAnchor.constraint(equalTo: alert.leadingAnchor, constant: -20),
alert.widthAnchor.constraint(equalToConstant: 30),
alert.heightAnchor.constraint(equalToConstant: 30),
])
return cell
}
Приведенное выше решение прекрасно, но в моем случае оно отличается, у нас есть пользовательские компоненты, которые мы разработали как другую структуру, мы потребляем необходимые компоненты пользовательского интерфейса, здесь компонент принимает только изображение, мы не можем использовать его как представление изображения и все такое, поэтому можно добавить значок к существующему значку изображения и передать его этой переменной компонента в качестве изображения, в новом сценарии уведомлений мне нужно передать значок изображения со значком
UIKit или SwiftUI? Что вы пробовали?
Circleдля SwiftUI или простойUIViewс радиусом угла для UIKit — хорошие отправные точки. Вам не нужно добавлять значок к изображению. Просто нарисуйте его поверх изображения.