ios igen$ - Donner des coins arrondis à UIView




12 beta (17)

Ma vue de connexion a une sous-vue qui a un UIActivityView et un UILabel disant "Signing In ...". Cette sous-vue a des coins qui ne sont pas arrondis. Comment puis-je les faire tourner?

Y at-il un moyen de le faire dans mon xib?


Answers

S'il vous plaît importer le Quartzcore framework alors vous devez mettre setMaskToBounds à TRUE cette ligne très importante.

Ensuite: [[yourView layer] setCornerRadius:5.0f];


Vous pouvez également utiliser une image:

UIImage *maskingImage = [UIImage imageNamed:@"bannerBarBottomMask.png"];
CALayer *maskingLayer = [CALayer layer];
maskingLayer.frame = CGRectMake(-(self.yourView.frame.size.width - self.yourView.frame.size.width) / 2
                                , 0
                                , maskingImage.size.width
                                , maskingImage.size.height);
[maskingLayer setContents:(id)[maskingImage CGImage]];
[self.yourView.layer setMask:maskingLayer];

Vous devez d'abord importer le fichier d'en-tête <QuartzCore/QuartzCore.h>

 #import QuartzCore/QuartzCore.h>

[yourView.layer setCornerRadius:8.0f];
yourView.layer.borderColor = [UIColor redColor].CGColor;
yourView.layer.borderWidth = 2.0f;
[yourView.layer setMasksToBounds:YES];

Ne manquez pas d'utiliser - setMasksToBounds , sinon l'effet risque de ne pas s'afficher.


Vous pouvez également utiliser la fonction Attributs d'exécution définis par l' utilisateur du générateur d'interface pour définir la trajectoire de la clé layer.cornerRadius sur une valeur. Assurez-vous d'inclure la bibliothèque QuartzCore .

Cette astuce fonctionne également pour la définition de layer.borderWidth, mais cela ne fonctionnera pas pour layer.borderColor car cela CGColor un CGColor non un UIColor .

Vous ne pourrez pas voir les effets dans le storyboard car ces paramètres sont évalués lors de l'exécution.


Utilisation de l'extension UIView:

extension UIView {    

func addRoundedCornerToView(targetView : UIView?)
{
    //UIView Corner Radius
    targetView!.layer.cornerRadius = 5.0;
    targetView!.layer.masksToBounds = true

    //UIView Set up boarder
    targetView!.layer.borderColor = UIColor.yellowColor().CGColor;
    targetView!.layer.borderWidth = 3.0;

    //UIView Drop shadow
    targetView!.layer.shadowColor = UIColor.darkGrayColor().CGColor;
    targetView!.layer.shadowOffset = CGSizeMake(2.0, 2.0)
    targetView!.layer.shadowOpacity = 1.0
}
}

Usage:

override func viewWillAppear(animated: Bool) {

sampleView.addRoundedCornerToView(statusBarView)

}

Définir la propriété CornerRadious pour une vue ronde

set masksToBounds Boolean La valeur de l'image ne sera pas encore dessinée en dehors de la limite du rayon de coin

view.layer.cornerRadius = 5;

view.layer.masksToBounds = YES;

Swift 4 - Utiliser IBDesignable

   @IBDesignable
    class DesignableView: UIView {
    }

    extension UIView
    {

        @IBInspectable
        var cornerRadius: CGFloat {
            get {
                return layer.cornerRadius
            }
            set {
            layer.cornerRadius = newValue
        }
    }
}

Essaye ça

#import <QuartzCore/QuartzCore.h> // not necessary for 10 years now  :)

...

view.layer.cornerRadius = 5;
view.layer.masksToBounds = true;

Remarque: Si vous essayez d'appliquer des coins arrondis à la vue d'un UIViewController , il ne doit pas être appliqué dans le constructeur du contrôleur de vue, mais plutôt dans -viewDidLoad , après l'instanciation de la vue.


Comme décrit dans ce blog , voici une méthode pour arrondir les coins d'un UIView:

+(void)roundView:(UIView *)view onCorner:(UIRectCorner)rectCorner radius:(float)radius
{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds
                                                   byRoundingCorners:rectCorner
                                                         cornerRadii:CGSizeMake(radius, radius)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc] init];
    maskLayer.frame = view.bounds;
    maskLayer.path = maskPath.CGPath;
    [view.layer setMask:maskLayer];
    [maskLayer release];
}

La partie cool à ce sujet est que vous pouvez sélectionner les coins que vous voulez arrondi.


UIView* viewWithRoundedCornersSize(float cornerRadius,UIView * original)
{
    // Create a white border with defined width
    original.layer.borderColor = [UIColor yellowColor].CGColor;
    original.layer.borderWidth = 1.5;

    // Set image corner radius
    original.layer.cornerRadius =cornerRadius;

    // To enable corners to be "clipped"
    [original setClipsToBounds:YES];
    return original;
}

