Comment ajouter une bordure juste sur la partie supérieure d'une UIView

Question

Ma question porte sur le titre.

Je ne sais pas comment ajouter une bordure dans un côté spécifique, en haut ou en bas, n'importe quel côté... layer.border dessine la bordure de la vue entière...

Answer 1

Pour moi, ça marche

extension UIView {

    func addBorders(edges: UIRectEdge = .all, color: UIColor = .black, width: CGFloat = 1.0) {

        func createBorder() -> UIView {
            let borderView = UIView(frame: CGRect.zero)
            borderView.translatesAutoresizingMaskIntoConstraints = false
            borderView.backgroundColor = color
            return borderView
        }

        if (edges.contains(.all) || edges.contains(.top)) {
            let topBorder = createBorder()
            self.addSubview(topBorder)
            NSLayoutConstraint.activate([
                topBorder.topAnchor.constraint(equalTo: self.topAnchor),
                topBorder.leadingAnchor.constraint(equalTo: self.leadingAnchor),
                topBorder.trailingAnchor.constraint(equalTo: self.trailingAnchor),
                topBorder.heightAnchor.constraint(equalToConstant: width)
                ])
        }
        if (edges.contains(.all) || edges.contains(.left)) {
            let leftBorder = createBorder()
            self.addSubview(leftBorder)
            NSLayoutConstraint.activate([
                leftBorder.topAnchor.constraint(equalTo: self.topAnchor),
                leftBorder.bottomAnchor.constraint(equalTo: self.bottomAnchor),
                leftBorder.leadingAnchor.constraint(equalTo: self.leadingAnchor),
                leftBorder.widthAnchor.constraint(equalToConstant: width)
                ])
        }
        if (edges.contains(.all) || edges.contains(.right)) {
            let rightBorder = createBorder()
            self.addSubview(rightBorder)
            NSLayoutConstraint.activate([
                rightBorder.topAnchor.constraint(equalTo: self.topAnchor),
                rightBorder.bottomAnchor.constraint(equalTo: self.bottomAnchor),
                rightBorder.trailingAnchor.constraint(equalTo: self.trailingAnchor),
                rightBorder.widthAnchor.constraint(equalToConstant: width)
                ])
        }
        if (edges.contains(.all) || edges.contains(.bottom)) {
            let bottomBorder = createBorder()
            self.addSubview(bottomBorder)
            NSLayoutConstraint.activate([
                bottomBorder.bottomAnchor.constraint(equalTo: self.bottomAnchor),
                bottomBorder.leadingAnchor.constraint(equalTo: self.leadingAnchor),
                bottomBorder.trailingAnchor.constraint(equalTo: self.trailingAnchor),
                bottomBorder.heightAnchor.constraint(equalToConstant: width)
                ])
        }
    }
}

Answer 2

Personnellement, j'aime bien la sous-classification de la vue + drawRect, mais voici une autre façon de procéder (et cela fonctionne un peu dans le même sens que la réponse acceptée par @If Pollavith) :

Votre nouveau calque de bordure peut être configuré pour avoir les dimensions que vous souhaitez. Ainsi, comme dans la réponse de @If Pollavith, vous créez un calque aussi haut que vous le souhaitez, et aussi large que la vue que vous voulez faire border. Utilisez la définition du cadre du calque pour le placer où vous le souhaitez, puis ajoutez-le en tant que sous-calque à votre vue.

Pour référence, ma propre exigence était de mettre une bordure sur le côté GAUCHE de la vue (s'il vous plaît, ne coupez pas et collez ce code et ne me détestez pas juste parce qu'il ne met pas une bordure en haut de la vue -- modifier le code ci-dessous est assez simple) :

    CALayer *leftBorder = [CALayer layer];
leftBorder.borderColor = [UIColor colorWithRed:0.0 green:91.0/255.0 blue:141.0/255.0 alpha:1.0].CGColor;
leftBorder.borderWidth = 1;
leftBorder.frame = CGRectMake(0, 0, 1.0, CGRectGetHeight(self.myTargetView.frame));
[self.myTargetView.layer addSublayer:leftBorder];

