web-dev-qa-db-fra.com

CALayer: ajoute une bordure uniquement d'un côté

Je peux ajouter une bordure à un CALayer de cette façon:

[webView.layer setBorderColor: [[UIColor colorWithRed:0.6 green:0.7 blue:0.2 alpha:1] CGColor]];
[webView.layer setBorderWidth: 2.75];

Mais est-il possible d'ajouter une bordure d'un seul côté? Je n'ai besoin que d'une bordure en bas. Ou puis-je atteindre ceci avec d'autres propriétés, par exemple cadre, limites, masque, ...?

enter image description here

Merci de votre aide!

@ Control-V

        UIWebView *webView = [[UIWebView alloc] init];
        CALayer *webViewLayer = webView.layer;

        // now you can do a lot of stuff like borders:
        [webViewLayer setBorderColor: [[UIColor greenColor] CGColor]];
        [webViewLayer setBorderWidth: 2.75];

Consultez la documentation de CALayer: https://developer.Apple.com/documentation/quartzcore/calayer

Et regardez ici: http://iosdevelopertips.com/cocoa/add-rounded-corners-and-border-to-uiwebview.html

iphoneobjective-ccore-animationcalayer
61
Manni

J'ai fait une bordure droite en utilisant ceci:

leftScrollView.clipsToBounds = YES;

CALayer *rightBorder = [CALayer layer];
rightBorder.borderColor = [UIColor darkGrayColor].CGColor;
rightBorder.borderWidth = 1;
rightBorder.frame = CGRectMake(-1, -1, CGRectGetWidth(leftScrollView.frame), CGRectGetHeight(leftScrollView.frame)+2);

[leftScrollView.layer addSublayer:rightBorder];
130
Kazzar

Le moyen le plus simple est d’ajouter une sous-couche qui dessinera les bordures sélectives, mais vous devez tenir compte de certains éléments lors du choix de cette solution. cadre de votre couche.

J'ai mis en place une solution Open Source qui prend en charge ces problèmes et vous permet de déclarer des frontières sélectives comme ceci:

myView.borderDirection = AUIFlexibleBordersDirectionRight | AUIFlexibleBordersDirectionTop;

Vous pouvez obtenir le code et en savoir plus à ce sujet ici

17
adamsiton

La propriété border ajoute toujours une bordure aux 4 côtés de votre vue . Vous pouvez créer votre propre méthode de dessin pour dessiner la bordure au bas de votre vue.

Mais pourquoi ne pas simplement ajouter une vue au-dessus de votre UIWebView pour qu’elle ressemble à une bordure?

7
xuzhe

Voici l'équivalent Swift 

leftScrollView.clipsToBounds = true
let rightBorder: CALayer = CALayer()
rightBorder.borderColor = UIColor.darkGrayColor().CGColor
rightBorder.borderWidth = 1
rightBorder.frame = CGRectMake(-1, -1, CGRectGetWidth(leftScrollView.frame), CGRectGetHeight(leftScrollView.frame)+2)
leftScrollView.layer.addSublayer(rightBorder)
5
conorgriffin

Ma solution rapide. Il comporte quatre fonctions différentes, toutes des extensions d’UIView. Chaque fonction ajoute une bordure différente.

extension UIView {
@discardableResult func addRightBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: self.frame.size.width-width, y: 0, width: width, height: self.frame.size.height)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addLeftBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: 0, width: width, height: self.frame.size.height)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addTopBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: 0, width: self.frame.size.width, height: width)
    self.layer.addSublayer(layer)
    return self
    }
@discardableResult func addBottomBorder(color: UIColor, width: CGFloat) -> UIView {
    let layer = CALayer()
    layer.borderColor = color.cgColor
    layer.borderWidth = width
    layer.frame = CGRect(x: 0, y: self.frame.size.height-width, width: self.frame.size.width, height: width)
    self.layer.addSublayer(layer)
    return self
    }
}
5
Bawpotter

Il y a une autre façon de faire ça. La CAShapeLayer a des propriétés appelées "strokeStart" et "strokeEnd". En considérant que le trait commence à 0 et se termine à 1 lorsqu'il atteint le point d'origine, complétant ainsi le chemin, vous pouvez définir des valeurs de début et de fin pour tracer la bordure sur un côté.

L'emplacement relatif auquel commencer le tracé du chemin. Animable . La valeur de cette propriété doit être comprise entre 0,0 et 1,0. La valeur par défaut de cette propriété est 0.0 . Combinée à la propriété strokeEnd, cette propriété définit la sous-région du chemin d'accès au contour. La valeur de cette propriété indique le point relatif le long du chemin auquel commencer le tracé, tandis que la propriété strokeEnd définit le point final. Une valeur de 0.0 représente le début du chemin tandis qu'une valeur de 1.0 représente la fin du chemin. Les valeurs intermédiaires sont interprétées linéairement sur la longueur du trajet.

Exemple:

let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.CGPath
mask.strokeColor = UIColor.redColor().CGColor
mask.strokeStart = 0.45
mask.strokeEnd = 0.92
self.layer.mask = mask
2
Anindya Sengupta

Ce qui suit fonctionne avec Swift 4.2 pour appliquer une bordure le long d’une UIView existante.

extension UIView {
    enum Side {
        case top
        case bottom
        case left
        case right
    }

    func addBorder(to side: Side, color: UIColor, borderWidth: CGFloat) {
        let subLayer = CALayer()
        subLayer.borderColor = color.cgColor
        subLayer.borderWidth = borderWidth
        let Origin = findOrigin(side: side, borderWidth: borderWidth)
        let size = findSize(side: side, borderWidth: borderWidth)
        subLayer.frame = CGRect(Origin: Origin, size: size)
        layer.addSublayer(subLayer)
    }

    private func findOrigin(side: Side, borderWidth: CGFloat) -> CGPoint {
        switch side {
        case .right:
            return CGPoint(x: frame.maxX - borderWidth, y: 0)
        case .bottom:
            return CGPoint(x: 0, y: frame.maxY - borderWidth)
        default:
            return .zero
        }
    }

    private func findSize(side: Side, borderWidth: CGFloat) -> CGSize {
        switch side {
        case .left, .right:
            return CGSize(width: borderWidth, height: frame.size.height)
        case .top, .bottom:
            return CGSize(width: frame.size.width, height: borderWidth)
        }
    }
}

Et vous pouvez l'appeler avec ceci:

myView.addBorder(to: .left, color: .black, borderWidth: 2.0)

Que se passe-t-il:

  • L'utilisateur fournit une Side telle que définie dans l'énumération, avec une color et borderWidth
  • Une nouvelle sous-couche est créée et reçoit borderColor et borderWidth
  • L'origine est calculée, comme déterminé par le côté
  • La taille est calculée, également déterminée par le côté
  • Enfin, une couche est donnée au calque, puis ajoutée en tant que sous-couche.
0
CodeBender