Ramka UIView, granice i środek

Chciałbym wiedzieć, jak korzystać z tych właściwości we właściwy sposób.

Jak rozumiem, framemożna go używać z kontenera widoku, który tworzę. Ustawia pozycję widoku względem widoku kontenera. Ustawia także rozmiar tego widoku.

Również centermoże być używany z pojemnika widoku tworzę. Ta właściwość zmienia pozycję widoku względem jego kontenera.

Wreszcie boundsodnosi się do samego widoku. Zmienia obszar rysowania widoku.

Czy możesz podać więcej informacji na temat relacji między framei bounds? Co o clipsToBoundsi masksToBoundswłaściwości?

Ponieważ pytanie, które zadałem, było wielokrotnie widziane, udzielę szczegółowej odpowiedzi na to pytanie. Zmodyfikuj go, jeśli chcesz dodać więcej poprawnych treści.

Najpierw podsumowanie pytania: ramy, granice i centrum oraz ich relacje.

Ramka Widok frame( CGRect) to pozycja jego prostokąta w układzie superviewwspółrzędnych. Domyślnie zaczyna się w lewym górnym rogu.

Granice Widok bounds( CGRect) wyraża prostokąt widoku we własnym układzie współrzędnych.

Środek A centerjest CGPointwyrażony w kategoriach superviewukładu współrzędnych i określa położenie dokładnie środkowego punktu widoku.

Wzięte z pozycji UIView + są to relacje (nie działają w kodzie, ponieważ są nieformalnymi równaniami) wśród poprzednich właściwości:

• frame.origin = center - (bounds.size / 2.0)

• center = frame.origin + (bounds.size / 2.0)

• frame.size = bounds.size

UWAGA: Te relacje nie mają zastosowania, jeśli widoki są obracane. Aby uzyskać więcej informacji, zasugeruję, abyś spojrzał na poniższe zdjęcie zrobione z The Kitchen Drawer na podstawie kursu Stanford CS193p . Kredyty trafiają do @ Rabarbaru .

Korzystanie z frameumożliwia zmianę położenia i / lub zmianę rozmiaru widoku w jego obrębie superview. Zwykle można go użyć superviewna przykład podczas tworzenia określonego widoku podrzędnego. Na przykład:

// view1 will be positioned at x = 30, y = 20 starting the top left corner of [self view]
// [self view] could be the view managed by a UIViewController
UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

Kiedy potrzebujesz współrzędnych do rysowania w środku view, zwykle się do niego odwołujesz bounds. Typowym przykładem może być narysowanie w viewwidoku częściowym jako wstawka pierwszego. Narysowanie rzutu podrzędnego wymaga znajomości boundssuperwizji. Na przykład:

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(50.0f, 50.0f, 400.0f, 400.0f)];    
view1.backgroundColor = [UIColor redColor];

UIView* view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];    
view2.backgroundColor = [UIColor yellowColor];

[view1 addSubview:view2];

Różne zachowania występują po zmianie boundswidoku. Na przykład, jeśli zmienisz bounds size, framezmiany (i odwrotnie). Zmiana następuje wokół centerwidoku. Użyj poniższego kodu i zobacz, co się stanie:

