Блог

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

Посмотрите, как край изображения обрезается по краю ячейки, я пытаюсь сделать что-то подобное, но я продолжаю получать это.

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

Я просмотрел несколько разных сообщений, но ни одно из них, похоже, не работает для меня.

Я пытался:

• установка рамки изображения и фона в границы
• используя все различные режимы содержимого
• используя clipsToBound и masksToBounds и установив для них значения true и false.

это то, что находится в моей ячейке:

     contentView.addSubview(cellBackgrounded)
        cellBackgrounded.addSubview(imgView)
//        imgView.frame = cellBackgrounded.bounds  set this to = self.bounds, contentView.frame
//        contentView.frame = self.bounds
//        cellBackgrounded.frame = self.bounds
//        imgView.layer.masksToBounds = false
        imgView.translatesAutoresizingMaskIntoConstraints = false
        imgView.image = UIImage(named: "Oval")?.withRenderingMode(.alwaysTemplate)
        imgView.clipsToBounds = true
        imgView.contentMode = .scaleToFill
        imgView.tintColor = .red
        
        cellBackgrounded.translatesAutoresizingMaskIntoConstraints = false
        cellBackgrounded.backgroundColor = .white
        cellBackgrounded.addSubview(cellName)
        cellName.translatesAutoresizingMaskIntoConstraints = false
        cellName.font = UIFontMetrics.default.scaledFont(for: UIFont.systemFont(ofSize: 50, weight: .bold))
        cellName.textColor = .black
        cellName.numberOfLines = 0
        cellName.textAlignment = .center
        
        darkShadow.frame = self.bounds
        darkShadow.cornerRadius = 15
        darkShadow.backgroundColor = UIColor.offWhite.cgColor
        darkShadow.shadowColor = UIColor.black.withAlphaComponent(0.2).cgColor
        darkShadow.shadowOffset = CGSize(width: 10, height: 10)
        darkShadow.shadowOpacity = 1
        darkShadow.shadowRadius = 15
        self.layer.insertSublayer(darkShadow, at: 0)
        
        NSLayoutConstraint.activate([
            cellBackgrounded.topAnchor.constraint(equalTo: topAnchor),
            cellBackgrounded.leadingAnchor.constraint(equalTo: leadingAnchor),
            cellBackgrounded.trailingAnchor.constraint(equalTo: trailingAnchor),
            cellBackgrounded.bottomAnchor.constraint(equalTo: bottomAnchor),
            imgView.topAnchor.constraint(equalTo: cellBackgrounded.topAnchor, constant: -40),
            imgView.trailingAnchor.constraint(equalTo: cellBackgrounded.trailingAnchor, constant: 40),
            cellName.centerXAnchor.constraint(equalTo: cellBackgrounded.centerXAnchor),
            cellName.centerYAnchor.constraint(equalTo: cellBackgrounded.centerYAnchor),
            cellName.leadingAnchor.constraint(equalTo: cellBackgrounded.leadingAnchor, constant: 10),
            cellName.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10),
            imgView.heightAnchor.constraint(equalTo: cellBackgrounded.heightAnchor, multiplier: 0.7),
            imgView.widthAnchor.constraint(equalTo: cellBackgrounded.widthAnchor, multiplier: 0.7)
        ])
  

если есть что-то еще, с чем я могу помочь, пожалуйста, спросите,
Спасибо

Используйте ClipToBounds

Согласно документам Apple :

Когда значение этого свойства равно true, Core Animation создает неявную обтравочную маску, которая соответствует границам слоя и включает любые эффекты углового радиуса

Для решения этой проблемы необходимо выполнить привязку клипов к просмотру контейнера

 containerView.clipsToBound = true