Je pense que le seul avantage modéré par rapport à cette méthode et à la création d'une petite UIView ou UILabel est que le CALayer est supposé être plus léger, et il y a beaucoup de points de vue intéressants (comme dans les opinions) sur le remplacement de drawRect par l'utilisation de CALayers (comme ici) : iOS : Utilisation de la fonction "drawRect :" de UIView et de la fonction "drawLayer:inContext :" de son calque. ).

Animal451

J'aime la couleur bleue.

Answer 3

En plus de n8tr Je peux ajouter qu'il est également possible de les définir à partir du storyboard :
- ajouter deux propriétés comme borderColor y borderWidth dans le fichier .h ;
- vous pourriez alors ajouter keyPaths à droite dans le storyboard, voir le lien vers capture d'écran

Answer 4

Vous pouvez également consulter cette collection de catégories UIKit et Foundation : https://github.com/leszek-s/LSCategories

Il permet d'ajouter une bordure sur un côté de UIView avec une seule ligne de code :

[self.someView lsAddBorderOnEdge:UIRectEdgeTop color:[UIColor blueColor] width:2];

et il gère correctement la rotation de la vue alors que la plupart des réponses postées ici ne le font pas.

Answer 5

Remarque : la plupart des solutions présentées ici ne sont pas adaptables et ne seront pas redimensionnées. Les solutions qui seront redimensionnées auront un massif impact sur votre temps de démarrage car ils utilisent beaucoup de CPU.

Vous pouvez utiliser cette solution en dessous. Elle fonctionne sur les UIBezierPaths qui sont plus légers que les couches, ce qui entraîne des temps de démarrage rapides. Elle est facile à utiliser, voir les instructions ci-dessous.

class ResizeBorderView: UIView {
    var color = UIColor.white
    var lineWidth: CGFloat = 1
    var edges = [UIRectEdge](){
        didSet {
            setNeedsDisplay()
        }
    }
    override func draw(_ rect: CGRect) {
        if edges.contains(.top) || edges.contains(.all){
            let path = UIBezierPath()
            path.lineWidth = lineWidth
            color.setStroke()
            UIColor.blue.setFill()
            path.move(to: CGPoint(x: 0, y: 0 + lineWidth / 2))
            path.addLine(to: CGPoint(x: self.bounds.width, y: 0 + lineWidth / 2))
            path.stroke()
        }
        if edges.contains(.bottom) || edges.contains(.all){
            let path = UIBezierPath()
            path.lineWidth = lineWidth
            color.setStroke()
            UIColor.blue.setFill()
            path.move(to: CGPoint(x: 0, y: self.bounds.height - lineWidth / 2))
            path.addLine(to: CGPoint(x: self.bounds.width, y: self.bounds.height - lineWidth / 2))
            path.stroke()
        }
        if edges.contains(.left) || edges.contains(.all){
            let path = UIBezierPath()
            path.lineWidth = lineWidth
            color.setStroke()
            UIColor.blue.setFill()
            path.move(to: CGPoint(x: 0 + lineWidth / 2, y: 0))
            path.addLine(to: CGPoint(x: 0 + lineWidth / 2, y: self.bounds.height))
            path.stroke()
        }
        if edges.contains(.right) || edges.contains(.all){
            let path = UIBezierPath()
            path.lineWidth = lineWidth
            color.setStroke()
            UIColor.blue.setFill()
            path.move(to: CGPoint(x: self.bounds.width - lineWidth / 2, y: 0))
            path.addLine(to: CGPoint(x: self.bounds.width - lineWidth / 2, y: self.bounds.height))
            path.stroke()
        }
    }
}

1. Définissez la classe de votre UIView à ResizeBorderView
2. Définissez la couleur et la largeur de la ligne en utilisant yourview.color et yourview.lineWidth dans votre méthode viewDidAppear.
3. Définir les bords, exemple : yourview.edges = [.right, .left] ([.all]) for all
4. Profitez du démarrage rapide et du redimensionnement des bordures