Cacao: Quelle est la différence entre le cadre et les limites?

UIView et de ses sous-classes ont toutes les propriétés frame et bounds. Quelle est la différence?

La compréhension image macoscope.com/blog/understanding-frame
pour moi la plus concise explication est ici: videos.raywenderlich.com/courses/99-scroll-view-school/lessons/...
Il n'y a rien concise à environ 2:30 de la vidéo. Je peux lire une phrase ou deux beaucoup plus rapide que 2:30.
Pour moi, c'est beaucoup plus clair si je pense que de cette façon: Frame = Limites & Position

InformationsquelleAutor mk12 | 2009-07-31

864

La limites d'un UIView est le rectangle, exprimée en position (x,y) et la taille (largeur,hauteur) par rapport à son propre système de coordonnées (0,0).

La cadre d'un UIView est le rectangle, exprimée en position (x,y) et la taille (largeur,hauteur) par rapport à la superview elle est contenue à l'intérieur.

Alors, imaginez un point de vue qui a une taille de 100x100 (largeur x hauteur) positionné à 25,25 (x,y) de ses superview. Le code suivant affiche ce point de vue de limites et le cadre:
```
//This method is in the view controller of the superview
- (void)viewDidLoad {
    [super viewDidLoad];

    NSLog(@"bounds.origin.x: %f", label.bounds.origin.x);
    NSLog(@"bounds.origin.y: %f", label.bounds.origin.y);
    NSLog(@"bounds.size.width: %f", label.bounds.size.width);
    NSLog(@"bounds.size.height: %f", label.bounds.size.height);

    NSLog(@"frame.origin.x: %f", label.frame.origin.x);
    NSLog(@"frame.origin.y: %f", label.frame.origin.y);
    NSLog(@"frame.size.width: %f", label.frame.size.width);
    NSLog(@"frame.size.height: %f", label.frame.size.height);
}
```
Et la sortie de ce code est:
```
bounds.origin.x: 0
bounds.origin.y: 0
bounds.size.width: 100
bounds.size.height: 100

frame.origin.x: 25
frame.origin.y: 25
frame.size.width: 100
frame.size.height: 100
```
Donc, nous pouvons voir que dans les deux cas, la largeur et la hauteur de la vue est la même, peu importe si nous sommes à la recherche à des limites ou le cadre. Ce qui est différent est la x,y de positionnement de la vue. Dans le cas de l'limites, les coordonnées x et y sont à 0,0 que ces coordonnées sont relatives à l'affichage lui-même. Cependant, le cadre coordonnées x et y sont relatives à la position de la vue dans la vue parent (qui nous l'avons dit plus tôt était à 25,25).

Il y a aussi un belle présentation qui couvre UIViews. Voir les diapositives 1 à 20, qui, non seulement d'expliquer la différence entre les images et les limites mais aussi de montrer des exemples visuels.
- Afin de ne pas l'x,y pour les limites toujours être 0,0 depuis son l'emplacement de l'objet dans... lui-même. Ou pourriez-vous donner un scénario où il ne serait pas?
- Autant que je sache, l'origine de l'limites seront toujours 0,0
- En fait, les limites.l'origine peut être quelque chose de plus 0,0. Utilisation setBoundsOrigin: pour déplacer/traduire l'origine. Voir "Vue de la Géométrie" dans l'option "voir le Guide de Programmation pour le Cacao" pour plus d'info.
- UIScrollView est un exemple où les limites peuvent shift pour afficher un contenu différent de régions à l'intérieur d'une vue.
- Une petite pointe à l'aide de NSStringFromCGRect pouvez enregistrer un peu de temps pour vous connecter rects.
- Le point de vue de l'image contiendra toujours ses limites complètement. la Plupart du temps, la taille de l'image correspond à la limite de la taille, mais pas toujours. Par exemple, lors de la rotation de l'image grandit donc il peut contenir les limites. Taille de l'image est égale à bornes de taille lorsque les limites sont à un angle de rotation de 0, 90, 180 et 270. Taille de l'image est plus grande que les limites de taille lorsque les limites sont à tout autre angle.
- Ne devrait-ce pas répondre à contenir des valeurs avant de rotation et après la rotation ? Ceci pourrait expliquer en quelque sorte la façon de limites.la taille peut différer de l'image.taille (L'image.taille plus grand)
- Voici le lien pour Afficher la Géométrie. C'est une page de documentation pour Mac OS X. la version iOS de "Voir le Guide de Programmation" ne pas avoir une page nommée Vue de la Géométrie; il est expliqué dans la section Vue de la Géométrie et Systèmes de Coordonnées.
- Je suis en train de lire ce presque 5 ans plus tard et qui est probablement le plus utile que j'ai jamais lu. Merci beaucoup pour ce raccourci.
- quand vous dites que les limites peuvent changer. Entendez-vous les limites de la scrollView soi ou les limites de son contentView changement?
InformationsquelleAutor shek
590