NSLog(@"Old Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"Old Center %@", NSStringFromCGPoint(view2.center));    

CGRect frame = view2.bounds;
frame.size.height += 20.0f;
frame.size.width += 20.0f;
view2.bounds = frame;

NSLog(@"New Frame %@", NSStringFromCGRect(view2.frame));
NSLog(@"New Center %@", NSStringFromCGPoint(view2.center));

Ponadto, jeśli zmienisz bounds origin, zmienisz originjego wewnętrzny układ współrzędnych. Domyślnie originjest w (0.0, 0.0)(lewy górny róg). Na przykład, jeśli zmienisz origindla view1widać (komentarz poprzedni kod, jeśli chcesz), że teraz w lewym górnym rogu na view2dotknie view1jeden. Motywacja jest dość prosta. Mówisz view1, że jej lewym górnym rogu znajduje się teraz w położeniu (20.0, 20.0), ale ponieważ view2„s frame originzaczyna się od (20.0, 20.0), będą zbieżne.

CGRect frame = view1.bounds;
frame.origin.x += 20.0f;
frame.origin.y += 20.0f;
view1.bounds = frame; 

originReprezentuje view„S pozycję w obrębie swojego superviewale określa położenie boundsśrodka.

Wreszcie boundsi originnie są powiązanymi pojęciami. Oba pozwalają na wyprowadzenie framewidoku (patrz poprzednie równania).

Studium przypadku View1

Oto, co dzieje się podczas korzystania z następującego fragmentu kodu.

UIView* view1 = [[UIView alloc] initWithFrame:CGRectMake(30.0f, 20.0f, 400.0f, 400.0f)];
view1.backgroundColor = [UIColor redColor];

[[self view] addSubview:view1];

NSLog(@"view1's frame is: %@", NSStringFromCGRect([view1 frame]));
NSLog(@"view1's bounds is: %@", NSStringFromCGRect([view1 bounds]));
NSLog(@"view1's center is: %@", NSStringFromCGPoint([view1 center]));

Względny obraz.

To zamiast tego dzieje się, jeśli zmienię [self view]granice w następujący sposób.

// previous code here...
CGRect rect = [[self view] bounds];
rect.origin.x += 30.0f;
rect.origin.y += 20.0f;
[[self view] setBounds:rect];

Względny obraz.

Mówisz tutaj, [self view]że jego lewy górny róg jest teraz w pozycji (30,0, 20,0), ale ponieważ view1początek ramki zaczyna się od (30,0, 20,0), będą one zbieżne.

Dodatkowe odniesienia (w razie potrzeby zaktualizuj o inne odniesienia)

• Geometria UIView
• Ramki i granice UIView

Informacje clipsToBounds(źródłowy dokument Apple)

Ustawienie tej wartości na TAK powoduje przycięcie widoków podrzędnych do granic odbiornika. Jeśli ustawione na NIE, widoki podrzędne, których ramki wykraczają poza widoczne granice odbiornika, nie są przycinane. Wartość domyślna to NIE.

Innymi słowy, jeśli widok framejest, (0, 0, 100, 100)a jego widok podrzędny jest (90, 90, 30, 30), zobaczysz tylko część tego widoku podrzędnego. Ten ostatni nie przekroczy granic widoku nadrzędnego.

masksToBoundsjest równoważne z clipsToBounds. Zamiast UIViewtego właściwość ta jest stosowana do CALayer. Pod maską clipsToBoundsnazywa masksToBounds. W celu uzyskania dalszych odniesień zapoznaj się z relacją między klipami UIView clipsToBounds i CALayer masksToBounds? .

To pytanie ma już dobrą odpowiedź, ale chcę je uzupełnić kilkoma zdjęciami. Moja pełna odpowiedź jest tutaj.

Aby pomóc mi zapamiętać ramkę , myślę o ramce na ścianie . Podobnie jak obraz można przenieść w dowolne miejsce na ścianie, układ współrzędnych ramki widoku jest superwizorem. (ściana = superview, frame = view)

Aby pomóc mi zapamiętać granice , myślę o granicach boiska do koszykówki . Koszykówka jest gdzieś na boisku, tak jak układ współrzędnych granic widoku znajduje się w samym widoku. (boisko = widok, koszykówka / zawodnicy = treść w widoku)

View.center , podobnie jak ramka, również znajduje się we współrzędnych superwizji.

Frame vs Bounds - Przykład 1

Żółty prostokąt reprezentuje ramkę widoku. Zielony prostokąt reprezentuje granice widoku. Czerwona kropka na obu obrazach reprezentuje początek ramki lub granic w ich układach współrzędnych.

Frame
    origin = (0, 0)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Przykład 2

Frame
    origin = (40, 60)  // That is, x=40 and y=60
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Przykład 3

Frame
    origin = (20, 52)  // These are just rough estimates.
    width = 118
    height = 187

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Przykład 4

Jest to to samo, co w przykładzie 2, z tym wyjątkiem, że tym razem wyświetlana jest cała zawartość widoku, tak jakby wyglądał, gdyby nie został przycięty do granic widoku.

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (0, 0)
    width = 80
    height = 130

Przykład 5

Frame
    origin = (40, 60)
    width = 80
    height = 130

Bounds 
    origin = (280, 70)
    width = 80
    height = 130

Ponownie zobacz tutaj moją odpowiedź z dalszymi szczegółami.

Uważam, że ten obraz jest najbardziej pomocny w zrozumieniu ramki, granic itp.

Należy również pamiętać, że frame.size != bounds.sizepo obróceniu obrazu.

Myślę, że jeśli myślisz od samego początku CALayer, wszystko jest bardziej jasne.

Ramka nie jest tak naprawdę odrębną właściwością widoku ani warstwy, jest to właściwość wirtualna, obliczona na podstawie granic, pozycji ( UIViewcentrum) i transformacji.

Tak więc w zasadzie sposób, w jaki układ warstw / widoku jest tak naprawdę decydowany przez te trzy właściwości (i anchorPoint), i żadna z tych trzech właściwości nie zmieni żadnej innej właściwości, tak jak zmiana transformacji nie zmienia granic.

Istnieją bardzo dobre odpowiedzi ze szczegółowym wyjaśnieniem tego postu. Chciałbym tylko odnieść się do tego, że istnieje inne wyjaśnienie z wizualną reprezentacją znaczenia Frame, Bounds, Center, Transform, Bounds Origin w WWDC 2011 wideo Zrozumienie renderowania UIKit od @ 4: 22 do 20:10

Po przeczytaniu powyższych odpowiedzi dodam tutaj moje interpretacje.

Załóżmy, przeglądania stron internetowych, przeglądarka internetowa jest twój frame, który decyduje, gdzie i jak duży, aby pokazać stronę internetową. Scroller przeglądarki bounds.origindecyduje, która część strony zostanie wyświetlona.bounds.originjest trudny do zrozumienia. Najlepszym sposobem na nauczenie się jest tworzenie aplikacji z pojedynczym widokiem, próba modyfikacji tych parametrów i sprawdzenie, jak zmieniają się widoki podrzędne.

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.

UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(100.0f, 200.0f, 200.0f, 400.0f)];
[view1 setBackgroundColor:[UIColor redColor]];

UIView *view2 = [[UIView alloc] initWithFrame:CGRectInset(view1.bounds, 20.0f, 20.0f)];
[view2 setBackgroundColor:[UIColor yellowColor]];
[view1 addSubview:view2];

[[self view] addSubview:view1];

NSLog(@"Old view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"Old view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));

// Modify this part.
CGRect bounds = view1.bounds;
bounds.origin.x += 10.0f;
bounds.origin.y += 10.0f;

// incase you need width, height
//bounds.size.height += 20.0f;
//bounds.size.width += 20.0f;

view1.bounds = bounds;

NSLog(@"New view1 frame %@, bounds %@, center %@", NSStringFromCGRect(view1.frame), NSStringFromCGRect(view1.bounds), NSStringFromCGPoint(view1.center));
NSLog(@"New view2 frame %@, bounds %@, center %@", NSStringFromCGRect(view2.frame), NSStringFromCGRect(view2.bounds), NSStringFromCGPoint(view2.center));