Comment centrer une sous-vue d'UIView

J'ai UIViewun UIViewm intérieur et je veux que l'intérieur UIViewsoit toujours centré à l'intérieur de l'extérieur, sans qu'il soit nécessaire de redimensionner la largeur et la hauteur.

J'ai défini les entretoises et les ressorts de manière à ce qu'ils soient en haut / gauche / droite / bas sans définir le redimensionnement. Mais cela ne se concentre toujours pas. Une idée?

Objectif c

yourSubView.center = CGPointMake(yourView.frame.size.width  / 2, 
                                 yourView.frame.size.height / 2);

Rapide

yourSubView.center = CGPoint(x: yourView.frame.size.width  / 2,
                             y: yourView.frame.size.height / 2)

Vous pouvez le faire et cela fonctionnera toujours:

child.center = [parent convertPoint:parent.center fromView:parent.superview];

Et pour Swift:

child.center = parent.convert(parent.center, from:parent.superview)

Avant de commencer, rappelons simplement que le point d'origine est le coin supérieur gauche CGPointd'une vue. Une chose importante à comprendre sur les opinions et les parents.

Jetons un œil à ce code simple, un contrôleur de vue qui ajoute à sa vue un carré noir:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
        createDummyView()
        super.view.backgroundColor = UIColor.cyanColor();
    }

    func createDummyView(){
        var subView = UIView(frame: CGRect(x: 15, y: 50, width: 50 , height: 50));
        super.view.addSubview(subView);
        view.backgroundColor = UIColor.blackColor()
    }

}

Cela créera cette vue: l'origine et le centre du rectangle noir correspondent aux mêmes coordonnées que son parent

Essayons maintenant d'ajouter une sous-vue à une autre sous-vue, et en donnant à la sous-vue la même origine que la sous-vue, mais en faisant de la sous-vue une vue enfant de la sous-vue

Nous ajouterons ce code:

var subSubView = UIView();
subSubView.frame.origin = subView.frame.origin;
subSubView.frame.size = CGSizeMake(20, 20);
subSubView.backgroundColor = UIColor.purpleColor()
subView.addSubview(subSubView)

Et voici le résultat:

En raison de cette ligne:

subSubView.frame.origin = subView.frame.origin;

Vous vous attendez à ce que l'origine du rectangle violet soit la même que son parent (le rectangle noir), mais il passe en dessous, et pourquoi? Parce que lorsque vous ajoutez une vue à une autre vue, le cadre de sous-vue "monde" est maintenant son parent BOUND RECTANGLE, si vous avez une vue dont l'origine sur l'écran principal est aux coordonnées (15,15) pour toutes ses sous-vues, le le coin supérieur gauche sera (0,0)

C'est pourquoi vous devez toujours faire référence à un parent par son rectangle lié, qui est le "monde" de ses sous-vues, fixons cette ligne à:

subSubView.frame.origin = subView.bounds.origin;

Et voyez la magie, la sous-vue est maintenant située exactement dans son origine parent:

Alors, vous aimez "ok, je voulais seulement centrer mon point de vue sur le point de vue de mes parents, quel est le problème?" eh bien, ce n'est pas grave, vous avez juste besoin de "traduire" le point central parent qui est pris de son cadre au centre des limites du parent en faisant ceci:

subSubView.center = subView.convertPoint(subView.center, fromView: subSubView);

Vous lui dites en fait "prenez le centre de vue des parents et convertissez-le en monde subSubView".

Et vous obtiendrez ce résultat:

J'utiliserais:

self.childView.center = CGPointMake(CGRectGetMidX(self.parentView.bounds),
                                    CGRectGetMidY(self.parentView.bounds));

J'aime utiliser les CGRectoptions ...

SWIFT 3:

self.childView.center = CGPoint(x: self.parentView.bounds.midX,
                                        y: self.parentView.bounds.midY);

1. Si vous avez activé la mise en page automatique:

• Conseil: pour centrer une vue sur une autre vue avec mise en page automatique, vous pouvez utiliser le même code pour deux vues partageant au moins une vue parent.

Tout d'abord désactiver la redimensionnement automatique des vues enfants

UIView *view1, *view2;
[childview setTranslatesAutoresizingMaskIntoConstraints:NO];

