iOS - Automatische Layouts
Auto-Layouts wurden in eingeführt iOS 6.0.Wenn wir automatische Layouts verwenden, sollte unser Bereitstellungsziel 6.0 und höher sein. Mithilfe von automatischen Layouts können wir Schnittstellen erstellen, die für mehrere Ausrichtungen und mehrere Geräte verwendet werden können.
Ziel unseres Beispiels
Wir werden zwei Schaltflächen hinzufügen, die in einem bestimmten Abstand von der Mitte des Bildschirms platziert werden. Wir werden auch versuchen, ein anpassbares Textfeld hinzuzufügen, das aus einem bestimmten Abstand über den Schaltflächen platziert wird.
Unser Vorgehen
Wir werden ein Textfeld und zwei Schaltflächen im Code zusammen mit ihren Einschränkungen hinzufügen. Die Einschränkungen der einzelnen UI-Elemente werden erstellt und der Superansicht hinzugefügt. Wir müssen die automatische Größenänderung für jedes der hinzugefügten UI-Elemente deaktivieren, um das gewünschte Ergebnis zu erzielen.
Beteiligte Schritte
Step 1 - Erstellen Sie eine einfache ansichtsbasierte Anwendung.
Step 2 - Wir werden nur ViewController.m bearbeiten und es ist wie folgt -
#import "ViewController.h"
@interface ViewController ()
@property (nonatomic, strong) UIButton *leftButton;
@property (nonatomic, strong) UIButton *rightButton;
@property (nonatomic, strong) UITextField *textfield;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
UIView *superview = self.view;
/*1. Create leftButton and add to our view*/
self.leftButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.leftButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.leftButton setTitle:@"LeftButton" forState:UIControlStateNormal];
[self.view addSubview:self.leftButton];
/* 2. Constraint to position LeftButton's X*/
NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];
/* 3. Constraint to position LeftButton's Y*/
NSLayoutConstraint *leftButtonYConstraint = [NSLayoutConstraint
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual toItem:superview attribute:
NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
/* 4. Add the constraints to button's superview*/
[superview addConstraints:@[ leftButtonXConstraint,
leftButtonYConstraint]];
/*5. Create rightButton and add to our view*/
self.rightButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
self.rightButton.translatesAutoresizingMaskIntoConstraints = NO;
[self.rightButton setTitle:@"RightButton" forState:UIControlStateNormal];
[self.view addSubview:self.rightButton];
/*6. Constraint to position RightButton's X*/
NSLayoutConstraint *rightButtonXConstraint = [NSLayoutConstraint
constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:60.0f];
/*7. Constraint to position RightButton's Y*/
rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh;
NSLayoutConstraint *centerYMyConstraint = [NSLayoutConstraint
constraintWithItem:self.rightButton attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterY multiplier:1.0f constant:0.0f];
[superview addConstraints:@[centerYMyConstraint,
rightButtonXConstraint]];
//8. Add Text field
self.textfield = [[UITextField alloc]initWithFrame:
CGRectMake(0, 100, 100, 30)];
self.textfield.borderStyle = UITextBorderStyleRoundedRect;
self.textfield.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.textfield];
//9. Text field Constraints
NSLayoutConstraint *textFieldTopConstraint = [NSLayoutConstraint
constraintWithItem:self.textfield attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview
attribute:NSLayoutAttributeTop multiplier:1.0 constant:60.0f];
NSLayoutConstraint *textFieldBottomConstraint = [NSLayoutConstraint
constraintWithItem:self.textfield attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:self.rightButton
attribute:NSLayoutAttributeTop multiplier:0.8 constant:-60.0f];
NSLayoutConstraint *textFieldLeftConstraint = [NSLayoutConstraint
constraintWithItem:self.textfield attribute:NSLayoutAttributeLeft
relatedBy:NSLayoutRelationEqual toItem:superview attribute:
NSLayoutAttributeLeft multiplier:1.0 constant:30.0f];
NSLayoutConstraint *textFieldRightConstraint = [NSLayoutConstraint
constraintWithItem:self.textfield attribute:NSLayoutAttributeRight
relatedBy:NSLayoutRelationEqual toItem:superview attribute:
NSLayoutAttributeRight multiplier:1.0 constant:-30.0f];
[superview addConstraints:@[textFieldBottomConstraint ,
textFieldLeftConstraint, textFieldRightConstraint,
textFieldTopConstraint]];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
Zu beachtende Punkte
In den mit 1, 5 und 8 gekennzeichneten Schritten haben wir nur programmgesteuert zwei Schaltflächen bzw. ein Textfeld hinzugefügt.
In den restlichen Schritten haben wir Einschränkungen erstellt und diese Einschränkungen zu den jeweiligen Superansichten hinzugefügt, bei denen es sich tatsächlich um Selbstansichten handelt. Die Einschränkungen einer der linken Schaltflächen sind wie folgt:
NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];
Wir haben ConstraintWithItem und ToItem, die entscheiden, zwischen welchen UI-Elementen wir die Constraint erstellen. Das Attribut entscheidet, auf welcher Basis die beiden Elemente miteinander verbunden sind. "relatedBy" entscheidet, wie stark die Attribute zwischen den Elementen wirken. Der Multiplikator ist der Multiplikationsfaktor und die Konstante wird dem Multiplikator hinzugefügt.
Im obigen Beispiel ist das X von leftButton in Bezug auf die Mitte der Superansicht immer größer oder gleich -60 Pixel. In ähnlicher Weise werden andere Einschränkungen definiert.
Ausgabe
Wenn wir die Anwendung ausführen, erhalten wir die folgende Ausgabe auf dem iPhone-Simulator:
Wenn wir die Ausrichtung des Simulators in Querformat ändern, erhalten wir die folgende Ausgabe:
Wenn wir dieselbe Anwendung auf dem iPhone 5-Simulator ausführen, erhalten wir die folgende Ausgabe:
Wenn wir die Ausrichtung des Simulators in Querformat ändern, erhalten wir die folgende Ausgabe: