Как добавить левую зеленую рамку с изогнутым верхом и низом?

Как показано на изображении, как добавить зеленую рамку слева?

Я хочу добавить этот тип границы в 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, но изменение размера не работает.

Стоит ли изучать PHP в 2023-2024 годах?
Стоит ли изучать PHP в 2023-2024 годах?
Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
2
0
50
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы можете сделать это с помощью 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
            }
        }
    }
}

Результат:

Спасибо за ответ, но не могли бы вы нарисовать его в слое, потому что я столкнулся с проблемой высоты в ячейке табличного представления. И в моем случае использовать изображение невозможно.

Asha Gohel 09.08.2024 14:28

@AshaGohel - я не понимаю, что вы имеете в виду под «в моем случае невозможно использовать изображение».

DonMag 09.08.2024 15:04

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

Asha Gohel 09.08.2024 15:08

@AshaGohel - в примере показано, как изображение растягивается, чтобы заполнить высоту изображения, сохраняя при этом верхний и нижний концы статичными. Попробуйте. Добавьте в ячейку представление изображения... ограничьте его так, чтобы его высота увеличивалась, когда ячейка становится выше. В этом весь смысл resizableImage(withCapInsets:...)

DonMag 09.08.2024 15:15

@AshaGohel - я добавил быстрый и простой пример использования resizableImage(withCapInsets:...) в ячейке табличного представления.

DonMag 09.08.2024 16:30

Я отредактировал вопрос, пожалуйста, проверьте еще раз.

Asha Gohel 10.08.2024 13:10

@AshaGohel - вам нужно предоставить более подробную информацию, чем «Я использую изображение в формате PNG, но изменение размера не работает» ... Что не сработало? Глядя на добавленный вами код, имеет ли ваше изображение «BorderLeft» ширину 15 пикселей? Вы используете изображения @2x и @3x? Опубликуйте фактические файлы .png, которые вы пытаетесь использовать, и опубликуйте изображение результата.

DonMag 10.08.2024 15:03

Я использовал изображение SVG, поэтому изменение размера не работало должным образом, теперь оно работает с изображением PNG, спасибо за ваши рекомендации.

Asha Gohel 12.08.2024 08:05

Другие вопросы по теме