iOS - Otomatik Düzenler
Otomatik düzenler tanıtıldı iOS 6.0.Otomatik düzenleri kullandığımızda, dağıtım hedefimiz 6.0 ve üstü olmalıdır. Otomatik düzenler, birden çok yönelim ve birden çok cihaz için kullanılabilecek arabirimler oluşturmamıza yardımcı olur.
Örneğimizin Amacı
Ekranın ortasından belli bir mesafeye yerleştirilecek iki buton ekleyeceğiz. Ayrıca düğmelerin yukarısına belirli bir mesafeden yerleştirilecek yeniden boyutlandırılabilir bir metin alanı eklemeye çalışacağız.
Bizim yaklaşımımız
Koda, kısıtlamalarıyla birlikte bir metin alanı ve iki düğme ekleyeceğiz. Her UI Öğesinin kısıtlamaları oluşturulacak ve süper görünüme eklenecektir. İstenilen sonucu elde etmek için eklediğimiz UI öğelerinin her biri için otomatik yeniden boyutlandırmayı devre dışı bırakmamız gerekecek.
İlgili Adımlar
Step 1 - Görünüm tabanlı basit bir uygulama oluşturun.
Step 2 - Yalnızca ViewController.m'yi düzenleyeceğiz ve aşağıdaki gibi -
#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
Dikkat Edilmesi Gereken Noktalar
1, 5 ve 8 olarak işaretlenmiş adımlarda, sadece programlı olarak sırasıyla iki düğme ve bir metin alanı ekledik.
Geri kalan adımlarda, kısıtlamalar yarattık ve bu kısıtlamaları, gerçekte kendi kendini görenler olan ilgili süper görünümlere ekledik. Sol düğmelerden birinin kısıtlamaları aşağıda gösterildiği gibidir -
NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];
Kısıtlamayı oluşturduğumuz UI öğeleri arasında karar veren constraintWithItem ve toItem'e sahibiz. Öznitelik, iki öğenin hangi temelde birbirine bağlı olduğuna karar verir. "relatedBy", özniteliklerin öğeler arasında ne kadar etkiye sahip olduğuna karar verir. Çarpan, çarpma faktörüdür ve çarpana sabit eklenir.
Yukarıdaki örnekte, leftButton'ın X değeri, süper görünümün merkezine göre her zaman -60 pikselden büyük veya buna eşittir. Benzer şekilde, diğer kısıtlamalar da tanımlanır.
Çıktı
Uygulamayı çalıştırdığımızda, iPhone simülatöründe aşağıdaki çıktıyı alacağız -
Simülatörün yönünü yatay olarak değiştirdiğimizde, aşağıdaki çıktıyı alacağız -
Aynı uygulamayı iPhone 5 simülatöründe çalıştırdığımızda aşağıdaki çıktıyı alacağız -
Simülatörün yönünü yatay olarak değiştirdiğimizde, aşağıdaki çıktıyı alacağız -