Vous pouvez maintenant utiliser une catégorie swift dans UIView (code ci-dessous) avec @IBInspectable pour afficher le résultat sur le storyboard (Si vous utilisez la catégorie, utilisez uniquement cornerRadius et non layer.cornerRadius comme chemin clé.

extension UIView {
    @IBInspectable var cornerRadius: CGFloat {
        get {
            return layer.cornerRadius
        }
        set {
            layer.cornerRadius = newValue
            layer.masksToBounds = newValue > 0
        }
    }
}


ON Xcode 6 Votre essai

     self.layer.layer.cornerRadius = 5.0f;

ou

    self.layer.layer.cornerRadius = 5.0f;
    self.layer.clipsToBounds = YES;

Rapide

Réponse courte:

myView.layer.cornerRadius = 8
myView.layer.masksToBounds = true  // optional

Réponse supplémentaire

Si vous êtes arrivé à cette réponse, vous avez probablement déjà vu assez pour résoudre votre problème. J'ajoute cette réponse pour donner un peu plus d'explication visuelle pour expliquer pourquoi les choses font ce qu'elles font.

Si vous commencez avec un UIView régulier, il a des coins carrés.

let blueView = UIView()
blueView.frame = CGRect(x: 100, y: 100, width: 100, height: 50)
blueView.backgroundColor = UIColor.blueColor()
view.addSubview(blueView)

Vous pouvez lui donner des coins arrondis en changeant la propriété cornerRadius du cornerRadius de la vue.

blueView.layer.cornerRadius = 8

Les valeurs de rayon plus élevées donnent des coins plus arrondis

blueView.layer.cornerRadius = 25

et des valeurs plus petites donnent des coins moins arrondis.

blueView.layer.cornerRadius = 3

Cela pourrait suffire à résoudre votre problème là. Cependant, une vue peut parfois avoir une sous-vue ou une sous-couche qui sort des limites de la vue. Par exemple, si je devais ajouter une vue secondaire comme celle-ci

let mySubView = UIView()
mySubView.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubView.backgroundColor = UIColor.redColor()
blueView.addSubview(mySubView)

ou si je devais ajouter une sous- couche comme celle-ci

let mySubLayer = CALayer()
mySubLayer.frame = CGRect(x: 20, y: 20, width: 100, height: 100)
mySubLayer.backgroundColor = UIColor.redColor().CGColor
blueView.layer.addSublayer(mySubLayer)

Ensuite, je finirais avec

Maintenant, si je ne veux pas que les choses pendent hors des limites, je peux le faire

blueView.clipsToBounds = true

ou ca

blueView.layer.masksToBounds = true

ce qui donne ce résultat:

Les deux clipsToBounds et masksToBounds sont equivalent . C'est juste que le premier est utilisé avec UIView et le second est utilisé avec CALayer .

Voir également

  • Comment ajouter des bordures et des ombres
  • Les chemins de Bézier
  • Transformations

Faites-le par programme en obj c

UIView *view = [[UIView alloc] initWithFrame:CGRectMake(20, 50,    200, 200)];

view.layer.backgroundColor = [UIColor whiteColor].CGColor;
view.layer.cornerRadius = 20.0;
view.layer.frame = CGRectInset(v.layer.frame, 20, 20);

[view.layer.shadowOffset = CGSizeMake(1, 0);
view.layer.shadowColor = [[UIColor blackColor] CGColor];
view.layer.shadowRadius = 5;
view.layer.shadowOpacity = .25;][1]

[self.view addSubview:view];

Nous pouvons également le faire à partir de stoaryboard.

 layer.cornerRadius  Number  5


Vous pouvez utiliser la classe UIView personnalisée suivante écrite dans Swift 3.0, qui peut également changer la couleur et la largeur de la bordure. Comme ceci est IBDesignalbe Vous pouvez également modifier les attributs dans le constructeur d'interface.

import UIKit

@IBDesignable public class RoundedView: UIView {

    @IBInspectable var borderColor: UIColor = UIColor.white {
        didSet {
            layer.borderColor = borderColor.cgColor
        }
    }

    @IBInspectable var borderWidth: CGFloat = 2.0 {
        didSet {
            layer.borderWidth = borderWidth
        }
    }

    @IBInspectable var cornerRadius: CGFloat = 0.0 {
        didSet {
            layer.cornerRadius = cornerRadius
        }
    }

}

view.layer.cornerRadius = 25
view.layer.masksToBound = true

Je trouve le lien suivant utile pour comprendre comment régler l’ombre portée:

Comment ajouter une ombre à un UIView

Pour définir le coin arrondi pour UIVIEW, définissez simplement la valeur layer.cornerRadius dans le générateur d’interface. Vérifiez la capture d’écran.





ios cocoa-touch uiview