Заполнение границ для пользовательского интерфейса

#ios #swift #uiview #swift4

#iOS #swift #пользовательский интерфейс #swift4

Вопрос:

Я создал стандартную границу вокруг моего пользовательского интерфейса следующим образом:

  vwGroup.layer.borderColor = UIColor.yellow.cgColor
 vwGroup.layer.borderWidth = 2.0;

но я хотел бы иметь 5 пикселей отступа / поля / интервала между пользовательским интерфейсом и границей, которая его окружает.

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

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

Спасибо!

Ответ №1:

Вставки — это не правильный путь. Вставка используется для заполнения внутреннего содержимого представления с его полей. Для того, что вам нужно, ваш лучший вариант — обернуть свой vwGroup внутри другого UIView и установить границу в виде переноса. Что-то вроде:

 let wrappingView = UIView(frame: someFrame)
wrappingView.backgroundColor = .clear
wrappingView.layer.borderColor = UIColor.yellow.cgColor
wrappingView.layer.borderWidth = 2.0;
wrappingView.addSubview(vwGroup)

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

Ответ №2:

Попробуйте это, это полезно для вас.

Сначала добавьте это расширение

 extension CALayer {
    func addGradientBorder(colors:[UIColor],width:CGFloat = 1) {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame =  CGRect(origin: CGPoint.zero, size: self.bounds.size)
        gradientLayer.startPoint = CGPoint(x:0.0, y:0.0)
        gradientLayer.endPoint = CGPoint(x:1.0,y:1.0)
        gradientLayer.colors = colors.map({$0.cgColor})

        let shapeLayer = CAShapeLayer()
        shapeLayer.lineWidth = width
        shapeLayer.path = UIBezierPath(rect: self.bounds).cgPath
        shapeLayer.fillColor = nil
        shapeLayer.strokeColor = UIColor.red.cgColor
        gradientLayer.mask = shapeLayer

        self.addSublayer(gradientLayer)
    }
}

Затем добавьте пользовательский интерфейс с границей

 let vwGroup = UIView(frame: CGRect(x: 50, y: 150, width: 200, height: 200))
vwGroup.backgroundColor = .red

//-- This is for padding between boarder and view -- you can set padding color ---
vwGroup.layer.addGradientBorder(colors:[UIColor.black,UIColor.black] , width: 40)

//--  This is for outer boarder -- you can also change the color of outer boarder --
vwGroup.layer.addGradientBorder(colors:[UIColor.white,UIColor.white] , width: 10)
self.view.addSubview(vwGroup)

Вывод:

1. итак, если у меня уже есть представление с именем vwGroup, куда это относится в вашем коде? Я пытаюсь просто назвать это так: vwGroup(цвета: [UIColor. белый, UIColor. белый] , ширина: 10) и он окружает его, но он помещает его в виде градиентной границы (и без интервалов).

2. addGradientBorder вызовите этот метод дважды с помощью vwGroup, потому что первый для заполнения, а второй для border UIView. и не забудьте удалить ширину границы по умолчанию и цвет границы из vwGroup

Ответ №3:

swift 5.4

вызовите вот так:

 customView.layer.innerBorder()

сделал это, добавив подуровень

 extension CALayer {


    func innerBorder(borderOffset: CGFloat = 24.0, borderColor: UIColor = UIColor.blue, borderWidth: CGFloat = 2) {
        let innerBorder = CALayer()
        innerBorder.frame = CGRect(x: borderOffset, y: borderOffset, width: frame.size.width - 2 * borderOffset, height: frame.size.height - 2 * borderOffset)
        innerBorder.borderColor = borderColor.cgColor
        innerBorder.borderWidth = borderWidth
        innerBorder.name = "innerBorder"
        insertSublayer(innerBorder, at: 0)
    }
}