iOS Auto Layouts

Auto-oppsett ble introdusert i iOS 6.0.
Når vi bruker auto-oppsett, bør målet utplassering være 6.0 og høyere. Auto-oppsett hjelpe oss å lage grensesnitt som kan brukes for flere retninger og flere enheter.

Goal of Our Eksempel

Vi vil legge til to knapper som vil bli plassert i en viss avstand fra sentrum av skjermen. Vi vil også prøve å legge til en skalerbar tekstfelt som vil bli plassert fra en viss avstand fra over knappene.

Vår tilnærming

Vi vil legge til et tekstfelt og to knapper i koden sammen med sine begrensninger. Begrensninger av hver UI Elements vil bli opprettet og lagt til super utsikt. Vi blir nødt til å deaktivere automatisk endring av størrelse for hver av UI elementer vi legger for å få ønsket resultat.

Steps Involvert

Trinn 1.
Lag en enkel view-basert applikasjon

Trinn 2.
Vi vil bare redigere ViewController.m og det er som følger & minus;.
#import "ViewController.h"@interface ViewController () @ eiendom (nonatomic, sterk) UIButton * leftButton;property (nonatomic, sterk) UIButton * rightButton;property (nonatomic, sterk) UITextField * tekstfeltet; @ enden @ implementering ViewController- (void) viewDidLoad {[super viewDidLoad]; UIView * Super = self.view; /*1. Lag leftButton og legge til vår visning * /self.leftButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; self.leftButton.translatesAutoresizingMaskIntoConstraints = NO; [self.leftButton setTitle: @ "LeftButton" forState: UIControlStateNormal]; [self.view addSubview: self.leftButton]; /* 2. Constraint å posisjonere LeftButton sin X * /NSLayoutConstraint * leftButtonXConstraint = [NSLayoutConstraint constraintWithItem: self.leftButton attributt: NSLayoutAttributeCenterX relatedBy: NSLayoutRelationGreaterThanOrEqual toItem: Super attributt: NSLayoutAttributeCenterX multiplier: 1,0 konstant: -60.0f]; /* 3. Constraint å posisjonere LeftButton sin Y * /NSLayoutConstraint * leftButtonYConstraint = [NSLayoutConstraint constraintWithItem: self.leftButton attributt: NSLayoutAttributeCenterY relatedBy: NSLayoutRelationEqual toItem: Super attributt: NSLayoutAttributeCenterY multiplier: 1.0f konstant: 0.0f]; /* 4. Legg de begrensninger til knappens Super * /[Super addConstraints: @ [leftButtonXConstraint, leftButtonYConstraint]]; /* 5. Lag rightButton og legge til vår visning * /self.rightButton = [UIButton buttonWithType: UIButtonTypeRoundedRect]; self.rightButton.translatesAutoresizingMaskIntoConstraints = NO; [self.rightButton setTitle: @ "RightButton" forState: UIControlStateNormal]; [self.view addSubview: self.rightButton]; /* 6. Begrensning for å posisjonere RightButton sin X * /NSLayoutConstraint * rightButtonXConstraint = [NSLayoutConstraint constraintWithItem: self.rightButton attributt: NSLayoutAttributeCenterX relatedBy: NSLayoutRelationGreaterThanOrEqual toItem: Super attributt: NSLayoutAttributeCenterX multiplier: 1,0 konstant: 60.0f]; /* 7. Begrensning for å posisjonere RightButton sin Y * /rightButtonXConstraint.priority = UILayoutPriorityDefaultHigh; NSLayoutConstraint * centerYMyConstraint = [NSLayoutConstraint constraintWithItem: self.rightButton attributt: NSLayoutAttributeCenterY relatedBy: NSLayoutRelationGreaterThanOrEqual toItem: Super attributt: NSLayoutAttributeCenterY multiplier: 1.0f konstant: 0.0f]; [Super addConstraints: @ [centerYMyConstraint, rightButtonXConstraint]]; //8. Legg Tekstfelt self.textfield = [[UITextField alloc] initWithFrame: CGRectMake (0, 100, 100, 30)]; self.textfield.borderStyle = UITextBorderStyleRoundedRect; self.textfield.translatesAutoresizingMaskIntoConstraints = NO; [self.view addSubview: self.textfield]; //9. Tekst felt Begrensninger NSLayoutConstraint * textFieldTopConstraint = [NSLayoutConstraint constraintWithItem: self.textfield attributt: NSLayoutAttributeTop relatedBy: NSLayoutRelationGreaterThanOrEqual toItem: Superattributt: NSLayoutAttributeTop multiplier: 1,0 konstant: 60.0f]; NSLayoutConstraint * textFieldBottomConstraint = [NSLayoutConstraint constraintWithItem: self.textfield attributt: NSLayoutAttributeTop relatedBy: NSLayoutRelationGreaterThanOrEqual toItem: self.rightButton attributt: NSLayoutAttributeTop multiplier: 0.8 konstant: -60.0f]; NSLayoutConstraint * textFieldLeftConstraint = [NSLayoutConstraint constraintWithItem: self.textfield attributt: NSLayoutAttributeLeft relatedBy: NSLayoutRelationEqual toItem: Super attributt: NSLayoutAttributeLeft multiplier: 1,0 konstant: 30.0f]; NSLayoutConstraint * textFieldRightConstraint = [NSLayoutConstraint constraintWithItem: self.textfield attributt: NSLayoutAttributeRight relatedBy: NSLayoutRelationEqual toItem: Super attributt: NSLayoutAttributeRight multiplier: 1,0 konstant: -30.0f]; [Super addConstraints: @ [textFieldBottomConstraint, textFieldLeftConstraint, textFieldRightConstraint, textFieldTopConstraint]]; } - (Void) didReceiveMemoryWarning {[super didReceiveMemoryWarning]; //Kast noen ressurser som kan gjenskapes.} @ End
punkter å merke

I trinn merket 1, 5 og 8, vi bare programma lagt til to knapper og et tekstfelt hhv.

I resten av trinnene, vi skapte begrensninger og lagt disse begrensningene til de respektive super utsikt, som faktisk er selv utsikt. Begrensninger av en av knappene til venstre er som vist nedenfor & minus;
NSLayoutConstraint * leftButtonXConstraint = [NSLayoutConstraint constraintWithItem: self.leftButton attributt: NSLayoutAttributeCenterX relatedBy: NSLayoutRelationGreaterThanOrEqual toItem: Super attributt: NSLayoutAttributeCenterX multiplier: 1,0 konstant: -60.0f];

Vi har constraintWithItem og toItem som bestemmer mellom hvilke UI elementer vi skaper begrensningen. Attributtet bestemmer på hvilket grunnlag de to elementene er koblet sammen. "relatedBy" bestemmer hvor mye effekt attributtene ha mellom elementene. Multiplikator er multiplikasjonsfaktoren og konstant vil bli lagt til multipler.

I det ovenstående eksempel er X i leftButton alltid er større enn eller lik -60 piksler med hensyn til midten av super visning. Tilsvarende er andre begrensninger definert

Output

Når vi kjører programmet, får vi følgende resultat på iPhone simulator & minus;.

Når vi endrer orientering av simulatoren til liggende, vil vi få følgende resultat & minus;

Når vi kjører den samme applikasjonen på iPhone 5 simulator, vil vi få følgende resultat & minus;

Når vi endrer orientering av simulatoren til liggende, vil vi få følgende resultat & minus;