Réponse Courte

cadre = vue de l'emplacement et de la taille à l'aide de la parent de la vue du système de coordonnées
- Important: le fait de placer le point de vue du parent
limites = vue de l'emplacement et de la taille à l'aide de son propre système de coordonnées
- Important: le fait de placer le point de vue du contenu ou des sous-vues à l'intérieur de lui-même
Réponse Détaillée

Pour m'aider à me rappeler cadre, je pense un cadre photo sur un mur. Le cadre photo est comme la frontière de vue. Je peux accrocher la photo où je veux sur le mur. De la même manière, je peux mettre une vue d'où je veux à l'intérieur d'un parent de la vue (aussi appelé superview). La vue parent, c'est comme le mur. L'origine du système de coordonnées dans iOS est en haut à gauche. Nous pouvons mettre notre point de vue à l'origine de la superview par paramétrage de l'affichage du bloc de coordonnées x-y (0, 0), qui est comme la pendaison de notre image dans le très haut et à gauche du mur. Pour le déplacer à droite, augmentation de x, pour le faire descendre augmentation de y.

Pour m'aider à me rappeler limites, je pense un terrain de basket où, parfois, le basket-ball est frappé en dehors des limites. Vous êtes dribbler le ballon sur tout le terrain de basket, mais vous n'avez pas vraiment où la cour elle-même. Il pourrait être dans une salle de gym ou à l'extérieur, à l'école secondaire, ou en face de votre maison. Il n'a pas d'importance. Vous voulez juste jouer au basket. De la même manière, le système de coordonnées de vue de limites se soucie uniquement de la vue elle-même. Il ne sait rien au sujet d'où la vue est situé dans la vue parent. Les limites origine (point (0, 0) par défaut) est le coin supérieur gauche de la vue. Tous les sous-vues que ce point de vue a sont énoncées en ce qui concerne ce point. C'est comme prendre le basket-ball à l'avant gauche de la cour.

Maintenant la confusion vient lorsque vous essayez de comparer de cadre et de limites. Il en fait n'est pas aussi mauvaise qu'il n'y parait au premier abord, cependant. Nous allons utiliser quelques photos pour nous aider à comprendre.

Cadre vs Limites

Dans la première photo, sur la gauche, nous avons un point de vue qui est situé en haut à gauche de la vue parente. Le rectangle jaune représente le point de vue de l'image. Sur la droite, nous voyons le point de vue nouveau, mais cette fois la vue parent n'est pas montré. C'est parce que les limites ne sais pas à propos de la vue parent. Le rectangle vert représente le point de vue de limites. Le red dot dans les deux images représente le origine de l'image ou de limites.
```
Frame
    origin = (0, 0)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130
```
De sorte que le cadre et les limites ont été exactement la même que l'image. Regardons un exemple de cas où elles sont différentes.
```
Frame
    origin = (40, 60)  //That is, x=40 and y=60
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130
```
De sorte que vous pouvez voir que le fait de changer les coordonnées x et y de l'image se déplace dans la vue parent. Mais le contenu de la vue elle-même semble toujours exactement la même. Les limites n'ont aucune idée que quelque chose est différent.

