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 définir la bordure supérieure et la bordure inférieure d'un UIView en Swift.

let topBorder = UIView(frame: CGRect(x: 0, y: 0, width: 10, height: 1))
topBorder.backgroundColor = UIColor.black
myView.addSubview(topBorder)

let bottomBorder = UIView(frame: CGRect(x: 0, y: myView.frame.size.height - 1, width: 10, height: 1))
bottomBorder.backgroundColor = UIColor.black
myView.addSubview(bottomBorder)

Answer 2

Dans Swift 4 et 3

let borderThickness = 2
let topBorder = UIView()
topBorder.backgroundColor = UIColor.red
topBorder.frame = CGRect(x: 0, y: 0, width: 
                  Int(yourViewFromOutlet.frame.size.width), height: 
                  borderThickness)
yourViewFromOutlet.addSubview(topBorder)

Answer 3

J'ai trouvé une solution en utilisant Swift 4.1 qui utilise AutoLayout y UIViews afin qu'il soit redimensionné en fonction de la vue.

Elle est basée sur la réponse de @AdamWaite mais résout le problème des cellules de la vue tableau où les cellules sont réutilisées. Si la bordure précédente n'est pas supprimée avant d'en ajouter une nouvelle, la cellule réutilisée contiendra plusieurs bordures.

Ce problème est résolu en créant une classe BorderView fictive et en recherchant les bordures dans les sous-vues pour les supprimer.

Ce code utilise SnapKit pour les contraintes et CocoaLumberjack pour le débogage. Si vous ne les utilisez pas, il devrait être assez simple de convertir les fichiers

class BorderView: UIView {
}

extension UIView {
    private func addSidedBorder(toEdge edge: UIRectEdge, withColor color: UIColor, inset: CGFloat, thickness: CGFloat) {
        let border = BorderView(frame: .zero)
        border.backgroundColor = color
        addSubview(border)

        border.snp.makeConstraints { make in
            switch edge {
            case .top:
                make.top.equalToSuperview()
                make.height.equalTo(thickness)
                make.left.right.equalToSuperview().inset(inset)

            case .left:
                make.left.equalToSuperview()
                make.width.equalTo(thickness)
                make.top.bottom.equalToSuperview().inset(inset)

            case .bottom:
                make.bottom.equalToSuperview()
                make.height.equalTo(thickness)
                make.left.right.equalToSuperview().inset(inset)

            case .right:
                make.right.equalToSuperview()
                make.width.equalTo(thickness)
                make.top.bottom.equalToSuperview().inset(inset)

            default:
                DDLogWarn("Invalid sided border given in ExtendedUIView, border not added correctly")
            }
        }
    }

    func addBorder(toEdge edge: UIRectEdge, withColor color: UIColor = .black, inset: CGFloat = 0.0, thickness: CGFloat = 1.0) {
        // Remove existing borders from view and readd them
        for view in subviews {
            if view is BorderView {
                view.removeFromSuperview()
            }
        }

        if edge.contains(.all) {
            addSidedBorder(toEdge: .top, withColor: color, inset: inset, thickness: thickness)
            addSidedBorder(toEdge: .left, withColor: color, inset: inset, thickness: thickness)
            addSidedBorder(toEdge: .bottom, withColor: color, inset: inset, thickness: thickness)
            addSidedBorder(toEdge: .right, withColor: color, inset: inset, thickness: thickness)
        } else {
            if edge.contains(.top) {
                addSidedBorder(toEdge: .top, withColor: color, inset: inset, thickness: thickness)
            }

            if edge.contains(.left) {
                addSidedBorder(toEdge: .left, withColor: color, inset: inset, thickness: thickness)
            }

            if edge.contains(.bottom) {
                addSidedBorder(toEdge: .bottom, withColor: color, inset: inset, thickness: thickness)
            }

            if edge.contains(.right) {
                addSidedBorder(toEdge: .right, withColor: color, inset: inset, thickness: thickness)
            }
        }
    }
}

Ajoutez ce code et ensuite dans une classe qui sous-classe UIView Appelez :

view.addBorder(toEdge: [.left, .right], withColor: .red, inset: 0.0, thickness: 1.0)

Answer 4

Utilisez le code suivant dans viewDidLoad

- (void)viewDidLoad
{
    [super viewDidLoad];

    [self.view.layer setBorderWidth: 1.0];
    [self.view.layer setCornerRadius:8.0f];
    [self.view.layer setMasksToBounds:YES];
    [self.view.layer setBorderColor:[[UIColor colorWithRed:251.0f/255.0f green:185.0f/255.0f blue:23.0f/255.0f alpha:1.0f]];`

}

ce code met une bordure de couleur rouge à votre vue