Как показано на изображении, как добавить зеленую рамку слева?
Я хочу добавить этот тип границы в UIview. Я попытался поместить этот тип изображения в поле зрения, но в моем случае это не сработало, потому что он не может справиться с динамической высотой ячейки.
поэтому, пожалуйста, дайте мне правильное решение, чтобы добавить слой в представление.
Редактировать:
private func addBorderImage() {
print("commit init")
guard let img = UIImage(named: "BorderLeft") else {
fatalError("Could not load image named \"stretch1\"!!!")
}
// create a resizable version
let stretchImg = img.resizableImage(withCapInsets: .init(top: 12.0, left: 0.0, bottom: 12.0, right: 0.0))
let imgView = UIImageView()
imgView.image = stretchImg.withRenderingMode(.alwaysTemplate)
imgView.tintColor = UIColor(named: "AccentColor")
imgView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(imgView)
let g = contentView.layoutMarginsGuide
NSLayoutConstraint.activate([
imgView.topAnchor.constraint(equalTo: self.topAnchor, constant: 8.0),
imgView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: -10.0),
imgView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8.0),
imgView.widthAnchor.constraint(equalToConstant: 25.0),
])
}
и я использую изображение PNG, но изменение размера не работает.
Вы можете сделать это с помощью resizableImage.
Начнем с этого изображения (вырезанного из опубликованного вами изображения):
Это 11 x 32
(пиксели).
Мы можем сделать его «растягиваемым», используя func resizableImage(withCapInsets capInsets: UIEdgeInsets) -> UIImage
(документация), вот так:
.resizableImage(withCapInsets: .init(top: 12.0, left: 0.0, bottom: 12.0, right: 0.0))
Теперь верхние 12 пикселей и нижние 12 пикселей не будут растягиваться... только средняя часть:
Пример кода:
class StretchTestVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBackground
guard let img = UIImage(named: "stretch1") else {
fatalError("Could not load image!!!")
}
// create a resizable version
let stretchImg = img.resizableImage(withCapInsets: .init(top: 12.0, left: 0.0, bottom: 12.0, right: 0.0))
// now let's add 8 image views with increasing heights
var x: CGFloat = 40.0
var h: CGFloat = 60.0
for _ in 1...8 {
let imgView = UIImageView()
imgView.image = stretchImg
imgView.frame = .init(x: x, y: 100.0, width: 11.0, height: h)
view.addSubview(imgView)
x += 30.0
h += 50.0
}
}
}
Изменить - действительно быстрый пример с ячейками таблицы переменной высоты...
class StretchCellViewController: UIViewController, UITableViewDataSource, UITableViewDelegate {
let rowsInCell: [Int] = [
2, 3, 7, 5, 2, 4, 8, 5, 9, 6,
]
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .systemBackground
let tableView = UITableView()
tableView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(tableView)
let g = view.safeAreaLayoutGuide
NSLayoutConstraint.activate([
tableView.topAnchor.constraint(equalTo: g.topAnchor, constant: 0.0),
tableView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
tableView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),
tableView.bottomAnchor.constraint(equalTo: g.bottomAnchor, constant: 0.0),
])
tableView.register(StretchImageCell.self, forCellReuseIdentifier: StretchImageCell.identifier)
tableView.dataSource = self
tableView.delegate = self
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return rowsInCell.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let c = tableView.dequeueReusableCell(withIdentifier: StretchImageCell.identifier, for: indexPath) as! StretchImageCell
c.fillData(numRows: rowsInCell[indexPath.row])
return c
}
}
class StretchImageCell: UITableViewCell {
static let identifier: String = "StretchImageCell"
private let stack = UIStackView()
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
commonInit()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
commonInit()
}
private func commonInit() {
guard let img = UIImage(named: "stretch1") else {
fatalError("Could not load image named \"stretch1\"!!!")
}
// create a resizable version
let stretchImg = img.resizableImage(withCapInsets: .init(top: 12.0, left: 0.0, bottom: 12.0, right: 0.0))
let imgView = UIImageView()
imgView.image = stretchImg
stack.axis = .vertical
stack.spacing = 8
imgView.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(imgView)
stack.translatesAutoresizingMaskIntoConstraints = false
contentView.addSubview(stack)
let g = contentView.layoutMarginsGuide
NSLayoutConstraint.activate([
imgView.topAnchor.constraint(equalTo: self.topAnchor, constant: 8.0),
imgView.leadingAnchor.constraint(equalTo: g.leadingAnchor),
imgView.bottomAnchor.constraint(equalTo: self.bottomAnchor, constant: -8.0),
imgView.widthAnchor.constraint(equalToConstant: 11.0),
stack.topAnchor.constraint(equalTo: g.topAnchor),
stack.leadingAnchor.constraint(equalTo: imgView.trailingAnchor, constant: 4.0),
stack.trailingAnchor.constraint(equalTo: g.trailingAnchor),
stack.bottomAnchor.constraint(equalTo: g.bottomAnchor),
])
for _ in 1...10 {
let v = UILabel()
v.font = .systemFont(ofSize: 24.0, weight: .light)
v.backgroundColor = .init(white: 0.95, alpha: 1.0)
stack.addArrangedSubview(v)
}
}
public func fillData(numRows: Int) {
// hide all the labels in the stack view
for v in stack.arrangedSubviews {
v.isHidden = true
}
// limit to 10 label rows
let n = min(10, numRows)
// now set label text and un-hide
for i in 0..<numRows {
if let v = stack.arrangedSubviews[i] as? UILabel {
v.text = "Label number: \(i+1)"
v.isHidden = false
}
}
}
}
Результат:
@AshaGohel - я не понимаю, что вы имеете в виду под «в моем случае невозможно использовать изображение».
Я имею в виду, что я использую динамическую высоту в ячейке табличного представления и хочу, чтобы эта граница была во всей ячейке. поэтому изображение не имеет правильной высоты, и содержимое моей ячейки смещается.
@AshaGohel - в примере показано, как изображение растягивается, чтобы заполнить высоту изображения, сохраняя при этом верхний и нижний концы статичными. Попробуйте. Добавьте в ячейку представление изображения... ограничьте его так, чтобы его высота увеличивалась, когда ячейка становится выше. В этом весь смысл resizableImage(withCapInsets:...)
@AshaGohel - я добавил быстрый и простой пример использования resizableImage(withCapInsets:...)
в ячейке табличного представления.
Я отредактировал вопрос, пожалуйста, проверьте еще раз.
@AshaGohel - вам нужно предоставить более подробную информацию, чем «Я использую изображение в формате PNG, но изменение размера не работает» ... Что не сработало? Глядя на добавленный вами код, имеет ли ваше изображение «BorderLeft» ширину 15 пикселей? Вы используете изображения @2x
и @3x
? Опубликуйте фактические файлы .png, которые вы пытаетесь использовать, и опубликуйте изображение результата.
Я использовал изображение SVG, поэтому изменение размера не работало должным образом, теперь оно работает с изображением PNG, спасибо за ваши рекомендации.
Спасибо за ответ, но не могли бы вы нарисовать его в слое, потому что я столкнулся с проблемой высоты в ячейке табличного представления. И в моем случае использовать изображение невозможно.