Jusqu'à maintenant, la largeur et la hauteur à la fois le cadre et les limites ont été exactement la même. Ce n'est pas toujours vrai, cependant. Regardez ce qui se passe si nous pivoter la vue 20 degrés dans le sens horaire. (La Rotation est effectuée à l'aide de transformations. Voir le la documentation et ces vue et couche exemples pour plus d'informations.)
```
Frame
    origin = (20, 52)  //These are just rough estimates.
    width = 118
    height = 187

Bounds 
    origin = (0, 0)
    width = 80
    height = 130
```
Vous pouvez voir que les limites sont toujours les mêmes. Ils ne savent toujours pas tout ce qui s'est passé! Le cadre des valeurs ont changé, cependant.

Maintenant, il est un peu plus facile de voir la différence entre le cadre et les limites, n'est-ce pas? L'article Vous N'aurez Probablement pas Comprendre les cadres et les limites définit un point de vue image comme

...la plus petite boîte englobante de ce point de vue à l'égard de ses parents
système de coordonnées, y compris d'éventuelles transformations appliquées à ce point de vue.

Il est important de noter que si vous transformez vue, le cadre devient indéfini. Donc en fait, le cadre jaune que j'ai dessiné autour de la rotation de vert de limites dans l'image ci-dessus n'a jamais existe. Cela signifie que si vous faites pivoter, redimensionner ou faire autre transformation, alors vous ne devriez pas utiliser le cadre des valeurs de plus. Vous pouvez toujours utiliser les limites des valeurs, si. La Pomme docs en garde:

Important: Si une vue transform propriété ne contient pas l'identité de transformer le cadre de ce point de vue n'est pas défini et sont donc les
les résultats de son d'un redimensionnement automatique des comportements.

Plutôt malheureux, sur le d'un redimensionnement automatique.... Il y a quelque chose que vous pouvez faire, cependant.

La Pomme docs de l'état:

Lors de la modification de la transform propriété de votre point de vue, tous les
des transformations sont effectuées par rapport au point central de la
vue.

Donc si vous avez besoin de déplacer un point de vue autour de la mère, après une transformation qui a été fait, vous pouvez le faire en modifiant le view.center coordonnées. Comme frame, center utilise le système de coordonnées de la vue parent.

Ok, débarrassons-nous de notre rotation, et de se concentrer sur les limites. Jusqu'à présent les limites de l'origine qui est toujours resté à (0, 0). Il n'est pas nécessaire, cependant. Que faire si notre point de vue a un grand sous-vue qui est trop grand pour afficher tous à la fois? Nous allons faire un UIImageView avec une grande image. Voici notre deuxième image à partir de ci-dessus à nouveau, mais cette fois nous pouvons voir ce que l'ensemble du contenu de notre point de vue de la sous-vue ressemblerait.
```
Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130
```
Seulement le coin supérieur gauche de l'image peut s'adapter à l'intérieur de la vue de limites. Maintenant, regardez ce qui se passe si on change les limites " de l'origine des coordonnées.
```
Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (280, 70)
    width = 80
    height = 130
```
Le cadre n'a pas été déplacé dans le superview, mais le contenu à l'intérieur du cadre a changé parce que l'origine de l'limites rectangle commence à une partie différente de la vue. C'est l'idée derrière une UIScrollView et il est sous-classes (par exemple, un UITableView). Voir La Compréhension UIScrollView pour plus d'explication.

Quand utiliser le cadre et quand utiliser les limites

Depuis frame concerne un point de vue de l'emplacement de sa vue parent, vous l'utilisez lorsque vous faites changements extérieurs, comme le changement de sa largeur ou de trouver la distance entre la vue et le haut de la vue parente.

Utiliser le bounds lorsque vous faites vers l'intérieur les changements, comme le dessin des choses ou de l'organisation des sous-vues au sein de la vue. Également utiliser le terrain pour obtenir la taille de la vue si vous avez fait quelques transfomation sur elle.

Des Articles pour la recherche:

Apple docs
Liées StackOverflow questions
D'autres ressources
Pratiquer vous-même

