Cacao: Quelle est la différence entre le cadre et les limites?
UIView et ses sous-classes ont toutes les propriétés frame et bounds. Quelle est la différence?
Les bornes d'un IView est le rectangle , exprimé par un emplacement (x, y) et taille (largeur, hauteur) par rapport à son propre système de coordonnées (0,0).
Le cadre d'un IView est le rectangle , exprimé par un emplacement (x, y) et la taille (largeur, hauteur) par rapport à la vue d'ensemble dans laquelle il est contenu.
Imaginez donc une vue de taille 100x100 (largeur x hauteur) positionnée à 25,25 (x, y) de sa vue d’ensemble. Le code suivant imprime les limites et le cadre de cette vue:
// 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
Ainsi, nous pouvons voir que dans les deux cas, la largeur et la hauteur de la vue sont les mêmes, que nous examinions les limites ou le cadre. Ce qui est différent, c’est le positionnement x, y de la vue. Dans le cas des limites, les coordonnées x et y sont à 0,0 car ces coordonnées sont relatives à la vue elle-même. Cependant, les coordonnées x et y du cadre sont relatives à la position de la vue dans la vue parente (ce que nous avions dit précédemment était 25,25).
Il y a aussi un super présentation qui couvre UIViews. Voir les diapositives 1 à 20 qui expliquent non seulement la différence entre les cadres et les limites, mais également des exemples visuels.
Réponse courte
frame = emplacement et taille d'une vue à l'aide du système de coordonnées de la vue parent
- Important pour: placer la vue dans le parent
bornes = emplacement et taille d'une vue à l'aide de de son propre système de coordonnées
- Important pour: placer le contenu de la vue ou des sous-vues en lui-même
Réponse détaillée
Pour m'aider à me souvenir du cadre , je pense à un cadre photo sur un mur Le cadre photo ressemble à la bordure d'une vue. Je peux accrocher la photo n'importe où sur le mur. De la même manière, je peux placer une vue n'importe où dans une vue parent (également appelée superview). La vue parent est comme le mur. L'origine du système de coordonnées dans iOS est en haut à gauche. Nous pouvons définir notre point de vue sur l'origine de la vue d'ensemble en définissant les coordonnées x-y du cadre de vue sur (0, 0), ce qui revient à suspendre notre image dans le coin très supérieur gauche du mur. Pour le déplacer vers la droite, augmentez x, pour le diminuer, augmentez y.
Pour m'aider à me souvenir des limites , je pense à un terrain de basket où parfois le ballon de basket est assommé . Vous dribblez la balle sur tout le terrain de basket, mais vous ne vous souciez pas vraiment de savoir où se trouve le terrain. Cela peut se faire dans un gymnase, à l’extérieur dans un lycée ou devant votre maison. Ça n'a pas d'importance. Vous voulez juste jouer au basket. De la même manière, le système de coordonnées pour les limites d'une vue ne concerne que la vue elle-même. Il ne sait rien de l'emplacement de la vue dans la vue parent. L'origine des limites (le point (0, 0) par défaut) correspond au coin supérieur gauche de la vue. Toutes les sous-vues associées à cette vue sont présentées par rapport à ce point. C'est comme porter le ballon de basket au coin avant gauche du court.
Maintenant, la confusion survient lorsque vous essayez de comparer le cadre et les limites. En réalité, ce n'est pas aussi grave qu'il y paraît au début. Utilisons quelques images pour nous aider à comprendre.
Cadre vs limites
Dans la première image à gauche, nous avons une vue située en haut à gauche de la vue parent. Le rectangle jaune représente le cadre de la vue. À droite, nous voyons à nouveau la vue, mais cette fois la vue parent n'est pas affichée. C'est parce que les limites ne connaissent pas la vue parent. Le rectangle vert représente les limites de la vue. Le point rouge dans les deux images représente l'origine du cadre ou des limites.
Frame
Origin = (0, 0)
width = 80
height = 130
Bounds
Origin = (0, 0)
width = 80
height = 130
Donc, le cadre et les limites étaient exactement les mêmes dans cette image. Regardons un exemple où ils sont différents.
Frame
Origin = (40, 60) // That is, x=40 and y=60
width = 80
height = 130
Bounds
Origin = (0, 0)
width = 80
height = 130
Ainsi, vous pouvez voir que le fait de changer les coordonnées x-y du cadre le déplace dans la vue parent. Mais le contenu de la vue elle-même est toujours identique. Les limites n'ont aucune idée que quelque chose est différent.
Jusqu'à présent, la largeur et la hauteur du cadre et des limites étaient exactement les mêmes. Ce n'est pas toujours vrai, cependant. Regardez ce qui se passe si nous faisons pivoter la vue de 20 degrés dans le sens des aiguilles d'une montre. (La rotation est effectuée à l'aide de transformations. Voir le documentation et ceux-ci view et exemples de calques 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 que rien n'est arrivé! Les valeurs du cadre ont toutes changé, cependant.
Maintenant, il est un peu plus facile de voir la différence entre frame et bounds, n'est-ce pas? L'article Vous ne comprenez probablement pas les cadres et les limites définit un cadre de vue comme
... la plus petite boîte englobante de cette vue en ce qui concerne son système de coordonnées parent, y compris les transformations appliquées à cette vue.
Il est important de noter que si vous transformez une vue, le cadre devient indéfini. Donc, en fait, le cadre jaune que j'ai dessiné autour des limites vertes pivotées dans l'image ci-dessus n'existe jamais. Cela signifie que si vous faites pivoter, redimensionnez ou effectuez une autre transformation, vous ne devriez plus utiliser les valeurs d'image. Vous pouvez toujours utiliser les valeurs des limites, cependant. Les documents Apple avertissent:
Important: Si la propriété
transformd'une vue ne contient pas la transformation d'identité, le cadre de cette vue n'est pas défini et les résultats de sa autoriser les comportements.
Plutôt malheureux en ce qui concerne le réajustage automatique ... Vous pouvez toutefois faire quelque chose.
L'état Apple de la documentation:
Lors de la modification de la propriété
transformde votre vue, toutes les transformations sont effectuées par rapport au point central de la vue.
Ainsi, si vous avez besoin de déplacer une vue dans le parent une fois la transformation effectuée, vous pouvez le faire en modifiant les coordonnées view.center. Comme frame, center utilise le système de coordonnées de la vue parent.
Ok, supprimons notre rotation et concentrons-nous sur les limites. Jusqu'ici, les limites d'origine sont toujours restées à (0, 0). Ce n'est pas nécessaire, cependant. Que se passe-t-il si notre vue a une grande sous-vue trop grande pour être affichée en une fois? Nous en ferons un UIImageView avec une grande image. Voici notre deuxième image d'en haut, mais cette fois, nous pouvons voir à quoi ressemblerait le contenu de la sous-vue de notre vue.
Frame
Origin = (40, 60)
width = 80
height = 130
Bounds
Origin = (0, 0)
width = 80
height = 130
Seul le coin supérieur gauche de l'image peut s'insérer dans les limites de la vue. Maintenant, regardez ce qui se passe si nous changeons les coordonnées d'origine des limites.
Frame
Origin = (40, 60)
width = 80
height = 130
Bounds
Origin = (280, 70)
width = 80
height = 130
Le cadre n'a pas bougé dans la vue d'ensemble, mais le contenu à l'intérieur du cadre a été modifié, car le rectangle Origine du contour commence à une autre partie de la vue. C’est toute l’idée qui se cache derrière un UIScrollView et ses sous-classes (par exemple, un UITableView). Voir Comprendre UIScrollView pour plus d'explications.
Quand utiliser frame et quand utiliser les bornes
Étant donné que frame relie l'emplacement d'une vue dans sa vue parent, vous l'utilisez pour effectuer des modifications externes , comme pour modifier sa largeur ou rechercher la distance entre la vue et le haut de sa vue parente.
Utilisez la bounds lorsque vous effectuez des modifications vers l'intérieur , comme pour dessiner des objets ou organiser des sous-vues dans la vue. Utilisez également les limites pour obtenir la taille de la vue si vous avez effectué une transformation.
Articles pour recherches ultérieures:
Apple docs
Questions connexes à StackOverflow
- cadre UIView, limites et centre
- cadre, limites, centre, origine de UIView, quand utiliser quoi?
- Taille "incorrecte" du cadre/de la fenêtre après réorientation sur l'iPhone
Autres ressources
- Vous ne comprenez probablement pas les cadres et les limites
- Principes de base iOS: cadres, limites et CGGeometry
- CS193p Lecture 5 - Vues, Dessin, Animation
Pratique toi
En plus de lire les articles ci-dessus, cela m'aide beaucoup de faire une application 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 ce n'est pas gratuit.)
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))"
}
}
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:
l'orientation de l'appareil de cas est Portrait
{{0, 0}, {768, 1024}}
{{0, 0}, {768, 1024}}
l'orientation de l'appareil de cas est Paysage
{{0, 0}, {768, 1024}}
{{0, 0}, {1024, 768}}
évidemment, vous pouvez voir la différence entre frame et bounds
Le frame est le rectangle qui définit UIView avec le respect de sa vue d'ensemble .
Le bounds rect est la plage de valeurs qui définit ce système de coordonnées de NSView.
c’est-à-dire que tout ce qui se trouve dans ce rectangle s’affiche réellement dans UIView.
frame est l'origine (coin supérieur gauche) et la taille de la vue dans le système de coordonnées de sa super vue, cela signifie que vous traduisez la vue dans sa super vue en modifiant le cadre Origine, limites d'autre part est la taille et l'origine dans son propre système de coordonnées, donc par défaut les limites d'origine est (0,0).
la plupart du temps, le cadre et les limites sont congruents, mais si vous avez une vue du cadre ((140,65), (200,250)) et des limites ((0,0), (200,250)) par exemple et que la vue était inclinée de sorte qu'il se trouve sur son coin inférieur droit, les limites seront toujours ((0,0), (200,250)), mais le cadre ne le sera pas.
le cadre sera le plus petit rectangle qui encapsule/entoure la vue, ainsi le cadre (comme sur la photo) sera ((140,65), (320,320)).
une autre différence est par exemple si vous avez une superView dont les limites sont ((0,0), (200,200)) et que cette superView a une sous-vue dont le cadre est ((20,20), (100,100)) et que vous avez modifié les limites de la superView ((20,20), (200,200)), le cadre de sous-vue sera immobile ((20,20), (100,100)) mais décalé de (20,20) car son système de coordonnées supérieur est décalé de (20, 20).
j'espère que cela aide quelqu'un.
Cadrez son relatif à son SuperView alors que Limites relative à son NSView.
Exemple: X = 40, Y = 60.Comprend également 3 vues.Ce diagramme montre une idée claire.
Toutes les réponses ci-dessus sont correctes et voici mon point de vue:
Pour différencier le cadre et les limites, le développeur CONCEPTS doit lire:
- par rapport à la vue supérieure (une vue parent), il est contenu dans = FRAME
- par rapport à son propre système de coordonnées, détermine son emplacement de sous-vue = BOUNDS
"bounds" est déroutant car il donne l'impression que les coordonnées sont la position de la vue pour laquelle il est défini. Mais ceux-ci sont en relations et ajustés en fonction des constantes de la trame.
Les réponses ci-dessus ont très bien expliqué la différence entre Bounds et Frames.
Limites: une taille et un emplacement de vue selon son propre système de coordonnées.
Cadre: taille et emplacement de la vue par rapport à son SuperView.
Alors il y a une confusion qui dans le cas de Bounds le X, Y sera toujours "0". Ce n'est pas vrai. Ceci peut également être compris dans UIScrollView et UICollectionView.
Lorsque les bornes 'x, y ne sont pas 0.
Supposons que nous avons un UIScrollView. Nous avons mis en place la pagination. UIScrollView a 3 pages et la largeur de ContentSize est trois fois la largeur de l'écran (supposons que la largeur de l'écran est de 320). La hauteur est constante (supposons 200).
scrollView.contentSize = CGSize(x:320*3, y : 200)
Ajoutez trois UIImageViews en tant que sous-vues et observez de près la valeur x du 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)
Page 0: Lorsque le ScrollView est à 0 page, les limites seront (x: 0, y: 0, largeur: 320, hauteur: 200)
Page 1: Faites défiler et aller à la page 1.
Maintenant les limites seront (x: 320, y: 0, largeur: 320, hauteur: 200) Rappelez-vous que nous avons dit en ce qui concerne son propre système de coordonnées. Alors maintenant, la "partie visible" de notre ScrollView a son "x" à 320. Regardez le cadre de imageView1.- Page 2: Faites défiler et aller à la page 2 Bounds: (x: 640, y: 0, largeur: 320, hauteur: 200) Encore une fois, jetez un oeil à l'image de imageView2
Idem pour le cas de UICollectionView. Le moyen le plus simple de regarder collectionView est de le faire défiler et d’imprimer/consigner ses limites et vous aurez l’idée.
frame = l'emplacement et la taille d'une vue à l'aide du système de coordonnées de la vue parent
bounds = l'emplacement et la taille d'une vue à l'aide de son propre système de coordonnées
Une vue suit sa taille et son emplacement à l'aide de deux rectangles: un rectangle à cadre et un rectangle à limites. Le rectangle du cadre définit l'emplacement et la taille de la vue dans la vue d'ensemble à l'aide de son système de coordonnées. Le rectangle de limites définit le système de coordonnées intérieur utilisé lors du dessin du contenu de la vue, y compris l'origine et la mise à l'échelle. La figure 2-1 montre la relation entre le rectangle du cadre, à gauche, et le rectangle des limites, à droite. ”
En bref, le cadre est l’idée de superview d’une vue, et les limites sont sa propre idée. Avoir plusieurs systèmes de coordonnées, un pour chaque vue, fait partie de la hiérarchie des vues.