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 -