En plus de lire les articles ci-dessus, il m'aide beaucoup pour faire une application de test. Vous voudrez peut-être essayer de faire quelque chose de similaire. (J'ai eu l'idée de ce cours vidéo mais malheureusement, il n'est pas libre).

Voici le code pour votre référence:
```
import UIKit
class ViewController: UIViewController {
@IBOutlet weak var myView: UIView!
//Labels
@IBOutlet weak var frameX: UILabel!
@IBOutlet weak var frameY: UILabel!
@IBOutlet weak var frameWidth: UILabel!
@IBOutlet weak var frameHeight: UILabel!
@IBOutlet weak var boundsX: UILabel!
@IBOutlet weak var boundsY: UILabel!
@IBOutlet weak var boundsWidth: UILabel!
@IBOutlet weak var boundsHeight: UILabel!
@IBOutlet weak var centerX: UILabel!
@IBOutlet weak var centerY: UILabel!
@IBOutlet weak var rotation: UILabel!
//Sliders
@IBOutlet weak var frameXSlider: UISlider!
@IBOutlet weak var frameYSlider: UISlider!
@IBOutlet weak var frameWidthSlider: UISlider!
@IBOutlet weak var frameHeightSlider: UISlider!
@IBOutlet weak var boundsXSlider: UISlider!
@IBOutlet weak var boundsYSlider: UISlider!
@IBOutlet weak var boundsWidthSlider: UISlider!
@IBOutlet weak var boundsHeightSlider: UISlider!
@IBOutlet weak var centerXSlider: UISlider!
@IBOutlet weak var centerYSlider: UISlider!
@IBOutlet weak var rotationSlider: UISlider!
//Slider actions
@IBAction func frameXSliderChanged(sender: AnyObject) {
myView.frame.origin.x = CGFloat(frameXSlider.value)
updateLabels()
}
@IBAction func frameYSliderChanged(sender: AnyObject) {
myView.frame.origin.y = CGFloat(frameYSlider.value)
updateLabels()
}
@IBAction func frameWidthSliderChanged(sender: AnyObject) {
myView.frame.size.width = CGFloat(frameWidthSlider.value)
updateLabels()
}
@IBAction func frameHeightSliderChanged(sender: AnyObject) {
myView.frame.size.height = CGFloat(frameHeightSlider.value)
updateLabels()
}
@IBAction func boundsXSliderChanged(sender: AnyObject) {
myView.bounds.origin.x = CGFloat(boundsXSlider.value)
updateLabels()
}
@IBAction func boundsYSliderChanged(sender: AnyObject) {
myView.bounds.origin.y = CGFloat(boundsYSlider.value)
updateLabels()
}
@IBAction func boundsWidthSliderChanged(sender: AnyObject) {
myView.bounds.size.width = CGFloat(boundsWidthSlider.value)
updateLabels()
}
@IBAction func boundsHeightSliderChanged(sender: AnyObject) {
myView.bounds.size.height = CGFloat(boundsHeightSlider.value)
updateLabels()
}
@IBAction func centerXSliderChanged(sender: AnyObject) {
myView.center.x = CGFloat(centerXSlider.value)
updateLabels()
}
@IBAction func centerYSliderChanged(sender: AnyObject) {
myView.center.y = CGFloat(centerYSlider.value)
updateLabels()
}
@IBAction func rotationSliderChanged(sender: AnyObject) {
let rotation = CGAffineTransform(rotationAngle: CGFloat(rotationSlider.value))
myView.transform = rotation
updateLabels()
}
private func updateLabels() {
frameX.text = "frame x = \(Int(myView.frame.origin.x))"
frameY.text = "frame y = \(Int(myView.frame.origin.y))"
frameWidth.text = "frame width = \(Int(myView.frame.width))"
frameHeight.text = "frame height = \(Int(myView.frame.height))"
boundsX.text = "bounds x = \(Int(myView.bounds.origin.x))"
boundsY.text = "bounds y = \(Int(myView.bounds.origin.y))"
boundsWidth.text = "bounds width = \(Int(myView.bounds.width))"
boundsHeight.text = "bounds height = \(Int(myView.bounds.height))"
centerX.text = "center x = \(Int(myView.center.x))"
centerY.text = "center y = \(Int(myView.center.y))"
rotation.text = "rotation = \((rotationSlider.value))"
}
}
```
- Il semble lié à la largeur et la hauteur est redondante et une "origine" de la propriété aurait été suffisant (avec Flash).
- utilisez limites ", comme le dessin de choses ou de l'organisation des sous-vues à l'intérieur de la vue". vous voulez dire que si j'ai un viewController qui a deux boutons je doit placer les boutons à l'aide de la vue 'limites' de la viewController?! J'ai toujours utilisé le point de vue de l'image...
- Je suis un peu rouillé sur mon iOS compétences depuis, j'ai travaillé sur Android pour la dernière année. Je crois que la vue de la racine d'un point de Vue Contrôleur remplit l'écran, de sorte que son cadre et les limites doivent être la même.
- Créé github.com/maniramezan/FrameVsBounds.git des pensions de base sur l'exemple d'application est donné ici pour aider à mieux en comprendre bounds vs frame de vue.
InformationsquelleAutor Suragch

