iOS - ऑटो लेआउट

ऑटो-लेआउट में पेश किए गए थे iOS 6.0.जब हम ऑटो-लेआउट का उपयोग करते हैं, तो हमारा परिनियोजन लक्ष्य 6.0 और उच्चतर होना चाहिए। ऑटो-लेआउट हमें ऐसे इंटरफेस बनाने में मदद करते हैं जिनका उपयोग कई झुकाव और कई उपकरणों के लिए किया जा सकता है।

हमारे उदाहरण का लक्ष्य

हम दो बटन जोड़ेंगे जिन्हें स्क्रीन के केंद्र से एक निश्चित दूरी पर रखा जाएगा। हम एक resizable पाठ फ़ील्ड को जोड़ने का भी प्रयास करेंगे जो कि बटन के ऊपर से एक निश्चित दूरी से रखी जाएगी।

हमारा दृष्टिकोण

हम कोड में एक पाठ फ़ील्ड और दो बटन जोड़ेंगे, साथ ही उनकी कमी भी। प्रत्येक UI तत्वों की बाधाओं को बनाया जाएगा और सुपर दृश्य में जोड़ा जाएगा। हमें वांछित परिणाम प्राप्त करने के लिए हमारे द्वारा जोड़े गए प्रत्येक UI तत्वों के लिए ऑटो-आकार को अक्षम करना होगा।

कदम शामिल किए गए

Step 1 - एक साधारण दृश्य-आधारित एप्लिकेशन बनाएं।

Step 2 - हम केवल ViewController.m संपादित करेंगे और यह इस प्रकार है -

#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

नोट करने के लिए अंक

1, 5, और 8 के चरणों में, हमने क्रमशः दो बटन और एक पाठ क्षेत्र जोड़ा है।

बाकी चरणों में, हमने बाधाओं को बनाया और उन बाधाओं को संबंधित सुपर विचारों में जोड़ा, जो वास्तव में आत्म-विचार हैं। बाएं बटन में से एक की बाधाओं को नीचे दिखाया गया है -

NSLayoutConstraint *leftButtonXConstraint = [NSLayoutConstraint 
constraintWithItem:self.leftButton attribute:NSLayoutAttributeCenterX 
relatedBy:NSLayoutRelationGreaterThanOrEqual toItem:superview attribute:
NSLayoutAttributeCenterX multiplier:1.0 constant:-60.0f];

हमारे पास बाधाएं हैं। यह और यह तय करता है कि हम किन यूआई तत्वों के बीच बाधा पैदा कर रहे हैं। विशेषता यह तय करती है कि दोनों तत्व किस आधार पर एक साथ जुड़े हुए हैं। "संबंधितबी" यह तय करता है कि तत्वों के बीच विशेषताओं का कितना प्रभाव है। गुणक गुणन कारक है और गुणक में निरंतर जोड़ा जाएगा।

उपरोक्त उदाहरण में, लेफ्टबटन का X सुपर व्यू के केंद्र के संबंध में हमेशा -60 पिक्सल से अधिक या बराबर होता है। इसी तरह, अन्य बाधाओं को परिभाषित किया गया है।

उत्पादन

जब हम एप्लिकेशन चलाते हैं, तो हमें iPhone सिम्युलेटर पर निम्न आउटपुट मिलेगा -

जब हम सिम्युलेटर के उन्मुखीकरण को परिदृश्य में बदलते हैं, तो हमें निम्नलिखित आउटपुट मिलेगा -

जब हम iPhone 5 सिम्युलेटर पर एक ही एप्लिकेशन चलाते हैं, तो हमें निम्न आउटपुट मिलेगा -

जब हम सिम्युलेटर के उन्मुखीकरण को परिदृश्य में बदलते हैं, तो हमें निम्नलिखित आउटपुट मिलेगा -