1. Si vous êtes UIView + Autolayout ou Purelayout :

   [view1 autoAlignAxis:ALAxisHorizontal toSameAxisOfView:view2];
   [view1 autoAlignAxis:ALAxisVertical toSameAxisOfView:view2];

2. Si vous n'utilisez que des méthodes de mise en page automatique de niveau UIKit:

   [view1 addConstraints:({
       @[ [NSLayoutConstraint
          constraintWithItem:view1
          attribute:NSLayoutAttributeCenterX
          relatedBy:NSLayoutRelationEqual
          toItem:view2
          attribute:NSLayoutAttributeCenterX
          multiplier:1.f constant:0.f],
   
          [NSLayoutConstraint
           constraintWithItem:view1
           attribute:NSLayoutAttributeCenterY
           relatedBy:NSLayoutRelationEqual
           toItem:view2
           attribute:NSLayoutAttributeCenterY
           multiplier:1.f constant:0.f] ];
   })];

2. Sans mise en page automatique:

Je préfère:

UIView *parentView, *childView;
[childView setFrame:({
    CGRect frame = childView.frame;

    frame.origin.x = (parentView.frame.size.width - frame.size.width) / 2.0;
    frame.origin.y = (parentView.frame.size.height - frame.size.height) / 2.0;

    CGRectIntegral(frame);
})];

Le moyen le plus simple:

child.center = parent.center

Réglez ce masque de redimensionnement automatique sur votre vue intérieure.

Avec IOS9, vous pouvez utiliser l'API d'ancrage de mise en page.

Le code ressemblerait à ceci:

childview.centerXAnchor.constraintEqualToAnchor(parentView.centerXAnchor).active = true
childview.centerYAnchor.constraintEqualToAnchor(parentView.centerYAnchor).active = true

L'avantage de ceci par rapport à CGPointMakeou CGRectest qu'avec ces méthodes, vous définissez le centre de la vue sur une constante, mais avec cette technique, vous définissez une relation entre les deux vues qui durera pour toujours, quelle que soit la façon dont les parentviewchangements.

Assurez-vous simplement avant de faire ceci:

        self.view.addSubview(parentView)
        self.view.addSubView(chidview)

et pour définir le translatesAutoresizingMaskIntoConstraintsfor each view sur false.

Cela empêchera les plantages et la mise en page automatique d'interférer.

Vous pouvez utiliser

yourView.center = CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds))

Et dans Swift 3.0

yourView.center = CGPoint(x: superview.bounds.midX, y: superview.bounds.midY)

Utiliser le même centre dans la vue et la sous-vue est le moyen le plus simple de le faire. Tu peux faire quelque chose comme ça,

UIView *innerView = ....;
innerView.view.center = self.view.center;
[self.view addSubView:innerView];

Une autre solution avec PureLayout utilisant autoCenterInSuperview.

// ...
UIView *innerView = [UIView newAutoLayoutView];
innerView.backgroundColor = [UIColor greenColor];
[innerView autoSetDimensionsToSize:CGSizeMake(100, 30)];

[outerview addSubview:innerView];

[innerView autoCenterInSuperview];

Voici à quoi ça ressemble:

En c # ou Xamarin.ios, nous pouvons utiliser comme ceci

imageView.Center = nouveau CGPoint (tempView.Frame.Size.Width / 2, tempView.Frame.Size.Height / 2);

J'utiliserais:

child.center = CGPointMake(parent.bounds.height / 2, parent.bounds.width / 2)

C'est simple, court et doux. Si vous utilisez la réponse de @ Hejazi ci-dessus et parent.centerest réglé sur autre chose que (0,0)votre sous-vue ne sera pas centrée!

func callAlertView() {

    UIView.animate(withDuration: 0, animations: {
        let H = self.view.frame.height * 0.4
        let W = self.view.frame.width * 0.9
        let X = self.view.bounds.midX - (W/2)
        let Y = self.view.bounds.midY - (H/2)
        self.alertView.frame = CGRect(x:X, y: Y, width: W, height: H)
        self.alertView.layer.borderWidth = 1
        self.alertView.layer.borderColor = UIColor.red.cgColor
        self.alertView.layer.cornerRadius = 16
        self.alertView.layer.masksToBounds = true
        self.view.addSubview(self.alertView)

    })


}// calculation works adjust H and W according to your requirement