essayez d'exécuter le code ci-dessous

- (void)viewDidLoad {
[super viewDidLoad];
UIWindow *w = [[UIApplication sharedApplication] keyWindow];
UIView *v = [w.subviews objectAtIndex:0];
NSLog(@"%@", NSStringFromCGRect(v.frame));
NSLog(@"%@", NSStringFromCGRect(v.bounds));
}

la sortie de ce code est:

cas de l'appareil orientation Portrait

{{0, 0}, {768, 1024}}
{{0, 0}, {768, 1024}}

cas de l'appareil orientation Paysage

{{0, 0}, {768, 1024}}
{{0, 0}, {1024, 768}}

évidemment, vous pouvez voir la différence entre le cadre et les limites

ce n'est pas un vrai plus (iOS 8)
Pourquoi?
stackoverflow.com/questions/24150359/...

InformationsquelleAutor tristan

13

La cadre est le rectangle qui définit la UIView avec l'égard de ses superview.

La limites rect est la plage de valeurs qui définissent NSView du système de coordonnées.

c'est à dire quoi que ce soit dans ce rectangle sera afficher dans le UIView.

InformationsquelleAutor jorik
9

cadre est à l'origine (en haut à gauche) et de la taille de la vue dans son super vue du système de coordonnées , cela signifie que vous pouvez traduire le point de vue dans son super vue en changeant l'image d'origine , limites sur l'autre main est la taille et l'origine de son propre système de coordonnées , de sorte que, par défaut, les limites de l'origine est (0,0).

la plupart du temps, le cadre et les limites sont congruents , mais si vous avez une vue de trame ((140,65),(200,250)) et les limites ((0,0),(200,250))par exemple, et la vue était incliné de sorte qu'il se dresse sur son coin inférieur droit , puis les limites seront toujours ((0,0),(200,250)) , mais le cadre n'est pas .

le cadre sera le plus petit rectangle qui encapsule/entoure la vue , de sorte que le cadre (comme sur la photo) sera ((140,65),(320,320)).

une autre différence est, par exemple, si vous avez un superView dont les limites ((0,0),(200,200)) et ce superView a une sous-vue dont la trame est ((20,20),(100,100)) et que vous avez modifié le superView limites de ((20,20),(200,200)) , ensuite, la sous-vue image sera toujours ((20,20),(100,100)) mais offseted par (20,20) en raison de ses superview système de coordonnées a été offseted par (20,20).

j'espère que cela aide quelqu'un.
- concernant le dernier paragraphe: subView cadre est relative à la superView. la modification de la superView limites à tout, ne fera pas le subView origine coïncide avec superView.
InformationsquelleAutor m.eldehairy
4

Cadre de son par rapport à son SuperView alors que les Limites par rapport à son NSView.

Exemple:X=40,Y=60.Contient également 3 points de Vue.Ce Schéma vous montre idée claire.

InformationsquelleAutor RAGHUNATH
1

Les réponses ci-dessus ont très bien expliqué la différence entre les Limites et les Cadres.

Limites : Un point de vue de la Taille et de l'Emplacement que par son propre système de coordonnées.

Image : vue de la taille et de l'Emplacement par rapport à son SuperView.

Ensuite, il ya la confusion que dans le cas de Limites X,Y aura toujours des "0". Ce n'est pas vrai. Ceci peut être compris dans UIScrollView et UICollectionView ainsi.

Lorsque les limites " x, y ne sont pas 0.

Imaginons que nous avons un UIScrollView. Nous avons mis en place la pagination. Le UIScrollView a 3 pages et de son ContentSize la largeur est de trois fois la Largeur de l'Écran (à supposer ScreenWidth est de 320). La hauteur est constante (à supposer 200).
```
scrollView.contentSize = CGSize(x:320*3, y : 200)
```
Ajouter trois UIImageViews comme des sous-vues et de garder un œil sur le x valeur de cadre
```
let imageView0 = UIImageView.init(frame: CGRect(x:0, y: 0 , width : scrollView.frame.size.width, height : scrollView.frame.size.height))
let imageView1 :  UIImageView.init( frame: CGRect(x:320, y: 0 , width : scrollView.frame.size.width, height : scrollView.frame.size.height))
let imageView2 :  UIImageView.init(frame: CGRect(x:640, y: 0 , width : scrollView.frame.size.width, height : scrollView.frame.size.height))
scrollView.addSubview(imageView0)
scrollView.addSubview(imageView0)
scrollView.addSubview(imageView0)
```
1. Page 0:
  Lorsque le ScrollView est à 0 Page les Limites seront
  (x:0,y:0, largeur : 320, hauteur : 200)
2. Page 1:
  Faites défiler et passer à la Page 1.
  
  Maintenant, les limites seront (x:320,y:0, largeur : 320, hauteur : 200)
  Rappelez-vous, nous avons dit à l'égard de son propre Système de coordonnées. Alors maintenant, la "Partie Visible" de notre ScrollView a son "x" à 320. Regardez le cadre de imageView1.
3. Page 2:
  Faites défiler et passer à la Page 2
  Limites : (x:640,y:0, largeur : 320, hauteur : 200)
  De nouveau, prendre un coup d'oeil à l'image de imageView2
Même pour le cas de UICollectionView. Le moyen le plus facile à regarder collectionView est de faire défiler et de l'imprimer/journal de ses limites et vous aurez l'idée.

InformationsquelleAutor Muhammad Nayab
1

Toutes les réponses ci-dessus sont correctes et c'est mon point de vue sur ce:

À différencier entre le cadre et les limites des CONCEPTS développeur devrait lire:
1. par rapport à la superview (un parent) il est contenu dans l' = FRAME
2. par rapport à son propre système de coordonnées, détermine ses sous-vue de l'emplacement = LIMITES
"limites" est source de confusion car elle donne l'impression que les coordonnées de la position de la vue pour laquelle elle est définie. Mais ce sont dans les relations et ajusté en fonction de la hauteur des constantes.

InformationsquelleAutor Marina
0

frame = vue de l'emplacement et de la taille à l'aide de la vue parent le système de coordonnées de

limites = vue de l'emplacement et de la taille à l'aide de son propre système de coordonnées

Une des pistes de vue sa taille et son emplacement à l'aide de deux rectangles: un rectangle de cadre et de limites rectangle. Le cadre rectangle définit le point de vue de l'emplacement et la taille dans le superview à l'aide de la superview du système de coordonnées. Les limites rectangle définit à l'intérieur du système de coordonnées qui est utilisé lors de l'élaboration du contenu de la vue, y compris l'origine et de la mise à l'échelle. La Figure 2-1 montre la relation entre le cadre rectangle, sur la gauche, et les limites d'un rectangle, sur la droite.”

En bref, le cadre est superview l'idée d'un point de vue, et les limites est le point de vue propre idée. Le fait d'avoir plusieurs systèmes de coordonnées, une pour chaque point de vue, est une partie de la vue de la hiérarchie.

InformationsquelleAutor Xab Ion